Refactor website to use shadcn components

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

@@ -0,0 +1,86 @@
+'use client';
+
+import {motion} from 'framer-motion';
+
+const About = () => {
+    return (
+        <section
+            id="about"
+            className="relative w-full py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <div className="flex flex-col">
+                    {/* Title */}
+                    <motion.h2
+                        className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.4}}
+                    >
+                        Über uns
+                    </motion.h2>
+
+                    <motion.div
+                        className="w-12 h-[2px] mt-2 mb-6 bg-amber-500"
+                        initial={{opacity: 0, x: -20}}
+                        whileInView={{opacity: 1, x: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.4, delay: 0.1}}
+                    />
+
+                    {/* Text */}
+                    <div className="p-0 max-w-4xl">
+                        <motion.p
+                            className="text-base md:text-lg leading-relaxed text-muted-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.2}}
+                        >
+                            Wir sind Rhein-Software – ein Team, das sich auf individuelle Softwarelösungen spezialisiert
+                            hat. Unsere Anwendungen sind technisch solide, skalierbar und durchdacht – gebaut für
+                            langfristigen Erfolg.
+                        </motion.p>
+
+                        <motion.p
+                            className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.3}}
+                        >
+                            Von der ersten Idee bis zum Go-Live begleiten wir Unternehmen und Startups mit einem
+                            flexiblen Netzwerk, klarer Kommunikation und einem hohen Anspruch an Qualität. Gemeinsam
+                            realisieren wir digitale Produkte, die wirklich passen.
+                        </motion.p>
+
+                        <motion.p
+                            className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.4}}
+                        >
+                            Egal ob App-Entwicklung, interne Tools, Web-Plattformen oder komplexe Schnittstellen – wir
+                            entwickeln Softwarelösungen, die intuitiv, effizient und exakt auf deine Anforderungen
+                            zugeschnitten sind.
+                        </motion.p>
+                    </div>
+
+                    {/* CTA Placeholder */}
+                    <motion.div
+                        className="mt-10 flex justify-end"
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: 0.5}}
+                    >
+                        {/* CTA button can go here */}
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;