Replaced placeholder data from Teams page and removed unnecessary skewed button from UI

package.json

@@ -24,6 +24,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.5",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
     "vite": "^5.1.0"

src/components/AboutUs/index.jsx

@@ -0,0 +1,172 @@
+import { Link } from "react-router-dom";
+import Marquee from "react-fast-marquee";
+import Card from "@/components/Card";
+
+export default function AboutSection() {
+  const images1 = [
+    {
+      src: "/CodeX-Website/gallery/AIML SESSION/aiml6.jpg",
+      alt: "AIML Session",
+      key: 0,
+    },
+    {
+      src: "/CodeX-Website/gallery/Community Session/cs1.jpg",
+      alt: "Community Session",
+      key: 1,
+    },
+    {
+      src: "/CodeX-Website/gallery/Generative ai session/gas3.jpg",
+      alt: "Generative AI Session",
+      key: 2,
+    },
+    {
+      src: "/CodeX-Website/gallery/HackTober Fest/htf2_1.jpg",
+      alt: "HackTober Fest Session",
+      key: 3,
+    },
+    {
+      src: "/CodeX-Website/gallery/Laser Lock/ll7.jpg",
+      alt: "Laser Lock",
+      key: 4,
+    },
+    {
+      src: "/CodeX-Website/gallery/RUST SESSION/rs1.JPG",
+      alt: "image1-6",
+      key: 5,
+    },
+    {
+      src: "/CodeX-Website/gallery/AIML SESSION/aiml5.jpg",
+      alt: "image1-7",
+      key: 6,
+    },
+  ];
+
+  const images2 = [
+    {
+      src: "/CodeX-Website/gallery/Community Session/cs2.jpg",
+      alt: "Community Session",
+      key: 0,
+    },
+    {
+      src: "/CodeX-Website/gallery/Generative ai session/gas1.jpg",
+      alt: "Gen AI Session",
+      key: 1,
+    },
+    {
+      src: "/CodeX-Website/gallery/HackTober Fest/htf3_1.jpg",
+      alt: "HackTober Fest Session",
+      key: 2,
+    },
+    {
+      src: "/CodeX-Website/gallery/Laser Lock/ll9.jpg",
+      alt: "Laser Lock Event",
+      key: 3,
+    },
+    {
+      src: "/CodeX-Website/gallery/HackTober Fest/htf4_1.jpg",
+      alt: "HackTober Fest Session",
+      key: 4,
+    },
+    {
+      src: "/CodeX-Website/gallery/AIML SESSION/aiml2.jpg",
+      alt: "AIML Session",
+      key: 5,
+    },
+    {
+      src: "/CodeX-Website/gallery/AIML SESSION/aiml3.jpg",
+      alt: "AIML Session",
+      key: 6,
+    },
+  ];
+
+  return (
+    <>
+      <section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
+        <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
+        <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
+        <div className="max-w-full mx-auto px-24 relative z-20">
+          <h1
+            className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
+            style={{
+              WebkitTextStroke: "2px #737373",
+            }}
+          >
+            ABOUT US
+          </h1>
+
+          <div className="mb-16 max-w-full relative">
+            <p className="text-xl md:text-3xl font-poppins font-bold leading-relaxed">
+              <span className="text-text-aboutuslight">
+                Codex is the coding club at{" "}
+              </span>
+              <span className="text-text-aboutusorange">
+                Symbiosis Institute of Technology
+              </span>
+              <span className="text-text-aboutuslight">
+                {" "}
+                that brings together students passionate about technology and
+                programming. Our club is committed to creating an engaging
+                environment{" "}
+              </span>
+              <span className="text-text-aboutusdark">
+                where members can learn, collaborate, and grow their coding
+                expertise through a variety of activities and events.
+              </span>
+            </p>
+            <Link to="/about-us">
+              <button
+                type="button"
+                className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors"
+              >
+                Know More
+              </button>
+            </Link>
+          </div>
+        </div>
+      </section>
+      <div className="relative space-y-8 max-w-full px-0 overflow-hidden">
+        <div className="absolute bottom-96 -right-2 w-24 h-24 bg-white rounded-full opacity-100" />
+        <Marquee
+          gradient
+          gradientColor={[28, 28, 28]}
+          speed={40}
+          className="overflow-hidden w-full"
+        >
+          {images1.map((image) => (
+            <Card
+              key={image.key}
+              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
+              />
+            </Card>
+          ))}
+        </Marquee>
+
+        <Marquee
+          gradient
+          gradientColor={[28, 28, 28]}
+          speed={40}
+          direction="right"
+          className="overflow-hidden w-full"
+        >
+          {images2.map((image) => (
+            <Card
+              key={image.key}
+              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
+              />
+            </Card>
+          ))}
+        </Marquee>
+      </div>
+    </>
+  );
+}

