Refactor website to use shadcn components

frontend/app/(root)/sections/TechStack.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+import {techStack} from "@/constant/TechStack";
+
+const TechStack = () => {
+    return (
+        <section className="w-full py-20 bg-background text-foreground transition-colors duration-700 ease-in-out">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    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-muted-foreground"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.3, delay: 0.2}}
+                >
+                    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}/>
+                    ))}
+                </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}/>
+                    ))}
+                </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 bg-muted shadow-md text-foreground"
+        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 text-muted-foreground">{label}</span>
+                </div>
+            ))}
+        </div>
+    </motion.div>
+);
+
+export default TechStack;