Merge branch 'homepage-refactoring' into 'dev'

Refactor the whole page.

See merge request rheinsw/website!26

components/Home/About/About.tsx

@@ -1,57 +1,81 @@
-import Image from "next/image";
-import React from "react";
+'use client';
+
+import Link from 'next/link';
+import {FiArrowRight} from 'react-icons/fi';
+import {motion} from 'framer-motion';
 
 const About = () => {
-
     return (
-        <div
-            className="pt-24 pb-16 transition-theme"
-            style={{
-                backgroundColor: "var(--secondary-bg)", // Using CSS variable
-                color: "var(--primary-text)", // Ensuring text color follows theme
-                transition: "background-color 0.5s ease, color 0.5s ease", // Smooth transition
-            }}>
-            <h1
-                className="mt-6 text-2xl md:text-3xl capitalize font-bold text-center"
-                data-aos="fade-up"
-                style={{color: "var(--primary-text)"}}>
-                Über Uns
-            </h1>
-            <div className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-10">
-                <div className="flex flex-col items-center" data-aos="fade-up" data-aos-anchor-placement="top-center">
-                    <Image
-                        src="/images/About_Picture.png"
-                        alt="image"
-                        width={400}
-                        height={400}
-                        className="object-contain"
+        <section className="relative w-full py-24 bg-[var(--secondary-bg)] transition-theme">
+            <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"
+                        style={{color: 'var(--primary-text)'}}
+                        initial={{opacity: 0, y: 20}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5}}
+                    >
+                        Ü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}}
                     />
-                </div>
-                <div className="p-0">
-                    <p
-                        className="mt-4 text-sm font-medium leading-[2rem]"
-                        data-aos="fade-up"
-                        data-aos-delay="200"
-                        style={{color: "var(--secondary-text)"}}
+
+                    {/* Text */}
+                    <div className="p-0">
+                        <motion.p
+                            className="text-base md:text-lg leading-relaxed text-[var(--secondary-text)] max-w-4xl"
+                            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 und digitale
+                            Services 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-[var(--secondary-text)] max-w-4xl"
+                            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. Unsere
+                            Lösungen sind
+                            intuitiv, effizient – und genau auf deine Anforderungen zugeschnitten.
+                        </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}}
                     >
-                        Wir sind Rhein Software Development – ein Team, das sich auf maßgeschneiderte Softwarelösungen
-                        und zuverlässige digitale Services spezialisiert hat. Unser Fokus liegt darauf, Software zu
-                        entwickeln, die nicht nur funktioniert, sondern langfristig überzeugt.
-                    </p>
-                    <p
-                        className="mt-4 text-sm font-medium leading-[2rem]"
-                        data-aos="fade-up"
-                        data-aos-delay="200"
-                        style={{color: "var(--secondary-text)"}}
-                    >
-                        Von der ersten Idee bis zur fertigen Anwendung begleiten wir Unternehmen, Startups und
-                        individuelle Projekte mit einer klaren Strategie und einem hohen Anspruch an Qualität. Wir
-                        glauben daran, dass gute Software nicht kompliziert sein muss – sondern effizient, intuitiv und
-                        zukunftssicher.
-                    </p>
+                        <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>
-        </div>
+        </section>
     );
 };