Added Board Member card with swiperjs

Hooks/useWindowDimension.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable */
+import { useState, useEffect } from "react";
+
+export default function useWindowDimensions() {
+  const hasWindow = typeof window !== "undefined";
+
+  function getWindowDimensions() {
+    const width = hasWindow ? window.innerWidth : null;
+    const height = hasWindow ? window.innerHeight : null;
+    return {
+      width,
+      height,
+    };
+  }
+
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
+  useEffect(() => {
+    if (hasWindow) {
+      function handleResize() {
+        setWindowDimensions(getWindowDimensions());
+      }
+
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [hasWindow]);
+
+  return windowDimensions;
+}

components/Boardmembercard.jsx

@@ -0,0 +1,24 @@
+import Image from "next/future/image";
+
+/* eslint-disable */
+const Boardmembercard = ({ givenName, img, role, color }) => {
+  return (
+    <div className="bg-white opacity-100 z-50 h-[20rem] w-[15rem] rounded-3xl shadow-lg m-4 flex flex-col justify-center items-center">
+      <Image
+        src={img}
+        className="p-6 rounded-full"
+        alt=""
+        width={400}
+        height={400}
+      />
+      <div className="flex flex-col items-center justify-center p-4 pt-0 mb-5 space-x-2">
+        <p className="font-bold text-lg">{givenName}</p>
+        <p style={{ color: color }} className={`text-xl text-center`}>
+          {role}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Boardmembercard;

components/Boardmembers.jsx

@@ -0,0 +1,70 @@
+/* eslint-disable */
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Navigation } from "swiper";
+import Boardmembercard from "./Boardmembercard";
+import useWindowDimensions from "../Hooks/useWindowDimension";
+import data from "../data/Boardmember.json";
+import Link from "next/link";
+
+const Boardmembers = () => {
+  const { width } = useWindowDimensions();
+
+  return (
+    <div className="font-productSans h-full relative w-full flex flex-col space-y-10 mt-10 mb-5">
+      <div className="flex flex-col justify-center items-center space-y-6 text-gray-700 z-10">
+        <h1 className="text-center text-6xl font-bold">The Board</h1>
+        <p className="text-center text-xl">2022-23</p>
+        <p className="text-xl z-50 text-gray-500 text-center max-w-xl md:max-w-2xl">
+          Our Team comprised of g-fuel drinking developers, aesthetic obsessed
+          desginers and managers that love nothing but perfection
+        </p>
+        <div className="bg-urbanFinishing scale-y-[-1] md:h-[40rem] bg-cover h-[26rem] w-full absolute opacity-30 translate-y-[23rem] -z-50">
+          {/* <img src={`/Icons/urban-finishing-tape-1.png`} className="opacity-20 absolute rotate-[25deg] translate-y-80 -z-50" alt="" /> */}
+        </div>
+      </div>
+      <div className="md:m-24 md:ml-44 md:mr-44 ml-2 mr-2 z-50">
+        {/* Card */}
+        <Swiper
+          slidesPerView={width < 1267 ? 1 : 3}
+          spaceBetween={2}
+          navigation={true}
+          mousewheel={true}
+          modules={[Navigation]}
+          className="mySwiper"
+        >
+          {data.map(({ name, image, description, role, color }) => {
+            return (
+              <SwiperSlide className="" key={name}>
+                <Boardmembercard
+                  givenName={name}
+                  img={image}
+                  desc={description}
+                  role={role}
+                  color={color}
+                />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+
+        {/* Card */}
+      </div>
+      <div
+        className="flex justify-center items-center w-full animate-bounce bg-transparent z-50"
+        style={{ marginTop: "3rem" }}
+      >
+        <Link href={`/`}>
+          <img
+            src={`/Icons/down-arrow.png`}
+            className="w-10 h-10 cursor-pointer"
+            alt=""
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Boardmembers;

components/Index.js

@@ -56,7 +56,7 @@ const Index = () => {
           />
         </div>
       </div>
-      <div className="w-10 h-10 m-auto mb-16 animate-bounce">
+      <div className="w-10 h-10 m-auto mb-24 animate-bounce">
         <img src={`/Icons/down-arrow.png`} alt="" />
       </div>
     </div>

components/Vision.jsx

@@ -32,26 +32,25 @@ const Vision = () => {
   return (
     <>
       <div
-        className="font-productSans h-full relative w-full flex flex-col space-y-10 mt-2"
+        className="font-productSans h-full relative w-full flex flex-col mt-2 space-y-6"
         id="vision"
       >
         <img
           src={`/Icons/arabica-323.png`}
-          className="opacity-10 absolute top-0 right-0 md:right-[10rem] -translate-y-[10rem] h-[40rem] w-[40rem] md:h-[55rem] md:w-[55rem]"
+          className="opacity-10 absolute top-0 right-0 md:right-[10rem] -translate-y-[10rem] h-[25rem] w-[25rem] md:h-[40rem] md:w-[40rem]"
           alt=""
         />
-        <div className="flex flex-col justify-center items-center space-y-10 text-gray-600 -translate-y-20">
-          <h1 className="text-center text-6xl  font-bold">Vision</h1>
-          <p className="text-2xl text-center">
-            GDSC VIT Chennai is inspired by the Google <br /> Developer&apos;
-            Family
+        <div className="flex flex-col justify-center items-center ml-7 mr-0 space-y-6 text-gray-600 -translate-y-20">
+          <h1 className="text-center text-6xl font-bold">Vision</h1>
+          <p className="text-2xl text-center max-w-lg md:max-w-2xl">
+            GDSC VIT Chennai is inspired by the Google Developer&apos;Family
           </p>
-          <p className="text-2xl text-center">
+          <p className="text-2xl text-center max-w-lg md:max-w-2xl">
             Our goal is to learn, explore, innovate and create <br /> And also,
             having fun!
           </p>
         </div>
-        <div className="max-w-screen m-auto sm:place-content-start md:space-x-10 lg:gap-0 grid grid-cols-2 sm:grid-cols-4 gap-8 py-8 sm:px-0">
+        <div className="max-w-screen md:m-auto sm:place-content-start md:space-x-10 lg:gap-0 grid grid-cols-2 sm:grid-cols-4 gap-8 ml-10">
           {visions.map(({ id, title, description, classes }) => (
             <div key={id} className="flex flex-col w-[10rem] text-[1.2rem]">
               <div className="my-4">

data/Boardmember.json

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "Fidal Mathew",
+    "image": "https://avatars.githubusercontent.com/u/84982038?v=4",
+    "role": "Open Source Lead",
+    "description": "Web Developer | Learning :)",
+    "github": "https://github.com/FidalMathew",
+    "linkedIn": "https://www.linkedin.com/in/fidalmathew/",
+    "color": "#4b916c"
+  },
+  {
+    "name": "Narayan Subramanian",
+    "image": "https://media-exp1.licdn.com/dms/image/C4D03AQGw1ZZLOexy-Q/profile-displayphoto-shrink_800_800/0/1657260532292?e=1671667200&v=beta&t=2v4GchH7mZCfuAyL92zijo1WQXnaxUe5tK5bD3gCXm4",
+    "role": "Blockchain Lead",
+    "description": "Enthusiastic Web Developer",
+    "github": "",
+    "linkedIn": "https://www.linkedin.com/in/narayan-subramanian/",
+    "color": "#4b916c"
+  },
+  {
+    "name": "Vigya Sharma",
+    "image": "https://media-exp1.licdn.com/dms/image/C4D03AQF_ujtq41alwg/profile-displayphoto-shrink_800_800/0/1659076002033?e=1671667200&v=beta&t=VZQJwKIvcRnyCTZtOPzXd4LtN6QXhqq3oF2SDOHYB9Y",
+    "role": "Marketing Lead",
+    "description": "Web Developer | Learning :)",
+    "github": "",
+    "linkedIn": "linkedin.com/in/vigya-sharma-1540bb217/",
+    "color": "#4b916c"
+  },
+  {
+    "name": "Manas Tiwari",
+    "image": "https://media-exp1.licdn.com/dms/image/C4D03AQG1qGz9YxXtlw/profile-displayphoto-shrink_800_800/0/1655475397913?e=1671667200&v=beta&t=KU8eOxRwG57RqxnFSXzhFPHLQ0mywFerV4qtKSfWrGM",
+    "role": "Competitive Programming Lead",
+    "description": "Enthusiastic Web Developer",
+    "github": "",
+    "linkedIn": "https://www.linkedin.com/in/manas-tiwari-5631a31b6/",
+    "color": "#4b916c"
+  }
+]

data/events.json

@@ -0,0 +1,37 @@
+[
+  {
+    "name": "Revelation",
+    "date": "11th to 14th Nov, 2021",
+    "link": "https://www.google.com/",
+    "type": "new",
+    "img": "icons8-android-os-100.png"
+  },
+  {
+    "name": "Revelation",
+    "date": "11th to 14th Nov, 2021",
+    "link": "https://www.google.com/",
+    "type": "past",
+    "img": "icons8-android-os-100.png"
+  },
+  {
+    "name": "Revelation",
+    "date": "11th to 14th Nov, 2021",
+    "link": "https://www.google.com/",
+    "type": "new",
+    "img": "icons8-android-os-100.png"
+  },
+  {
+    "name": "Crypto Decrypted",
+    "date": "19th Nov, 2021",
+    "link": "https://www.google.com/",
+    "type": "past",
+    "img": "icons8-android-os-100.png"
+  },
+  {
+    "name": "Doorway to Web Development",
+    "date": "26th to 27th Sep, 2021",
+    "link": "https://www.google.com/",
+    "type": "past",
+    "img": "icons8-android-os-100.png"
+  }
+]

next.config.js

@@ -3,7 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   images: {
-    domains: ["avatars.githubusercontent.com"],
+    domains: ["avatars.githubusercontent.com", "media-exp1.licdn.com"],
   },
 };
 

package.json

@@ -15,7 +15,8 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.4.0"
+    "react-icons": "^4.4.0",
+    "swiper": "^8.4.4"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.12",

pages/index.js

@@ -3,14 +3,14 @@ import Navbar from "../components/Navbar";
 import Index from "../components/Index";
 import Vision from "../components/Vision";
 import Footer from "../components/Footer";
+import Boardmembers from "../components/Boardmembers";
 export default function Home() {
   return (
     <div>
-      {/* <div className="sticky top-0"> */}
       <Navbar />
-      {/* </div> */}
       <Index />
       <Vision />
+      <Boardmembers />
       <Footer />
     </div>
   );