diff --git a/src/components/HeroAndLiquidGlass.astro b/src/components/HeroAndLiquidGlass.astro index f3598b2..c2a1c6b 100644 --- a/src/components/HeroAndLiquidGlass.astro +++ b/src/components/HeroAndLiquidGlass.astro @@ -49,43 +49,104 @@
- -
-
- - -
- SYSTEM STATUS: ACTIVE -
- - - + +
+
+ LIVE PREVIEW +
+ + + +
+
+
+ + +
- -
-
- + +
+ +
+
+
+ TEMPLATE 02 + Split-Screen +
+
+
+
+
+
+
+

Dachdecker Meister

+ Elegant & Professionell +
+ Anthrazit & Gold +
+
+
+ + + + + + - Lighthouse Perfekt - Speed Index: 0.4s
- -
-
- 100 / 100 - BEST SCORE -
+ +
+ TYPE: INTERACTIVE + + Alle Templates + +
@@ -129,7 +190,7 @@
-
+
@@ -182,6 +243,28 @@ Codeschreinerei
+ +
+ + + +
+
+ +
+

Lighthouse Perfekt

+

+ Wir programmieren so sauber, dass wir regelmäßig die Bestnote 100/100 im Google Speed Index erzielen. +

+
+
+ 100 / 100 + BEST SCORE +
+
+
@@ -331,4 +414,37 @@ }); } }); + + // Hero Tab Switcher + const tabButtons = document.querySelectorAll('.hero-tab-btn'); + const tabContents = document.querySelectorAll('.hero-tab-content'); + + tabButtons.forEach(btn => { + btn.addEventListener('click', () => { + const activeTab = btn.getAttribute('data-tab'); + + // Reset buttons + tabButtons.forEach(b => { + b.classList.remove('bg-sky-600', 'text-white', 'dark:bg-sky-500', 'dark:text-zinc-950'); + b.classList.add('text-slate-600', 'dark:text-zinc-400', 'hover:text-slate-900', 'dark:hover:text-white'); + }); + + // Active button + btn.classList.add('bg-sky-600', 'text-white', 'dark:bg-sky-500', 'dark:text-zinc-950'); + btn.classList.remove('text-slate-600', 'dark:text-zinc-400', 'hover:text-slate-900', 'dark:hover:text-white'); + + // Reset contents + tabContents.forEach(c => { + c.classList.add('hidden'); + c.classList.remove('block'); + }); + + // Active content + const targetContent = document.getElementById(`content-${activeTab}`); + if (targetContent) { + targetContent.classList.remove('hidden'); + targetContent.classList.add('block'); + } + }); + });