Archived
107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import CountUp from "@/components/CountUp";
|
|
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
|
|
import PixelBlast from "@/components/PixelBlast";
|
|
|
|
const Process = () => {
|
|
const steps = [
|
|
{
|
|
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: 2,
|
|
title: "Konzept & Design",
|
|
description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
|
|
},
|
|
{
|
|
number: 3,
|
|
title: "Entwicklung",
|
|
description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
|
|
},
|
|
{
|
|
number: 4,
|
|
title: "Launch & Support",
|
|
description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="process" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-secondary/20 relative">
|
|
{/* PixelBlast animated background */}
|
|
<div className="absolute inset-0 z-0 w-full h-full">
|
|
<PixelBlast
|
|
variant="circle"
|
|
pixelSize={3}
|
|
color="#5b5b5b"
|
|
patternScale={7.75}
|
|
patternDensity={0.7}
|
|
pixelSizeJitter={2}
|
|
enableRipples={false}
|
|
rippleSpeed={0.4}
|
|
rippleThickness={0.12}
|
|
rippleIntensityScale={1.5}
|
|
liquid={false}
|
|
liquidStrength={0.12}
|
|
liquidRadius={1.2}
|
|
liquidWobbleSpeed={5}
|
|
speed={0.3}
|
|
edgeFade={0.5}
|
|
transparent
|
|
/>
|
|
</div>
|
|
{/* TextHoverEffect */}
|
|
<div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
|
|
<TextHoverEffect text="Ablauf" />
|
|
</div>
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
{/* Section Header */}
|
|
<div className="mb-4">
|
|
<div className="label-tag mb-4">So arbeiten wir</div>
|
|
</div>
|
|
|
|
<div className="max-w-4xl">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={step.number}
|
|
className="group flex gap-8 md:gap-12 pb-16 last:pb-0 border-l border-border pl-8 md:pl-12 relative"
|
|
>
|
|
{/* Line dot */}
|
|
<div className="absolute -left-[5px] top-0 w-[10px] h-[10px] rounded-full bg-background border-2 border-border group-hover:border-foreground transition-colors" />
|
|
|
|
{/* Number */}
|
|
<div className="hidden md:block">
|
|
<span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
|
|
<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">
|
|
<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>
|
|
<p className="text-muted-foreground leading-relaxed max-w-lg">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Process;
|