Frontend migration

frontend/components/About/Section/AboutIntro.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import {useThemeColors} from '@/utils/useThemeColors';
+
+const About = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section
+            className="relative w-full py-24 transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
+        >
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <div className="flex flex-col">
+                    {/* Text */}
+                    <div className="p-0 max-w-4xl">
+                        <motion.p
+                            className="text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.2}}
+                        >
+                            Wir sind Rhein-Software – Ihr Partner für digitale Produkte und individuelle
+                            Softwarelösungen.
+                            Wir entwickeln skalierbare, wartbare Anwendungen mit klarem Fokus: Technik, die begeistert –
+                            von der Architektur bis zum Go-Live.
+                        </motion.p>
+
+                        <motion.p
+                            className="mt-6 text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
+                            style={{color: colors.secondaryText}}
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.5, delay: 0.3}}
+                        >
+                            Ob Start-up oder etabliertes Unternehmen: Wir begleiten Sie mit einem flexiblen Netzwerk,
+                            klarer Kommunikation und hohem Qualitätsanspruch – agil, lösungsorientiert und nah am
+                            Projekt.
+                        </motion.p>
+                    </div>
+
+                    {/* CTA Button */}
+                    <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}}
+                    >
+                        {/*<Link href="/about">*/}
+                        {/*    <button*/}
+                        {/*        className="flex items-center gap-2 bg-blue-700 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-full shadow-lg transition-all"*/}
+                        {/*    >*/}
+                        {/*        Mehr über uns <FiArrowRight size={18}/>*/}
+                        {/*    </button>*/}
+                        {/*</Link>*/}
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;