add: member & project type, member card component and grid for team s…

…ection.

src/app/globals.css

@@ -12,4 +12,5 @@
 
 html, body {
   background-color: #070707;
+  overflow-x: hidden;
 }

src/components/member-card.tsx

@@ -0,0 +1,41 @@
+import { MemberType } from "@/utils/types";
+import Image from "next/image";
+
+interface MemberCardProps {
+  member: MemberType;
+}
+
+const MemberCard = ({ member }: MemberCardProps) => {
+  return ( 
+    <div 
+      className="flex flex-1 flex-col gap-2 min-w-40"
+    >
+      <div className="relative w-full overflow-hidden aspect-square bg-black">
+        {member.image ? (
+          <Image 
+            src={`/img/${member.image}`} 
+            width={0}
+            height={0}
+            sizes="100%"
+            alt={member.name}
+            className="object-cover w-full h-full" 
+          />
+        ) : (
+          <Image 
+            src="/img/dino-gray.svg" 
+            width={200}
+            height={200}
+            alt={member.name}
+            className="absolute bottom-0 left-1/2 -translate-x-1/2"
+          />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <span className="text-2xl uppercase text-gray-50">{member.name}</span>
+        <span className="text-gray-400">{member.position}</span>
+      </div>
+    </div>
+   );
+}
+
+export default MemberCard;

src/components/project.tsx

@@ -2,16 +2,13 @@
 
 import { useMediaQuery } from "@/hooks/use-media-query";
 import cn from "@/utils/function";
+import { ProjectType } from "@/utils/types";
 import { motion } from "framer-motion";
 import Image from "next/image";
 import { useState } from "react";
 
 interface ProjectProps {
-  project: {
-    name: string;
-    date: string;
-    image: string;
-  };
+  project: ProjectType;
   index: number;
 }
 

src/components/sections/team.tsx

@@ -1,6 +1,6 @@
-import Image from "next/image";
 import Arrow from "../arrow";
 import H2 from "../heading2";
+import MemberCard from "../member-card";
 
 const members = [
   {
@@ -20,6 +20,8 @@ const members = [
   },
 ]
 
+
+
 const TeamSection = () => {
   return ( 
     <div className="w-full max-w-[1700px] mx-auto mt-80 px-5 lg:px-10">
@@ -29,44 +31,16 @@ const TeamSection = () => {
         <H2>
           Our team
         </H2>
-        <div className="flex items-center gap-2 max-sm:mt-4">
+        <div className="flex items-center gap-2 max-sm:my-4">
           <Arrow color={50} />
           <span className="uppercase text-lg ">
             Meet the team
           </span>
         </div>
       </div>
-      <div className="flex items-center gap-5 sm:mt-12 flex-wrap">
+      <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-5 sm:mt-12 flex-wrap">
         {members.map((member, index) => (
-          <div 
-            key={`member:${index}`} 
-            className="flex flex-1 flex-col gap-2 min-w-56"
-          >
-            <div className="relative w-full overflow-hidden aspect-square bg-black">
-              {member.image ? (
-                <Image 
-                  src={`/img/${member.image}`} 
-                  width={0}
-                  height={0}
-                  sizes="100%"
-                  alt={member.name}
-                  className="object-cover w-full h-full" 
-                />
-              ) : (
-                <Image 
-                  src="/img/dino-gray.svg" 
-                  width={200}
-                  height={200}
-                  alt={member.name}
-                  className="absolute bottom-0 left-1/2 -translate-x-1/2"
-                />
-              )}
-            </div>
-            <div className="flex flex-col">
-              <span className="text-2xl uppercase text-gray-50">{member.name}</span>
-              <span className="text-gray-400">{member.position}</span>
-            </div>
-          </div>
+          <MemberCard key={index} member={member} />
         ))}
       </div>
     </div>

src/utils/types.ts

@@ -0,0 +1,11 @@
+export type MemberType = {
+  name: string;
+  position: string;
+  image: string;
+};
+
+export type ProjectType = {
+    name: string,
+    date: string,
+    image: string,
+}