Merge branch 'homepage-refactoring' into 'dev'

Refactor the whole page.

See merge request rheinsw/website!26

components/Home/TechStack.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+
+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 = () => {
+    return (
+        <section className="w-full py-20 bg-[var(--secondary-bg)] transition-theme">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-2xl md:text-3xl font-bold mb-1 text-left text-[var(--primary-text)]"
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5}}
+                >
+                    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 text-[var(--secondary-text)]"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
+                </motion.p>
+
+                {/* Row 1 */}
+                <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}/>
+                    ))}
+                </div>
+
+                {/* Row 2 */}
+                <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}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+const TechCard = ({
+                      group,
+                      delay,
+                  }: {
+    group: { category: string; items: { id: string; label: string }[] };
+    delay: number;
+}) => (
+    <motion.div
+        className="p-4 rounded-lg border border-[var(--primary-bg)] bg-[var(--primary-bg)] shadow-md transition-theme"
+        initial={{opacity: 0, y: 20}}
+        whileInView={{opacity: 1, y: 0}}
+        whileHover={{
+            scale: 1.03,
+            boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
+        }}
+        viewport={{once: true}}
+        transition={{duration: 0.4, delay, ease: 'easeOut'}}
+    >
+        <h3 className="text-base font-semibold mb-4 text-[var(--primary-text)]">
+            {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 text-[var(--secondary-text)]">
+            {label}
+          </span>
+                </div>
+            ))}
+        </div>
+    </motion.div>
+);
+
+export default TechStack;