feat: add section content and style changes

src/components/Cards/TeamMemberCard.jsx

@@ -1,5 +1,3 @@
-import { BsGithub, BsTwitter } from 'react-icons/bs';
-
 const TeamMemberCard = ({ name, role, description, socials, img }) => {
   return (
     <div className='group relative z-0 min-w-[200px] max-w-[260px] overflow-hidden rounded-lg'>
@@ -12,12 +10,11 @@ const TeamMemberCard = ({ name, role, description, socials, img }) => {
         <div className='space-y-4'>
           <p className='font-normal leading-tight'>{description}</p>
           <div className='flex gap-3'>
-            <a href={socials.twitter} className='' aria-label='Twitter link'>
-              <BsTwitter size={20} />
-            </a>
-            <a href={socials.github} className='' aria-label='GitHub link'>
-              <BsGithub size={20} />
-            </a>
+            {socials.map((social, index) => (
+              <a key={index} href={social.link}>
+                <social.icon />
+              </a>
+            ))}
           </div>
         </div>
       </div>

src/components/PageComp/HomePage/Team.jsx

@@ -1,70 +1,123 @@
+import { BsGithub, BsGlobe, BsTwitter, BsYoutube } from 'react-icons/bs';
+
 import TeamMemberCard from '@/components/Cards/TeamMemberCard';
 
-import { adarshImage } from '@/assets/images/team';
+import {
+  aayushImage,
+  adarshImage,
+  bhavyaImage,
+  gauriImage,
+  kunalImage,
+} from '@/assets/images/team';
 
 const teamMembers = [
   {
     name: 'Kunal Kushwaha',
     role: 'Founder',
-    img: adarshImage,
-    description: 'Some description about the team member',
-    socials: {
-      twitter: 'https://twitter.com/kunalstwt',
-      github: 'https://github.com/kunal-kushwaha',
-    },
+    img: kunalImage,
+    description: 'Founder @WeMakeDevs | Currently at @Civo',
+    socials: [
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/kunalstwt',
+        icon: BsTwitter,
+      },
+      {
+        name: 'YouTube',
+        link: 'https://www.youtube.com/KunalKushwaha',
+        icon: BsYoutube,
+      },
+    ],
   },
   {
-    name: 'Ayush Sharma',
+    name: 'Aayush Sharma',
     role: 'Community Manager',
-    img: adarshImage,
-    description: 'Some description about the team member',
-    socials: {
-      twitter: 'https://twitter.com/SuperAayush14',
-      github: 'https://github.com/SuperAayush',
-    },
+    img: aayushImage,
+    description:
+      'Community Manager - @wemakedevs | prev - @mericodev, @ApacheAPISIX | Contributor - @keptnProject, @canonical | Tech Speaker 🎤 |',
+    socials: [
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/SuperAayush14',
+        icon: BsTwitter,
+      },
+      {
+        name: 'GitHub',
+        link: 'https://github.com/SuperAayush',
+        icon: BsGithub,
+      },
+    ],
   },
   {
     name: 'Bhavya Sachdeva',
     role: 'Community Manager',
-    img: adarshImage,
-    description: 'Some description about the team member',
-    socials: {
-      twitter: 'https://twitter.com/bhavya_58',
-      github: 'https://github.com/bhavyastar',
-    },
+    img: bhavyaImage,
+    description:
+      "Community Manager - @wemakedevs | prev - @mericodev, @napptive | Tech Speaker 🎤 | LiFT Scholar'23",
+    socials: [
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/bhavya_58',
+        icon: BsTwitter,
+      },
+      {
+        name: 'GitHub',
+        link: 'https://github.com/bhavyastar',
+        icon: BsGithub,
+      },
+    ],
   },
   {
     name: 'Gauri Maheshwari',
     role: 'Community Manager',
-    img: adarshImage,
-    description: 'Some description about the team member',
-    socials: {
-      twitter: 'https://twitter.com/gaurii09',
-      github: 'https://github.com/gauriimaheshwarii',
-    },
+    img: gauriImage,
+    description:
+      "19 | GSoC'23 @FreeCADNews | Research Intern'23 @iitroorkee | Team @WeMakeDevs | MLSA | Mechanical Engineer | IGDTUW'25 | potterhead⚡️| F1 devotee 🏎",
+    socials: [
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/gaurii09',
+        icon: BsTwitter,
+      },
+      {
+        name: 'GitHub',
+        link: 'https://github.com/gauriimaheshwarii',
+        icon: BsGithub,
+      },
+    ],
   },
   {
     name: 'Adarsh Dubey',
-    role: 'Developer',
+    role: 'Designer & Developer',
     img: adarshImage,
-    description: 'Web Dev, ML Enthusiast and Community Builder.',
-    socials: {
-      twitter: 'https://twitter.com/inclinedadarsh',
-      github: 'https://github.com/inclinedadarsh',
-    },
+    description:
+      'Building web experiences for WeMakeDevs. Working towards ML and AI.',
+    socials: [
+      {
+        name: 'Twitter',
+        link: 'https://twitter.com/inclinedadarsh',
+        icon: BsTwitter,
+      },
+      {
+        name: 'Bento',
+        link: 'https://bento.me/adarsh',
+        icon: BsGlobe,
+      },
+    ],
   },
 ];
 
 const Team = () => {
   return (
-    <div className='layout'>
+    <div className='layout -mt-20 pt-20' id='team'>
+      {/* The `-mt-20 pt-20` are there so that the smooth-scroll scrolls perfectly at the title */}
       <h2 className='h1 text-center'>Meet the team</h2>
       <p className='mx-auto my-3 max-w-3xl text-center text-base font-normal text-white/80'>
         We are the people behind this community. We thank every previous team
         member as well as every contributor. You'll be always at the heart of
         this community!
       </p>
-      <div className='mt-14 flex flex-wrap justify-center gap-10'>
+      <div className='mx-auto mt-14 flex max-w-5xl flex-wrap justify-center gap-14'>
         {teamMembers.map((member, index) => (
           <TeamMemberCard key={index} {...member} />
         ))}

src/pages/content.js

@@ -50,6 +50,10 @@ export const HomePageContent = {
       name: 'Newsroom',
       href: '#content',
     },
+    {
+      name: 'Team',
+      href: '#team',
+    },
     {
       name: 'Join',
       href: '#join',