Expand FAQ with specific GaLaBau topics and update colors
This commit is contained in:
Felix Brabetz
@@ -5,7 +5,7 @@
|
||||
<section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
|
||||
<div class="max-w-4xl mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
|
||||
<span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Klartext</span>
|
||||
<h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
|
||||
</div>
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
<!-- FAQ 1 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 1 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
|
||||
@@ -24,8 +24,8 @@
|
||||
<!-- FAQ 2 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 2 ? null : 2)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Wie läuft die Zusammenarbeit mit Plantlix.de ab?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 2 }"></i>
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie läuft die Zusammenarbeit mit Plantlix.de ab?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 2 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 2" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Vor jedem Projekt machen wir eine Standortanalyse (Boden, Licht, Wasser). Diese Daten fließen in die Plantlix-API ein. Plantlix schlägt uns dann die perfekte pflanzensoziologische Zusammenstellung vor. So garantieren wir, dass dein Garten ohne viel Pflegeaufwand prächtig gedeiht.
|
||||
@@ -35,13 +35,57 @@
|
||||
<!-- FAQ 3 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 3 ? null : 3)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was bedeutet das Schwammstadt-Prinzip für meinen Garten?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 3 }"></i>
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Was bedeutet das Schwammstadt-Prinzip für meinen Garten?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 3 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 3" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Es bedeutet, dass wir deinen Garten so planen, dass er Starkregen wie ein Schwamm aufsaugen kann. Statt das Wasser teuer in die Kanalisation zu leiten, speichern wir es in Rigolen und Mulden. Das spart Abwassergebühren und versorgt deine Pflanzen in Trockenzeiten.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 4 ? null : 4)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie stabil sind Trockenmauern ohne Mörtel?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 4 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 4" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Extrem stabil, wenn man es richtig macht! Wir setzen die Steine mit einer leichten Neigung zum Hang (Anlauf) und hinterfüllen sie mit frostsicherem Schotter. Das Wasser kann abfließen, statt Druck aufzubauen. Das ist echte Handwerkskunst nach VOB/C!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 5 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 5 ? null : 5)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Warum ist der Unterbau bei Pflasterarbeiten so wichtig?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 5 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 5" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Weil der Unterbau 90% der Last trägt! Wir graben tief genug aus, verfüllen mit frostsicherem Material und verdichten Schicht für Schicht. Nur so verhindern wir, dass die Steine nach ein paar Jahren absacken oder durch Frost auffrieren.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 6 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 6 ? null : 6)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wie bleibt ein Schwimmteich ohne Chemie sauber?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 6 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 6" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Durch ein ausgeklügeltes biologisches Gleichgewicht! Wir bauen eine separate Regenerationszone mit speziellen Wasserpflanzen und Zeolith-Filtern. Diese entziehen dem Wasser die Nährstoffe, sodass Algen keine Lebensgrundlage haben. Natur pur!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 7 -->
|
||||
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 7 ? null : 7)">
|
||||
<div class="flex justify-between items-center p-6 select-none">
|
||||
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-emerald-400 transition-colors">Wann ist der beste Zeitpunkt für eine Gartenumgestaltung?</h3>
|
||||
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-emerald-400': faqOpen === 7 }"></i>
|
||||
</div>
|
||||
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 7" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
|
||||
Eigentlich das ganze Jahr über, außer bei starkem Dauerfrost! Der Herbst und das zeitige Frühjahr sind ideal für Pflanzungen, da der Boden feucht ist. Bauliche Maßnahmen (Mauern, Pflaster) können wir fast immer durchführen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user