feat:add respponsiveness of about us page

src/components/Footer/index.jsx

@@ -0,0 +1,59 @@
+import { useState, useContext } from "react";
+import { Link, useLocation } from "react-router-dom";
+import PropTypes from "prop-types";
+import SymbiosisLogo from "@/assets/images/symbiosis-logo.png";
+import CodexLogo from "@/assets/images/codex-logo.png";
+import { CursorVariantContext } from "@/context/CursorVariantProvider";
+import Heading from "@/components/Heading/index";
+
+function Footer() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const { setCursorVariantNone, setCursorVariantDefault } =
+    useContext(CursorVariantContext);
+
+  const handleLinkClick = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <footer className="bg-primary py-6 mt-8">
+      <div className="container mx-auto">
+        <div className="flex justify-between items-center mb-4">
+          <p className="text-white font-bold">CONNECT WITH US</p>
+          <div className="flex space-x-4">
+            <a href="#" className="text-white hover:text-gray-300">
+              <i className="fab fa-instagram"></i>
+            </a>
+            <a href="#" className="text-white hover:text-gray-300">
+              <i className="fab fa-facebook-f"></i>
+            </a>
+            <a href="#" className="text-white hover:text-gray-300">
+              <i className="fab fa-linkedin-in"></i>
+            </a>
+            <a href="#" className="text-white hover:text-gray-300">
+              <i className="fab fa-github"></i>
+            </a>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <div className="flex items-center space-x-4">
+            <img
+              src={SymbiosisLogo}
+              alt="Symbiosis Institute of Technology"
+              className="h-8"
+            />
+            <p className="text-white font-bold">MADE WITH LOVE BY</p>
+            <img src={CodexLogo} alt="Team Codex" className="h-8" />
+          </div>
+          <p className="text-center text-white">
+            © 2024 CODEX | ALL RIGHTS RESERVED
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/pages/About/index.jsx

@@ -1,129 +1,109 @@
+// import React from "react";
 import Heading from "@/components/Heading/index";
