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

128
src/components/CountUp.tsx Normal file
View File

@@ -0,0 +1,128 @@
import { useInView, useMotionValue, useSpring } from "motion/react";
import { useCallback, useEffect, useRef } from "react";
interface CountUpProps {
to: number;
from?: number;
direction?: "up" | "down";
delay?: number;
duration?: number;
className?: string;
startWhen?: boolean;
separator?: string;
suffix?: string;
prefix?: string;
padMinLength?: number;
onStart?: () => void;
onEnd?: () => void;
}
export default function CountUp({
to,
from = 0,
direction = "up",
delay = 0,
duration = 2,
className = "",
startWhen = true,
separator = "",
suffix = "",
prefix = "",
padMinLength,
onStart,
onEnd,
}: CountUpProps) {
const ref = useRef<HTMLSpanElement>(null);
const containerRef = useRef<HTMLSpanElement>(null);
const motionValue = useMotionValue(direction === "down" ? to : from);
const damping = 20 + 40 * (1 / duration);
const stiffness = 100 * (1 / duration);
const springValue = useSpring(motionValue, {
damping,
stiffness,
});
const isInView = useInView(containerRef, { once: true, margin: "0px" });
const getDecimalPlaces = (num: number) => {
const str = num.toString();
if (str.includes(".")) {
const decimals = str.split(".")[1];
if (decimals && parseInt(decimals, 10) !== 0) {
return decimals.length;
}
}
return 0;
};
const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
const formatValue = useCallback(
(latest: number) => {
if (padMinLength != null) {
const n = Math.round(latest);
return n.toString().padStart(padMinLength, "0");
}
const hasDecimals = maxDecimals > 0;
const options: Intl.NumberFormatOptions = {
useGrouping: !!separator,
minimumFractionDigits: hasDecimals ? maxDecimals : 0,
maximumFractionDigits: hasDecimals ? maxDecimals : 0,
};
let formattedNumber = Intl.NumberFormat("de-DE", options).format(latest);
if (separator) {
formattedNumber = formattedNumber.replace(/\s/g, separator);
}
return formattedNumber;
},
[maxDecimals, separator, padMinLength]
);
useEffect(() => {
if (ref.current) {
ref.current.textContent = formatValue(direction === "down" ? to : from);
}
}, [from, to, direction, formatValue]);
useEffect(() => {
if (isInView && startWhen) {
if (typeof onStart === "function") onStart();
const timeoutId = setTimeout(() => {
motionValue.set(direction === "down" ? from : to);
}, delay * 1000);
const durationTimeoutId = setTimeout(
() => {
if (typeof onEnd === "function") onEnd();
},
delay * 1000 + duration * 1000
);
return () => {
clearTimeout(timeoutId);
clearTimeout(durationTimeoutId);
};
}
}, [isInView, startWhen, motionValue, direction, from, to, delay, onStart, onEnd, duration]);
useEffect(() => {
const unsubscribe = springValue.on("change", (latest) => {
if (ref.current) {
ref.current.textContent = formatValue(latest);
}
});
return () => unsubscribe();
}, [springValue, formatValue]);
return (
<span ref={containerRef} className={className}>
{prefix && <span>{prefix}</span>}
<span ref={ref} />
{suffix && <span>{suffix}</span>}
</span>
);
}

13
src/components/DifferentiationSection.tsx
View File

@@ -1,6 +1,7 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import CountUp from "@/components/CountUp";
const DifferentiationSection = () => {
return (
@@ -15,7 +16,9 @@ const DifferentiationSection = () => {
<div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">01</div>
<div className="text-4xl font-display font-medium text-foreground mb-2">
<CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Alles aus einer Hand
</h3>
@@ -25,7 +28,9 @@ const DifferentiationSection = () => {
</div>
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">02</div>
<div className="text-4xl font-display font-medium text-foreground mb-2">
<CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Systeme statt Inseln
</h3>
@@ -35,7 +40,9 @@ const DifferentiationSection = () => {
</div>
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">03</div>
<div className="text-4xl font-display font-medium text-foreground mb-2">
<CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Langfristige Partnerschaft
</h3>

4
src/components/Header.tsx
View File

@@ -41,7 +41,7 @@ const Header = () => {
<Link to="/kontakt">
<NavbarButton
as="span"
variant="primary"
variant="dark"
>
Kontakt
</NavbarButton>
@@ -84,7 +84,7 @@ const Header = () => {
<Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
<NavbarButton
as="span"
variant="primary"
variant="dark"
className="block w-full text-center"
>
Kontakt

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' }}>

23
src/components/Process.tsx
View File

@@ -1,22 +1,24 @@
import CountUp from "@/components/CountUp";
const Process = () => {
const steps = [
{
number: "01",
number: 1,
title: "Erstgespräch",
description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
},
{
number: "02",
number: 2,
title: "Konzept & Design",
description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
},
{
number: "03",
number: 3,
title: "Entwicklung",
description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
},
{
number: "04",
number: 4,
title: "Launch & Support",
description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
},
@@ -45,13 +47,22 @@ const Process = () => {
{/* Number */}
<div className="hidden md:block">
<span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
{step.number}
<CountUp
from={0}
to={step.number}
direction="up"
duration={1}
padMinLength={2}
startWhen={true}
/>
</span>
</div>
{/* Content */}
<div className="flex-1">
<span className="md:hidden label-tag mb-2 block">{step.number}</span>
<span className="md:hidden label-tag mb-2 block">
<CountUp from={0} to={step.number} duration={1} padMinLength={2} startWhen={true} />
</span>
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
{step.title}
</h3>

2
src/components/ui/resizable-navbar.tsx
View File

@@ -296,7 +296,7 @@ export const NavbarButton = ({
primary:
"bg-[hsl(198,93%,42%)] text-white border border-white/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),inset_0_2px_2px_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)] hover:border-white/40 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),inset_0_2px_2px_rgba(255,255,255,0.25),0_2px_4px_rgba(0,0,0,0.2),0_4px_8px_rgba(0,0,0,0.15)]",
secondary: "bg-transparent shadow-none dark:text-white",
dark: "bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]",
dark: "btn !text-white",
gradient:
"bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]",
};

30
src/index.css
View File

@@ -595,6 +595,19 @@
animation: none;
}
@media (max-width: 639px) {
.btn {
font-size: 0.9rem;
padding: 0.5em 0.9em;
gap: 0.4rem;
}
.btn-svg,
.btn-icon {
width: 20px;
height: 20px;
}
}
/* Shared primary button look – for all blue/primary buttons */
.btn-primary-style {
padding: 0.5em 1.1em;
@@ -685,6 +698,23 @@
line-height: 1;
}
/* Count-up with gradient */
.count-up-text {
background: linear-gradient(135deg, hsl(0 0% 92%) 0%, hsl(0 0% 70%) 50%, hsl(0 0% 92%) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dark .count-up-text {
background: linear-gradient(135deg, hsl(0 0% 98%) 0%, hsl(0 0% 75%) 50%, hsl(0 0% 98%) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Grid line decoration */
.grid-lines {
background-image: