Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Daniel:b3bc8a10f9cc533d51d2cf6eaf6abe623435ac2f
Branches Tags
Daniel:staging
...
compare: Daniel:3e7ab96567c600d97952614f57cc364df7710bb0
Branches Tags
Daniel:staging

4 Commits
b3bc8a10f9 ... 3e7ab96567

Author SHA1 Message Date
DanielS
3e7ab96567 feat: add templates catalog page and interactive live previews
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 27s
Details
2026-07-07 00:35:52 +02:00
DanielS
074affba62 feat: update main page copy and add templates catalog CTA 2026-07-07 00:35:44 +02:00
DanielS
1d6245e40c style: add tactile and blueprint CSS styles 2026-07-07 00:35:40 +02:00
DanielS
0c4c023f71 feat: add workspace skills configuration 2026-07-07 00:35:37 +02:00
17 changed files with 1225 additions and 33 deletions
Expand all files Collapse all files

38
.agents/skills/astro-expert/SKILL.md Normal file
View File

@@ -0,0 +1,38 @@
---
name: astro-expert
description: Guidelines for Astro full-stack development, Bento-grid layouts, corporate dark mode, page speed optimization, and UI/UX design.
---
# Astro & UI/UX Expert Guidelines
## SECTION 1: GIT & WORKFLOW-SKILLS
1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.
## SECTION 2: CORPORATE DARK MODE & UI-REGELN
5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).
## SECTION 3: ULTRA-MODERN DESIGN PATTERNS & EFFECTS
10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).
## SECTION 4: ASTRO & REACT ARCHITEKTUR
16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
19. **Modulare UI-Vorlagen:** Baue das Projekt strukturiert auf:
* `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
* `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
* `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
* `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

16
.agents/skills/astro-react-architecture/SKILL.md Normal file
View File

@@ -0,0 +1,16 @@
---
name: astro-react-architecture
description: Guidelines for Astro Island architecture, light React partial hydration, page speed guarantees (>95%), modular templates, and accessible structured forms.
---
# Astro & React Architecture Guidelines
16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
19. **Modulare UI-Vorlagen:** Baue das Projekt structured auf:
* `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
* `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
* `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
* `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

12
.agents/skills/bento-content-shuffling/SKILL.md Normal file
View File

@@ -0,0 +1,12 @@
---
name: bento-content-shuffling
description: Verhindert visuelle Monotonie durch die gezielte Durchmischung von Inhaltstypen innerhalb des asymmetrischen Grid-Layouts.
---
# Bento Content Shuffling Guidelines
* **Der 3-Elemente-Mix:** Ein Raster darf niemals nur aus Text-Bild-Kombinationen bestehen. Es wechselt strikt zwischen:
1. Rein visuellen Cards (z.B. ein isoliertes, hochauflösendes UI-Element eines Handwerker-Dashboards).
2. Daten-Getriebenen Cards (z.B. ein animierter PageSpeed-Kreis, der live auf 100% hochzählt).
3. Story-Cards (z.B. ein großes, prägnantes Zitat eines Malermeisters im fetten Typografie-Stil).
* **Größen-Dynamik:** Strikter Wechsel der Card-Dimensionen (1x1, 2x1, 1x2, 2x2) basierend auf der Wichtigkeit des Inhalts, um eine natürliche visuelle Hierarchie zu erzeugen.

10
.agents/skills/bento-grid-architecture/SKILL.md Normal file
View File

