Compare commits
4 Commits
56bf017e63
...
11e836fc30
| Author | SHA1 | Date | |
|---|---|---|---|
|
11e836fc30 | ||
|
|
ad2f7c32a1 | ||
|
|
16284b6f03 | ||
|
|
03c37e592a |
@@ -19,3 +19,30 @@
|
|||||||
- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
|
- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
|
||||||
- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
|
- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
|
||||||
- **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation.
|
- **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation.
|
||||||
|
|
||||||
|
# Technische & Rechtliche Standards
|
||||||
|
|
||||||
|
## 1. Technische Barrierefreiheit (A11y)
|
||||||
|
- **Touch-Targets:** Mindestens 44x44 CSS-Pixel für interaktive Elemente.
|
||||||
|
- **Kontraste:** Text-Kontrast mind. 4,5:1. Bei Liquid Glass `backdrop-blur-xl` und deckende Hintergrund-Opacities sicherstellen.
|
||||||
|
- **Tastatur-Navigation:** Sinnvolle `:focus-visible` Ringe für die Tab-Navigation nutzen.
|
||||||
|
- **Screenreader:** Explizite `<label>`-Tags für Inputs. Akkordeons mit `aria-expanded` und `aria-controls`. Dekorative Icons mit `aria-hidden="true"`.
|
||||||
|
|
||||||
|
## 2. Rechtliche Sicherheit (100% DSGVO-Konformität)
|
||||||
|
- **Zero-Third-Party-Requests:** Keine externen CDNs (Fonts, Skripte, Icons lokal ausliefern).
|
||||||
|
- **Keine Cookies/Opt-Ins:** Ausschließlich funktionale Daten (wie Darkmode im LocalStorage) verwenden.
|
||||||
|
- **Formularverarbeitung:** DSGVO-konforme Übermittlung ohne ungefragte US-Drittdienste.
|
||||||
|
|
||||||
|
## 3. Design & Ästhetik ("Liquid Glass" & Clean Look)
|
||||||
|
- **Lesbarkeit:** Aurora-Glows dezent halten (z-0, Opacity max. 10-20%) und Text lesbar halten.
|
||||||
|
- **Kanten-Effekt:** Hauchdünne Borders (`border-[0.5px]` oder `border`) mit semi-transparenten Farben für edle Lichtkanten.
|
||||||
|
- **Theme-Transition:** Weiche Farbübergänge (`transition-colors duration-300`) auf großen Flächen zur Vermeidung harter Blitze.
|
||||||
|
|
||||||
|
## 4. Performance & Astro Hybrid-Architektur
|
||||||
|
- **Kein FOUC:** Darkmode-Erkennungsskripte blockierend im `<head>` als `is:inline` laden.
|
||||||
|
- **Image-Optimierung:** Astros `<Image/>` Komponente mit WebP/AVIF und festen Dimensionen verwenden, um CLS zu verhindern.
|
||||||
|
- **Teilhydrierung:** Clientseitiges JS minimieren. Animationen über CSS-Keyframes und nativen IntersectionObserver steuern.
|
||||||
|
|
||||||
|
## 5. Conversion & Psychologie (KMU Zielgruppe)
|
||||||
|
- **Verständlichkeit:** Kundensprache statt Tech-Sprech.
|
||||||
|
- **Sorgenfrei-Versprechen:** FAQ zu Änderungen, kostenlosem Domain-Umzug und Festpreisgarantie direkt positionieren.
|
||||||
|
|||||||
20
package-lock.json
generated
20
package-lock.json
generated
@@ -10,6 +10,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/react": "^3.6.3",
|
"@astrojs/react": "^3.6.3",
|
||||||
"@astrojs/tailwind": "^5.1.4",
|
"@astrojs/tailwind": "^5.1.4",
|
||||||
|
"@fontsource/inter": "^5.2.8",
|
||||||
|
"@fontsource/space-grotesk": "^5.2.10",
|
||||||
"@types/react": "^19.2.17",
|
"@types/react": "^19.2.17",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"astro": "^4.16.0",
|
"astro": "^4.16.0",
|
||||||
@@ -575,6 +577,24 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@fontsource/inter": {
|
||||||
|
"version": "5.2.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
|
||||||
|
"integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
|
||||||
|
"license": "OFL-1.1",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ayuhito"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@fontsource/space-grotesk": {
|
||||||
|
"version": "5.2.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fontsource/space-grotesk/-/space-grotesk-5.2.10.tgz",
|
||||||
|
"integrity": "sha512-XNXEbT74OIITPqw2H6HXwPDp85fy43uxfBwFR5PU+9sLnjuLj12KlhVM9nZVN6q6dlKjkuN8JisW/OBxwxgUew==",
|
||||||
|
"license": "OFL-1.1",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ayuhito"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@img/sharp-darwin-arm64": {
|
"node_modules/@img/sharp-darwin-arm64": {
|
||||||
"version": "0.33.5",
|
"version": "0.33.5",
|
||||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
|
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
|
||||||
|
|||||||
@@ -14,6 +14,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/react": "^3.6.3",
|
"@astrojs/react": "^3.6.3",
|
||||||
"@astrojs/tailwind": "^5.1.4",
|
"@astrojs/tailwind": "^5.1.4",
|
||||||
|
"@fontsource/inter": "^5.2.8",
|
||||||
|
"@fontsource/space-grotesk": "^5.2.10",
|
||||||
"@types/react": "^19.2.17",
|
"@types/react": "^19.2.17",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"astro": "^4.16.0",
|
"astro": "^4.16.0",
|
||||||
|
|||||||
@@ -215,53 +215,53 @@
|
|||||||
<div class="space-y-4 reveal">
|
<div class="space-y-4 reveal">
|
||||||
|
|
||||||
<!-- FAQ 1 -->
|
<!-- FAQ 1 -->
|
||||||
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
<details id="faq-1" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
||||||
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
<summary id="faq-summary-1" aria-controls="faq-content-1" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
||||||
<span>Ist die Erstellung der Website wirklich im Hosting-Abo inklusive?</span>
|
<span>Ist die Erstellung der Website wirklich im Hosting-Abo inklusive?</span>
|
||||||
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
||||||
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
<div id="faq-content-1" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
||||||
Ja. Wir erstellen Ihren neuen Internetauftritt passend zum Hosting direkt mit. Es gibt keine hohen einmaligen Einrichtungskosten – alles ist in der monatlichen Pauschale enthalten.
|
Ja. Wir erstellen Ihren neuen Internetauftritt passend zum Hosting direkt mit. Es gibt keine hohen einmaligen Einrichtungskosten – alles ist in der monatlichen Pauschale enthalten.
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<!-- FAQ 2 -->
|
<!-- FAQ 2 -->
|
||||||
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
<details id="faq-2" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
||||||
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
<summary id="faq-summary-2" aria-controls="faq-content-2" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
||||||
<span>Kann ich meine bestehende Domain mitnehmen?</span>
|
<span>Kann ich meine bestehende Domain mitnehmen?</span>
|
||||||
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
||||||
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
<div id="faq-content-2" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
||||||
Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
|
Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<!-- FAQ 3 -->
|
<!-- FAQ 3 -->
|
||||||
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
<details id="faq-3" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
||||||
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
<summary id="faq-summary-3" aria-controls="faq-content-3" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
||||||
<span>Wie laufen spätere Änderungen an meiner Website ab?</span>
|
<span>Wie laufen spätere Änderungen an meiner Website ab?</span>
|
||||||
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
||||||
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
<div id="faq-content-3" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
||||||
Senden Sie uns einfach eine kurze Nachricht mit Ihren Änderungswünschen (z. B. neue Öffnungszeiten oder Bilder). Wir setzen diese zeitnah und zuverlässig für Sie um – ohne Zusatzkosten.
|
Senden Sie uns einfach eine kurze Nachricht mit Ihren Änderungswünschen (z. B. neue Öffnungszeiten oder Bilder). Wir setzen diese zeitnah und zuverlässig für Sie um – ohne Zusatzkosten.
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<!-- FAQ 4 -->
|
<!-- FAQ 4 -->
|
||||||
<details class="group rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
<details id="faq-4" class="group rounded-2xl border-[0.5px] border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent backdrop-blur-xl transition-all duration-300 shadow-sm">
|
||||||
<summary class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
<summary id="faq-summary-4" aria-controls="faq-content-4" aria-expanded="false" class="flex justify-between items-center p-6 text-slate-900 dark:text-white font-bold text-sm sm:text-base cursor-pointer list-none select-none">
|
||||||
<span>Wie flexibel ist das Sorgenfrei-Paket und wie sind die Laufzeiten?</span>
|
<span>Wie flexibel ist das Sorgenfrei-Paket und wie sind die Laufzeiten?</span>
|
||||||
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
<span class="transition-transform duration-300 group-open:rotate-180 text-sky-600 dark:text-sky-400">
|
||||||
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
<div id="faq-content-4" class="px-6 pb-6 text-slate-600 dark:text-zinc-400 text-xs sm:text-sm leading-relaxed border-t border-slate-100 dark:border-white/5 pt-4">
|
||||||
Unser Angebot richtet sich ganz nach Ihrem Bedarf. Die Preise und genauen Konditionen kalkulieren wir auf Anfrage. Jede Anfrage ist für Sie vollkommen unverbindlich.
|
Unser Angebot richtet sich ganz nach Ihrem Bedarf. Die Preise und genauen Konditionen kalkulieren wir auf Anfrage. Jede Anfrage ist für Sie vollkommen unverbindlich.
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
@@ -317,4 +317,18 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
revealElements.forEach(el => observer.observe(el));
|
revealElements.forEach(el => observer.observe(el));
|
||||||
|
|
||||||
|
// A11y FAQ Details Sync
|
||||||
|
const faqDetails = document.querySelectorAll('details');
|
||||||
|
faqDetails.forEach((details) => {
|
||||||
|
const summary = details.querySelector('summary');
|
||||||
|
if (summary) {
|
||||||
|
// Set initial state
|
||||||
|
summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
|
||||||
|
|
||||||
|
details.addEventListener('toggle', () => {
|
||||||
|
summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
145
src/components/TemplateMarquee.astro
Normal file
145
src/components/TemplateMarquee.astro
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
---
|
||||||
|
// src/components/TemplateMarquee.astro
|
||||||
|
|
||||||
|
const templates = [
|
||||||
|
{ id: "01", name: "Der Handwerker-Klassiker", style: "Einfach & Bodenständig", layout: "boxed", design: "Brutalismus", colors: "from-[#FDFBF7] to-[#FAF7F2] text-[#2C1A11]" },
|
||||||
|
{ id: "02", name: "Dachdecker Meister", style: "Elegant & Professionell", layout: "split", design: "Glassmorphismus", colors: "from-zinc-900 to-zinc-950 text-white border-yellow-500/20" },
|
||||||
|
{ id: "03", name: "Solar & Photovoltaik", style: "Tech & Zukunft", layout: "bento", design: "SaaS-Minimalismus", colors: "from-zinc-900 to-black text-zinc-100 border-orange-500/20" },
|
||||||
|
{ id: "04", name: "Die Kanzlei", style: "Seriös & Clean", layout: "asymmetric", design: "Glassmorphismus", colors: "from-[#0B0F19] to-[#070A13] text-white border-emerald-500/20" },
|
||||||
|
{ id: "05", name: "Bio-Hofladen", style: "Rustikal & Natur", layout: "single", design: "Neomorphismus", colors: "from-[#FAF7F2] to-[#E8DCC4] text-[#4A3B32]" },
|
||||||
|
{ id: "06", name: "Sanitär & Heizung", style: "Klar & Zuverlässig", layout: "bento", design: "SaaS-Minimalismus", colors: "from-white to-slate-50 text-slate-800 border-slate-200" },
|
||||||
|
{ id: "07", name: "KFZ Schnellservice", style: "Dynamisch & Direkt", layout: "split", design: "Brutalismus", colors: "from-zinc-800 to-zinc-900 text-white border-zinc-700" },
|
||||||
|
{ id: "08", name: "Schreinerei Holzart", style: "Handwerk & Präzision", layout: "boxed", design: "SaaS-Minimalismus", colors: "from-[#F5F2EB] to-[#D9D2C5] text-[#3D3A36]" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Double list for infinite wrap animation
|
||||||
|
const rowData = [...templates, ...templates];
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="py-12 bg-slate-50 dark:bg-[#070A13] overflow-hidden relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
|
||||||
|
<!-- Subtle background glow -->
|
||||||
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[60%] bg-sky-500/5 dark:bg-sky-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>
|
||||||
|
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8 relative z-10">
|
||||||
|
<div class="max-w-3xl">
|
||||||
|
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">
|
||||||
|
Unsere Design-Vorlagen
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-2">
|
||||||
|
Entdecken Sie vorkonfigurierte Layouts. Vollständig anpassbar und optimiert.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Single Marquee row container -->
|
||||||
|
<div class="relative z-10 w-full overflow-hidden">
|
||||||
|
<div class="marquee-wrapper">
|
||||||
|
<div class="marquee-track marquee-left">
|
||||||
|
{rowData.map((item, index) => (
|
||||||
|
<div class="marquee-item group relative w-72 sm:w-80 h-44 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-gradient-to-br backdrop-blur-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-sky-300 dark:hover:border-sky-500/30 shadow-sm hover:shadow-xl p-4 flex flex-col justify-between overflow-hidden cursor-pointer select-none" class:list={[item.colors]}>
|
||||||
|
<!-- Top bar -->
|
||||||
|
<div class="flex justify-between items-center border-b border-black/5 dark:border-white/5 pb-2">
|
||||||
|
<span class="text-[9px] font-mono opacity-60 tracking-wider">TEMPLATE {item.id}</span>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mini layout representations -->
|
||||||
|
<div class="flex-grow py-3 flex gap-2">
|
||||||
|
{item.layout === "bento" && (
|
||||||
|
<div class="w-full grid grid-cols-3 gap-1 opacity-40">
|
||||||
|
<div class="col-span-2 h-7 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-7 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-10 bg-current/10 rounded"></div>
|
||||||
|
<div class="col-span-2 h-10 bg-current/10 rounded"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.layout === "split" && (
|
||||||
|
<div class="w-full grid grid-cols-2 gap-2 opacity-40">
|
||||||
|
<div class="h-16 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-16 bg-current/20 rounded flex flex-col justify-end p-1"><div class="h-2 w-3/4 bg-current/20 rounded"></div></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.layout === "boxed" && (
|
||||||
|
<div class="w-full border border-current/10 rounded p-1 opacity-40 flex flex-col gap-1">
|
||||||
|
<div class="h-3 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-10 bg-current/10 rounded"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.layout === "asymmetric" && (
|
||||||
|
<div class="w-full flex gap-2 opacity-40">
|
||||||
|
<div class="w-1/3 h-16 bg-current/10 rounded"></div>
|
||||||
|
<div class="w-2/3 h-12 bg-current/15 rounded"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.layout === "single" && (
|
||||||
|
<div class="w-full flex flex-col gap-1.5 opacity-40">
|
||||||
|
<div class="h-4 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-4 bg-current/10 rounded"></div>
|
||||||
|
<div class="h-8 bg-current/10 rounded"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom info -->
|
||||||
|
<div class="flex justify-between items-end pt-2 border-t border-black/5 dark:border-white/5">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xs font-bold leading-none">{item.name}</h3>
|
||||||
|
<span class="text-[9px] opacity-60 mt-1 block">{item.style}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-black/5 dark:bg-white/5 uppercase">{item.design}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover Preview Overlay Button -->
|
||||||
|
<div class="absolute inset-0 bg-slate-900/60 dark:bg-black/75 backdrop-blur-sm opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all duration-300 z-20">
|
||||||
|
<a href="/templates" class="px-4 py-2 bg-sky-500 hover:bg-sky-400 text-white font-bold text-xs uppercase tracking-wider rounded shadow-md transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
||||||
|
Vorschau
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.marquee-wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-track {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 1.5rem;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
will-change: transform;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-left {
|
||||||
|
animation: scroll-left 45s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover to pause animation */
|
||||||
|
.marquee-wrapper:hover .marquee-track {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll-left {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,4 +1,14 @@
|
|||||||
---
|
---
|
||||||
|
import '@fontsource/inter/300.css';
|
||||||
|
import '@fontsource/inter/400.css';
|
||||||
|
import '@fontsource/inter/500.css';
|
||||||
|
import '@fontsource/inter/600.css';
|
||||||
|
import '@fontsource/inter/700.css';
|
||||||
|
import '@fontsource/space-grotesk/400.css';
|
||||||
|
import '@fontsource/space-grotesk/500.css';
|
||||||
|
import '@fontsource/space-grotesk/600.css';
|
||||||
|
import '@fontsource/space-grotesk/700.css';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
@@ -16,11 +26,6 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
|
|||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Inline script to set dark/light mode before page renders -->
|
<!-- Inline script to set dark/light mode before page renders -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
(function() {
|
(function() {
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
|
|||||||
import Navbar from '../components/Navbar.astro';
|
import Navbar from '../components/Navbar.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
|
import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
|
||||||
|
import TemplateMarquee from '../components/TemplateMarquee.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
||||||
@@ -12,6 +13,9 @@ import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
|
|||||||
{/* Clean, modular Hero and Liquid Glass section */}
|
{/* Clean, modular Hero and Liquid Glass section */}
|
||||||
<HeroAndLiquidGlass />
|
<HeroAndLiquidGlass />
|
||||||
|
|
||||||
|
<!-- Infinite Template Marquee Ticker -->
|
||||||
|
<TemplateMarquee />
|
||||||
|
|
||||||
<!-- Contact section (separate, clean layout) -->
|
<!-- Contact section (separate, clean layout) -->
|
||||||
<section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
|
<section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
|
||||||
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px] transition-opacity duration-300"></div>
|
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px] transition-opacity duration-300"></div>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Navbar from '../components/Navbar.astro';
|
import Navbar from "../components/Navbar.astro";
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from "../components/Footer.astro";
|
||||||
import { FaArrowLeft, FaEye, FaDesktop } from 'react-icons/fa';
|
import { FaArrowLeft, FaEye, FaDesktop } from "react-icons/fa";
|
||||||
|
|
||||||
// List of 20 design templates showcasing maximum diversity in color, structure, and style
|
// List of 20 design templates showcasing maximum diversity in color, structure, and style
|
||||||
const templates = [
|
const templates = [
|
||||||
@@ -17,7 +17,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#D97706]",
|
accentColor: "bg-[#D97706]",
|
||||||
badgeClass: "bg-[#D97706]/10 text-[#D97706]",
|
badgeClass: "bg-[#D97706]/10 text-[#D97706]",
|
||||||
layoutPreview: "boxed"
|
layoutPreview: "boxed",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "02",
|
id: "02",
|
||||||
@@ -30,7 +30,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-yellow-500",
|
accentColor: "bg-yellow-500",
|
||||||
badgeClass: "bg-yellow-500/10 text-yellow-400",
|
badgeClass: "bg-yellow-500/10 text-yellow-400",
|
||||||
layoutPreview: "split"
|
layoutPreview: "split",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "03",
|
id: "03",
|
||||||
@@ -43,7 +43,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-orange-500",
|
accentColor: "bg-orange-500",
|
||||||
badgeClass: "bg-orange-500/10 text-orange-400",
|
badgeClass: "bg-orange-500/10 text-orange-400",
|
||||||
layoutPreview: "bento"
|
layoutPreview: "bento",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "04",
|
id: "04",
|
||||||
@@ -56,7 +56,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-emerald-500",
|
accentColor: "bg-emerald-500",
|
||||||
badgeClass: "bg-emerald-500/10 text-emerald-400",
|
badgeClass: "bg-emerald-500/10 text-emerald-400",
|
||||||
layoutPreview: "asymmetric"
|
layoutPreview: "asymmetric",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "05",
|
id: "05",
|
||||||
@@ -69,7 +69,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#C2410C]",
|
accentColor: "bg-[#C2410C]",
|
||||||
badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
|
badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
|
||||||
layoutPreview: "single"
|
layoutPreview: "single",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "06",
|
id: "06",
|
||||||
@@ -82,7 +82,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-blue-800",
|
accentColor: "bg-blue-800",
|
||||||
badgeClass: "bg-blue-800/10 text-blue-800",
|
badgeClass: "bg-blue-800/10 text-blue-800",
|
||||||
layoutPreview: "bento"
|
layoutPreview: "bento",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "07",
|
id: "07",
|
||||||
@@ -95,7 +95,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-orange-600",
|
accentColor: "bg-orange-600",
|
||||||
badgeClass: "bg-orange-600/15 text-orange-400",
|
badgeClass: "bg-orange-600/15 text-orange-400",
|
||||||
layoutPreview: "split"
|
layoutPreview: "split",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "08",
|
id: "08",
|
||||||
@@ -108,7 +108,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#8B5A2B]",
|
accentColor: "bg-[#8B5A2B]",
|
||||||
badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
|
badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
|
||||||
layoutPreview: "boxed"
|
layoutPreview: "boxed",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "09",
|
id: "09",
|
||||||
@@ -121,7 +121,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-amber-500",
|
accentColor: "bg-amber-500",
|
||||||
badgeClass: "bg-amber-500/10 text-amber-400",
|
badgeClass: "bg-amber-500/10 text-amber-400",
|
||||||
layoutPreview: "bento"
|
layoutPreview: "bento",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "10",
|
id: "10",
|
||||||
@@ -134,7 +134,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-emerald-700",
|
accentColor: "bg-emerald-700",
|
||||||
badgeClass: "bg-emerald-700/10 text-emerald-800",
|
badgeClass: "bg-emerald-700/10 text-emerald-800",
|
||||||
layoutPreview: "asymmetric"
|
layoutPreview: "asymmetric",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "11",
|
id: "11",
|
||||||
@@ -147,7 +147,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#1E3A8A]",
|
accentColor: "bg-[#1E3A8A]",
|
||||||
badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
|
badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
|
||||||
layoutPreview: "single"
|
layoutPreview: "single",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "12",
|
id: "12",
|
||||||
@@ -160,7 +160,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#B45309]",
|
accentColor: "bg-[#B45309]",
|
||||||
badgeClass: "bg-[#B45309]/10 text-[#B45309]",
|
badgeClass: "bg-[#B45309]/10 text-[#B45309]",
|
||||||
layoutPreview: "boxed"
|
layoutPreview: "boxed",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "13",
|
id: "13",
|
||||||
@@ -173,7 +173,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-purple-600",
|
accentColor: "bg-purple-600",
|
||||||
badgeClass: "bg-purple-600/10 text-purple-400",
|
badgeClass: "bg-purple-600/10 text-purple-400",
|
||||||
layoutPreview: "split"
|
layoutPreview: "split",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "14",
|
id: "14",
|
||||||
@@ -186,7 +186,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-orange-500",
|
accentColor: "bg-orange-500",
|
||||||
badgeClass: "bg-orange-500/10 text-orange-500",
|
badgeClass: "bg-orange-500/10 text-orange-500",
|
||||||
layoutPreview: "asymmetric"
|
layoutPreview: "asymmetric",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "15",
|
id: "15",
|
||||||
@@ -199,7 +199,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-zinc-900",
|
accentColor: "bg-zinc-900",
|
||||||
badgeClass: "bg-zinc-950/10 text-zinc-900",
|
badgeClass: "bg-zinc-950/10 text-zinc-900",
|
||||||
layoutPreview: "split"
|
layoutPreview: "split",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "16",
|
id: "16",
|
||||||
@@ -212,7 +212,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-emerald-600",
|
accentColor: "bg-emerald-600",
|
||||||
badgeClass: "bg-emerald-600/10 text-emerald-700",
|
badgeClass: "bg-emerald-600/10 text-emerald-700",
|
||||||
layoutPreview: "single"
|
layoutPreview: "single",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "17",
|
id: "17",
|
||||||
@@ -225,7 +225,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-emerald-600",
|
accentColor: "bg-emerald-600",
|
||||||
badgeClass: "bg-emerald-600/10 text-emerald-400",
|
badgeClass: "bg-emerald-600/10 text-emerald-400",
|
||||||
layoutPreview: "boxed"
|
layoutPreview: "boxed",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "18",
|
id: "18",
|
||||||
@@ -238,7 +238,7 @@ const templates = [
|
|||||||
theme: "light",
|
theme: "light",
|
||||||
accentColor: "bg-[#A75D5D]",
|
accentColor: "bg-[#A75D5D]",
|
||||||
badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
|
badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
|
||||||
layoutPreview: "bento"
|
layoutPreview: "bento",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "19",
|
id: "19",
|
||||||
@@ -251,7 +251,7 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-indigo-500",
|
accentColor: "bg-indigo-500",
|
||||||
badgeClass: "bg-indigo-500/10 text-indigo-400",
|
badgeClass: "bg-indigo-500/10 text-indigo-400",
|
||||||
layoutPreview: "bento"
|
layoutPreview: "bento",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "20",
|
id: "20",
|
||||||
@@ -264,159 +264,206 @@ const templates = [
|
|||||||
theme: "dark",
|
theme: "dark",
|
||||||
accentColor: "bg-orange-500",
|
accentColor: "bg-orange-500",
|
||||||
badgeClass: "bg-orange-500/10 text-orange-400",
|
badgeClass: "bg-orange-500/10 text-orange-400",
|
||||||
layoutPreview: "asymmetric"
|
layoutPreview: "asymmetric",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Template-Katalog | N&D i-t SOLUTIONS">
|
<Layout title="Template-Katalog | N&D i-t SOLUTIONS">
|
||||||
<Navbar />
|
<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">
|
<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) -->
|
<!-- 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
|
||||||
<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>
|
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">
|
<div class="max-w-7xl mx-auto relative z-10">
|
||||||
|
|
||||||
<!-- Back Link -->
|
<!-- 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">
|
<a
|
||||||
<FaArrowLeft class="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
|
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
|
Zurück zur Startseite
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<div class="max-w-3xl mb-16">
|
<div class="max-w-3xl mb-16">
|
||||||
<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
|
<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
|
||||||
Die perfekte Struktur für <span class="text-brand-arcticBlue">jeden Betrieb.</span>
|
Die perfekte Struktur für <span class="text-brand-arcticBlue"
|
||||||
|
>jeden Betrieb.</span
|
||||||
|
>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
|
<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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Grid System Container (20 Bento-Kacheln) -->
|
<!-- 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">
|
<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 class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-current/25" />
|
||||||
|
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-current/25" />
|
||||||
|
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-current/25" />
|
||||||
|
|
||||||
{templates.map((tpl) => (
|
{/* Overlay glow for modern style */}
|
||||||
<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`}>
|
<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" />
|
||||||
|
|
||||||
{/* Precision Blueprint Corner Markers */}
|
<div>
|
||||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-current/25"></span>
|
{/* Badge & ID & Status Indicator */}
|
||||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-current/25"></span>
|
<div class="flex items-center justify-between mb-4">
|
||||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-current/25"></span>
|
<div class="flex items-center gap-2">
|
||||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-current/25"></span>
|
<span
|
||||||
|
class={`text-[10px] font-mono font-bold uppercase px-2 py-0.5 rounded ${tpl.badgeClass}`}
|
||||||
{/* 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>
|
{tpl.style}
|
||||||
|
</span>
|
||||||
<div>
|
<span class="relative flex h-2 w-2" title="Vorschau aktiv">
|
||||||
{/* Badge & ID & Status Indicator */}
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
|
||||||
<div class="flex items-center justify-between mb-4">
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
|
||||||
<div class="flex items-center gap-2">
|
</span>
|
||||||
<span class={`text-[10px] font-mono font-bold uppercase px-2 py-0.5 rounded ${tpl.badgeClass}`}>
|
</div>
|
||||||
{tpl.style}
|
<span class="text-xs font-mono opacity-40">#{tpl.id}</span>
|
||||||
</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>
|
</div>
|
||||||
<span class="text-xs font-mono opacity-40">#{tpl.id}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Title & Description */}
|
{/* Title & Description */}
|
||||||
<h3 class="text-lg font-bold tracking-tight mb-2 line-clamp-2 leading-snug">
|
<h3 class="text-lg font-bold tracking-tight mb-2 line-clamp-2 leading-snug">
|
||||||
{tpl.name}
|
{tpl.name}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div class="space-y-1 mt-3">
|
<div class="space-y-1 mt-3">
|
||||||
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
|
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
|
||||||
<span class="font-bold">Stil:</span> {tpl.design}
|
<span class="font-bold">Stil:</span> {tpl.design}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
|
<div class="flex items-center gap-1.5 text-[11px] opacity-70">
|
||||||
<span class="font-bold">Farbe:</span> {tpl.colorScheme}
|
<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>
|
||||||
</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>
|
||||||
</div>
|
|
||||||
|
|
||||||
</a>
|
{/* 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 class="rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
<div class="rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
<div class="col-span-2 rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tpl.layoutPreview === "split" && (
|
||||||
|
<div class="w-full flex gap-1">
|
||||||
|
<div
|
||||||
|
class={`w-1/2 rounded ${tpl.accentColor} opacity-70`}
|
||||||
|
/>
|
||||||
|
<div class="w-1/2 rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
</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 class="w-2/3 rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
</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
|
||||||
|
class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}
|
||||||
|
/>
|
||||||
|
<div class="rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
</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 class="h-2 w-1/2 mx-auto rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
<div class="h-2 w-2/3 mx-auto rounded bg-black/10 dark:bg-white/10" />
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Info Callout -->
|
<!-- Bottom Info Callout -->
|
||||||
<div class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group">
|
<div
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
|
class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group"
|
||||||
<div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
>
|
||||||
|
<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>
|
<div>
|
||||||
<h3 class="text-xl font-bold mb-2">Ihr Wunsch-Design ist nicht dabei?</h3>
|
<h3 class="text-xl font-bold mb-2">
|
||||||
<p class="text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
|
Ihr Wunsch-Design ist nicht dabei?
|
||||||
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.
|
</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>
|
</p>
|
||||||
</div>
|
</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">
|
<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
|
Design besprechen
|
||||||
<FaDesktop class="w-3 h-3" />
|
<FaDesktop class="w-3 h-3" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user