feat: extract and integrate clean HeroAndBento component
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 26s
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 26s
This commit is contained in:
DanielS
@@ -2,262 +2,53 @@
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import {
|
||||
FaCheck,
|
||||
FaLaptopCode,
|
||||
FaSearchDollar,
|
||||
FaServer,
|
||||
FaArrowRight,
|
||||
FaEnvelope,
|
||||
FaPhoneAlt
|
||||
} from 'react-icons/fa';
|
||||
import HeroAndBento from '../components/HeroAndBento.astro';
|
||||
---
|
||||
|
||||
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
||||
<Navbar />
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 tactile-grid-bg">
|
||||
<!-- Grid System Container (Bento architecture) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
|
||||
|
||||
<!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
|
||||
<div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300 tactile-noise">
|
||||
{/* Precision Blueprint Corner Markers */}
|
||||
<span class="absolute top-3 left-3 w-2.5 h-2.5 border-t border-l border-brand-arcticBlue/30"></span>
|
||||
<span class="absolute top-3 right-3 w-2.5 h-2.5 border-t border-r border-brand-arcticBlue/30"></span>
|
||||
<span class="absolute bottom-3 left-3 w-2.5 h-2.5 border-b border-l border-brand-arcticBlue/30"></span>
|
||||
<span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-b border-r border-brand-arcticBlue/30"></span>
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
|
||||
Sorglos-Websites für den Mittelstand
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
|
||||
Digitales Sorglos-Paket.<br/>
|
||||
<span class="text-brand-arcticBlue">Für Handwerk & Mittelstand.</span>
|
||||
</h1>
|
||||
<p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
|
||||
Wir bauen, pflegen und hosten Ihre neue Website. Absolut zuverlässig. DSGVO-konform auf deutschen Servern. Ohne Aufwand für Sie.
|
||||
<main>
|
||||
{/* Clean, modular Hero and Bento section (0 KB JS, tactile details) */}
|
||||
<HeroAndBento />
|
||||
|
||||
<!-- Contact section (separate, clean layout) -->
|
||||
<section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
|
||||
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="bg-slate-900/40 backdrop-blur-md border border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise">
|
||||
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<h2 class="text-3xl font-extrabold text-white mb-2 uppercase tracking-tight">Bereit für Ihr Projekt?</h2>
|
||||
<p class="text-zinc-400 text-xs mb-8">
|
||||
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 flex flex-wrap gap-4 relative z-10">
|
||||
<a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
|
||||
Projekt anfragen
|
||||
<FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
<a href="/templates" class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-900/50 backdrop-blur border border-white/10 text-white font-semibold text-xs tracking-wider uppercase rounded hover:scale-[1.02] hover:border-brand-arcticBlue/50 hover:shadow-md transition-all duration-300">
|
||||
Template-Katalog entdecken
|
||||
<FaArrowRight class="w-3 h-3 text-brand-arcticBlue" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
|
||||
<div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt. Keine versteckten Kosten, vollkommen transparent.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1">
|
||||
<span>[ ALL-IN-ONE SOLUTION ]</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
|
||||
<div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Echte, messbare Geschwindigkeit für Ihre Kunden. Optimierter Code, der schnell lädt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<div class="flex items-end justify-between mb-1">
|
||||
<span class="text-[10px] font-mono text-zinc-500">PAGESPEED SCORE</span>
|
||||
<span class="text-emerald-400 font-mono text-sm font-bold">> 95%</span>
|
||||
</div>
|
||||
<div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-emerald-400 h-full w-[96%] transition-all duration-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
|
||||
<div id="services" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div class="max-w-md">
|
||||
<div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
|
||||
<FaLaptopCode class="w-6 h-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Individuelles Design & Entwicklung von Grund auf. Keine billigen Standard-Templates. Hochwertiger Code, der zu Ihrem Handwerksbetrieb passt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto relative z-10">
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Individuelles Konzept
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener, sauberer Code
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Optimiert für Mobilgeräte
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
|
||||
<div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
|
||||
<FaSearchDollar class="w-5 h-5" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Lokale Auffindbarkeit bei Google. Wir sorgen dafür, dass Kunden in Ihrer Region Sie direkt finden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
|
||||
<div id="tech" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">Präzise Werkzeuge</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed mb-6">
|
||||
Wir nutzen modernste, stabile Werkzeuge für maximale Ladegeschwindigkeiten und absolute Ausfallsicherheit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 relative z-10">
|
||||
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Astro Framework</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">React UI</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue/40 transition-colors">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Deutsches Hosting</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
|
||||
<div class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
|
||||
<FaServer class="w-5 h-5" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Sicheres, DSGVO-konformes Hosting auf deutschen Servern. Komplett gewartet inklusive Backups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
|
||||
<div id="concept" class="bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3>
|
||||
<ol class="space-y-4">
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span>
|
||||
|
||||
<form class="space-y-4" onsubmit="event.preventDefault()">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Erstgespräch</h4>
|
||||
<p class="text-[10px] text-zinc-400">Analyse Ihrer Anforderungen.</p>
|
||||
<label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
|
||||
<input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">02</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Design & Code</h4>
|
||||
<p class="text-[10px] text-zinc-400">Programmierung & SEO.</p>
|
||||
<label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
|
||||
<input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">03</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Hosting & Launch</h4>
|
||||
<p class="text-[10px] text-zinc-400">Livegang & Betreuung.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
|
||||
<div id="contact" class="md:col-span-2 bg-brand-darkCard/75 border border-brand-darkBorder hover:border-brand-arcticBlue/50 hover:shadow-md rounded-2xl p-8 sm:p-10 transition-all duration-300 group relative tactile-noise">
|
||||
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
|
||||
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
|
||||
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
|
||||
<h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3>
|
||||
<p class="text-zinc-400 text-xs mb-8">
|
||||
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.
|
||||
</p>
|
||||
|
||||
<form class="space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="name" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Name</label>
|
||||
<input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">E-Mail</label>
|
||||
<input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
|
||||
<label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
|
||||
<textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Nachricht</label>
|
||||
<textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full sm:w-auto px-6 py-3 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
|
||||
Senden
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" class="w-full py-3 bg-brand-arcticBlue text-zinc-950 font-bold text-xs uppercase tracking-wider rounded hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-brand-arcticBlue focus:outline-none">
|
||||
Anfrage senden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user