112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useTypewriter } from "@/hooks/useTypewriter";
|
|
|
|
interface HeroProps {
|
|
eyebrowText?: string;
|
|
headline1?: string;
|
|
subtext1?: string;
|
|
subtext2?: string;
|
|
cta1Text?: string;
|
|
cta1Href?: string;
|
|
cta2Text?: string;
|
|
cta2Href?: string;
|
|
bgImagePath?: string | null;
|
|
badges?: string[];
|
|
}
|
|
|
|
export default function Hero({
|
|
eyebrowText = "Digital Denken. Lokal Handeln.",
|
|
headline1 = "Ihre IT-Infrastruktur.",
|
|
subtext1 = "Ihr IT-Dienstleister in Crailsheim — egal ob zu Hause oder im Büro. Von Hard- & Software über Netzwerk & WLAN bis hin zu Webseiten & Webanwendungen: Wir lösen Ihre IT-Probleme persönlich und zum fairen Preis.",
|
|
subtext2 = "",
|
|
cta1Text = "Jetzt anfragen",
|
|
cta1Href = "#contact",
|
|
cta2Text = "Unsere Leistungen",
|
|
cta2Href = "#services",
|
|
bgImagePath = null,
|
|
badges = ["Docker", "Proxmox", "Hetzner Cloud", "Linux"],
|
|
}: HeroProps = {}) {
|
|
const words = useMemo(() => ["Professionell.", "DSGVO-konform.", "Zuverlässig.", "Skalierbar."], []);
|
|
const typed = useTypewriter(words);
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 sm:pt-0">
|
|
{/* Background grid */}
|
|
<div className="absolute inset-0 bg-grid opacity-50" />
|
|
|
|
{/* Radial gradient glow */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.10)_0%,transparent_65%)]" />
|
|
|
|
{/* Floating orbs */}
|
|
<div className="absolute top-1/4 left-1/4 w-72 h-72 bg-orange-500/5 rounded-full blur-3xl animate-pulse-slow" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-blue-600/5 rounded-full blur-3xl animate-pulse-slow" />
|
|
|
|
{bgImagePath && (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center opacity-20"
|
|
style={{ backgroundImage: `url(${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/hero-bilder/${bgImagePath})` }}
|
|
/>
|
|
)}
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
{/* Tagline badge */}
|
|
<div className="inline-flex items-center gap-2 px-5 py-2 rounded-full border border-orange-500/40 bg-orange-500/10 text-orange-400 text-xs font-black tracking-[0.3em] uppercase mb-8">
|
|
<span className="w-1.5 h-1.5 bg-orange-400 rounded-full animate-pulse" />
|
|
{eyebrowText}
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white leading-tight mb-6 tracking-tight">
|
|
{headline1}{" "}
|
|
<span className="text-gradient">
|
|
{typed}
|
|
<span className="animate-pulse">|</span>
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subheadline */}
|
|
{subtext1 && (
|
|
<p className="text-xl sm:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
|
|
{subtext1}
|
|
</p>
|
|
)}
|
|
{subtext2 && (
|
|
<p className="text-xl sm:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
|
|
{subtext2}
|
|
</p>
|
|
)}
|
|
|
|
{/* Tech pills */}
|
|
<div className="flex flex-wrap items-center justify-center gap-3 mb-10">
|
|
{badges.map((badge) => (
|
|
<span
|
|
key={badge}
|
|
className="px-3 py-1 rounded-md bg-slate-100 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 text-slate-700 dark:text-slate-300 text-sm font-mono"
|
|
>
|
|
{badge}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href={cta1Href} className="btn-primary w-full sm:w-auto px-8 py-4 text-lg">
|
|
{cta1Text}
|
|
</a>
|
|
<a href={cta2Href} className="btn-secondary w-full sm:w-auto px-8 py-4 text-lg">
|
|
{cta2Text}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-slate-600">
|
|
<span className="text-xs font-bold tracking-[0.3em] uppercase">Scroll</span>
|
|
<div className="w-px h-12 bg-gradient-to-b from-slate-600 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|