feat: Added About Us Component

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,116 @@
+import { Link } from 'react-router-dom';
+import Marquee from "react-fast-marquee";
+import Card from "@/components/Card";
+
+export default function AboutSection() {
+  const images1 = [
+    { src: "src/assets/images/AIML_SESSION/Copy of IMG_20231014_101836310.jpg", id: "image1-1" },
+    { src: "src/assets/images/Community_Session/Copy of 20240224_103259AMByGPSMapCamera.jpg", id: "image1-2" },
+    { src: "src/assets/images/Gen_AI_Session/Copy of 20240203_21709PMByGPSMapCamera.jpg", id: "image1-3" },
+    { src: "src/assets/images/HackTober_Fest/Copy of file_2023-09-30_08.20.07.png", id: "image1-4" },
+    { src: "src/assets/images/Laser_Lock/Copy of Copy of IMG_20230920_124854067.jpg", id: "image1-5" },
+    { src: "src/assets/images/RUST_SESSION/Copy of IMG_1808.JPG", id: "image1-6" },
+    { src: "src/assets/images/AIML_SESSION/Copy of 20231014_101538AMByGPSMapCamera.jpg", id: "image1-7" },
+  ];
+
+  const images2 = [
+    { src: "src/assets/images/Community_Session/Copy of 20240224_104111amByGPSMapCamera.jpg", id: "image2-1" },
+    { src: "src/assets/images/Gen_AI_Session/Copy of 20240203_25946PMByGPSMapCamera.jpg", id: "image2-2" },
+    { src: "src/assets/images/HackTober_Fest/Copy of Technology in Education Technology Presentation in Blue Peach Illustrative Style (LinkedIn Post)-03.jpeg", id: "image2-3" },
+    { src: "src/assets/images/Laser_Lock/Copy of IMG_0579~2.jpg", id: "image2-4" },
+    { src: "src/assets/images/HackTober_Fest/Copy of file_2023-09-30_08.20.27.png", id: "image2-5" },
+    { src: "src/assets/images/AIML_SESSION/Copy of IMG_20231014_102758812.jpg", id: "image2-6" },
+    { src: "src/assets/images/Laser_Lock/Copy of IMG_20230920_150650428.jpg", id: "image2-7" },
+  ];
+
+  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.id}
+              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
+            >
+              <img
+                src={image.src}
+                alt={`Gallery ${image.id}`}
+                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.id}
+              className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
+            >
+              <img
+                src={image.src}
+                alt={`Gallery ${image.id}`}
+                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>
   );
 }

tailwind.config.js

@@ -23,6 +23,9 @@ export default {
         text: {
           light: "#F7F7F7",
           dark: "#232323",
+          aboutuslight: "#B7AB98",
+          aboutusdark: "#595959",
+          aboutusorange: "#E76941"
         },
         gradient: {
           light: "#383838",