Refactor website to use shadcn components

2025-06-28 12:01:43 +00:00
parent 1648e376bf
commit 8c05ad29cb
78 changed files with 3858 additions and 2722 deletions
--- a/frontend/app/about/Section/TeamSection.tsx
+++ b/frontend/app/about/Section/TeamSection.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+
+const team = [
+    {
+        name: 'Thatsaphorn',
+        role: 'Gründer & Entwickler',
+        picture: '',
+    },
+    {
+        name: 'Anonym',
+        role: 'Vertrieb',
+        picture: '',
+    },
+];
+
+const fallbackImage = '/images/team/default-avatar.jpg';
+
+const TeamSection = () => {
+    return (
+        <section
+            className="w-full px-6 sm:px-12 py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
+            <motion.h2
+                className="text-2xl sm:text-3xl font-bold text-left"
+                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-2 md:grid-cols-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-border shadow-md hover:shadow-lg transition-all p-6 bg-muted"
+                        >
+                            <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-border my-4"/>
+
+                            <div className="text-lg font-semibold">{member.name}</div>
+                            <div className="text-sm mt-1 text-muted-foreground">
+                                {member.role}
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TeamSection;