89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import {VerticalTimeline, VerticalTimelineElement} from 'react-vertical-timeline-component';
|
||
import {FaRocket, FaLightbulb, FaCode, FaPaperPlane} from 'react-icons/fa';
|
||
import 'react-vertical-timeline-component/style.min.css';
|
||
import {motion} from 'framer-motion';
|
||
|
||
const steps = [
|
||
{
|
||
title: 'Kick-Off & Strategie',
|
||
description:
|
||
'In einem gemeinsamen Auftakt klären wir deine Ziele, Zielgruppen und Herausforderungen. Daraus entsteht ein strukturierter Plan als Basis für alles Weitere.',
|
||
icon: <FaRocket/>,
|
||
},
|
||
{
|
||
title: 'Konzept & Inhalte',
|
||
description:
|
||
'Wir erarbeiten eine klare Struktur und passende Inhalte – abgestimmt auf deine Botschaft und deine Nutzer. So entsteht ein roter Faden für Design und Umsetzung.',
|
||
icon: <FaLightbulb/>,
|
||
},
|
||
{
|
||
title: 'Design & Entwicklung',
|
||
description:
|
||
'Wir gestalten ein modernes Design und setzen es technisch um. Durch regelmäßige Feedback-Schleifen bist du jederzeit im Prozess eingebunden.',
|
||
icon: <FaCode/>,
|
||
},
|
||
{
|
||
title: 'Go-Live',
|
||
description:
|
||
'Nach erfolgreichen Tests geht dein Projekt live. Auch danach begleiten wir dich weiter – für einen reibungslosen Betrieb und mögliche Weiterentwicklungen.',
|
||
icon: <FaPaperPlane/>,
|
||
},
|
||
];
|
||
|
||
const ProcessSection = () => {
|
||
return (
|
||
<section id="process" className="w-full py-24 bg-background text-foreground">
|
||
<div className="max-w-6xl px-6 md:px-10 mx-auto">
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-1"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4}}
|
||
>
|
||
Unser Prozess
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
<VerticalTimeline
|
||
lineColor="#eab308"
|
||
animate={true}
|
||
|
||
>
|
||
{steps.map((step, idx) => (
|
||
<VerticalTimelineElement
|
||
key={idx}
|
||
contentStyle={{
|
||
background: 'hsl(var(--muted))',
|
||
color: 'hsl(var(--foreground))',
|
||
border: '1px solid hsl(var(--border))',
|
||
}}
|
||
contentArrowStyle={{borderRight: '7px solid hsl(var(--muted))'}}
|
||
iconStyle={{
|
||
background: '#eab308',
|
||
color: '#fff',
|
||
}}
|
||
icon={step.icon}
|
||
>
|
||
<h3 className="text-xl font-semibold">{step.title}</h3>
|
||
<p className="text-muted-foreground mt-2">{step.description}</p>
|
||
</VerticalTimelineElement>
|
||
))}
|
||
</VerticalTimeline>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default ProcessSection;
|