feat: TeamMembersSection

package.json

@@ -13,6 +13,7 @@
         "prepare": "husky"
     },
     "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",

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,21 @@
+import SectionTitle from "@/components/ui/SectionTitle";
+import { teamMembersData } from "./data";
+import TeamMemberCard from "./TeamMemberCard";
+import AnimateWrapper from "@/components/AnimateWrapper";
+
+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>
+        </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 />
         </>
     );
 };

src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+            className,
+        )}
+        {...props}
+    />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        {...props}
+    />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            className,
+        )}
+        {...props}
+    />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/styles/index.css

@@ -52,3 +52,15 @@
         @apply bg-clip-text text-transparent bg-gradient-to-r from-[#F869B6] to-[#D34CD9];
     }
 }
+
+/* debug utils */
+
+.d {
+    border: 1px solid red;
+}
+.dd {
+    border: 1px solid yellow;
+}
+.ddd {
+    border: 1px solid green;
+}