Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4

See merge request rheinsw/website!31

components/About/AboutContent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Section from "@/components/Section";
+import AboutHero from "@/components/About/Section/AboutHero";
+import AboutTimeline from "@/components/About/Section/AboutTimeline";
+import TeamSection from "@/components/About/Section/TeamSection";
+import AboutIntro from "@/components/About/Section/AboutIntro";
+import AboutProcess from "@/components/About/Section/AboutProcess";
+
+const AboutContent = () => {
+    const colors = useThemeColors();
+
+    return (
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <AboutHero/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <AboutIntro/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <AboutProcess/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <AboutTimeline/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <TeamSection/>
+            </Section>
+
+        </motion.div>
+    );
+};
+
+export default AboutContent;

components/About/Section/AboutHero.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React from "react";
+import SmallHero from "@/components/Helper/SmallHero";
+
+const AboutHero = () => {
+    return (
+        <div className="relative overflow-hidden">
+            <SmallHero
+                title="Über uns"
+                subtitle="Digitaler Partner für individuelle Softwarelösungen."
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
+        </div>
+    );
+};
+
+export default AboutHero;

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;

components/About/Section/AboutProcess.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import React, {useState} from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const processSteps = [
+    {
+        title: "Beratung",
+        description: (
+            <>
+                In der <strong>Beratungsphase</strong> analysieren wir gemeinsam Ihre Anforderungen und
+                Geschäftsziele. Dabei identifizieren wir Herausforderungen und definieren die Zielsetzung
+                für Ihr Projekt.
+            </>
+        ),
+    },
+    {
+        title: "Planung",
+        description: (
+            <>
+                Wir erarbeiten ein <strong>technisches Konzept</strong> mit klarer Struktur, Meilensteinen und
+                Ressourcenplanung. Eine solide Architektur bildet die Grundlage für ein skalierbares und wartbares
+                System.
+            </>
+        ),
+    },
+    {
+        title: "Entwicklung",
+        description: (
+            <>
+                In iterativen Zyklen setzen wir das Projekt um. Regelmäßige <strong>Feedbackschleifen</strong>&nbsp;
+                sorgen dafür, dass das Ergebnis Ihren Erwartungen entspricht und flexibel angepasst werden kann.
+            </>
+        ),
+    },
+    {
+        title: "Test",
+        description: (
+            <>
+                Durch umfangreiche <strong>Tests und Optimierungen</strong> stellen wir sicher, dass Ihre
+                Anwendung robust, performant und benutzerfreundlich ist – noch vor dem Go-Live.
+            </>
+        ),
+    },
+    {
+        title: "Go-Live",
+        description: (
+            <>
+                Wir begleiten Sie beim <strong>produktiven Einsatz</strong> Ihrer Anwendung und unterstützen Sie
+                auch nach dem Go-Live mit Support und Weiterentwicklungsmöglichkeiten.
+            </>
+        ),
+    },
+];
+
+const AboutProcess: React.FC = () => {
+    const colors = useThemeColors();
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    return (
+        <section className="w-full px-6 sm:px-12 py-20 max-w-6xl mx-auto">
+            <h2
+                className="text-2xl sm:text-3xl font-bold text-left"
+                style={{color: colors.primaryText}}
+            >
+                Unser Prozess
+            </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}}
+            />
+
+            {/* Mobile View: Tab buttons */}
+            <div className="block md:hidden mb-6">
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                    {processSteps.map((step, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => setActiveIndex(idx)}
+                            className={`w-full px-4 py-2 text-sm border rounded-full transition-colors ${
+                                activeIndex === idx
+                                    ? 'bg-blue-600 text-white border-blue-600'
+                                    : 'border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                            }`}
+                        >
+                            {step.title}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Desktop View: 2-column layout */}
+            <div className="hidden md:grid grid-cols-3 gap-8">
+                {/* Left: Step List */}
+                <div className="flex flex-col space-y-4">
+                    {processSteps.map((step, idx) => (
+                        <button
+                            key={idx}
+                            onClick={() => setActiveIndex(idx)}
+                            className={`text-left px-4 py-3 border rounded-lg transition-colors ${
+                                activeIndex === idx
+                                    ? 'border-blue-600 bg-blue-50 dark:bg-gray-800'
+                                    : 'border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'
+                            }`}
+                            style={{color: colors.primaryText}}
+                        >
+                            <span className="font-semibold">{idx + 1}. {step.title}</span>
+                        </button>
+                    ))}
+                </div>
+
+                {/* Right: Step Content */}
+                <div className="md:col-span-2 p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
+                     style={{backgroundColor: colors.primaryBg}}>
+                    <motion.div
+                        key={activeIndex}
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.4}}
+                    >
+                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
+                            {processSteps[activeIndex].title}
+                        </h3>
+                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
+                            {processSteps[activeIndex].description}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+
+            {/* Mobile View: Content Below Tabs */}
+            <div className="block md:hidden">
+                <div className="p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
+                     style={{backgroundColor: colors.primaryBg}}>
+                    <motion.div
+                        key={activeIndex + '-mobile'}
+                        initial={{opacity: 0, y: 10}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.4}}
+                    >
+                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
+                            {activeIndex + 1}. {processSteps[activeIndex].title}
+                        </h3>
+                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
+                            {processSteps[activeIndex].description}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutProcess;

