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

CountUp-Effekt für Zahlen, Navbar-Button wie Hero-Button (dark)

Browse Source
This commit is contained in:
Basilosaurusrex
2026-02-02 10:41:41 +01:00
parent 01102ef3f7
commit a95932cd79
7 changed files with 216 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Hero.tsx
View File

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
import Silk from "@/components/Silk";
import CountUp from "@/components/CountUp";
const SPARKLE_SVG = (
<svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
@@ -88,11 +89,11 @@ const Hero = () => {
</p>
{/* CTA Buttons */}
<div className="flex flex-row flex-nowrap items-center gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<div className="btn-wrapper shrink-0">
<div className="flex flex-col sm:flex-row flex-nowrap items-stretch sm:items-center gap-3 sm:gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<div className="btn-wrapper shrink-0 w-full sm:w-auto">
<button
type="button"
className="btn btn-primary"
className="btn btn-primary w-full sm:w-auto justify-center"
onClick={() => navigate("/kontakt")}
aria-label="Kostenlose Potenzialanalyse sichern"
>
@@ -110,10 +111,10 @@ const Hero = () => {
</div>
</button>
</div>
<div className="btn-wrapper">
<div className="btn-wrapper w-full sm:w-auto">
<button
type="button"
className="btn"
className="btn w-full sm:w-auto justify-center"
onClick={() => navigate("/kontakt")}
aria-label="System-Demo anfordern"
>
@@ -145,7 +146,17 @@ 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">10+</div>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">
<CountUp
from={0}
to={10}
direction="up"
duration={1.2}
className="count-up-text"
startWhen={true}
suffix="+"
/>
</div>
<div className="label-tag">Projekte</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
@@ -153,7 +164,17 @@ const Hero = () => {
<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="stat-number text-4xl md:text-5xl text-foreground mb-2">
<CountUp
from={0}
to={99.9}
direction="up"
duration={1.5}
className="count-up-text"
startWhen={true}
suffix="%"
/>
</div>
<div className="label-tag">Systemverfügbarkeit</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>