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

style: change hero visual tabs to industry templates

Browse Source
This commit is contained in:
DanielS
2026-07-18 04:48:48 +02:00
parent 11e836fc30
commit 934a047586
1 changed files with 142 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/HeroAndLiquidGlass.astro
View File

@@ -49,43 +49,104 @@
<!-- Textur-Noise -->
<div class="absolute inset-0 opacity-[0.02] dark:opacity-[0.01] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px] transition-opacity duration-300"></div>
<!-- Helle innere Sphären -->
<div class="absolute -top-12 -right-12 w-32 h-32 rounded-full bg-sky-200/35 dark:bg-sky-400/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
<div class="absolute -bottom-16 -left-16 w-40 h-40 rounded-full bg-indigo-200/25 dark:bg-indigo-500/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
<!-- Taktile Details -->
<span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/30"></span>
<span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/30"></span>
<span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/30"></span>
<span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/30"></span>
<!-- Header -->
<div class="flex justify-between items-center relative z-10">
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-500 tracking-widest">SYSTEM STATUS: ACTIVE</span>
<div class="flex gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-red-500/60"></span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-yellow-500/60"></span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-green-500/60"></span>
<!-- Header mit Tabs -->
<div class="relative z-10">
<div class="flex justify-between items-center mb-3">
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-500 tracking-widest">LIVE PREVIEW</span>
<div class="flex gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-red-500/60"></span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-yellow-500/60"></span>
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-green-500/60"></span>
</div>
</div>
<div class="flex gap-1 p-1 bg-black/5 dark:bg-white/5 rounded-xl border border-black/5 dark:border-white/5">
<button data-tab="tab-handwerk" class="hero-tab-btn flex-1 py-1.5 text-[10px] font-bold rounded-lg transition-all bg-sky-600 text-white dark:bg-sky-50 dark:text-zinc-950">Handwerk</button>
<button data-tab="tab-kanzlei" class="hero-tab-btn flex-1 py-1.5 text-[10px] font-bold rounded-lg transition-all text-slate-600 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white">Kanzlei</button>
<button data-tab="tab-solar" class="hero-tab-btn flex-1 py-1.5 text-[10px] font-bold rounded-lg transition-all text-slate-600 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white">Solar</button>
</div>
</div>
<!-- Grafik -->
<div class="my-auto relative z-10 flex flex-col items-center">
<div class="w-24 h-24 rounded-full border border-sky-200 dark:border-white/10 flex items-center justify-center bg-white/60 dark:bg-white/[0.02] relative group-hover:border-sky-400/40 transition-colors duration-500 shadow-inner">
<svg class="w-8 h-8 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
</svg>
<!-- Dynamic Content Area -->
<div class="my-auto relative z-10 w-full">
<!-- Tab: Handwerk -->
<div id="content-tab-handwerk" class="hero-tab-content block">
<div class="relative w-full h-44 rounded-2xl border border-yellow-500/20 bg-gradient-to-br from-zinc-900 to-zinc-950 text-white p-4 flex flex-col justify-between overflow-hidden shadow-inner">
<div class="flex justify-between items-center border-b border-white/5 pb-2">
<span class="text-[9px] font-mono opacity-60 tracking-wider">TEMPLATE 02</span>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-yellow-500/10 text-yellow-400 uppercase font-bold">Split-Screen</span>
</div>
<div class="flex-grow py-3 flex gap-2 opacity-40">
<div class="w-1/2 h-14 bg-white/10 rounded"></div>
<div class="w-1/2 h-14 bg-yellow-500/20 rounded flex flex-col justify-end p-1"><div class="h-2 w-3/4 bg-yellow-500/30 rounded"></div></div>
</div>
<div class="flex justify-between items-end pt-2 border-t border-white/5">
<div>
<h3 class="text-xs font-bold leading-none">Dachdecker Meister</h3>
<span class="text-[9px] opacity-60 mt-1 block">Elegant & Professionell</span>
</div>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-white/5 uppercase">Anthrazit & Gold</span>
</div>
</div>
</div>
<!-- Tab: Kanzlei -->
<div id="content-tab-kanzlei" class="hero-tab-content hidden">
<div class="relative w-full h-44 rounded-2xl border border-emerald-500/20 bg-gradient-to-br from-[#0B0F19] to-[#070A13] text-white p-4 flex flex-col justify-between overflow-hidden shadow-inner">
<div class="flex justify-between items-center border-b border-white/5 pb-2">
<span class="text-[9px] font-mono opacity-60 tracking-wider">TEMPLATE 04</span>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 uppercase font-bold">Asymmetrisch</span>
</div>
<div class="flex-grow py-3 flex gap-2 opacity-40">
<div class="w-1/3 h-14 bg-white/10 rounded"></div>
<div class="w-2/3 h-10 bg-emerald-500/20 rounded"></div>
</div>
<div class="flex justify-between items-end pt-2 border-t border-white/5">
<div>
<h3 class="text-xs font-bold leading-none">Die Kanzlei</h3>
<span class="text-[9px] opacity-60 mt-1 block">Seriös & Clean</span>
</div>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-white/5 uppercase">Smaragd-Grün</span>
</div>
</div>
</div>
<!-- Tab: Solar -->
<div id="content-tab-solar" class="hero-tab-content hidden">
<div class="relative w-full h-44 rounded-2xl border border-orange-500/20 bg-gradient-to-br from-zinc-900 to-black text-zinc-100 p-4 flex flex-col justify-between overflow-hidden shadow-inner">
<div class="flex justify-between items-center border-b border-white/5 pb-2">
<span class="text-[9px] font-mono opacity-60 tracking-wider">TEMPLATE 03</span>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-orange-500/10 text-orange-400 uppercase font-bold">Bento-Grid</span>
</div>
<div class="flex-grow py-3 grid grid-cols-3 gap-1 opacity-40">
<div class="col-span-2 h-6 bg-white/10 rounded"></div>
<div class="h-6 bg-white/10 rounded"></div>
<div class="h-8 bg-orange-500/25 rounded"></div>
<div class="col-span-2 h-8 bg-white/10 rounded"></div>
</div>
<div class="flex justify-between items-end pt-2 border-t border-white/5">
<div>
<h3 class="text-xs font-bold leading-none">Solar & Photovoltaik</h3>
<span class="text-[9px] opacity-60 mt-1 block">Tech & Zukunft</span>
</div>
<span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-white/5 uppercase">Neon-Orange</span>
</div>
</div>
</div>
<span class="text-xs font-mono text-slate-800 dark:text-zinc-300 mt-4 tracking-wider uppercase font-bold">Lighthouse Perfekt</span>
<span class="text-[10px] text-slate-500 font-mono mt-1">Speed Index: 0.4s</span>
</div>
<!-- Footer -->
<div class="relative z-10 border-t border-slate-100 dark:border-white/5 pt-4">
<div class="flex justify-between items-baseline">
<span class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span>
<span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span>
</div>
<!-- Footer mit Button -->
<div class="relative z-10 border-t border-slate-100 dark:border-white/5 pt-4 flex justify-between items-center">
<span class="text-[10px] font-mono text-slate-500 dark:text-zinc-400">TYPE: INTERACTIVE</span>
<a href="/templates" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500/10 dark:hover:bg-sky-500/20 text-white dark:text-sky-400 font-bold text-[10px] uppercase tracking-wider rounded-lg border border-transparent dark:border-sky-500/20 transition-colors">
Alle Templates
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-2.5 h-2.5 fill-current" aria-hidden="true"><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>
@@ -129,7 +190,7 @@
</div>
<!-- Liquid Glass Service Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1: Webdesign -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
@@ -182,6 +243,28 @@
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
</div>
<!-- Card 4: Lighthouse Perfekt -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
<div>
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
<svg class="w-5 h-5 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
</svg>
</div>
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lighthouse Perfekt</h3>
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
Wir programmieren so sauber, dass wir regelmäßig die Bestnote 100/100 im Google Speed Index erzielen.
</p>
</div>
<div class="flex justify-between items-baseline mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
<span class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span>
<span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span>
</div>
</div>
</div>
<!-- Showcase-Link Callout -->
@@ -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');
}
});
});
</script>