JUSN/Webklar
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

hiehr

Browse Source
This commit is contained in:
JUSN
2026-01-30 22:13:17 +01:00
parent 593df01f0b
commit bd07af10b5
10 changed files with 496 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/Hero.tsx
View File

@@ -1,8 +1,39 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
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 minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
const seconds = totalSeconds % 60;
const years = Math.floor(days / 365);
const remainingDays = days % 365;
if (years > 0) {
setCompanyAge(`${years}J ${remainingDays}T ${hours}h ${minutes}m ${seconds}s`);
} else {
setCompanyAge(`${days}T ${hours}h ${minutes}m ${seconds}s`);
}
};
calculateAge();
const interval = setInterval(calculateAge, 1000); // Update every second
return () => clearInterval(interval);
}, []);
return (
<section className="relative min-h-screen flex flex-col justify-center bg-background overflow-hidden pt-20">
{/* Subtle grid lines */}
@@ -16,25 +47,29 @@ const Hero = () => {
</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-8 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
Wir gestalten<br />
<span className="text-muted-foreground">digitale</span><br />
Erlebnisse
<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>
{/* Subtitle */}
<p className="text-lg md:text-xl text-muted-foreground max-w-xl mb-12 animate-fade-in" style={{ animationDelay: '0.4s' }}>
Maßgeschneiderte Webentwicklung für Unternehmen, die sich von der Masse abheben wollen. Strategie, Design & Entwicklung aus einer Hand.
{/* 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>
{/* Kurztext */}
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mb-8 animate-fade-in" style={{ animationDelay: '0.4s' }}>
Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Abläufen. Wir ersetzen Chaos durch Struktur und bauen Ihnen eine digitale Infrastruktur, die Zeit spart, Fehler reduziert und Wachstum planbar macht.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<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"
>
Projekt starten
Kostenlose Potenzialanalyse sichern
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
@@ -43,9 +78,14 @@ const Hero = () => {
variant="outline"
className="btn-outline rounded-full px-8 py-6 text-base font-medium"
>
Projekte ansehen
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>
@@ -54,20 +94,20 @@ const Hero = () => {
<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">50+</div>
<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">8+</div>
<div className="label-tag">Jahre Erfahrung</div>
<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">40+</div>
<div className="label-tag">Kunden</div>
<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">100%</div>
<div className="label-tag">Zufriedenheit</div>
<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>