@@ -0,0 +1,10 @@
---
name: bento-grid-architecture
description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
---
# Bento Grid Architecture Guidelines
* **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`).
* **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
* **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).

10
.agents/skills/bento-interaction-states/SKILL.md Normal file
View File

@@ -0,0 +1,10 @@
---
name: bento-interaction-states
description: Steuert dynamische und abwechslungsreiche Hover- und Interaktionszustände innerhalb des Bento-Grids, um den Entdeckerdrang zu wecken.
---
# Bento Interaction States Guidelines
* **Asymmetrischer Reveal:** Beim Hovern über eine Bento-Card verschieben sich Bildelemente im Inneren leicht (Parallaxe über CSS `transform: translateY(-5px)`), oder es wird ein versteckter CTA-Pfeil flüssig eingeblendet.
* **Spotlight-Glow:** Implementierung eines mausfolgenden JavaScript-freien oder minimalen CSS-Glow-Effekts, bei dem der Rand der Card exakt dort aufleuchtet (Sky-Blue), wo der Mauszeiger sich befindet.
* **Status-Indikatoren:** Jedes Template im Katalog erhält "Live-Tags" (z.B. pulsierende grüne Punkte für "Live-Vorschau aktiv" oder kleine animierte Lade-Icons bei Interaktion), die Hochwertigkeit signalisieren.

12
.agents/skills/corporate-dark-mode/SKILL.md Normal file
View File

@@ -0,0 +1,12 @@
---
name: corporate-dark-mode
description: Strict color scheme (#0B0F19 background, white text, #38BDF8 accents), 8pt grid system, high scannability, WCAG contrast (4.5:1), and mobile-first design.
---
# Corporate Dark Mode & UI Guidelines
5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).

11
.agents/skills/git-workflow/SKILL.md Normal file
View File

@@ -0,0 +1,11 @@
---
name: git-workflow
description: Rules for atomic commits, semantic commit prefixes (feat, fix, docs, style, refactor), imperative language, and clean history checking.
---
# Git & Workflow Guidelines
1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.

10
.agents/skills/glassmorphism-glow-effects/SKILL.md Normal file
View File

@@ -0,0 +1,10 @@
---
name: glassmorphism-glow-effects
description: Glassmorphism and glow guidelines (Matte Boxen, Background Aurora Glows, Reactive Micro-Interactions).
---
# Glassmorphism & Glow Effects Guidelines
* **Matte Boxen (Glassmorphismus):** Gestalte Kacheln mit transluzenten Ebenen und extrem feinen Rändern: `bg-slate-900/50 backdrop-blur-md border border-white/[0.08]`.
* **Background Aurora Glows:** Platziere extrem weiche, farbige Lichtpunkte hinter den Kacheln für visuelle Tiefe: `bg-sky-500/10 blur-[120px] absolute pointer-events-none`.
* **Reactive Micro-Interactions:** Jede Kachel muss auf Hover edel reagieren: Leichtes Anheben, Erhöhung der Rand-Helligkeit und Intensivierung des Glows (`transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`).

9
.agents/skills/hybrid-bento-scrolling/SKILL.md Normal file
View File

@@ -0,0 +1,9 @@
---
name: hybrid-bento-scrolling
description: Kombiniert klassisches vertikales Scrollen mit horizontalen oder fixierten Elementen innerhalb des Bento-Grids, um die Verweildauer zu maximieren.
---
# Hybrid Bento Scrolling Guidelines
* **Sticky-Anchor-Cards:** In einem 3-Spalten-Grid bleibt die linke, große Haupt-Card (z.B. mit dem Titel "Maler-Templates") beim Scrollen fixiert (CSS `sticky top-24`), während die rechten, kleineren Cards mit den Design-Variationen flüssig vorbeiscrollen.
* **CSS-Driven Scroll Animations:** Nutzung von nativen CSS `@keyframes` gekoppelt an den Scroll-Fortschritt, um Elemente flüssig einzublenden oder zu transformieren.

10
.agents/skills/tactile-craftsman-ui/SKILL.md Normal file
View File

@@ -0,0 +1,10 @@
---
name: tactile-craftsman-ui
description: Verleiht dem modernen UI subtile, physische Design-Elemente, die Präzision, Handwerk und Wertigkeit vermitteln, ohne die Performance zu belasten.
---
# Tactile Craftsman UI Guidelines
* **Subtile Texturen:** Nutzung von extrem leichten, CSS-basierten Noise-Overlays (z.B. opacity-[0.015] im Hintergrund) auf Cards, um eine feine, matte "Material-Haptik" (wie geschliffenes Metall oder feiner Putz) zu erzeugen.
* **"Blueprint"-Raster:** Gezielter Einsatz von feinen, unterbrochenen Gitternetzlinien (Subtle Grid Borders, 1px border-slate-800/60) im Hintergrund von Sektionen, die an technische Zeichnungen erinnern.
* **Akzent-Indikatoren:** Nutzung von kleinen, geometrischen UI-Details wie simulierten Fadenkreuzen, Ecken-Markierungen (Border Corners) oder dezenten Tech-Badges in den Ecken von Bento-Cards, um "Präzisionsarbeit" visuell zu spiegeln.

11
.agents/skills/ui-element-best-practices/SKILL.md Normal file
View File

@@ -0,0 +1,11 @@
---
name: ui-element-best-practices
description: UI element guidelines (Smart Navbar, Accessible Inputs, SEO Accordions, Utility Badges).
---
# UI Element Best Practices Guidelines
* **Smart Navbar:** Muss fixiert (`sticky top-0`) oder intelligent einblendbar sein. Der primäre CTA-Button platziert sich unübersehbar ganz rechts.
* **Accessible Inputs:** Verwende in Formularen niemals verschwindende Platzhalter als Ersatz für Labels. Nutze feste Labels und markante Focus-Zustände (`focus:ring-2 focus:ring-sky-500`).
* **SEO Accordions:** Nutze strukturierte Akkordeons (z. B. für FAQs) im Footer-Bereich, um die Seite visuell sauber zu halten, aber maximalen Text für das Google-Ranking bereitzustellen.
* **Utility Badges:** Setze kleine, pillenförmige Indikatoren (`px-3 py-1 rounded-full text-xs`) über Headlines ein, um den Blick des Nutzers vorzufiltern.

13
.agents/skills/ultra-modern-design/SKILL.md Normal file
View File

@@ -0,0 +1,13 @@
---
name: ultra-modern-design
description: Matte boxen (glassmorphism), glow & aurora effects, bento-grid asymmetry, text-slicing gradients, premium micro-interactions, and diverse bento content mix.
---
# Ultra-Modern Design Patterns & Effects Guidelines
10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).

11
.agents/skills/webdesign-foundations/SKILL.md Normal file
View File

@@ -0,0 +1,11 @@
---
name: webdesign-foundations
description: Strategische Design-Grundregeln (3-Second-Rule, Visual Hierarchy, Whitespace Mastery, Thumb-Zone & Mobile-First).
---
# Webdesign Foundations Guidelines
* **3-Second-Rule:** Jedes Einstiegs-Layout (Hero) muss sofort Klarheit über Angebot, Nutzen und den nächsten Schritt (CTA) liefern.
* **Visual Hierarchy:** Lenke das Auge gezielt über markante Größenunterschiede, fette Typografie und kontraststarke Aktions-Elemente.
* **Whitespace Mastery:** Nutze großzügigen Leerraum (`py-16`, `py-24`, `space-y-12`), um Inhalten Raum zum Atmen zu geben und ein Premium-Gefühl zu erzeugen.
* **Thumb-Zone & Mobile-First:** Platziere interaktive Elemente in der mobilen Ansicht so, dass sie perfekt mit dem Daumen erreichbar sind.

22
src/layouts/Layout.astro
View File

@@ -78,4 +78,26 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #333; background: #333;
} }
/* Tactile Craftsman UI CSS classes */
.tactile-grid-bg {
background-image:
linear-gradient(to right, rgba(35, 45, 69, 0.2) 1px, transparent 1px),
linear-gradient(to bottom, rgba(35, 45, 69, 0.2) 1px, transparent 1px);
background-size: 40px 40px;
}
.tactile-noise {
position: relative;
}
.tactile-noise::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.025;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
z-index: 1;
}
</style> </style>

115
src/pages/index.astro
View File

@@ -16,36 +16,51 @@ import {
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung"> <Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
<Navbar /> <Navbar />
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16"> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 tactile-grid-bg">
<!-- Grid System Container (Bento architecture) --> <!-- Grid System Container (Bento architecture) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
<!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) --> <!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
<div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300"> <div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300 tactile-noise">
{/* Precision Blueprint Corner Markers */}
<span class="absolute top-3 left-3 w-2.5 h-2.5 border-t border-l border-brand-arcticBlue/30"></span>
<span class="absolute top-3 right-3 w-2.5 h-2.5 border-t border-r border-brand-arcticBlue/30"></span>
<span class="absolute bottom-3 left-3 w-2.5 h-2.5 border-b border-l border-brand-arcticBlue/30"></span>
<span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-b border-r border-brand-arcticBlue/30"></span>
<div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div> <div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
<div> <div>
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6"> <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6">
<span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span> <span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
Webdesign & UI/UX Entwicklung Sorglos-Websites für den Mittelstand
</div> </div>
<h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight"> <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
Websites, die performen.<br/> Digitales Sorglos-Paket.<br/>
<span class="text-brand-arcticBlue">Von der Idee bis zum Live-Gang.</span> <span class="text-brand-arcticBlue">Für Handwerk & Mittelstand.</span>
</h1> </h1>
<p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed"> <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut. Wir bauen, pflegen und hosten Ihre neue Website. Absolut zuverlässig. DSGVO-konform auf deutschen Servern. Ohne Aufwand für Sie.
</p> </p>
</div> </div>
<div class="mt-8"> <div class="mt-8 flex flex-wrap gap-4 relative z-10">
<a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200"> <a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
Projekt anfragen Projekt anfragen
<FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" /> <FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" />
</a> </a>
<a href="/templates" class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-900/50 backdrop-blur border border-white/10 text-white font-semibold text-xs tracking-wider uppercase rounded hover:scale-[1.02] hover:border-brand-arcticBlue/50 hover:shadow-md transition-all duration-300">
Template-Katalog entdecken
<FaArrowRight class="w-3 h-3 text-brand-arcticBlue" />
</a>
</div> </div>
</div> </div>
<!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) --> <!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
<div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
<div> <div>
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2> <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
@@ -58,11 +73,16 @@ import {
</div> </div>
<!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) --> <!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
<div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
<div> <div>
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2> <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Visualisierung des Pagespeed-Wertes. Extreme Ladegeschwindigkeit für glückliche Besucher. Echte, messbare Geschwindigkeit für Ihre Kunden. Optimierter Code, der schnell lädt.
</p> </p>
</div> </div>
<div class="mt-6"> <div class="mt-6">
@@ -77,81 +97,106 @@ import {
</div> </div>
<!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) --> <!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
<div id="services" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group"> <div id="services" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
<div class="max-w-md"> <div class="max-w-md">
<div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaLaptopCode class="w-6 h-6" /> <FaLaptopCode class="w-6 h-6" />
</div> </div>
<h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3> <h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Individuelles UI/UX-Design & Entwicklung von Grund auf. Keine billigen WordPress-Templates. Blitzschnell im Code umgesetzt. Individuelles Design & Entwicklung von Grund auf. Keine billigen Standard-Templates. Hochwertiger Code, der zu Ihrem Handwerksbetrieb passt.
</p> </p>
</div> </div>
<div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto"> <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto relative z-10">
<div class="flex items-center gap-2 text-zinc-300 text-xs"> <div class="flex items-center gap-2 text-zinc-300 text-xs">
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Individuelles Konzept
</div> </div>
<div class="flex items-center gap-2 text-zinc-300 text-xs"> <div class="flex items-center gap-2 text-zinc-300 text-xs">
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener Code <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener, sauberer Code
</div> </div>
<div class="flex items-center gap-2 text-zinc-300 text-xs"> <div class="flex items-center gap-2 text-zinc-300 text-xs">
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> SEO-optimiert <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Optimiert für Mobilgeräte
</div> </div>
</div> </div>
</div> </div>
<!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) --> <!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
<div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
<div> <div>
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaSearchDollar class="w-5 h-5" /> <FaSearchDollar class="w-5 h-5" />
</div> </div>
<h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3> <h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an. Lokale Auffindbarkeit bei Google. Wir sorgen dafür, dass Kunden in Ihrer Region Sie direkt finden.
</p> </p>
</div> </div>
</div> </div>
<!-- ZELLE 7: TECH-STACK (Span 2 cols on md) --> <!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
<div id="tech" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group"> <div id="tech" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
<div> <div>
<h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">State-of-the-Art Tools</h3> <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">Präzise Werkzeuge</h3>
<p class="text-zinc-400 text-xs leading-relaxed mb-6"> <p class="text-zinc-400 text-xs leading-relaxed mb-6">
Wir setzen auf modernste Technologien für maximale Ladezeiten, Sicherheit und Skalierbarkeit. Wir nutzen modernste, stabile Werkzeuge für maximale Ladegeschwindigkeiten und absolute Ausfallsicherheit.
</p> </p>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 relative z-10">
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Astro</span> <span class="text-brand-arcticBlue font-semibold text-xs">Astro Framework</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span> <span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">React</span> <span class="text-brand-arcticBlue font-semibold text-xs">React UI</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Vercel / Netlify</span> <span class="text-brand-arcticBlue font-semibold text-xs">Deutsches Hosting</span>
</div> </div>
</div> </div>
</div> </div>
<!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) --> <!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
<div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
<div> <div>
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaServer class="w-5 h-5" /> <FaServer class="w-5 h-5" />
</div> </div>
<h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3> <h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung. Sicheres, DSGVO-konformes Hosting auf deutschen Servern. Komplett gewartet inklusive Backups.
</p> </p>
</div> </div>
</div> </div>
<!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) --> <!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
<div id="concept" class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div id="concept" class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
<div> <div>
<h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3> <h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3>
<ol class="space-y-4"> <ol class="space-y-4">
@@ -181,7 +226,11 @@ import {
</div> </div>
<!-- ZELLE 9: KONTAKT (Span 2 cols on md) --> <!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
<div id="contact" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 transition-all duration-300 group"> <div id="contact" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 transition-all duration-300 group relative tactile-noise">
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
<h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3> <h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3>
<p class="text-zinc-400 text-xs mb-8"> <p class="text-zinc-400 text-xs mb-8">
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden. Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.

427
src/pages/templates.astro Normal file
View File

@@ -0,0 +1,427 @@
---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import { FaArrowLeft, FaEye, FaDesktop } from 'react-icons/fa';
// List of 20 design templates showcasing maximum diversity in color, structure, and style
const templates = [
{
id: "01",
name: "Der Handwerker-Klassiker",
style: "Einfach & Bodenständig",
layout: "Boxed Layout",
design: "Brutalismus",
colorScheme: "Warm & Earthy (Sand & Terrakotta)",
bgClass: "bg-[#FDFBF7] text-[#2C1A11] border-[#2C1A11]/20",
theme: "light",
accentColor: "bg-[#D97706]",
badgeClass: "bg-[#D97706]/10 text-[#D97706]",
layoutPreview: "boxed"
},
{
id: "02",
name: "Dachdecker Meister",
style: "Elegant & Professionell",
layout: "Split-Screen",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Gold)",
bgClass: "bg-[#18181B] text-white border-yellow-500/20",
theme: "dark",
accentColor: "bg-yellow-500",
badgeClass: "bg-yellow-500/10 text-yellow-400",
layoutPreview: "split"
},
{
id: "03",
name: "Solar & Photovoltaik",
style: "Tech & Zukunft",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-zinc-900 text-zinc-100 border-orange-500/20",
theme: "dark",
accentColor: "bg-orange-500",
badgeClass: "bg-orange-500/10 text-orange-400",
layoutPreview: "bento"
},
{
id: "04",
name: "Die Kanzlei",
style: "Seriös & Clean",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
bgClass: "bg-[#0B0F19] text-white border-emerald-500/20",
theme: "dark",
accentColor: "bg-emerald-500",
badgeClass: "bg-emerald-500/10 text-emerald-400",
layoutPreview: "asymmetric"
},
{
id: "05",
name: "Bio-Hofladen",
style: "Rustikal & Natur",
layout: "Minimalistisch 1-spaltig",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Terrakotta)",
bgClass: "bg-[#FAF7F2] text-[#4A3B32] border-[#E8DCC4]",
theme: "light",
accentColor: "bg-[#C2410C]",
badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
layoutPreview: "single"
},
{
id: "06",
name: "Sanitär & Heizung",
style: "Klar & Zuverlässig",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-white text-slate-800 border-slate-200",
theme: "light",
accentColor: "bg-blue-800",
badgeClass: "bg-blue-800/10 text-blue-800",
layoutPreview: "bento"
},
{
id: "07",
name: "KFZ-Werkstatt Schnellservice",
style: "Dynamisch & Direkt",
layout: "Split-Screen",
design: "Brutalismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-zinc-800 text-white border-zinc-700",
theme: "dark",
accentColor: "bg-orange-600",
badgeClass: "bg-orange-600/15 text-orange-400",
layoutPreview: "split"
},
{
id: "08",
name: "Schreinerei Holzart",
style: "Handwerk & Präzision",
layout: "Boxed Layout",
design: "SaaS-Minimalismus",
colorScheme: "Warm & Earthy (Sand-Töne)",
bgClass: "bg-[#F5F2EB] text-[#3D3A36] border-[#D9D2C5]",
theme: "light",
accentColor: "bg-[#8B5A2B]",
badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
layoutPreview: "boxed"
},
{
id: "09",
name: "Steuerberater Premium",
style: "Exklusiv & Diskret",
layout: "Bento-Grid",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Gold)",
bgClass: "bg-slate-900 text-slate-100 border-amber-500/20",
theme: "dark",
accentColor: "bg-amber-500",
badgeClass: "bg-amber-500/10 text-amber-400",
layoutPreview: "bento"
},
{
id: "10",
name: "Garten- & Landschaftsbau",
style: "Frisch & Modern",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
bgClass: "bg-[#F3F7F4] text-slate-800 border-emerald-200",
theme: "light",
accentColor: "bg-emerald-700",
badgeClass: "bg-emerald-700/10 text-emerald-800",
layoutPreview: "asymmetric"
},
{
id: "11",
name: "Modern Dentists Zahnarzt",
style: "Clean & Vertrauensvoll",
layout: "Minimalistisch 1-spaltig",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-slate-50 text-slate-800 border-slate-200",
theme: "light",
accentColor: "bg-[#1E3A8A]",
badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
layoutPreview: "single"
},
{
id: "12",
name: "Bäckerei Traditionsbäcker",
style: "Gemütlich & Lecker",
layout: "Boxed Layout",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Terrakotta)",
bgClass: "bg-[#FDF9F3] text-[#5C3E21] border-[#EADCC9]",
theme: "light",
accentColor: "bg-[#B45309]",
badgeClass: "bg-[#B45309]/10 text-[#B45309]",
layoutPreview: "boxed"
},
{
id: "13",
name: "Elektro-Technik Meister",
style: "Präzise & Leistungsstark",
layout: "Split-Screen",
design: "Brutalismus",
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
bgClass: "bg-neutral-900 text-neutral-100 border-purple-500/20",
theme: "dark",
accentColor: "bg-purple-600",
badgeClass: "bg-purple-600/10 text-purple-400",
layoutPreview: "split"
},
{
id: "14",
name: "Fitness- & Kraftstudio",
style: "Stark & Motivierend",
layout: "Asymmetrisch",
design: "Brutalismus",
colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
bgClass: "bg-black text-white border-orange-500/20",
theme: "dark",
accentColor: "bg-orange-500",
badgeClass: "bg-orange-500/10 text-orange-500",
layoutPreview: "asymmetric"
},
{
id: "15",
name: "Architekturbüro Struktur",
style: "Minimalismus & Ästhetik",
layout: "Split-Screen",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-white text-zinc-900 border-zinc-200",
theme: "light",
accentColor: "bg-zinc-900",
badgeClass: "bg-zinc-950/10 text-zinc-900",
layoutPreview: "split"
},
{
id: "16",
name: "Physiotherapie Praxis",
style: "Achtsam & Gesund",
layout: "Minimalistisch 1-spaltig",
design: "Glassmorphismus",
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
bgClass: "bg-[#F7FAFC] text-slate-800 border-emerald-100",
theme: "light",
accentColor: "bg-emerald-600",
badgeClass: "bg-emerald-600/10 text-emerald-700",
layoutPreview: "single"
},
{
id: "17",
name: "Metallbau & Schlosserei",
style: "Hart & Präzise",
layout: "Boxed Layout",
design: "Brutalismus",
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
bgClass: "bg-stone-900 text-stone-100 border-emerald-500/20",
theme: "dark",
accentColor: "bg-emerald-600",
badgeClass: "bg-emerald-600/10 text-emerald-400",
layoutPreview: "boxed"
},
{
id: "18",
name: "Restaurant & Gaststube",
style: "Rustikal & Einladend",
layout: "Bento-Grid",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Sand-Töne)",
bgClass: "bg-[#FAF6F0] text-[#543D2B] border-[#EFEAE2]",
theme: "light",
accentColor: "bg-[#A75D5D]",
badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
layoutPreview: "bento"
},
{
id: "19",
name: "Software-Entwicklung Byte",
style: "Sauber & Strukturiert",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
bgClass: "bg-[#1C1B22] text-zinc-100 border-indigo-500/20",
theme: "dark",
accentColor: "bg-indigo-500",
badgeClass: "bg-indigo-500/10 text-indigo-400",
layoutPreview: "bento"
},
{
id: "20",
name: "Malerbetrieb Farbenfroh",
style: "Kreativ & Präzise",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-[#1E1E2E] text-zinc-100 border-orange-500/20",
theme: "dark",
accentColor: "bg-orange-500",
badgeClass: "bg-orange-500/10 text-orange-400",
layoutPreview: "asymmetric"
}
];
---
<Layout title="Template-Katalog | N&D i-t SOLUTIONS">
<Navbar />
<main class="relative min-h-screen bg-brand-darkBg text-white pt-28 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden tactile-grid-bg">
<!-- Background Glow (Aurora Effect - kept extremely subtle) -->
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-sky-500/[0.02] blur-[150px] pointer-events-none rounded-full"></div>
<div class="absolute top-2/3 left-1/3 w-[400px] h-[400px] bg-blue-600/[0.02] blur-[120px] pointer-events-none rounded-full"></div>
<div class="max-w-7xl mx-auto relative z-10">
<!-- Back Link -->
<a href="/" class="inline-flex items-center gap-2 text-zinc-400 hover:text-brand-arcticBlue text-xs uppercase tracking-wider font-semibold mb-8 group transition-colors">
<FaArrowLeft class="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
Zurück zur Startseite
</a>
<!-- Header Section -->
<div class="max-w-3xl mb-16">
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-4">
Handwerk trifft moderne Architektur
</div>
<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
Die perfekte Struktur für <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-arcticBlue to-white">jeden Betrieb.</span>
</h1>
<p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
Egal ob klassische Schreinerei, moderne Anwaltskanzlei oder lokaler Handwerker: Wir passen das Design perfekt an Ihren Stil an. Hier sind 20 beispielhafte Bento-Kombinationen, Farbwelten und Layout-Konzepte.
</p>
</div>
<!-- Grid System Container (20 Bento-Kacheln) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{templates.map((tpl) => (
<a href={`/templates/${tpl.id}`} class={`group relative rounded-2xl p-6 border transition-all duration-300 hover:scale-[1.01] flex flex-col justify-between h-[340px] ${tpl.bgClass} ${tpl.theme === 'dark' ? 'hover:border-white/20' : 'hover:border-black/20'} shadow-lg cursor-pointer block tactile-noise`}>
{/* Precision Blueprint Corner Markers */}
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-current/25"></span>
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-current/25"></span>
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-current/25"></span>
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-current/25"></span>
{/* Overlay glow for modern style */}
<div class="absolute inset-0 bg-white/[0.01] dark:bg-white/[0.02] rounded-2xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div>
{/* Badge & ID & Status Indicator */}
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<span class={`text-[10px] font-mono font-bold uppercase px-2 py-0.5 rounded ${tpl.badgeClass}`}>
{tpl.style}
</span>
<span class="relative flex h-2 w-2" title="Vorschau aktiv">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
</div>
<span class="text-xs font-mono opacity-40">#{tpl.id}</span>
</div>
{/* Title & Description */}
<h3 class="text-lg font-bold tracking-tight mb-2 line-clamp-2 leading-snug">
{tpl.name}
</h3>
<div class="space-y-1 mt-3">
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
<span class="font-bold">Stil:</span> {tpl.design}
</div>
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
<span class="font-bold">Farbe:</span> {tpl.colorScheme}
</div>
</div>
</div>
{/* Visual Mini-Layout Preview Component inside card (Bento Content-Mix) */}
<div class="my-4 h-16 w-full rounded border border-black/[0.06] dark:border-white/[0.06] bg-black/5 dark:bg-white/5 p-1.5 flex gap-1 justify-center items-stretch relative overflow-hidden">
{tpl.layoutPreview === "bento" && (
<div class="w-full grid grid-cols-3 gap-1">
<div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
<div class="rounded bg-black/10 dark:bg-white/10"></div>
<div class="rounded bg-black/10 dark:bg-white/10"></div>
<div class="col-span-2 rounded bg-black/10 dark:bg-white/10"></div>
</div>
)}
{tpl.layoutPreview === "split" && (
<div class="w-full flex gap-1">
<div class={`w-1/2 rounded ${tpl.accentColor} opacity-70`}></div>
<div class="w-1/2 rounded bg-black/10 dark:bg-white/10"></div>
</div>
)}
{tpl.layoutPreview === "boxed" && (
<div class="w-full flex justify-center items-center p-2">
<div class="w-full h-full rounded border border-black/20 dark:border-white/20 p-1 flex gap-1">
<div class={`w-1/3 rounded ${tpl.accentColor} opacity-70`}></div>
<div class="w-2/3 rounded bg-black/10 dark:bg-white/10"></div>
</div>
</div>
)}
{tpl.layoutPreview === "asymmetric" && (
<div class="w-full grid grid-cols-4 gap-1">
<div class="rounded bg-black/10 dark:bg-white/10"></div>
<div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
<div class="rounded bg-black/10 dark:bg-white/10"></div>
</div>
)}
{tpl.layoutPreview === "single" && (
<div class="w-full flex flex-col gap-1 justify-center">
<div class={`h-3 w-3/4 mx-auto rounded ${tpl.accentColor} opacity-70`}></div>
<div class="h-2 w-1/2 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
<div class="h-2 w-2/3 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
</div>
)}
</div>
{/* CTA action bottom */}
<div class="flex items-center justify-between pt-3 border-t border-black/[0.06] dark:border-white/[0.06]">
<span class="text-[10px] font-mono opacity-50 uppercase">{tpl.layout}</span>
<div class="flex items-center gap-1.5 text-xs font-semibold group-hover:translate-x-0.5 transition-transform">
<span>Vorschau</span>
<FaDesktop class="w-3 h-3 opacity-60" />
</div>
</div>
</a>
))}
</div>
<!-- Bottom Info Callout -->
<div class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
<div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
<div>
<h3 class="text-xl font-bold mb-2">Ihr Wunsch-Design ist nicht dabei?</h3>
<p class="text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
Kein Problem. Jedes Layout wird von uns individuell im Code programmiert. Wir nutzen keine starren Fertig-Systeme. Teilen Sie uns einfach Ihre Vorstellungen mit, und wir setzen sie passgenau um.
</p>
</div>
<a href="/#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200 shrink-0">
Design besprechen
<FaDesktop class="w-3 h-3" />
</a>
</div>
</div>
</div>
</main>
<Footer />
</Layout>

521
src/pages/templates/[id].astro Normal file
View File

@@ -0,0 +1,521 @@
---
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/Navbar.astro';
import Footer from '../../components/Footer.astro';
import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope } from 'react-icons/fa';
export function getStaticPaths() {
const templates = [
{
id: "01",
name: "Der Handwerker-Klassiker",
style: "Einfach & Bodenständig",
layout: "Boxed Layout",
design: "Brutalismus",
colorScheme: "Warm & Earthy (Sand & Terrakotta)",
bgClass: "bg-[#FDFBF7] text-[#2C1A11]",
borderClass: "border-2 border-[#2C1A11]",
accentText: "text-[#D97706]",
accentBg: "bg-[#D97706] hover:bg-[#B45309] text-white",
cardClass: "bg-white border border-[#2C1A11]/20",
theme: "light",
businessType: "Schreinerei & Innenausbau"
},
{
id: "02",
name: "Dachdecker Meister",
style: "Elegant & Professionell",
layout: "Split-Screen",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Gold)",
bgClass: "bg-[#0B0F19] text-white",
borderClass: "border border-white/10",
accentText: "text-amber-400",
accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950",
cardClass: "bg-slate-900/50 backdrop-blur border border-white/10",
theme: "dark",
businessType: "Dachdeckerei & Spenglerei"
},
{
id: "03",
name: "Solar & Photovoltaik",
style: "Tech & Zukunft",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-zinc-950 text-zinc-100",
borderClass: "border border-zinc-800",
accentText: "text-orange-500",
accentBg: "bg-orange-600 hover:bg-orange-700 text-white",
cardClass: "bg-zinc-900 border border-zinc-800",
theme: "dark",
businessType: "Solartechnik & Energiesysteme"
},
{
id: "04",
name: "Die Kanzlei",
style: "Seriös & Clean",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
bgClass: "bg-[#0B0F19] text-white",
borderClass: "border border-white/10",
accentText: "text-emerald-400",
accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
cardClass: "bg-slate-900/50 backdrop-blur border border-white/10",
theme: "dark",
businessType: "Rechtsanwälte & Notare"
},
{
id: "05",
name: "Bio-Hofladen",
style: "Rustikal & Natur",
layout: "Minimalistisch 1-spaltig",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Terrakotta)",
bgClass: "bg-[#FAF7F2] text-[#4A3B32]",
borderClass: "border border-[#E8DCC4]",
accentText: "text-[#C2410C]",
accentBg: "bg-[#C2410C] hover:bg-[#A8370A] text-white",
cardClass: "bg-[#FAF7F2] shadow-[4px_4px_10px_rgba(0,0,0,0.05),-4px_-4px_10px_rgba(255,255,255,0.8)] border border-[#FAF7F2]",
theme: "light",
businessType: "Bio-Bauernhof & Hofladen"
},
{
id: "06",
name: "Sanitär & Heizung",
style: "Klar & Zuverlässig",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-slate-50 text-slate-900",
borderClass: "border border-slate-200",
accentText: "text-blue-700",
accentBg: "bg-blue-700 hover:bg-blue-800 text-white",
cardClass: "bg-white border border-slate-200 shadow-sm",
theme: "light",
businessType: "Heizung, Sanitär & Klima"
},
{
id: "07",
name: "KFZ-Werkstatt Schnellservice",
style: "Dynamisch & Direkt",
layout: "Split-Screen",
design: "Brutalismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-zinc-900 text-white",
borderClass: "border-2 border-zinc-700",
accentText: "text-orange-500",
accentBg: "bg-orange-600 hover:bg-orange-700 text-white",
cardClass: "bg-zinc-800 border border-zinc-700",
theme: "dark",
businessType: "Kfz-Meisterbetrieb"
},
{
id: "08",
name: "Schreinerei Holzart",
style: "Handwerk & Präzision",
layout: "Boxed Layout",
design: "SaaS-Minimalismus",
colorScheme: "Warm & Earthy (Sand-Töne)",
bgClass: "bg-[#F5F2EB] text-[#3D3A36]",
borderClass: "border border-[#D9D2C5]",
accentText: "text-[#8B5A2B]",
accentBg: "bg-[#8B5A2B] hover:bg-[#6F4722] text-white",
cardClass: "bg-white border border-[#EBE6DC] shadow-sm",
theme: "light",
businessType: "Möbel- & Bauschreinerei"
},
{
id: "09",
name: "Steuerberater Premium",
style: "Exklusiv & Diskret",
layout: "Bento-Grid",
design: "Glassmorphismus",
colorScheme: "Deep Dark (Anthrazit & Gold)",
bgClass: "bg-slate-950 text-slate-100",
borderClass: "border border-slate-800",
accentText: "text-amber-400",
accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950",
cardClass: "bg-slate-900/40 backdrop-blur border border-white/10",
theme: "dark",
businessType: "Steuerberatungskanzlei"
},
{
id: "10",
name: "Garten- & Landschaftsbau",
style: "Frisch & Modern",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
bgClass: "bg-emerald-50/30 text-slate-900",
borderClass: "border border-emerald-100",
accentText: "text-emerald-700",
accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white",
cardClass: "bg-white/80 backdrop-blur border border-emerald-100 shadow-sm",
theme: "light",
businessType: "Garten- & Landschaftsbau"
},
{
id: "11",
name: "Modern Dentists Zahnarzt",
style: "Clean & Vertrauensvoll",
layout: "Minimalistisch 1-spaltig",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-white text-slate-900",
borderClass: "border border-slate-200",
accentText: "text-blue-800",
accentBg: "bg-blue-800 hover:bg-blue-900 text-white",
cardClass: "bg-slate-50 border border-slate-150",
theme: "light",
businessType: "Zahnarztpraxis"
},
{
id: "12",
name: "Bäckerei Traditionsbäcker",
style: "Gemütlich & Lecker",
layout: "Boxed Layout",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Terrakotta)",
bgClass: "bg-[#FDF9F3] text-[#5C3E21]",
borderClass: "border border-[#EADCC9]",
accentText: "text-[#B45309]",
accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white",
cardClass: "bg-[#FDF9F3] shadow-[4px_4px_10px_rgba(0,0,0,0.04),-4px_-4px_10px_rgba(255,255,255,0.75)] border border-transparent",
theme: "light",
businessType: "Feinbäckerei & Konditorei"
},
{
id: "13",
name: "Elektro-Technik Meister",
style: "Präzise & Leistungsstark",
layout: "Split-Screen",
design: "Brutalismus",
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
bgClass: "bg-neutral-950 text-neutral-100",
borderClass: "border border-neutral-800",
accentText: "text-purple-400",
accentBg: "bg-purple-600 hover:bg-purple-700 text-white",
cardClass: "bg-neutral-900 border border-neutral-800",
theme: "dark",
businessType: "Elektrotechnik & Smart Home"
},
{
id: "14",
name: "Fitness- & Kraftstudio",
style: "Stark & Motivierend",
layout: "Asymmetrisch",
design: "Brutalismus",
colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
bgClass: "bg-black text-white",
borderClass: "border-2 border-zinc-800",
accentText: "text-orange-500",
accentBg: "bg-orange-500 hover:bg-orange-600 text-black font-bold",
cardClass: "bg-zinc-950 border border-zinc-800",
theme: "dark",
businessType: "Premium Gym & Fitness"
},
{
id: "15",
name: "Architekturbüro Struktur",
style: "Minimalismus & Ästhetik",
layout: "Split-Screen",
design: "SaaS-Minimalismus",
colorScheme: "Clean Light (Weiß & Navy-Blau)",
bgClass: "bg-white text-zinc-900",
borderClass: "border border-zinc-200",
accentText: "text-zinc-900",
accentBg: "bg-zinc-900 hover:bg-zinc-800 text-white",
cardClass: "bg-zinc-50 border border-zinc-200",
theme: "light",
businessType: "Architektur & Generalplanung"
},
{
id: "16",
name: "Physiotherapie Praxis",
style: "Achtsam & Gesund",
layout: "Minimalistisch 1-spaltig",
design: "Glassmorphismus",
colorScheme: "Clean Light (Weiß & Salbei-Grün)",
bgClass: "bg-[#FAFDFB] text-slate-800",
borderClass: "border border-emerald-100",
accentText: "text-emerald-600",
accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
cardClass: "bg-white/80 backdrop-blur border border-emerald-100 shadow-sm",
theme: "light",
businessType: "Physiotherapie & Osteopathie"
},
{
id: "17",
name: "Metallbau & Schlosserei",
style: "Hart & Präzise",
layout: "Boxed Layout",
design: "Brutalismus",
colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
bgClass: "bg-zinc-900 text-zinc-100",
borderClass: "border-2 border-zinc-700",
accentText: "text-emerald-400",
accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white",
cardClass: "bg-zinc-800 border-2 border-zinc-700",
theme: "dark",
businessType: "Schlosserei & Konstruktion"
},
{
id: "18",
name: "Restaurant & Gaststube",
style: "Rustikal & Einladend",
layout: "Bento-Grid",
design: "Neomorphismus",
colorScheme: "Warm & Earthy (Sand-Töne)",
bgClass: "bg-[#FCFAF7] text-[#4E3629]",
borderClass: "border border-[#ECE4D9]",
accentText: "text-[#A75D5D]",
accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white",
cardClass: "bg-[#FCFAF7] shadow-[5px_5px_12px_rgba(0,0,0,0.03),-5px_-5px_12px_rgba(255,255,255,0.8)] border border-transparent",
theme: "light",
businessType: "Wirtshaus & Feinkost"
},
{
id: "19",
name: "Software-Entwicklung Byte",
style: "Sauber & Strukturiert",
layout: "Bento-Grid",
design: "SaaS-Minimalismus",
colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
bgClass: "bg-[#0C0C0F] text-zinc-100",
borderClass: "border border-zinc-800",
accentText: "text-indigo-400",
accentBg: "bg-indigo-600 hover:bg-indigo-700 text-white",
cardClass: "bg-zinc-900 border border-zinc-800",
theme: "dark",
businessType: "Software & Webanwendungen"
},
{
id: "20",
name: "Malerbetrieb Farbenfroh",
style: "Kreativ & Präzise",
layout: "Asymmetrisch",
design: "Glassmorphismus",
colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
bgClass: "bg-[#161622] text-zinc-100",
borderClass: "border border-white/5",
accentText: "text-orange-400",
accentBg: "bg-orange-500 hover:bg-orange-600 text-white",
cardClass: "bg-slate-900/60 backdrop-blur border border-white/10",
theme: "dark",
businessType: "Maler- & Lackiererbetrieb"
}
];
return templates.map((tpl) => ({
params: { id: tpl.id },
props: { tpl }
}));
}
const { tpl } = Astro.props;
---
<Layout title={`${tpl.name} | Live-Vorschau`}>
<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">Stil: {tpl.design}</span>
<span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded hidden sm:inline">{tpl.layout}</span>
</div>
</div>
<div class={`min-h-screen pt-16 pb-12 ${tpl.bgClass}`}>
{/* Boxed structure wrapper if selected */}
<div class={tpl.layout === "Boxed Layout" ? "max-w-6xl mx-auto my-8 border-4 border-black/10 dark:border-white/10 rounded-2xl overflow-hidden shadow-2xl" : ""}>
{/* 1. Header (Dynamic) */}
<header class="py-6 px-8 flex justify-between items-center border-b border-current/10">
<div class="font-bold text-xl uppercase tracking-wider">
{tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
</div>
<div class="hidden md:flex gap-6 text-sm font-semibold opacity-85">
<span class="cursor-pointer">Leistungen</span>
<span class="cursor-pointer">Über uns</span>
<span class="cursor-pointer">Referenzen</span>
<span class="cursor-pointer">Kontakt</span>
</div>
</header>
{/* 2. Hero Section (Dynamic Layouts) */}
<main class="px-8 py-16 sm:py-24">
{tpl.layout === "Split-Screen" ? (
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Echtes Handwerk seit 1995</span>
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6 leading-tight">
Qualität und Zuverlässigkeit für Ihr Projekt.
</h1>
<p class="opacity-80 text-sm sm:text-base mb-8 max-w-md leading-relaxed">
Wir planen und realisieren Ihr Projekt nach Maß. Termingerecht, sauber und absolut professionell vom Meisterbetrieb.
</p>
<button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider transition-colors ${tpl.accentBg}`}>
Jetzt Angebot anfragen
</button>
</div>
<div class={`h-[350px] rounded-2xl flex items-center justify-center p-8 text-center border border-current/10 bg-current/5`}>
<div class="space-y-2">
<div class="text-4xl font-bold">100%</div>
<div class="text-xs uppercase tracking-wider font-semibold opacity-60">Kundenzufriedenheit</div>
</div>
</div>
</div>
) : tpl.layout === "Bento-Grid" ? (
<div>
<div class="text-center max-w-2xl mx-auto mb-16">
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Bento Grid Showcase</span>
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight mt-2 mb-6">Moderne Struktur. Voller Fokus.</h1>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class={`md:col-span-2 rounded-2xl p-8 ${tpl.cardClass}`}>
<h2 class="text-2xl font-bold mb-4">Meisterliche Ausführung</h2>
<p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-6">
Wir stehen für Handwerkskunst der Spitzenklasse. Durch modernste Planung und traditionelles Können schaffen wir dauerhafte Werte für Ihr Gebäude.
</p>
<button class={`px-5 py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
Kontakt aufnehmen
</button>
</div>
<div class={`rounded-2xl p-8 flex flex-col justify-between ${tpl.cardClass}`}>
<div class="text-2xl font-mono font-bold">DEUTSCHLAND</div>
<div class="text-xs opacity-75">Regionaler Service direkt vor Ort bei Ihnen.</div>
</div>
<div class={`rounded-2xl p-8 flex flex-col justify-between ${tpl.cardClass}`}>
<div class="text-2xl font-mono font-bold">> 25 JAHRE</div>
<div class="text-xs opacity-75">Erfahrung, auf die Sie bauen können.</div>
</div>
<div class={`md:col-span-2 rounded-2xl p-8 ${tpl.cardClass} flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4`}>
<div>
<h3 class="text-lg font-bold">Direkt & Unverbindlich</h3>
<p class="opacity-70 text-xs">Fragen Sie Ihr Projekt einfach kostenlos an.</p>
</div>
<button class={`px-4 py-2 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg} shrink-0`}>
Rückruf anfordern
</button>
</div>
</div>
</div>
) : tpl.layout === "Asymmetrisch" ? (
<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-tight leading-tight mb-6">
Ihr Partner für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>.
</h1>
<p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
Wir konzipieren und setzen maßgeschneiderte Lösungen für private und gewerbliche Kunden um. Verlässlich, smart und von Experten ausgeführt.
</p>
<div class="flex flex-wrap gap-4">
<button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
Erstgespräch vereinbaren
</button>
</div>
</div>
<div class="lg:col-span-2 space-y-6">
<div class={`rounded-2xl p-6 ${tpl.cardClass}`}>
<h4 class="font-bold mb-1">01. Beratung</h4>
<p class="opacity-70 text-xs">Persönliche Vorort-Analyse Ihrer Wünsche.</p>
</div>
<div class={`rounded-2xl p-6 translate-x-0 md:translate-x-4 ${tpl.cardClass}`}>
<h4 class="font-bold mb-1">02. Konzept</h4>
<p class="opacity-70 text-xs">Transparente Planung und Angebotserstellung.</p>
</div>
<div class={`rounded-2xl p-6 ${tpl.cardClass}`}>
<h4 class="font-bold mb-1">03. Umsetzung</h4>
<p class="opacity-70 text-xs">Schnelle, saubere Montage & Abnahme.</p>
</div>
</div>
</div>
) : (
/* Minimalistisch 1-spaltig / Default */
<div class="text-center max-w-2xl mx-auto py-8">
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mt-4 mb-6 leading-tight">
Einfach. Klar. Auf den Punkt.
</h1>
<p class="opacity-80 text-sm sm:text-base leading-relaxed mb-10 max-w-lg mx-auto">
Keine unnötigen Ablenkungen. Wir liefern genau das, was Ihr Betrieb für den Erfolg braucht. Technisch präzise gearbeitet und pünktlich geliefert.
</p>
<div class="flex gap-4 justify-center">
<button class={`px-6 py-3 rounded text-sm font-bold uppercase tracking-wider ${tpl.accentBg}`}>
Kontakt aufnehmen
</button>
</div>
</div>
)}
</main>
{/* 3. Features Section */}
<section class="border-t border-current/10 py-16 px-8">
<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 ] Meisterqualität</div>
<p class="opacity-70 text-xs sm:text-sm">Wir arbeiten ausschließlich mit geprüften Fachkräften und hochwertigen Materialien.</p>
</div>
<div class="space-y-2">
<div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Feste Termine</div>
<p class="opacity-70 text-xs sm:text-sm">Pünktlichkeit ist unsere Zusage. Wir halten uns an vereinbarte Ausführungszeiten.</p>
</div>
<div class="space-y-2">
<div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Transparente Preise</div>
<p class="opacity-70 text-xs sm:text-sm">Keine versteckten Gebühren. Jedes Angebot ist detailliert und verbindlich.</p>
</div>
</div>
</section>
{/* 4. Mock Contact Form */}
<section class="border-t border-current/10 py-16 px-8">
<div class="max-w-xl mx-auto text-center mb-8">
<h2 class="text-2xl sm:text-3xl font-bold">Sprechen Sie uns an.</h2>
<p class="opacity-70 text-xs mt-2">Wir melden uns innerhalb eines Werktages persönlich bei Ihnen.</p>
</div>
<form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault()">
<div>
<label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">Ihr Name</label>
<input type="text" required class="w-full bg-current/5 border border-current/20 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
</div>
<div>
<label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
<input type="email" required class="w-full bg-current/5 border border-current/20 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
</div>
<div>
<label class="block text-[10px] font-semibold uppercase opacity-60 mb-1">Nachricht</label>
<textarea rows="3" required class="w-full bg-current/5 border border-current/20 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}`}>
Senden
</button>
</form>
</section>
{/* 5. Footer */}
<footer class="border-t border-current/10 py-8 px-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs opacity-60">
<div>
&copy; {new Date().getFullYear()} {tpl.businessType.split(' ')[0]} Mustermann GbR.
</div>
<div class="flex gap-4">
<span>Datenschutz</span>
<span>Impressum</span>
</div>
</footer>
</div>
</div>
</Layout>