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

feat: add template showcase callout and seo-friendly faq section

Browse Source
This commit is contained in:
DanielS
2026-07-18 03:39:22 +02:00
parent 99890c3c6a
commit cdedd5157e
1 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/HeroAndLiquidGlass.astro
View File

@@ -182,6 +182,90 @@
</div>
</div>
<!-- Showcase-Link Callout -->
<div class="mt-16 text-center reveal">
<div class="inline-flex flex-col sm:flex-row items-center gap-4 p-4 rounded-2xl border border-white/80 dark:border-white/5 bg-white/30 dark:bg-slate-950/20 backdrop-blur-md shadow-sm">
<span class="text-xs text-slate-600 dark:text-zinc-400">
Sie suchen Inspiration? Entdecken Sie unsere 20 maßgeschneiderten Design-Vorlagen.
</span>
<a href="/templates" class="inline-flex items-center gap-2 text-xs font-bold text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-white transition-colors duration-300">
Design-Vorlagen ansehen
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- FAQ Sektion im Hybrid Liquid Glass Look -->
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16">
<h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">
Häufig gestellte Fragen
</h2>
<p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
Alles Wissenswerte zu unserem Sorgenfrei-Paket. Angebot auf Anfrage, jede Anfrage unverbindlich.
</p>
</div>
<div class="space-y-4 reveal">
<!-- 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">
<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">
<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">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</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">
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>
</details>
<!-- 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">
<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">
<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">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</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">
Selbstverständlich. Wir übernehmen den kompletten Domain-Umzug für Sie. Ihre Website bleibt währenddessen unterbrechungsfrei erreichbar.
</div>
</details>
<!-- 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">
<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">
<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">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</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">
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>
</details>
<!-- 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">
<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">
<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">
<svg class="w-5 h-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</span>
</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">
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>
</details>
</div>
</div>
</section>