src/components/Card/index.jsx

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+
+export function Card({ children, className }) {
+  return <div className={`rounded-3xl shadow-lg ${className}`}>{children}</div>;
+}
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+Card.defaultProps = {
+  children: null,
+  className: "",
+};
+
+export default Card;

src/pages/Gallery/Gallery.jsx

@@ -105,7 +105,6 @@ const images = [
   },
 ];
 
-
 export default function Gallery() {
   const [modalOpen, setModalOpen] = useState(false);
   const [selectedImageIndex, setSelectedImageIndex] = useState(null);
@@ -124,14 +123,14 @@ export default function Gallery() {
   // Function to navigate to the previous image
   const goToPrevious = () => {
     setSelectedImageIndex((prevIndex) =>
-      prevIndex === 0 ? images.length - 1 : prevIndex - 1
+      prevIndex === 0 ? images.length - 1 : prevIndex - 1,
     );
   };
 
   // Function to navigate to the next image
   const goToNext = () => {
     setSelectedImageIndex((prevIndex) =>
-      prevIndex === images.length - 1 ? 0 : prevIndex + 1
+      prevIndex === images.length - 1 ? 0 : prevIndex + 1,
     );
   };
 

src/pages/Home/index.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import Heading from "@/components/Heading";
 import { CursorVariantContext } from "@/context/CursorVariantProvider";
 import PageTransition from "@/components/PageTransition";
+import AboutSection from "@/components/AboutUs";
 
 function Home() {
   const { setCursorVariantText, setCursorVariantDefault } =
@@ -23,7 +23,7 @@ function Home() {
           </div>
         </div>
       </div>
-      <Heading text="What do we do?" />
+      <AboutSection />
     </PageTransition>
   );
 }

src/pages/Teams/TeamMember.jsx

@@ -3,18 +3,35 @@ import { Link } from "react-router-dom";
 import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
 import GithubIcon from "@/assets/images/Teams/github.svg";
 import InstagramIcon from "@/assets/images/Teams/instagram.svg";
+import SakshamGuptaImage from "@/assets/images/Core/SakshamGupta.jpg";
+import RupaliGangardeImage from "@/assets/images/Core/RupaliGangarde.jpg";
+import SehajSalujaImage from "@/assets/images/Core/SehajSaluja.jpg";
+import PramitSharmaImage from "@/assets/images/Core/PramitSharma.jpg";
+import ShraddhaBhaskarImage from "@/assets/images/Core/ShraddhaBhaskar.jpg";
+import GarretFernandesImage from "@/assets/images/Core/GarretFernandes.jpg";
+import BoscoChanamImage from "@/assets/images/Core/BoscoChanam.jpg";
+
+const images = {
+  1: SakshamGuptaImage,
+  2: RupaliGangardeImage,
+  3: SehajSalujaImage,
+  4: PramitSharmaImage,
+  5: ShraddhaBhaskarImage,
+  6: GarretFernandesImage,
+  7: BoscoChanamImage,
+};
 
 function TeamMember({ member }) {
-  const { name, position, image, description, linkedin, instagram, github } =
-    member;
+  const { name, position, description, linkedin, instagram, github, id } = member;
+  const image = images[id];
 
   return (
     <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
       <div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
         <img
           src={image}
           alt={name}
-          className="w-32 h-32 rounded-full mx-auto"
+          className="w-32 h-32 rounded-full mx-auto object-cover"
         />
         <h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
           {name}
@@ -60,11 +77,11 @@ TeamMember.propTypes = {
   member: PropTypes.shape({
     name: PropTypes.string.isRequired,
     position: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     linkedin: PropTypes.string.isRequired,
     instagram: PropTypes.string.isRequired,
     github: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
   }).isRequired,
 };
 

src/pages/Teams/index.jsx

@@ -1,5 +1,5 @@
 import TeamMember from "@/pages/Teams/TeamMember";
-import SkewButton from "@/components/SkewButton";
+// import SkewButton from "@/components/SkewButton";
 import Heading from "@/components/Heading/index";
 import teamMembersData from "./teamsdata.json";
 import PageTransition from "@/components/PageTransition";
@@ -21,7 +21,7 @@ function Teams() {
             <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
               {teamMembers}
             </div>
-            <SkewButton text="SEE ALL" link="/all-members" className="mt-16" />
+            {/* <SkewButton text="SEE ALL" link="/all-members" className="mt-16" /> */}
           </div>
         </div>
       </div>