a3222ec496
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 29s
564 lines
28 KiB
Plaintext
564 lines
28 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import Navbar from '../../components/Navbar.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope, FaDesktop } from 'react-icons/fa';
|
|
|
|
export function getStaticPaths() {
|
|
const templates = [
|
|
// --- GRUPPE 1: INDUSTRIE-BRUTALISMUS ---
|
|
{
|
|
id: "01",
|
|
name: "Der Handwerker-Klassiker",
|
|
style: "Einfach & Bodenständig",
|
|
group: "Brutalismus",
|
|
layoutType: "Typ B", // Split-Screen & Monolith
|
|
colorScheme: "Warm & Earthy (Sand & Terrakotta)",
|
|
bgClass: "bg-[#F4F1EA] text-[#2C1A11] tactile-noise",
|
|
cardClass: "bg-[#FAF8F5] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none",
|
|
accentText: "text-[#D95D39]",
|
|
accentBg: "bg-[#D95D39] hover:bg-[#b54a2a] text-white border-2 border-black shadow-[4px_4px_0_0_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none rounded-none",
|
|
theme: "light",
|
|
businessType: "Schreinerei & Innenausbau"
|
|
},
|
|
{
|
|
id: "07",
|
|
name: "KFZ-Werkstatt Schnellservice",
|
|
style: "Dynamisch & Direkt",
|
|
group: "Brutalismus",
|
|
layoutType: "Typ B", // Split-Screen
|
|
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
|
|
bgClass: "bg-[#E5E7EB] text-zinc-950",
|
|
cardClass: "bg-white border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] rounded-none",
|
|
accentText: "text-[#FF5500]",
|
|
accentBg: "bg-[#FF5500] text-white border-2 border-black font-bold hover:-translate-x-1 hover:-translate-y-1 active:translate-x-0 active:translate-y-0 shadow-[4px_4px_0_0_rgba(0,0,0,1)] transition-transform rounded-none",
|
|
theme: "light",
|
|
businessType: "Kfz-Meisterbetrieb"
|
|
},
|
|
{
|
|
id: "13",
|
|
name: "Elektro-Technik Meister",
|
|
style: "Präzise & Leistungsstark",
|
|
group: "Brutalismus",
|
|
layoutType: "Typ B", // Split-Screen
|
|
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
|
|
bgClass: "bg-zinc-900 text-zinc-100",
|
|
cardClass: "bg-zinc-800 border-2 border-purple-500 shadow-[6px_6px_0px_0px_rgba(139,92,246,0.3)] rounded-none relative overflow-hidden",
|
|
accentText: "text-purple-400 font-mono",
|
|
accentBg: "bg-purple-600 hover:bg-purple-700 text-white border border-purple-400 rounded-none shadow-[3px_3px_0_0_rgba(255,255,255,0.2)]",
|
|
theme: "dark",
|
|
businessType: "Elektrotechnik & Smart Home"
|
|
},
|
|
{
|
|
id: "14",
|
|
name: "Fitness- & Kraftstudio",
|
|
style: "Stark & Motivierend",
|
|
group: "Brutalismus",
|
|
layoutType: "Typ A", // Asymmetrisches Bento
|
|
colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
|
|
bgClass: "bg-[#0A0A0A] text-white",
|
|
cardClass: "bg-zinc-950 border-2 border-[#FF5700] rounded-none shadow-[8px_8px_0_0_rgba(255,87,0,0.15)]",
|
|
accentText: "text-[#FF5700]",
|
|
accentBg: "bg-[#FF5700] hover:bg-[#e04c00] text-black font-black uppercase rounded-none border border-black shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]",
|
|
theme: "dark",
|
|
businessType: "Premium Gym & Fitness"
|
|
},
|
|
{
|
|
id: "17",
|
|
name: "Metallbau & Schlosserei",
|
|
style: "Hart & Präzise",
|
|
group: "Brutalismus",
|
|
layoutType: "Typ B", // Split-Screen
|
|
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
|
|
bgClass: "bg-[#1A1D20] text-zinc-200 border-dashed border-slate-700",
|
|
cardClass: "bg-zinc-900 border border-zinc-700 hover:border-emerald-500/50 shadow-md rounded-none",
|
|
accentText: "text-emerald-400",
|
|
accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-none border border-emerald-500",
|
|
theme: "dark",
|
|
businessType: "Schlosserei & Konstruktion"
|
|
},
|
|
|
|
// --- GRUPPE 2: GLASSMORPHISMUS ---
|
|
{
|
|
id: "02",
|
|
name: "Dachdecker Meister",
|
|
style: "Elegant & Professionell",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Deep Dark (Anthrazit & Gold)",
|
|
bgClass: "bg-[#0F1115] text-white",
|
|
cardClass: "bg-white/[0.03] backdrop-blur-xl border border-white/10 hover:border-amber-500/30 transition-all duration-300 rounded-2xl shadow-xl",
|
|
accentText: "text-amber-400",
|
|
accentBg: "bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 text-zinc-950 font-bold rounded-lg shadow-lg shadow-amber-500/10",
|
|
theme: "dark",
|
|
businessType: "Dachdeckerei & Spenglerei"
|
|
},
|
|
{
|
|
id: "04",
|
|
name: "Die Kanzlei",
|
|
style: "Seriös & Clean",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
|
|
bgClass: "bg-[#0B0F19] text-white",
|
|
cardClass: "bg-slate-900/50 backdrop-blur-md border border-emerald-500/20 hover:border-emerald-500/40 rounded-xl transition-all",
|
|
accentText: "text-emerald-400 font-serif",
|
|
accentBg: "bg-emerald-800 hover:bg-emerald-950 text-white border border-emerald-500/30 rounded px-6 py-2.5",
|
|
theme: "dark",
|
|
businessType: "Rechtsanwälte & Notare"
|
|
},
|
|
{
|
|
id: "09",
|
|
name: "Steuerberater Premium",
|
|
style: "Exklusiv & Diskret",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Deep Dark (Anthrazit & Gold)",
|
|
bgClass: "bg-slate-950 text-slate-100",
|
|
cardClass: "bg-white/[0.02] backdrop-blur-lg border border-white/[0.08] hover:border-amber-400/20 rounded-2xl",
|
|
accentText: "text-amber-400",
|
|
accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950 rounded px-5 py-2.5 font-semibold",
|
|
theme: "dark",
|
|
businessType: "Steuerberatungskanzlei"
|
|
},
|
|
{
|
|
id: "10",
|
|
name: "Garten- & Landschaftsbau",
|
|
style: "Frisch & Modern",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ C", // Magazin-Raster
|
|
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
|
|
bgClass: "bg-[#F8FAF9] text-slate-800",
|
|
cardClass: "bg-white/70 backdrop-blur-md border border-emerald-100 hover:border-emerald-300 shadow-sm rounded-2xl",
|
|
accentText: "text-emerald-800",
|
|
accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white rounded-full px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Garten- & Landschaftsbau"
|
|
},
|
|
{
|
|
id: "16",
|
|
name: "Physiotherapie Praxis",
|
|
style: "Achtsam & Gesund",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ C", // Magazin-Raster
|
|
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
|
|
bgClass: "bg-slate-50 text-slate-800",
|
|
cardClass: "bg-white/60 backdrop-blur-xl border border-emerald-500/10 hover:border-emerald-500/20 rounded-3xl shadow-sm",
|
|
accentText: "text-emerald-700",
|
|
accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-full",
|
|
theme: "light",
|
|
businessType: "Physiotherapie & Osteopathie"
|
|
},
|
|
{
|
|
id: "20",
|
|
name: "Malerbetrieb Farbenfroh",
|
|
style: "Kreativ & Präzise",
|
|
group: "Glassmorphismus",
|
|
layoutType: "Typ C", // Magazin-Raster
|
|
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
|
|
bgClass: "bg-[#1E1E2E] text-zinc-100",
|
|
cardClass: "bg-slate-900/60 backdrop-blur-md border border-white/10 hover:border-orange-500/30 rounded-2xl",
|
|
accentText: "text-orange-400",
|
|
accentBg: "bg-orange-500 hover:bg-orange-600 text-white rounded-xl",
|
|
theme: "dark",
|
|
businessType: "Maler- & Lackiererbetrieb"
|
|
},
|
|
|
|
// --- GRUPPE 3: SAAS-MINIMALISMUS ---
|
|
{
|
|
id: "03",
|
|
name: "Solar & Photovoltaik",
|
|
style: "Tech & Zukunft",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ D", // Zentralisiertes Fokus-Layout
|
|
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
|
|
bgClass: "bg-[#F9FAFB] text-zinc-900",
|
|
cardClass: "bg-white border border-zinc-200 hover:border-orange-500/30 rounded-xl shadow-sm",
|
|
accentText: "text-orange-600",
|
|
accentBg: "bg-orange-600 hover:bg-orange-700 text-white rounded-lg px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Solartechnik & Energiesysteme"
|
|
},
|
|
{
|
|
id: "06",
|
|
name: "Sanitär & Heizung",
|
|
style: "Klar & Zuverlässig",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Clean Light (Weiß & Navy-Blau)",
|
|
bgClass: "bg-white text-slate-800",
|
|
cardClass: "bg-white border border-slate-200 hover:border-blue-500/30 shadow-sm rounded-xl",
|
|
accentText: "text-blue-800",
|
|
accentBg: "bg-blue-800 hover:bg-blue-900 text-white rounded px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Heizung, Sanitär & Klima"
|
|
},
|
|
{
|
|
id: "08",
|
|
name: "Schreinerei Holzart",
|
|
style: "Handwerk & Präzision",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ B", // Split-Screen
|
|
colorScheme: "Warm & Earthy (Sand-Töne & dunkles Holz)",
|
|
bgClass: "bg-[#FAF9F5] text-[#3D3A36]",
|
|
cardClass: "bg-white border border-[#EBE6DC] hover:border-[#8B5A2B]/40 rounded-lg shadow-sm",
|
|
accentText: "text-[#8B5A2B]",
|
|
accentBg: "bg-[#8B5A2B] hover:bg-[#6f4823] text-white rounded px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Möbel- & Bauschreinerei"
|
|
},
|
|
{
|
|
id: "11",
|
|
name: "Modern Dentists Zahnarzt",
|
|
style: "Clean & Vertrauensvoll",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ D", // Zentralisiertes Fokus-Layout
|
|
colorScheme: "Clean Light (Weiß & Navy-Blau)",
|
|
bgClass: "bg-white text-slate-900",
|
|
cardClass: "bg-slate-50 border border-slate-200 hover:border-blue-700/30 shadow-sm rounded-xl",
|
|
accentText: "text-blue-700",
|
|
accentBg: "bg-blue-700 hover:bg-blue-800 text-white rounded-lg",
|
|
theme: "light",
|
|
businessType: "Zahnarztpraxis"
|
|
},
|
|
{
|
|
id: "15",
|
|
name: "Architekturbüro Struktur",
|
|
style: "Minimalismus & Ästhetik",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ C", // Magazin-Raster
|
|
colorScheme: "Clean Light (Weiß & Navy-Blau)",
|
|
bgClass: "bg-white text-zinc-900 border-blue-100", // Blueprint Grid
|
|
cardClass: "bg-white border border-zinc-200 hover:border-zinc-900 shadow-sm rounded-none",
|
|
accentText: "text-zinc-900",
|
|
accentBg: "bg-zinc-950 hover:bg-zinc-800 text-white rounded-none px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Architektur & Generalplanung"
|
|
},
|
|
{
|
|
id: "19",
|
|
name: "Software-Entwicklung Byte",
|
|
style: "Sauber & Strukturiert",
|
|
group: "SaaS-Minimalismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
|
|
bgClass: "bg-[#1C1B22] text-zinc-100",
|
|
cardClass: "bg-[#25242A] border border-zinc-800 hover:border-purple-500/30 rounded-xl",
|
|
accentText: "text-purple-400",
|
|
accentBg: "bg-purple-600 hover:bg-purple-700 text-white rounded-lg",
|
|
theme: "dark",
|
|
businessType: "Software & Webanwendungen"
|
|
},
|
|
|
|
// --- GRUPPE 4: NEOMORPHISMUS ---
|
|
{
|
|
id: "05",
|
|
name: "Bio-Hofladen",
|
|
style: "Rustikal & Natur",
|
|
group: "Neomorphismus",
|
|
layoutType: "Typ C", // Magazin-Raster
|
|
colorScheme: "Warm & Earthy (Terrakotta & Creme)",
|
|
bgClass: "bg-[#FDFBF7] text-[#4A3B32]",
|
|
cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_9px_9px_16px_rgba(163,177,198,0.2),_-9px_-9px_16px_rgba(255,255,255,0.7)] rounded-3xl",
|
|
accentText: "text-[#C2410C]",
|
|
accentBg: "bg-[#C2410C] hover:bg-[#a13307] text-white rounded-full px-6 py-2.5",
|
|
theme: "light",
|
|
businessType: "Bio-Bauernhof & Hofladen"
|
|
},
|
|
{
|
|
id: "12",
|
|
name: "Bäckerei Traditionsbäcker",
|
|
style: "Gemütlich & Lecker",
|
|
group: "Neomorphismus",
|
|
layoutType: "Typ B", // Split-Screen
|
|
colorScheme: "Warm & Earthy (Terrakotta & Creme)",
|
|
bgClass: "bg-[#FDFBF7] text-[#5C3E21]",
|
|
cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_6px_6px_12px_rgba(163,177,198,0.15),_-6px_-6px_12px_rgba(255,255,255,0.75)] rounded-2xl",
|
|
accentText: "text-[#B45309]",
|
|
accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white rounded-xl shadow-md",
|
|
theme: "light",
|
|
businessType: "Feinbäckerei & Konditorei"
|
|
},
|
|
{
|
|
id: "18",
|
|
name: "Restaurant & Gaststube",
|
|
style: "Rustikal & Einladend",
|
|
group: "Neomorphismus",
|
|
layoutType: "Typ A", // Bento
|
|
colorScheme: "Warm & Earthy (Sand-Töne & Dunkelbraun)",
|
|
bgClass: "bg-[#FAF6F0] text-[#543D2B]",
|
|
cardClass: "bg-[#FAF6F0] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.5),_8px_8px_16px_rgba(0,0,0,0.03),_-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-inner rounded-3xl transition-all duration-300",
|
|
accentText: "text-[#A75D5D]",
|
|
accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white rounded-2xl",
|
|
theme: "light",
|
|
businessType: "Wirtshaus & Feinkost"
|
|
}
|
|
];
|
|
|
|
return templates.map((tpl) => ({
|
|
params: { id: tpl.id },
|
|
props: { tpl }
|
|
}));
|
|
}
|
|
|
|
const { tpl } = Astro.props;
|
|
---
|
|
|
|
<Layout title={`${tpl.name} | Live-Vorschau`}>
|
|
{/* Header Frame control */}
|
|
<div class="fixed top-0 left-0 w-full bg-[#0b0f19]/90 backdrop-blur border-b border-white/10 py-3 z-50 text-white flex justify-between items-center px-4 sm:px-8">
|
|
<div class="flex items-center gap-3">
|
|
<a href="/templates" class="flex items-center gap-1 text-xs uppercase tracking-wider text-zinc-400 hover:text-brand-arcticBlue transition-colors font-bold">
|
|
<FaArrowLeft class="w-3 h-3" /> Zurück
|
|
</a>
|
|
<span class="text-zinc-600">|</span>
|
|
<div class="text-xs sm:text-sm font-semibold">
|
|
Design-Vorschau: <span class="text-brand-arcticBlue">{tpl.name}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-white/10 rounded">Gruppe: {tpl.group}</span>
|
|
<span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded">{tpl.layoutType}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Outer Page Shell */}
|
|
<div class={`min-h-screen pt-20 pb-12 ${tpl.bgClass} ${tpl.name === "Architekturbüro Struktur" ? "tactile-grid-bg" : ""}`}>
|
|
|
|
{/* Aurora Background glows for Glassmorphism group */}
|
|
{tpl.group === "Glassmorphismus" && (
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden z-0">
|
|
<div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-emerald-500/5 dark:bg-amber-500/5 blur-[120px] rounded-full"></div>
|
|
<div class="absolute top-1/2 right-1/4 w-[400px] h-[400px] bg-sky-500/5 dark:bg-blue-600/5 blur-[100px] rounded-full animate-pulse"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Blueprint line grid overlay if Architekturbüro */}
|
|
{tpl.name === "Architekturbüro Struktur" && (
|
|
<div class="absolute inset-0 pointer-events-none border-t border-l border-blue-500/10 z-0"></div>
|
|
)}
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
{/* 1. Header component */}
|
|
<header class={`py-6 px-8 mb-8 flex justify-between items-center rounded-2xl ${tpl.cardClass}`}>
|
|
<div class="font-extrabold text-xl uppercase tracking-tighter">
|
|
{tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
|
|
</div>
|
|
<nav class="hidden md:flex gap-8 text-xs uppercase tracking-wider font-bold opacity-80">
|
|
<span class="cursor-pointer hover:opacity-100 transition-opacity">Leistungen</span>
|
|
<span class="cursor-pointer hover:opacity-100 transition-opacity">Über uns</span>
|
|
<span class="cursor-pointer hover:opacity-100 transition-opacity">Referenzen</span>
|
|
</nav>
|
|
<button class={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Kontakt
|
|
</button>
|
|
</header>
|
|
|
|
{/* 2. Main content area rendering based on Layout-Type */}
|
|
{tpl.layoutType === "Typ B" ? (
|
|
// Split-Screen & Monolith Layout (Sticky-Anchor-Cards)
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
|
|
{/* Sticky left monolithen */}
|
|
<div class={`lg:col-span-2 lg:sticky lg:top-32 p-8 rounded-2xl ${tpl.cardClass}`}>
|
|
<span class={`text-[10px] font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Regionaler Partner</span>
|
|
<h1 class="text-3xl sm:text-5xl font-black tracking-tight mt-2 mb-6 uppercase leading-tight">
|
|
Echtes Handwerk.<br/>Ohne Kompromisse.
|
|
</h1>
|
|
<p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-8">
|
|
Wir setzen Ihre Projekte mit Leidenschaft und Fachverstand um. Seit über 25 Jahren stehen wir für absolute Zuverlässigkeit und präzise Meisterleistung in unserer Region.
|
|
</p>
|
|
<button class={`w-full py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Jetzt Termin anfragen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scrollable right content */}
|
|
<div class="lg:col-span-3 space-y-8">
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
|
|
<h3 class="text-xl font-bold mb-4">Schritt 01: Beratung vor Ort</h3>
|
|
<p class="opacity-75 text-xs sm:text-sm leading-relaxed">
|
|
Wir besprechen Ihr Vorhaben direkt vor Ort. Sie erhalten eine ehrliche Einschätzung sowie verständliche Optionen, die zu Ihren Wünschen passen.
|
|
</p>
|
|
</div>
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
|
|
<h3 class="text-xl font-bold mb-4">Schritt 02: Transparente Planung</h3>
|
|
<p class="opacity-75 text-xs sm:text-sm leading-relaxed">
|
|
Unsere Angebote enthalten alle Kosten übersichtlich aufgeschlüsselt. Keine überraschenden Nachträge oder versteckten Extrakosten.
|
|
</p>
|
|
</div>
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
|
|
<h3 class="text-xl font-bold mb-4">Schritt 03: Saubere Ausführung</h3>
|
|
<p class="opacity-75 text-xs sm:text-sm leading-relaxed">
|
|
Wir arbeiten zügig, ordentlich und termingerecht. Nach Projektabschluss übergeben wir Ihren Arbeitsbereich besenrein.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Rhythmusbrecher (Text-Slam) */}
|
|
<div class="p-12 bg-zinc-950 text-white rounded-2xl text-center border border-zinc-800">
|
|
<h4 class="text-3xl font-extrabold mb-2 text-white">EIN WORT. EIN WERT.</h4>
|
|
<p class="text-xs text-zinc-400 max-w-sm mx-auto">100% verlässliche Handwerksqualität direkt aus Meisterhand.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : tpl.layoutType === "Typ A" ? (
|
|
// Asymmetrisches Bento Grid
|
|
<div class="space-y-8">
|
|
<div class="max-w-xl">
|
|
<h1 class="text-3xl sm:text-5xl font-black uppercase tracking-tight mb-4">
|
|
Ihr Meisterbetrieb für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>
|
|
</h1>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between min-h-[220px]`}>
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-2">Unsere Arbeitsweise</h3>
|
|
<p class="opacity-75 text-xs leading-relaxed max-w-md">
|
|
Wir verbinden traditionelle Fertigkeiten mit moderner Technik, um langlebige und ästhetisch anspruchsvolle Lösungen für Ihren Betrieb zu garantieren.
|
|
</p>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button class={`px-5 py-2.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Konzept besprechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
|
|
<div class="text-3xl font-black opacity-80">DEUTSCHER MEISTER</div>
|
|
<p class="text-xs opacity-75 mt-2">Garantiert geprüftes Fachwissen und höchste Qualifikation.</p>
|
|
</div>
|
|
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
|
|
<div class="text-3xl font-black opacity-80">> 95%</div>
|
|
<p class="text-xs opacity-75 mt-2">Zuverlässigkeitsquote bei Terminen und Fertigstellungen.</p>
|
|
</div>
|
|
|
|
<div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass}`}>
|
|
<h3 class="text-xl font-bold mb-4">Individuelle Sonderanfertigungen</h3>
|
|
<p class="opacity-75 text-xs sm:text-sm leading-relaxed">
|
|
Planung nach Maß: Wir fertigen für Sie genau das an, was Sie benötigen. Jedes Stück ist ein Unikat, handwerklich präzise nach Ihren Vorstellungen gearbeitet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : tpl.layoutType === "Typ C" ? (
|
|
// Magazin-Raster (Asymmetrischer Whitespace & Überlappung)
|
|
<div class="space-y-16">
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-12 items-center">
|
|
<div class="lg:col-span-3">
|
|
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tighter leading-tight mb-8">
|
|
Räume neu <span class={tpl.accentText}>denken.</span>
|
|
</h1>
|
|
<p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-lg">
|
|
Wir konzipieren anspruchsvolle, nachhaltige Projekte, die Ästhetik und Nutzbarkeit perfekt vereinen. Ein Zusammenspiel aus Form, Material und Funktion.
|
|
</p>
|
|
<button class={`px-6 py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Portfolio ansehen
|
|
</button>
|
|
</div>
|
|
<div class="lg:col-span-2 -mt-6">
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass} -translate-y-4 hover:translate-y-0 transition-transform duration-300`}>
|
|
<h4 class="font-extrabold text-lg mb-2 uppercase">[ 01 ] Entwurf</h4>
|
|
<p class="opacity-75 text-xs">Individuelle Konzepte & 3D-Visualisierung.</p>
|
|
</div>
|
|
<div class={`p-8 rounded-2xl ${tpl.cardClass} translate-x-4 hover:translate-x-0 transition-transform duration-300`}>
|
|
<h4 class="font-extrabold text-lg mb-2 uppercase">[ 02 ] Konstruktion</h4>
|
|
<p class="opacity-75 text-xs">Exakte Planung und statische Berechnungen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Whitespace-Pause (Atem-Pause / pure Leerraum-Monolith) */}
|
|
<div class="py-24 text-center border-t border-b border-current/10">
|
|
<span class="text-xs uppercase tracking-widest opacity-40">Ausgezeichnetes Handwerk</span>
|
|
<div class="text-4xl font-black mt-2 uppercase tracking-widest opacity-80">PRÄZISION & MEISTERSCHAFT</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// Typ D: Zentralisiertes Fokus-Layout (Kalkulator-Dummy oder radialer Fokus)
|
|
<div class="flex flex-col items-center justify-center py-12">
|
|
<div class="text-center max-w-xl mb-12">
|
|
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
|
|
<h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt anfragen.</h1>
|
|
<p class="opacity-75 text-xs sm:text-sm">Tragen Sie Ihre Nachricht ein. Wir melden uns unverbindlich innerhalb von 24 Stunden.</p>
|
|
</div>
|
|
|
|
{/* The centralized Contact Form Block (Monolith) */}
|
|
<div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
|
|
{tpl.group === "Glassmorphismus" && (
|
|
<div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
|
|
)}
|
|
|
|
<h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Kontaktformular</h3>
|
|
<form class="space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
|
|
<input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
|
|
<input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihre Nachricht</label>
|
|
<textarea rows="4" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
|
|
</div>
|
|
<button type="submit" class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Anfrage senden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 3. Features Section (Grounded Handwerker-Werte) */}
|
|
<section class="border-t border-current/10 py-16 mt-16">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
|
|
<div class="space-y-2">
|
|
<div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 01 ] Festpreis-Garantie</div>
|
|
<p class="opacity-70 text-xs leading-relaxed">Wir halten uns an vereinbarte Angebote. Keine überraschenden Mehrkosten oder Nachkalkulationen.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Meisterqualität</div>
|
|
<p class="opacity-70 text-xs leading-relaxed">Alle Arbeiten werden nach offiziellen Richtlinien und handwerklichen Normen sorgfältig ausgeführt.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Betreuung vor Ort</div>
|
|
<p class="opacity-70 text-xs leading-relaxed">Ein Ansprechpartner für Ihr gesamtes Vorhaben. Direkt ansprechbar und verlässlich.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 4. Mock Contact Form */}
|
|
<section class="border-t border-current/10 py-16">
|
|
<div class="max-w-xl mx-auto text-center mb-8">
|
|
<h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
|
|
<p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
|
|
</div>
|
|
<form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
|
|
<input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
|
|
<input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Vorhaben / Nachricht</label>
|
|
<textarea rows="3" required class="w-full bg-[#1b1b26]/0 bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
|
|
</div>
|
|
<button type="submit" class={`w-full py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
|
Anfrage Senden
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<Footer />
|
|
</Layout>
|