feat: add template showcase callout and seo-friendly faq section
This commit is contained in:
DanielS
@@ -182,6 +182,90 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user