122 lines
4.8 KiB
TypeScript
122 lines
4.8 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowRight } from "lucide-react";
|
||
import { useState, useEffect } from "react";
|
||
import Silk from "@/components/Silk";
|
||
|
||
const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
|
||
|
||
const Hero = () => {
|
||
const [companyAge, setCompanyAge] = useState("");
|
||
|
||
useEffect(() => {
|
||
const calculateAge = () => {
|
||
const now = new Date();
|
||
const diff = now.getTime() - FOUNDING_DATE.getTime();
|
||
|
||
const totalSeconds = Math.floor(diff / 1000);
|
||
const days = Math.floor(totalSeconds / (60 * 60 * 24));
|
||
const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
|
||
|
||
const years = Math.floor(days / 365);
|
||
const remainingDays = days % 365;
|
||
|
||
if (years > 0) {
|
||
setCompanyAge(`${years}J ${remainingDays}T ${hours}h`);
|
||
} else {
|
||
setCompanyAge(`${days}T ${hours}h`);
|
||
}
|
||
};
|
||
|
||
calculateAge();
|
||
const interval = setInterval(calculateAge, 60 * 60 * 1000); // Update every hour (only days/hours shown)
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
return (
|
||
<section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
|
||
{/* Silk animated background */}
|
||
<div className="absolute inset-0 z-0 w-full h-full">
|
||
<Silk
|
||
speed={3}
|
||
scale={0.5}
|
||
color="#373737"
|
||
noiseIntensity={4
|
||
}
|
||
rotation={0}
|
||
/>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-6 relative z-10">
|
||
<div className="max-w-6xl">
|
||
{/* Label */}
|
||
<div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
|
||
Webentwicklung & Design
|
||
</div>
|
||
|
||
{/* Main Heading - Large Uppercase */}
|
||
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-6 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
|
||
Wir digitalisieren<br />
|
||
<span className="text-muted-foreground">Ihr Unternehmen</span>
|
||
</h1>
|
||
|
||
{/* Subheadline */}
|
||
<p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
|
||
Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
|
||
</p>
|
||
|
||
{/* CTA Buttons */}
|
||
<div className="flex flex-col sm:flex-row gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
|
||
<Link to="/kontakt">
|
||
<Button
|
||
size="lg"
|
||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||
>
|
||
Kostenlose Potenzialanalyse sichern
|
||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||
</Button>
|
||
</Link>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="btn-outline rounded-full px-8 py-6 text-base font-medium"
|
||
>
|
||
System-Demo anfordern
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Trust Line */}
|
||
<p className="text-sm text-muted-foreground/70 uppercase tracking-wider animate-fade-in" style={{ animationDelay: '0.55s' }}>
|
||
Für Unternehmen, die nicht stehen bleiben wollen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Stats Row */}
|
||
<div className="container mx-auto px-6 mt-auto pb-12 pt-20 relative z-10">
|
||
<div className="divider mb-12" />
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||
<div className="animate-fade-in" style={{ animationDelay: '0.6s' }}>
|
||
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">10+</div>
|
||
<div className="label-tag">Projekte</div>
|
||
</div>
|
||
<div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
|
||
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">{companyAge}</div>
|
||
<div className="label-tag">Am Markt</div>
|
||
</div>
|
||
<div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
|
||
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">99,9%</div>
|
||
<div className="label-tag">Systemverfügbarkeit</div>
|
||
</div>
|
||
<div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>
|
||
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">🇩🇪</div>
|
||
<div className="label-tag">Serverstandort in Deutschland</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Hero;
|