Merge pull request #839 from WeMakeDevs/team

feat: add Team section in the website

src/assets/images/team/index.js

@@ -0,0 +1,7 @@
+import aayushImage from './aayush.webp';
+import adarshImage from './adarsh.webp';
+import bhavyaImage from './bhavya.webp';
+import gauriImage from './gauri.webp';
+import kunalImage from './kunal.webp';
+
+export { aayushImage, adarshImage, bhavyaImage, gauriImage, kunalImage };

src/components/Cards/TeamMemberCard.jsx

@@ -0,0 +1,25 @@
+const TeamMemberCard = ({ name, role, description, socials, img }) => {
+  return (
+    <div className='group relative z-0 min-w-[200px] max-w-[260px] overflow-hidden rounded-lg'>
+      <img src={img} alt={name} className='z-0' />
+      <div className='bg-team-card absolute left-0 top-[75%] z-10 flex h-full flex-col justify-between p-6 transition-[top] group-hover:top-0'>
+        <div className=''>
+          <h3 className='text-white'>{name}</h3>
+          <p className='font-medium text-blue-300'>{role}</p>
+        </div>
+        <div className='space-y-4'>
+          <p className='font-normal leading-tight'>{description}</p>
+          <div className='flex gap-3'>
+            {socials.map((social, index) => (
+              <a key={index} href={social.link}>
+                <social.icon />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamMemberCard;

src/components/PageComp/HomePage/Team.jsx

@@ -0,0 +1,129 @@
+import { BsGithub, BsGlobe, BsTwitter, BsYoutube } from 'react-icons/bs';
+
+import TeamMemberCard from '@/components/Cards/TeamMemberCard';
+
+import {
+  aayushImage,
+  adarshImage,
+  bhavyaImage,
+  gauriImage,
+  kunalImage,
+} from '@/assets/images/team';
+
+const teamMembers = [
+  {
+    name: 'Kunal Kushwaha',
+    role: 'Founder',
+    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: 'Aayush Sharma',
+    role: 'Community Manager',
+    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: 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: 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: 'Designer & Developer',
+    img: adarshImage,
+    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 -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='mx-auto mt-14 flex max-w-5xl flex-wrap justify-center gap-14'>
+        {teamMembers.map((member, index) => (
+          <TeamMemberCard key={index} {...member} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Team;

src/components/PageComp/HomePage/index.js

@@ -5,5 +5,6 @@ export { default as Events } from './Events';
 export { default as Hero } from './Hero';
 export { default as Mentorship } from './Mentorship';
 export { default as Stats } from './Stats';
+export { default as Team } from './Team';
 export { default as Testimonials } from './Testimonials';
 export { default as Work } from './Work';

src/pages/HomePage.jsx

@@ -5,6 +5,7 @@ import {
   Courses,
   Events,
   Hero,
+  Team,
 } from '@/components/PageComp/HomePage';
 
 import { HomePageContent } from './content';
@@ -18,6 +19,7 @@ const HomePage = () => {
         <Courses />
         <Events />
         <Content />
+        <Team />
       </Layout>
       <Banner />
     </>

src/pages/content.js

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

src/styles/tailwind.css

@@ -111,6 +111,15 @@ html {
   body::-webkit-scrollbar-thumb {
     background-color: #ffffff50;
   }
+
+  .bg-team-card {
+    background: linear-gradient(
+      to bottom,
+      #00000000 0%,
+      #00000059 10%,
+      #000000 100%
+    );
+  }
 }
 @layer utilities {
   /* Class to highlight the text */