Merge branch 'homepage-refactoring' into 'dev'

Homepage Refactoring - Pt .3

See merge request rheinsw/website!28

components/Home/Sections/TechStack.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+import {useThemeColors} from "@/utils/useThemeColors";
+
+const techStack = {
+    row1: [
+        {
+            category: 'Programmiersprachen & Frameworks – Backend',
+            items: [
+                {id: 'java', label: 'Java'},
+                {id: 'dart', label: 'Dart'},
+                {id: 'kotlin', label: 'Kotlin'},
+                {id: 'spring', label: 'Spring'},
+            ],
+        },
+        {
+            category: 'Programmiersprachen & Frameworks – Frontend',
+            items: [
+                {id: 'html', label: 'HTML'},
+                {id: 'css', label: 'CSS'},
+                {id: 'bootstrap', label: 'Bootstrap'},
+                {id: 'nextjs', label: 'Next.js'},
+                {id: 'typescript', label: 'TypeScript'},
+                {id: 'flutter', label: 'Flutter'},
+            ],
+        },
+    ],
+    row2: [
+        {
+            category: 'Betriebssysteme',
+            items: [
+                {id: 'macos', label: 'macOS'},
+                {id: 'debian', label: 'Debian'},
+                {id: 'ubuntu', label: 'Ubuntu'},
+            ],
+        },
+        {
+            category: 'Version Control & Collaboration',
+            items: [
+                {id: 'gitlab', label: 'GitLab'},
+                {id: 'outline', label: 'Outline'},
+            ],
+        },
+        {
+            category: 'DevOps & Infrastruktur',
+            items: [
+                {id: 'gitlab-ci', label: 'GitLab CI'},
+                {id: 'docker', label: 'Docker'},
+                {id: 'proxmox', label: 'Proxmox'},
+            ],
+        },
+    ],
+};
+
+const TechStack = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section
+            className="w-full py-20 transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.secondaryBg}}
+        >
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto" style={{color: colors.primaryText}}>
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
+                >
+                    Technologien
+                </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}}
+                />
+
+                <motion.p
+                    className="text-sm md:text-base mb-10 transition-colors duration-700 ease-in-out"
+                    style={{color: colors.secondaryText}}
+                >
+                    Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
+                </motion.p>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    {techStack.row1.map((group, index) => (
+                        <TechCard key={group.category} group={group} delay={index * 0.2} colors={colors}/>
+                    ))}
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                    {techStack.row2.map((group, index) => (
+                        <TechCard key={group.category} group={group} delay={index * 0.2 + 0.4} colors={colors}/>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+const TechCard = ({
+                      group,
+                      delay,
+                      colors,
+                  }: {
+    group: { category: string; items: { id: string; label: string }[] };
+    delay: number;
+    colors: ReturnType<typeof useThemeColors>;
+}) => (
+    <motion.div
+        className="p-4 rounded-lg border shadow-md transition-colors duration-700 ease-in-out"
+        style={{
+            backgroundColor: colors.primaryBg,
+            borderColor: colors.primaryBg,
+            color: colors.primaryText,
+        }}
+        initial={{opacity: 0, y: 20}}
+        whileInView={{opacity: 1, y: 0}}
+        whileHover={{scale: 1.03, boxShadow: '0 10px 20px rgba(0,0,0,0.1)'}}
+        viewport={{once: true}}
+        transition={{duration: 0.4, delay}}
+    >
+        <h3 className="text-base font-semibold mb-4">{group.category}</h3>
+        <div className="grid grid-cols-3 gap-3">
+            {group.items.map(({id, label}) => (
+                <div key={id} className="flex flex-col items-center text-center">
+                    <Image src={`/images/svg/${id}.svg`} alt={label} width={32} height={32} className="object-contain"/>
+                    <span className="text-[10px] mt-1 transition-colors duration-700 ease-in-out"
+                          style={{color: colors.secondaryText}}>
+            {label}
+          </span>
+                </div>
+            ))}
+        </div>
+    </motion.div>
+);
+
+export default TechStack;