components/About/Section/AboutTimeline.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import React from "react";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const timeline = [
+    {
+        date: "Oktober 2024",
+        title: "Projektgründung",
+        description: "Entwicklung der Idee und erste Umsetzungsschritte – inspiriert durch Technik und Nachhaltigkeit.",
+        current: false,
+    },
+    {
+        date: "Mai 2025",
+        title: "Go-Live",
+        description: "Offizieller Start mit Kundenprojekten und einem umfassenden Full-Service-Angebot.",
+        current: true,
+    },
+];
+
+const AboutTimeline3 = () => {
+    const colors = useThemeColors();
+
+    return (
+        <div className="relative w-full px-6 sm:px-12 py-8 max-w-5xl mx-auto">
+            <h2
+                className="text-2xl sm:text-3xl font-bold mt-10"
+                style={{color: colors.primaryText}}
+            >
+                Von der Idee bis heute
+            </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}}
+            />
+
+            <div className="relative border-l-2 border-gray-300 dark:border-gray-700 ml-6">
+                {timeline.map((item, idx) => (
+                    <motion.div
+                        key={idx}
+                        initial={{opacity: 0, y: 20}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true}}
+                        transition={{duration: 0.5, delay: idx * 0.2}}
+                        className="relative mb-10 pl-12"
+                    >
+                        {/* Timeline dot */}
+                        <div className="absolute left-[-22px] top-0 z-10">
+                            <div
+                                className={`w-10 h-10 rounded-full border-2 flex items-center justify-center bg-white dark:bg-gray-900 ${
+                                    item.current
+                                        ? "border-blue-600"
+                                        : "border-gray-400 dark:border-gray-600"
+                                }`}
+                            >
+                                {item.current && (
+                                    <motion.span
+                                        className="absolute w-10 h-10 rounded-full bg-blue-600 opacity-40"
+                                        animate={{scale: [1, 1.6, 1], opacity: [0.4, 0, 0.4]}}
+                                        transition={{repeat: Infinity, duration: 1.6}}
+                                    />
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Timeline card */}
+                        <motion.div
+                            whileHover={{scale: 1.02, translateX: 4}}
+                            transition={{type: "spring", stiffness: 260, damping: 20}}
+                            className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 cursor-default"
+                        >
+                            <div className="text-sm text-blue-600 font-semibold mb-1">{item.date}</div>
+                            <div
+                                className="text-lg font-bold mb-2"
+                                style={{color: colors.primaryText}}
+                            >
+                                {item.title}
+                            </div>
+                            <div className="text-sm" style={{color: colors.secondaryText}}>
+                                {item.description}
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default AboutTimeline3;

components/About/Section/TeamSection.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from "react";
+import Image from "next/image";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const team = [
+    {
+        name: "Thatsaphorn",
+        role: "Gründer & Entwickler",
+        picture: "",
+    },
+    {
+        name: "Anonym",
+        role: "Vertrieb",
+        picture: "",
+    },
+];
+
+const fallbackImage = "/images/team/default-avatar.jpg";
+
+const TeamSection = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section className="w-full px-6 sm:px-12 py-16 max-w-6xl mx-auto">
+            <motion.h2
+                className="text-2xl sm:text-3xl font-bold text-left"
+                style={{color: colors.primaryText}}
+                initial={{opacity: 0, y: 20}}
+                whileInView={{opacity: 1, y: 0}}
+                viewport={{once: true}}
+                transition={{duration: 0.5}}
+            >
+                Das Team
+            </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}}
+            />
+
+            <div className="flex justify-center">
+                <div
+                    className={`grid gap-8 
+                      grid-cols-1 
+                      sm:grid-cols-${Math.min(team.length, 2)} 
+                      md:grid-cols-${Math.min(team.length, 3)} 
+                      lg:grid-cols-${Math.min(team.length, 4)}`}
+                >
+                    {team.map((member, idx) => (
+                        <motion.div
+                            key={member.name}
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.4, delay: idx * 0.1}}
+                            whileHover={{scale: 1.015}}
+                            className="flex flex-col items-center text-center
+    rounded-xl border border-gray-200 dark:border-gray-700
+    shadow-md hover:shadow-lg transition-all p-6"
+                            style={{backgroundColor: colors.secondaryBg}}
+                        >
+                            <motion.div
+                                whileHover={{scale: 1.05}}
+                                transition={{type: "spring", stiffness: 300, damping: 20}}
+                                className="w-28 h-28 relative mb-4"
+                            >
+                                <Image
+                                    src={member.picture || fallbackImage}
+                                    alt={member.name}
+                                    fill
+                                    sizes="112px"
+                                    className="rounded-full object-cover shadow"
+                                />
+                            </motion.div>
+
+                            <div className="h-px w-8 bg-gray-300 dark:bg-gray-600 my-4"/>
+
+                            <div className="text-lg font-semibold" style={{color: colors.primaryText}}>
+                                {member.name}
+                            </div>
+                            <div className="text-sm mt-1" style={{color: colors.secondaryText}}>
+                                {member.role}
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TeamSection;