feat(ui): add animated horizontal process steps
This commit is contained in:
DanielS
155
shop/components/ProcessSteps.tsx
Normal file
155
shop/components/ProcessSteps.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
interface Step {
|
||||||
|
number: string
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const steps: Step[] = [
|
||||||
|
{
|
||||||
|
number: '1',
|
||||||
|
title: 'Kunde wählen',
|
||||||
|
description: 'Gewünschten Kunden auswählen, der die Lizenz erhalten soll.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: '2',
|
||||||
|
title: 'Lizenz wählen',
|
||||||
|
description: 'Gewünschte Lizenzen für den Kunden auswählen und die Bestellung abschließen.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: '3',
|
||||||
|
title: 'Live gehen',
|
||||||
|
description: 'Nach dem Erhalt der Lizenz direkt live gehen und durchstarten.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: {},
|
||||||
|
visible: {
|
||||||
|
transition: {
|
||||||
|
delayChildren: 0.2,
|
||||||
|
staggerChildren: 0.35
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const stepVariants = {
|
||||||
|
hidden: {
|
||||||
|
opacity: 0,
|
||||||
|
y: 20
|
||||||
|
},
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
type: 'spring' as const,
|
||||||
|
stiffness: 70,
|
||||||
|
damping: 16
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProcessSteps() {
|
||||||
|
return (
|
||||||
|
<section className="w-full py-16 px-4 relative z-10">
|
||||||
|
<div className="container max-w-5xl mx-auto flex flex-col items-center">
|
||||||
|
{/* Section Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: '-80px' }}
|
||||||
|
transition={{ type: 'spring' as const, stiffness: 60, damping: 15 }}
|
||||||
|
className="text-center space-y-3 mb-16 max-w-2xl"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
|
||||||
|
Wie funktioniert die Bereitstellung?
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400 text-base sm:text-lg leading-relaxed">
|
||||||
|
In nur drei einfachen Schritten richten Sie CASPOS Lizenzen für Ihre Kunden ein.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Horizontale Timeline */}
|
||||||
|
<div className="relative w-full">
|
||||||
|
{/* Basis-Linie exakt zwischen Schritt 1 und 3 */}
|
||||||
|
<div className="hidden md:block absolute top-6 left-[16.6%] right-[16.6%] h-[2px] bg-white/10 z-0 rounded-full" />
|
||||||
|
|
||||||
|
{/* Animierte, aufgeladene Linie (sky-500) */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ scaleX: 0 }}
|
||||||
|
whileInView={{ scaleX: 1 }}
|
||||||
|
viewport={{ once: true, margin: '-50px' }}
|
||||||
|
transition={{
|
||||||
|
duration: 1.5,
|
||||||
|
ease: 'easeInOut',
|
||||||
|
delay: 0.2
|
||||||
|
}}
|
||||||
|
className="hidden md:block absolute top-6 left-[16.6%] right-[16.6%] h-[2px] bg-sky-500 origin-left z-0 rounded-full shadow-[0_0_12px_rgba(14,165,233,0.8)]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 3 Schritte Nebeneinander */}
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: '-50px' }}
|
||||||
|
className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6 w-full relative z-10"
|
||||||
|
>
|
||||||
|
{steps.map((step, index) => {
|
||||||
|
const isLiveStep = index === 2
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={step.number}
|
||||||
|
variants={stepVariants}
|
||||||
|
className="group flex flex-col items-center text-center space-y-4 cursor-pointer relative"
|
||||||
|
>
|
||||||
|
{/* Nummer im runden Kreis auf der Linie */}
|
||||||
|
<div className="relative">
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.15 }}
|
||||||
|
transition={{ type: 'spring' as const, stiffness: 300, damping: 20 }}
|
||||||
|
className="w-12 h-12 rounded-full bg-slate-950 border-2 border-slate-700 text-slate-300 font-extrabold text-lg flex items-center justify-center group-hover:border-sky-400 group-hover:text-sky-400 group-hover:bg-slate-900 group-hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] transition-all duration-300 z-10 relative"
|
||||||
|
>
|
||||||
|
{step.number}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Pulsierender Ziel-Ring bei Schritt 3 */}
|
||||||
|
{isLiveStep && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 1.6 }}
|
||||||
|
className="absolute inset-0 rounded-full border-2 border-emerald-400/60 pointer-events-none animate-ping"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text-Inhalt zentriert ohne Boxen-Hintergrund */}
|
||||||
|
<div className="space-y-2 max-w-[280px]">
|
||||||
|
<h3 className="text-xl font-bold text-white group-hover:text-sky-400 transition-colors duration-300 flex items-center justify-center gap-2">
|
||||||
|
{step.title}
|
||||||
|
{isLiveStep && (
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||||
|
LIVE
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
{step.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user