feat: TeamMembersSection (#35)

Co-authored-by: Zig Blathazar <[email protected]>

package.json

@@ -13,13 +13,15 @@
         "prepare": "husky"
     },
     "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.2",
         "@hookform/resolvers": "^3.10.0",
         "@radix-ui/react-slot": "^1.1.1",
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.15.0",
         "lucide-react": "^0.469.0",
+        "motion": "^11.16.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",

src/components/pages/Home/TeamMembers/TeamMemberCard.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/Button";
+import { TeamMembersCardProps } from "./data";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+const TeamMemberCard = ({
+    avatar,
+    role,
+    name,
+    nickname,
+    followLink,
+}: TeamMembersCardProps) => {
+    return (
+        <div className="flex flex-col gap-3 justify-center align-middle items-center text-center">
+            <Avatar className="w-10/12 h-auto mix-blend-luminosity">
+                <AvatarImage src={avatar.src} alt={avatar.alt} />
+                <AvatarFallback>{name}</AvatarFallback>
+            </Avatar>
+            <div>
+                <div className="text-xs font-robotoMono">{role}</div>
+                <div className="gradient-text">{name}</div>
+            </div>
+            <a href={followLink} className="font-robotoMono">
+                <Button
+                    className="text-xs"
+                    size={"sm"}
+                >{`Follow ${nickname}`}</Button>
+            </a>
+        </div>
+    );
+};
+
+export default TeamMemberCard;

src/components/pages/Home/TeamMembers/data.tsx

@@ -0,0 +1,82 @@
+import { ImageT } from "@/@types/global";
+
+export type TeamMembersCardProps = {
+    avatar: ImageT;
+    role: string;
+    name: string;
+    nickname: string;
+    followLink: string;
+};
+
+export const teamMembersData: TeamMembersCardProps[] = [
+    {
+        avatar: {
+            src: "/images/team-members/1.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/2.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/3.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/4.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/5.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/6.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+    {
+        avatar: {
+            src: "/images/team-members/7.png",
+            alt: "Lindsey Dokidis",
+        },
+        role: "Developer",
+        name: "Lindsey Dokidis",
+        nickname: "Lindsey",
+        followLink: "#",
+    },
+];

src/components/pages/Home/TeamMembers/index.tsx

@@ -0,0 +1,33 @@
+import SectionTitle from "@/components/ui/SectionTitle";
+import { teamMembersData } from "./data";
+import TeamMemberCard from "./TeamMemberCard";
+import AnimateWrapper from "@/components/AnimateWrapper";
+import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
+import { cn } from "@/lib/utils";
+
+const TeamMembersSection = () => {
+    return (
+        <section className="space-y-[84px] mt-48 w-full">
+            <SectionTitle className="">Meet the JellyFish team</SectionTitle>
+            <AnimateWrapper delay={0.4}>
+                <div className="flex justify-between gap-4 ">
+                    {teamMembersData.map((service, key) => (
+                        <TeamMemberCard {...service} key={key} />
+                    ))}
+                </div>
+            </AnimateWrapper>
+            <AnimatedGridPattern
+                numSquares={30}
+                maxOpacity={0.1}
+                duration={3}
+                repeatDelay={1}
+                className={cn(
+                    "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
+                    "inset-x-0 inset-y-[70%] h-[30%] skew-y-0 opacity-50",
+                )}
+            />
+        </section>
+    );
+};
+
+export default TeamMembersSection;

src/components/pages/Home/index.tsx

@@ -1,11 +1,13 @@
 import HeroSection from "./HeroSection";
 import ServicesSection from "./Services";
+import TeamMembersSection from "./TeamMembers";
 
 export const HomePage = () => {
     return (
         <>
             <HeroSection />
             <ServicesSection />
+            <TeamMembersSection />
         </>
     );
 };