From 0f64596d2b17ad13b3b20de6e1af1ccc84e01861 Mon Sep 17 00:00:00 2001
From: Nabeel Boda <needtoexplore01@gmail.com>
Date: Wed, 21 Feb 2024 22:31:21 +0530
Subject: [PATCH] Updated about section

---
 ui/src/components/Gallery.jsx | 163 +++++++++-------------------------
 ui/src/constants.js           |  21 ++---
 ui/src/pages/about.js         |   2 +-
 3 files changed, 53 insertions(+), 133 deletions(-)

diff --git a/ui/src/components/Gallery.jsx b/ui/src/components/Gallery.jsx
index dcce727..7015882 100644
--- a/ui/src/components/Gallery.jsx
+++ b/ui/src/components/Gallery.jsx
@@ -8,132 +8,51 @@ import Image from "next/image";
 import React, { useEffect, useRef, useState } from "react";
 
 export default function Gallery() {
-  const carouselRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const carousel = carouselRef.current;
-      const scrollPosition = carousel.scrollTop;
-      const itemHeight = carousel.clientHeight;
-      const newIndex = Math.round(scrollPosition / itemHeight);
-      setActiveIndex(newIndex);
-    };
-    const carousel = carouselRef.current;
-    carousel.addEventListener("scroll", handleScroll);
-
-    return () => {
-      carousel.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
   return (
-    <>
-      <section className="hidden md:flex">
-        <div className="flex flex-col py-2 gap-2 self-center ">
-          {[1, 2, 3].map((index) => (
-            <button
-              key={index}
-              className={`btn btn-xs ${
-                activeIndex === index - 1 ? "bg-blue-500" : ""
-              }`}
-            >
-              {index}
-            </button>
-          ))}
-        </div>
-
+    <section className=" space-y-16 md:space-y-32 my-14">
+      {TEAM.map((element, index) => (
         <div
-          className="max-h-min md:h-[540px] carousel carousel-vertical "
-          ref={carouselRef}
+          className={`flex flex-col justify-evenly ${
+            index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
+          }`}
+          key={index}
         >
-          {TEAM.map((element, index) => (
-            <div
-              key={index}
-              className="carousel-item h-full flex items-center md:justify-around flex-col md:flex-row"
-            >
-              <div className="w-[40%] flex items-center justify-center">
-                <Image
-                  src={element.img}
-                  className="rounded-2xl"
-                  height={350}
-                  width={350}
-                />
-              </div>
-              <aside className="w-[40%] flex flex-col justify-between lg:py-16 py-4">
-                <div>
-                  <h2 className="text-4xl mb-4 font-medium">{element.name}</h2>
-                  <p className="mb-4   text-gray-600 md:leading-9 text-lg">
-                    {element.description}
-                  </p>
-                </div>
-                <div className="flex self-end gap-4 ">
-                  <a
-                    target="_blank"
-                    href={element.github}
-                    className="hover:text-primary-900 transition-all duration-300"
-                  >
-                    <IconBrandGithub />
-                  </a>
-                  <a
-                    target="_blank"
-                    href={element.linkedin}
-                    className="hover:text-primary-900 transition-all duration-300"
-                  >
-                    <IconBrandLinkedin />
-                  </a>
-                  <a
-                    target="_blank"
-                    href={element.twitter}
-                    className="hover:text-primary-900 transition-all duration-300"
-                  >
-                    <IconBrandTwitter />
-                  </a>
-                </div>
-              </aside>
-            </div>
-          ))}
-        </div>
-      </section>
-      <section className="flex flex-col items-center justify-center md:hidden">
-        {TEAM.map((element, index) => (
-          <div
-            key={index}
-            className="card card-compact w-96 bg-base-100 shadow-xl my-14"
-          >
-            <figure>
-              <img src={element.img} alt={`Picture of ${element.name}`} />
-            </figure>
-            <div className="card-body">
-              <h2 className="card-title">{element.name}</h2>
-              <p>{element.description}</p>
-              <div className="card-actions justify-end">
-                <a
-                  target="_blank"
-                  href={element.github}
-                  className="hover:text-primary-900 transition-all duration-300"
-                >
-                  <IconBrandGithub />
-                </a>
-                <a
-                  target="_blank"
-                  href={element.linkedin}
-                  className="hover:text-primary-900 transition-all duration-300"
-                >
-                  <IconBrandLinkedin />
-                </a>
-                <a
-                  target="_blank"
-                  href={element.twitter}
-                  className="hover:text-primary-900 transition-all duration-300"
-                >
-                  <IconBrandTwitter />
-                </a>
-              </div>
+          <img
+            src={element.img}
+            className="lg:w-[20%] md:w-[30%] aspect-w-4 aspect-h-3 rounded-2xl self-center"
+            alt={`Picture of ${element.name}`}
+          />
+          <div className="md:w-[40%] mt-2 md:mt-0">
+            <h2 className="text-4xl mb-4 font-medium">{element.name}</h2>
+            <p className="mb-4   text-gray-600 md:leading-9 md:text-lg">
+              {element.description}
+            </p>
+            <div className="flex self-end gap-4">
+              <a
+                target="_blank"
+                href={element.github}
+                className="hover:text-primary-900 transition-all duration-300"
+              >
+                <IconBrandGithub />
+              </a>
+              <a
+                target="_blank"
+                href={element.linkedin}
+                className="hover:text-primary-900 transition-all duration-300"
+              >
+                <IconBrandLinkedin />
+              </a>
+              <a
+                target="_blank"
+                href={element.twitter}
+                className="hover:text-primary-900 transition-all duration-300"
+              >
+                <IconBrandTwitter />
+              </a>
             </div>
           </div>
-        ))}
-      </section>
-    </>
+        </div>
+      ))}
+    </section>
   );
 }