-import Stock1 from "@/assets/images/About/stockimage1.svg";
-import Stock3 from "@/assets/images/About/stockimage3.svg";
-import Stock4 from "@/assets/images/About/stockimage4.svg";
 import Oval from "@/assets/images/About/oval.svg";
 import PageTransition from "../../components/PageTransition";
 
 function About() {
   return (
     <PageTransition>
-      <div className="min-h-screen">
-        <Heading
-          text="ABOUT US"
-          className="my-6"
-          frontTextStyle="text-text-light"
-        />
-        <div className="flex flex-grow flex-wrap items-center overflow-hidden">
-          <div className="container space-y-8">
-            <p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
-              Praesent vestibulum libero non diam consequat euismod. Maecenas
-              purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
-              varius tincidunt. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit.
+      <div className="flex flex-col min-h-screen">
+        {/* About Us Section */}
+        <section className="bg-secondary-dark text-text-light py-8 px-4 md:px-8">
+          <Heading
+            text="ABOUT US"
+            className="mb-8"
+            frontTextStyle="text-text-light"
+          />
+          <div className="max-w-4xl mx-auto">
+            <p className="text-center text-base md:text-lg mb-8">
+              Codex is the coding club at Symbiosis Institute of Technology that
+              brings together students passionate about technology and
+              programming. Our club is committed to creating an engaging
+              environment where members can learn, collaborate, and grow their
+              coding expertise through a variety of activities and events
             </p>
-            <img
-              src={Stock1}
-              alt="Stock1"
-              className="m-h-12 m-w-12 mx-auto space-y-8 rounded-2xl"
-            />
+            <div className="flex flex-col md:flex-row justify-center gap-4">
+              <img
+                src="/CodeX-Website/gallery/Laser Lock/ll4.jpg"
+                alt="About Us 1"
+                className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
+              />
+              <img
+                src="/CodeX-Website/gallery/Laser Lock/ll5.jpg"
+                alt="About Us 2"
+                className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
+              />
+            </div>
           </div>
-        </div>
-        <Heading
-          text="OUR MISSION"
-          className="my-12"
-          frontTextStyle="text-text-light"
-        />
-        <div className="flex flex-grow flex-wrap items-center relative">
-          <div className="container space-y-8">
-            <p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
-              Praesent vestibulum libero non diam consequat euismod. Maecenas
-              purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
-              varius tincidunt. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit.
+        </section>
+
+        {/* Our Vision Section */}
+        <section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
+          <Heading
+            text="OUR VISION"
+            className="mb-8"
+            frontTextStyle="text-primary"
+          />
+          <div className="max-w-4xl mx-auto">
+            <p className="text-center text-base md:text-lg mb-8">
+              To be a leading coding club that inspires students, driving
+              excellence in programming and technology at Symbiosis Institute of
+              Technology and beyond.
             </p>
-            <div className="w-48 h-24 rounded-tl-full rounded-tr-full bg-background-light absolute -bottom-15 right-20">
-              {}
-            </div>
           </div>
-        </div>
-      </div>
-      <div className="bg-background-light min-h-screen relative">
-        <div className="w-48 h-24 rounded-bl-full rounded-br-full bg-primary absolute bottom-15 right-20">
-          {}
-        </div>
-        <Heading
-          text="OUR VISION"
-          className="mt-32"
-          frontTextStyle="text-primary"
-        />
-        <div className="container space-y-8">
-          <p className="p-2 px-64 py-32 space-y-16 mx-auto m-w-12 text-xl text-wrap text-text-dark text-center mt-6">
-            Praesent vestibulum libero non diam consequat euismod. Maecenas
-            purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
-            varius tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit.
-          </p>
-        </div>
-        <div className="width-full">
-          <img src={Oval} alt="Oval" className="absolute bottom-0" />
-        </div>
-      </div>
-      <div className="min-h-screen overflow-hidden">
-        <div className="items-center relative">
+        </section>
+
+        {/* Our Mission Section */}
+        <section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
+          <Heading
+            text="OUR MISSION"
+            className="mb-8"
+            frontTextStyle="text-primary"
+          />
+          <div className="max-w-4xl mx-auto relative z-10">
+            <p className="text-center text-base md:text-lg mb-8">
+              To empower students (from beginner coders to advanced) with coding
+              skills and knowledge through hands-on learning experiences,
+              webinars and workshops fostering a community of innovative
+              thinkers and problem-solvers.
+            </p>
+          </div>
+          <img
+            src={Oval}
+            alt="Oval"
+            className="w-full absolute bottom-0 left-0 z-0"
+          />
+        </section>
+
+        {/* What We Do Section */}
+        <section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
           <Heading
             text="WHAT WE DO?"
-            className="mt-40 space-y-16"
+            className="mb-8"
             frontTextStyle="text-text-light"
           />
-          <div className="w-20 h-20 rounded-full bg-primary absolute -top-10 right-10">
-            {}
-          </div>
-        </div>
-        <div className="flex flex-wrap items-center relative">
-          <div className="space-y-8">
-            <p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-6">
-              Praesent vestibulum libero non diam consequat euismod. Maecenas
-              purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
-              varius tincidunt. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit.
+          <div className="max-w-4xl mx-auto">
+            <p className="text-center text-base md:text-lg mb-12">
+              We organize coding workshops, competitions, collaborative projects
+              and webinars to help students enhance their programming abilities.
+              We also host guest lectures and webinars with industry experts to
+              provide valuable insights and career guidance. Through our
+              activities, we aim to build a supportive coding community.
             </p>
-            <div className="w-12 h-12 rounded-full bg-background-light absolute top-2 left-10">
-              {}
-            </div>
-            <div className="flex flex-row items-center flex-grow px-64 py-8">
+            <div className="flex flex-col md:flex-row justify-center gap-8">
               <img
-                src={Stock1}
-                alt="Stock1"
-                className="h-96 w-96 object-none mx-auto"
+                src="/CodeX-Website/gallery/Community Session/cs4.jpg"
+                alt="What We Do 1"
+                className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
               />
-              <div className="w-24 h-24 rounded-full bg-background-light absolute top-60 right-48">
-                {}
-              </div>
               <img
-                src={Stock3}
-                alt="Stock3"
-                className="h-96 w-96 mx-auto z-0"
+                src="/CodeX-Website/gallery/AIML SESSION/aiml2.jpg"
+                alt="What We Do 2"
+                className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
               />
             </div>
           </div>
-        </div>
-      </div>
-      <div className="min-h-fit my-48 px-8">
-        <div className="flex flex-row">
-          <img src={Stock4} alt="Stock4" className="max-h-96 max-w-96" />
-          <div className="flex flex-wrap px-12 mt-12">
-            <p className="text-5xl text-text-light font-bold max-w-screen font-poppins">
-              OUR VISION
-            </p>
-            <p className="mx-auto max-w-screen text-xl text-wrap text-text-light text-left">
-              Praesent vestibulum libero non diam consequat euismod. Maecenas
-              purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
-              varius tincidunt. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit.
-            </p>
-          </div>
-        </div>
+        </section>
       </div>
     </PageTransition>
   );

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,
     );
   };