79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
// components/Hero.tsx
|
|
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useTypewriter } from "@/hooks/useTypewriter";
|
|
|
|
export default function Hero() {
|
|
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">
|
|
{/* 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" />
|
|
|
|
<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" />
|
|
Digital Denken. Lokal Handeln.
|
|
</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">
|
|
Ihre IT-Infrastruktur.{" "}
|
|
<span className="text-gradient">
|
|
{typed}
|
|
<span className="animate-pulse">|</span>
|
|
</span>
|
|
<br />
|
|
Skalierbar. Zuverlässig.
|
|
</h1>
|
|
|
|
{/* Subheadline */}
|
|
<p className="text-xl sm:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
|
|
Von Docker-Containern über Kubernetes-Cluster bis hin zu
|
|
Proxmox-Virtualisierung auf Hetzner Cloud — wir bringen Ihre
|
|
IT auf das nächste Level.
|
|
</p>
|
|
|
|
{/* Tech pills */}
|
|
<div className="flex flex-wrap items-center justify-center gap-3 mb-10">
|
|
{["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"].map((tech) => (
|
|
<span
|
|
key={tech}
|
|
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"
|
|
>
|
|
{tech}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href="#contact" className="btn-primary w-full sm:w-auto px-8 py-4 text-lg">
|
|
Projekt anfragen
|
|
</a>
|
|
<a href="#services" className="btn-secondary w-full sm:w-auto px-8 py-4 text-lg">
|
|
Services ansehen
|
|
</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>
|
|
);
|
|
}
|