Refactor website to use shadcn components

frontend/app/(root)/sections/ProcessSection.tsx

@@ -0,0 +1,88 @@
+'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;