diff --git a/ui/src/constants.js b/ui/src/constants.js
index fb3a5c6..2ec8ced 100644
--- a/ui/src/constants.js
+++ b/ui/src/constants.js
@@ -16,31 +16,32 @@ export const SOURCE_LANGUAGES = [
 
 export const TEAM = [
   {
-    name: "Kurain Benoy",
-    img: "/kurain.jpg",
+    name: "Aldrin",
+    img: "/aldrin.jpeg",
     description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
     blanditiis voluptate repellendus unde, tempora perferendis
     quisquam quidem, saepe at autem harum maxime sequi praesentium
     aliquam dignissimos quasi nemo nam obcaecati ratione porro?
     Doloremque commodi, facilis ratione amet qui recusandae? Illo
     nostrum esse tenetur.`,
-    github: "https://github.com/kurianbenoy",
-    linkedin: "https://www.linkedin.com/in/kurianbenoy/",
-    twitter: "https://twitter.com/kurianbenoy2",
+    github: "https://github.com/aldrinjenson",
+    linkedin: "https://www.linkedin.com/in/aldrinjenson/",
+    twitter: "https://twitter.com/aldrinjenson",
   },
   {
-    name: "Aldrin",
-    img: "/aldrin.jpeg",
+    name: "Kurain Benoy",
+    img: "/kurain.jpg",
     description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
     blanditiis voluptate repellendus unde, tempora perferendis
     quisquam quidem, saepe at autem harum maxime sequi praesentium
     aliquam dignissimos quasi nemo nam obcaecati ratione porro?
     Doloremque commodi, facilis ratione amet qui recusandae? Illo
     nostrum esse tenetur.`,
-    github: "https://github.com/aldrinjenson",
-    linkedin: "https://www.linkedin.com/in/aldrinjenson/",
-    twitter: "https://twitter.com/aldrinjenson",
+    github: "https://github.com/kurianbenoy",
+    linkedin: "https://www.linkedin.com/in/kurianbenoy/",
+    twitter: "https://twitter.com/kurianbenoy2",
   },
+
   {
     name: "Nabeel Boda",
     img: "/nabeel.jpeg",
diff --git a/ui/src/pages/about.js b/ui/src/pages/about.js
index 85d0c44..673ef92 100644
--- a/ui/src/pages/about.js
+++ b/ui/src/pages/about.js
@@ -2,7 +2,7 @@ import Gallery from "@components/components/Gallery";
 
 function About() {
   return (
-    <main className="md:mx-28 mx-2">
+    <main className="lg:mx-28 mx-2">
       <section className="mb-7 md:mt-14">
         <h1 className="text-3xl font-medium">Meet Our Team</h1>
         <p className="text-gray-400 md:w-[80ch] leading-7 mt-2">