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

Homepage refactoring pt4 See merge request rheinsw/website!31
2025-04-20 09:42:40 +00:00
parent 5e1bca87a3
commit f2221815c8
24 changed files with 797 additions and 211 deletions
--- a/components/About/Section/TeamSection.tsx
+++ b/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;