diff --git a/src/Components copy/Blog.jsx b/src/Components copy/Blog.jsx
new file mode 100644
index 0000000..c1ac055
--- /dev/null
+++ b/src/Components copy/Blog.jsx	
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import Navbar from "./Navbar";
+import axios from "axios";
+import { useParams } from "react-router-dom";
+import moment from "moment";
+import Footer from "./Footer";
+import { Loader } from "./Loader";
+
+export default function Blog() {
+  const [blog, setBlog] = useState(null);
+  const params = useParams();
+  useEffect(() => {
+    const fetchBlog = async () => {
+      await axios
+        .get(
+          `https://www.googleapis.com/blogger/v3/blogs/3771334625318012412/posts/${
+            params.id
+          }?key=${import.meta.env.VITE_API_KEY}`
+        )
+        .then((res) => setBlog(res.data))
+        .catch((err) => err);
+    };
+    fetchBlog();
+  }, []);
+  return (
+    <>
+      <Navbar />
+      {blog === null ? (
+        <Loader />
+      ) : (
+        <div className="w-100">
+          <div className="col-md-6 offset-md-3 p-3 mt-5 mb-5">
+            <h1 className="mb-4" style={{ fontWeight: 600 }}>
+              {blog.title}
+            </h1>
+            <a
+              className="w-100 d-flex mb-4"
+              target="_blank"
+              href={`${blog.author.url}`}
+              style={{ textDecoration: "none", color: "#000" }}
+            >
+              <h3
+                className="rounded-circle bg-warning d-flex justify-content-center align-items-center me-3"
+                style={{ height: "70px", width: "70px" }}
+              >
+                {blog.author.displayName[0]}
+              </h3>
+              <div className="d-flex flex-column text-start">
+                <span className="mb-2">
+                  Written By <b>{blog.author.displayName}</b>
+                </span>
+                <small>
+                  {moment(blog.published).startOf("hour").fromNow()}
+                </small>
+              </div>
+            </a>
+            <hr />
+            <p
+              className="text-muted"
+              dangerouslySetInnerHTML={{ __html: blog.content }}
+            />
+          </div>
+        </div>
+      )}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/Components copy/BlogPage.jsx b/src/Components copy/BlogPage.jsx
new file mode 100644
index 0000000..c247915
--- /dev/null
+++ b/src/Components copy/BlogPage.jsx	
@@ -0,0 +1,8 @@
+import Blogs from "./Blogs";
+export default function BlogPage() {
+  return (
+    <>
+		  <Blogs />
+    </>
+  );
+}
diff --git a/src/Components copy/Blogs.jsx b/src/Components copy/Blogs.jsx
new file mode 100644
index 0000000..a56903b
--- /dev/null
+++ b/src/Components copy/Blogs.jsx	
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import moment from "moment";
+import { useNavigate } from "react-router-dom";
+import { Loader } from "./Loader";
+
+export default function Blogs() {
+  const [blogs, setBlogs] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const blogsUrl = `https://www.googleapis.com/blogger/v3/blogs/3771334625318012412/posts?key=${
+      import.meta.env.VITE_API_KEY
+    }`;
+
+    axios
+      .get(blogsUrl)
+      .then((response) => {
+        const blogsData = response.data.items;
+        setBlogs(blogsData);
+      })
+      .catch((error) => {
+        console.error("Error fetching Blogger blogs:", error);
+      });
+  }, []);
+
+  return (
+    <>
+      <Navbar />
+      {blogs.length === 0 ? (
+        <Loader />
+      ) : (
+        <div className="blogPage">
+          <div
+            id="endcontain"
+            className="container-fluid text-center mt-5"
+            style={{
+              backgroundColor: "white",
+              position: "sticky",
+              marginBottom: "5rem",
+            }}
+          >
+            <strong>
+              <font size="7">
+                <font color="#4285F4">Explore. </font>
+                <font color="#EA4335">Inspire. </font>
+                <font color="#34A853"> Discover. </font>
+              </font>
+            </strong>
+          </div>
+          <div className="my-5">
+            {blogs.map((blog) => (
+              <div
+                key={blog.id}
+                className="card text-center shadow mx-auto p-4"
+                style={{ width: "35rem", marginBottom: "3rem" }}
+              >
+                <div className="w-100 d-flex mb-4">
+                  <h3
+                    className="rounded-circle bg-warning d-flex justify-content-center align-items-center me-3"
+                    style={{ width: "50px", height: "50px" }}
+                  >
+                    {blog.author.displayName[0]}
+                  </h3>
+                  <div className="d-flex flex-column text-start">
+                    <span className="mb-2">
+                      Written By <b>{blog.author.displayName}</b>
+                    </span>
+                    <small>
+                      {moment(blog.published).startOf("hour").fromNow()}
+                    </small>
+                  </div>
+                </div>
+                <hr />
+                <div className="card-body text-start">
+                  <h5 className="card-title mb-3">
+                    <b>{blog.title}</b>
+                  </h5>
+                  <p
+                    className="blog-content card-text"
+                    dangerouslySetInnerHTML={{ __html: blog.content }}
+                  />
+                  <b
+                    className="text-primary"
+                    onClick={() => navigate(`/blogs/${blog.id}`)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    READ MORE
+                  </b>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      <Footer className="blogFooter" />
+    </>
+  );
+}
diff --git a/src/Components copy/Contact.jsx b/src/Components copy/Contact.jsx
new file mode 100644
index 0000000..0d49893
--- /dev/null
+++ b/src/Components copy/Contact.jsx	
@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import { database } from "../firebaseConfig";
+import { Loader } from "./Loader";
+
+export default function Contact() {
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [showModal, setShowModal] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(name, email, message);
+
+    database
+      .ref("Responses")
+      .push({
+        name: name,
+        email: email,
+        message: message,
+      })
+      .catch((error) => console.error("error submitting data :", error));
+
+    setShowModal(true);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+  }, []);
+
+  return (
+    <>
+      {loading ? (
+        <Loader />
+      ) : (
+        <>
+          <Navbar />
+          <div
+            style={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: "column",
+            }}
+          >
+            <div className="col-md-4 mb-5 mt-4 contact_logo">
+              <img src="./img/logo.png" className="img-fluid" alt="..." />
+            </div>
+
+            <div
+              className="row card shadow d-flex align-items-center flex-row p-5 mb-3"
+              style={{ width: "80%", height: "auto" }}
+            >
+              <div className="col-md-6 p-5 img-box">
+                <img
+                  className="img-fluid"
+                  src="https://img.freepik.com/free-vector/flat-design-illustration-customer-support_23-2148887720.jpg?w=740&t=st=1697360648~exp=1697361248~hmac=c1048c6b6eabd19c22ce4b952e7408ee9bed89a1ee6505893c371e26c3849053"
+                  alt=""
+                />
+              </div>
+              <div className="col-md-6 col-sm-12 card p-4">
+                <p className="align-self-center h3 fw-bold text-primary mb-4">
+                  Contact Us
+                </p>
+                <form onSubmit={handleSubmit}>
+                  <div className="form-outline input-group mb-4 ">
+                    <span className="input-group-text" id="basic-addon1">
+                      <i className="fa-solid fa-user text-primary"></i>
+                    </span>
+                    <input
+                      type="text"
+                      id="form4Example1"
+                      className="form-control"
+                      placeholder="Name"
+                      value={name}
+                      onChange={(event) => {
+                        setName(event.target.value);
+                      }}
+                    />
+                  </div>
+
+                  <div className="form-outline input-group mb-4 ">
+                    <span className="input-group-text" id="basic-addon1">
+                      <i className="fa-solid fa-envelope text-primary"></i>
+                    </span>
+                    <input
+                      type="email"
+                      id="form4Example2"
+                      className="form-control"
+                      placeholder="Email"
+                      value={email}
+                      onChange={(event) => {
+                        setEmail(event.target.value);
+                      }}
+                    />
+                  </div>
+
+                  <div className="form-outline mb-4">
+                    <textarea
+                      className="form-control"
+                      id="form4Example3"
+                      rows="4"
+                      value={message}
+                      placeholder="Type your message here..."
+                      onChange={(event) => {
+                        setMessage(event.target.value);
+                      }}
+                    ></textarea>
+                  </div>
+
+                  <div className="d-flex justify-content-center">
+                    <button
+                      type="submit"
+                      className="btn btn-primary w-100 mb-4"
+                    >
+                      Send
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <Footer />
+        </>
+      )}
+      {showModal && (
+            <div className="modal fade show" style={{ display: "block" }}>
+              <div
+                className={`modal-dialog modal-dialog-centered ${
+                  window.innerWidth < 768 ? "modal-sm" : "modal-md"
+                } fade-in`}
+              >
+                <div className="modal-content">
+                  <div className="modal-header">
+                    <h5 className="modal-title">Message Sent Successfully</h5>
+                    <button
+                      type="button"
+                      className="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                      onClick={() => setShowModal(false)}
+                    ></button>
+                  </div>
+                  <div className="modal-footer">
+                    <button
+                      type="button"
+                      className="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      onClick={() => setShowModal(false)}
+                    >
+                      Close
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+    </>
+  );
+}
diff --git a/src/Components copy/Footer.jsx b/src/Components copy/Footer.jsx
new file mode 100644
index 0000000..2978c03
--- /dev/null
+++ b/src/Components copy/Footer.jsx	
@@ -0,0 +1,108 @@
+import React from "react";
+import { styled } from "@mui/material";
+import {Link} from "react-router-dom"
+import { FaGithub } from "react-icons/fa";
+import { BsInstagram } from "react-icons/bs";
+import { FaLinkedin } from "react-icons/fa";
+
+const Component = styled("div")`
+  padding: 10px;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  background-color: #f0f0f0;
+  line-height: 100px;
+  border-radius: 100px;
+  line-height: 100px;
+
+  font-size: 30px;
+  overflow: hidden;
+  transition: all 0.3s ease-out;
+  &:hover {
+    width: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    cursor: pointer;
+  }
+`;
+
+const Instagram = styled(Component)`
+  &:hover {
+    background-color: #d62976;
+  }
+`;
+
+const Github = styled(Component)`
+  &:hover {
+    background-color: black;
+  }
+`;
+
+const LinkedIn = styled(Component)`
+  &:hover {
+    background-color: #0a66c2;
+  }
+`;
+
+const Footer = () => {
+  return (
+    <footer
+      className="d-flex justify-content-around fw-bold align-items-center my-4" >
+      <div>
+        <Link to='/'>
+          <img
+            className="my-3"
+            src="/img/logo.png"
+            style={{ width: "15rem", height: "38px", cursor: "pointer" }}
+          />
+        </Link>
+      </div>
+
+      <div className="text-center" style={{ display: "flex", gap: "20px", position: "absolute" }}>
+        <Instagram className="text-center"
+          onClick={() => {
+            window.location = "https://www.instagram.com/gdscsmit/";
+          }}
+        >
+          <BsInstagram
+            style={{ color: "#d62976 ", marginBottom: "55px" }}
+          ></BsInstagram>
+          <span className="text-center" style={{ color: "white" }}>Instagram</span>
+        </Instagram>
+
+        <Github
+          onClick={() => {
+            window.location =
+              "https://github.com/gdscsmit/gdscsmit.github.io";
+          }}
+        >
+          <FaGithub className="text-center"
+            style={{ color: "black", marginBottom: "55px" }}
+          ></FaGithub>
+          <span className="text-center" style={{ color: "white" }}>GitHub</span>
+        </Github>
+
+        <LinkedIn
+          onClick={() => {
+            window.location =
+              " https://www.linkedin.com/company/gdscsmit/about/";
+          }}
+        >
+          <FaLinkedin className="text-center"
+            style={{ color: "#0A66C2", marginBottom: "55px" }}
+          ></FaLinkedin>
+          <span className="text-center" style={{ color: "white" }}>LinkedIn</span>
+        </LinkedIn>
+      </div>
+
+      <div className="text-center">
+        <p>© 2023 COPYRIGHT GDSC SMIT</p>
+      </div>
+
+    </footer>
+
+  );
+};
+
+export default Footer;
diff --git a/src/Components copy/Home.jsx b/src/Components copy/Home.jsx
new file mode 100644
index 0000000..a5aca8d
--- /dev/null
+++ b/src/Components copy/Home.jsx	
@@ -0,0 +1,111 @@
+import React, { useEffect } from "react";
+import Footer from "./Footer";
+import Vision from "./Vision";
+import ScrollToTopButton from "./gototop";
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+export default function Home() {
+
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
+  return (
+    <>
+      <div className="container divone">
+        <div className="display-5 fw-bold mt-4">Welcome to GDSC SMIT </div>
+        <div className="row">
+          <div className="col-md-8">
+            <div className="my-5">
+              <div className="text-lg text-sm">
+                Google Developer Student Clubs are groups of students from
+                diverse undergraduate or graduate programs with an interest in
+                growing as a developer. As GDSC&apos;s chapter at Sikkim Manipal
+                Institute of Technology, we aim to help students connect with
+                like-minded developers, facilitate knowledge across several
+                domains, from industry leaders to students and build solutions
+                that will be the change we hope for.
+              </div>
+            </div>
+            <div className="butone">
+              <a href="https://gdsc.community.dev/accounts/login/?next=/sikkim-manipal-institute-of-technology-gangtok/">
+                <button type="button" id="becameButton" className="btn btn-primary mx-3">
+                  Become Member
+                </button>
+              </a>
+              <a href="https://developers.google.com/community/gdsc#:~:text=Google%20Developer%20Student%20Clubs%20(GDSC,as%20a%20developer%20are%20welcome.">
+                <button type="button" id="learnButton" className="btn btn-outline-dark">
+                  Learn More
+                </button>
+              </a>
+            </div>
+          </div>
+          <div className="col-md-4">
+            <img src="./img/gsc.png" className="img-fluid" alt="..." />
+          </div>
+        </div>
+      </div>
+
+      <div className="d-flex container overflow-hidden text-center ">
+        <div className="gy-5 rounded-4 d-flex flex-md-row flex-column text-center my-5 justify-content-center align-items-center">
+          <div className="my-3 mx-3">
+            <div className="p-3 rounded-4 border bg-light">
+              <h3><b>Why GDSC?</b></h3> 
+              <br />
+              By joining GDSC at SMIT, you gain access to numerous workshops,
+              information sessions, and student-community collaborative projects
+            </div>
+          </div>
+
+          <div className="my-3 rounded-4 mx-3">
+            <div className="p-3 rounded-4 border bg-light">
+              <h3><b>Concept of GDSC</b></h3> 
+              <br />
+              The purpose of GDSC is to inspire and empower students through
+              understanding technology and reflecting on it's impact
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Vision />
+
+      <div
+      data-aos="fade-up"
+      className="bg embed-responsive-16by9 text-center my-5" id="Video">
+        <div className="container-fluid rounded-4 overflow-hidden shadow-lg " id="video">
+          <iframe 
+            className="rounded-4 embed-responsive-item yt_video"
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/earTjC0iSjg"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+
+      <div id="endcontain" className="container-fluid text-center my-4">
+        <strong>
+          <font size="7">
+            <font color="#4285F4" data-aos="fade-up">
+              Connect.{" "}
+            </font>
+            <font color="#EA4335" data-aos="fade-up" data-aos-duration="3000">
+              Learn.{" "}
+            </font>
+            <font color="#34A853" data-aos="fade-up" data-aos-duration="3000">
+              Grow.{" "}
+            </font>
+          </font>
+        </strong>
+      </div>
+      <hr style={{margin:"0px",padding:"0px"}} ></hr>
+      <Footer />
+      <ScrollToTopButton />              
+    </>
+  );
+}
diff --git a/src/Components copy/Loader.jsx b/src/Components copy/Loader.jsx
new file mode 100644
index 0000000..46dc9c0
--- /dev/null
+++ b/src/Components copy/Loader.jsx	
@@ -0,0 +1,9 @@
+export const Loader = () => {
+    return (
+        <div className="loader">
+            <div className="loader-item">
+                <img src="./loader-unscreen.gif" alt="loader" />
+            </div>
+        </div>
+    )
+}
diff --git a/src/Components copy/MobileApp.jsx b/src/Components copy/MobileApp.jsx
new file mode 100644
index 0000000..34d48a0
--- /dev/null
+++ b/src/Components copy/MobileApp.jsx	
@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react';
+import { Loader } from './Loader';
+
+export default function MobileApp() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+      window.location.replace('https://play.google.com/store/apps/details?id=com.gdscsmit.gdsc');
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <>
+      {loading && <Loader />}
+    </>
+  );
+}
diff --git a/src/Components copy/Navbar.jsx b/src/Components copy/Navbar.jsx
new file mode 100644
index 0000000..22ca166
--- /dev/null
+++ b/src/Components copy/Navbar.jsx	
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Navbar() {
+    const [isNavOpen, setIsNavOpen] = useState(false);
+
+    const toggleNav = () => {
+        setIsNavOpen(!isNavOpen);
+    };
+
+    const closeNavbar = () => {
+        setIsNavOpen(false);
+    };
+
+    const navbarStyle = {
+        transition: 'max-height 0.9s ease',
+        maxHeight: isNavOpen ? '350px' : '90px',
+        overflow: 'hidden',
+        padding:'1% 2%',
+    };
+
+    const navBrandStyle = {
+        width: '40%',
+        maxWidth: '300px',
+        overflow: 'hidden',
+    }
+
+    return (
+        <>
+            <div className="navbar sticky-top navbar-expand-lg navbar-light navcus frosted-glass" style={navbarStyle}>
+                <div className="container-fluid" >
+                    <Link to='/' className="navbar-brand" style={navBrandStyle}  >
+                        <img src="./img/logo.png" height='100%' width='100%' alt="" loading="lazy" style={{ backgroundColor: 'transparent' }} />
+                    </Link>
+                    <button className="navbar-toggler" type="button" onClick={toggleNav}>
+                        <span className="navbar-toggler-icon"></span>
+                    </button>
+                    <div className={`collapse navbar-collapse justify-content-end ${isNavOpen ? 'show' : ''}`} id="navbarNavAltMarkup" >
+                        <div className="navbar-nav" >
+                            <Link to='/' className="text-black fw-bold nav-link active link-home"
+                                aria-current="page" onClick={closeNavbar}>
+                                Home
+                            </Link>
+                            <Link to='/app' className="text-black fw-bold nav-link active link-App " aria-current="page" onClick={closeNavbar}>
+                                App
+                            </Link>
+                            <Link to='/blogs' className="text-black fw-bold nav-link active link-hover-effect link-Blogs" aria-current="page" onClick={closeNavbar}>
+                                Blogs
+                            </Link>
+                            <Link to='/team' className="text-black fw-bold nav-link active link-hover-effect link-Team" aria-current="page" onClick={closeNavbar}>
+                                Team
+                            </Link>
+                            <Link to='/contact' className="text-black fw-bold nav-link active link-hover-effect link-Contact" aria-current="page" onClick={closeNavbar}>
+                                Contact
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/Components copy/Projects.jsx b/src/Components copy/Projects.jsx
new file mode 100644
index 0000000..9e6a044
--- /dev/null
+++ b/src/Components copy/Projects.jsx	
@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+
+import Box from "@mui/material/Box";
+import styled from 'styled-components';
+
+const BoxComponent=styled(Box)`
+border: 1px solid black;
+border-radius: 200px;
+  
+`
+const Projects = () => {
+  const projects = [
+    {
+      id: 1,
+      title: "Seminar",
+      image:
+        "https://medschool.vanderbilt.edu/wp-content/uploads/sites/35/public_files/13314405705_fa3a6e6850_k.jpg",
+      description: "Exploring Emerging Tech Trends Together.",
+      classes: "bg-red rounded",
+    },
+    {
+      id: 2,
+      title: "Projects",
+      image:
+        "https://www.thebvnewspaper.com/wp-content/uploads/2021/04/Group-Projects.jpg",
+      description: "Building Solutions, Empowering Communities.",
+      classes: "bg-green rounded",
+    },
+    {
+      id: 3,
+      title: "Workshop",
+      image:
+        "https://studio180theatre.com/wp-content/uploads/2023/08/Studio-180-Education-Workshop-68-1-1200x801.jpg",
+      description: "Hands-On Learning for Tech Enthusiasts",
+      classes: "bg-yellow rounded",
+    },
+  ];
+
+  return (
+    <Box
+      display="flex"
+      flexWrap="wrap"
+      justifyContent="center"
+      alignItems="center"
+      p={4} // Add padding as needed
+    >
+      {projects.map(({ id, title, description, classes, image }) => (
+        <Box
+          key={id}
+          
+          maxWidth="300px" // Set a maximum width as needed
+          m={2} // Add margin as needed
+        >
+          <BoxComponent className="vision-card">
+            <div className="mt-4 mx-4 d-flex flex-column">
+              <img
+                className="w-100 rounded"
+                src={image}
+                style={{ height: "155px" }}
+              />
+              <span
+                className={`vision-card-title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}
+              >
+                {title}
+              </span>
+            </div>
+            <p className="w-75 mx-auto mb-2">{description}</p>
+          </BoxComponent>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+export default Projects;
diff --git a/src/Components copy/Team.jsx b/src/Components copy/Team.jsx
new file mode 100644
index 0000000..6522ab8
--- /dev/null
+++ b/src/Components copy/Team.jsx	
@@ -0,0 +1,565 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import { fetchFiles } from '../constants/TeamImages';
+import { Loader } from "./Loader";
+
+let domainLeadsData = [];
+let CoreTeamData = [];
+let leadImg = '';
+
+const getRandomColor = () => {
+  const colors = ["blue", "red", "yellow", "green"];
+  const randomIndex = Math.floor(Math.random() * colors.length);
+  return colors[randomIndex];
+};
+
+const Card = ({ data }) => {
+  const randomBorderColor = getRandomColor();
+  const randomBgColor = getRandomColor();
+
+  return (
+    <div className="col-xl-3 col-sm-4 my-3">
+      <div
+        className={`bg-white rounded shadow-sm py-5 px-4 border border-4 border-${randomBorderColor}`}
+      >
+        <img
+          src={data.img}
+          alt=""
+          width="100"
+          className="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm"
+        />
+        <h5 className="mb-0 fs-4 fw-bold color-dark">{data.name}</h5>
+        <span className="small fw-light text-uppercase text-muted">
+          {data.domain}
+        </span>
+        <ul
+          className={`social mb-0 list-inline mt-2 mx-auto rounded rounded-5 p-1 bg-${randomBgColor}`}
+          style={{ width: "fit-content" }}
+        >
+          <li className="list-inline-item mx-2 ">
+            <a href={data.twitter} className="social-link">
+              <i className="fa-brands fa-x-twitter" style={{ color: "#fff" }}></i>
+            </a>
+          </li>
+          <li className="list-inline-item mx-2">
+            <a href={data.insta} className="social-link">
+              <i className="fa fa-instagram" style={{ color: "#fff" }}></i>
+            </a>
+          </li>
+          <li className="list-inline-item mx-2">
+            <a href={data.linkedin} className="social-link">
+              <i className="fa fa-linkedin" style={{ color: "#fff" }}></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const CardList = ({ teamData }) => {
+  return (
+    <div className="row text-center justify-content-center my-5">
+      {teamData.map((data, index) => (
+        <Card key={index} data={data} />
+      ))}
+    </div>
+  );
+};
+
+export default function Team() {
+  const uniqueDomains = [
+    ...new Set(CoreTeamData.map((member) => member.domain)),
+  ];
+
+  const [activeDomain, setActiveDomain] = useState(uniqueDomains[0]);
+  const [loading, setLoading] = useState(true);
+
+  const handleTabClick = (domain) => {
+    setActiveDomain(domain);
+  };
+  function filterTeamMembers(data, domain) {
+    let mem = data.filter((member) => member.domain === domain);
+    return mem;
+  }
+
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchTeamData = async () => {
+      try {
+        const cachedData = localStorage.getItem('teamDatav1.0.1');
+
+        if (cachedData) {
+          const parsedData = JSON.parse(cachedData);
+
+          // Use the cached data
+          domainLeadsData = parsedData.domainLeadsData;
+          CoreTeamData = parsedData.CoreTeamData;
+          leadImg = parsedData.leadImg;
+          setLoading(false);
+        } else {
+
+          let files = await fetchFiles();
+          if (isMounted) {
+
+            domainLeadsData = [
+              {
+                img: `${files[2].url}`,
+                name: "Pooranjoy Bhattacharya",
+                domain: "Web Development",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[0].url}`,
+                name: "Abhijnyan Das",
+                domain: "Cloud Computing",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[25].url}`,
+                name: "Madhurjya Dasgupta",
+                domain: "Cybersecurity",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[26].url}`,
+                name: "Rishav Krishnan",
+                domain: "App Development",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[23].url}`,
+                name: "Shivam Sourav",
+                domain: "AI/ML",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[33].url}`,
+                name: "Ahana Sadh",
+                domain: "Editorial",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[28].url}`,
+                name: "Kuldeep Bora",
+                domain: "UI/UX Design",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[36].url}`,
+                name: "Namrata Parbat",
+                domain: "Event Management",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[5].url}`,
+                name: "Dhruv Bhutura",
+                domain: "Public Relations",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[20].url}`,
+                name: "Toshith Yadav",
+                domain: "Web Development CO-LEAD",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[9].url}`,
+                name: "Sneha Supriya",
+                domain: "AI/ML CO-LEAD",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[10].url}`,
+                name: "Manasvi Gupta",
+                domain: "Event Management CO LEAD",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[30].url}`,
+                name: "Ashmita Sen Roy",
+                domain: "Editorial CO LEAD",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[22].url}`,
+                name: "Sparsh Ranjan",
+                domain: "PR CO LEAD",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+            ];
+
+            CoreTeamData = [
+              {
+                img: `${files[13].url}`,
+                name: "Seedorf Rai",
+                domain: "Web Development",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[24].url}`,
+                name: "Girish Sharma",
+                domain: "Web Development",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[32].url}`,
+                name: "Madhurya Hait",
+                domain: "Web Development",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[4].url}`,
+                name: "Om Gupta",
+                domain: "AI/ML",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[1].url}`,
+                name: "Mayur K T",
+                domain: "AI/ML",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[19].url}`,
+                name: "Pratham Srivastava",
+                domain: "AI/ML",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[6].url}`,
+                name: "Neha Sultan",
+                domain: "AI/ML",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[34].url}`,
+                name: "Indraneel Das",
+                domain: "Cybersecurity",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[29].url}`,
+                name: "Shayan Vatsa",
+                domain: "Cybersecurity",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[17].url}`,
+                name: "Gunjan Chakrabartty",
+                domain: "Cybersecurity",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[12].url}`,
+                name: "Ishaan S. Oshima",
+                domain: "Cybersecurity",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[27].url}`,
+                name: "Manaswi Jha",
+                domain: "UI/UX Design",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[37].url}`,
+                name: "Peela Sharandeep",
+                domain: "UI/UX Design",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[31].url}`,
+                name: "Priyanjana Paul",
+                domain: "UI/UX Design",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[3].url}`,
+                name: "Sneha Seal",
+                domain: "Cloud Computing",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[15].url}`,
+                name: "Deepak Manda",
+                domain: "Cloud Computing",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[7].url}`,
+                name: "Prantor J. Bharadwaj",
+                domain: "Cloud Computing",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[14].url}`,
+                name: "Ritusree Das",
+                domain: "Editorial",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[8].url}`,
+                name: "Andre Antony Andrew",
+                domain: "Editorial",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[21].url}`,
+                name: "Torsha Guha",
+                domain: "Event Management",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[16].url}`,
+                name: "Adrija Chakrabarti",
+                domain: "Event Management",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[18].url}`,
+                name: "Aaryan Pradhan",
+                domain: "Event Management",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+              {
+                img: `${files[11].url}`,
+                name: "Ayush singh",
+                domain: "Event Management",
+                twitter: "https://john",
+                insta: "https://john",
+                linkedin: "https://john",
+              },
+            ];
+
+            leadImg = `${files[35].url}`;
+
+            // Cache the data in local storage
+            localStorage.setItem('teamDatav1.0.1', JSON.stringify({
+              domainLeadsData,
+              CoreTeamData,
+              leadImg
+            }));
+
+            setLoading(false);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching team data:", error);
+        if (isMounted) {
+          setLoading(false); // Set loading to false in case of an error
+        }
+      }
+    };
+
+    fetchTeamData();
+  }, []);
+
+  return (
+    <>
+      {
+        loading ? <Loader /> :
+          <>
+            <Navbar />
+
+            <div id="endcontain" className="container-fluid text-center my-3">
+            </div>
+
+            <div className="my-5 w-75 mx-auto">
+              <div className="d-flex flex-column justify-center">
+                <h1 className="text-center display-5 fw-bold font-italic gap-3">
+                  <font className="mx-2" color="#4285F4">Our</font>
+                  <font className="mx-2" color="#EA4335">Team</font>
+                  <font className="mx-2" color="F4B400">of</font>
+                  <font className="mx-2" color="#34A853">2023 </font>
+                </h1>
+                <p className="text-2xl text-center max-w-lg md:max-w-2xl">
+                  Meet the Driving Force Behind Innovation
+                </p>
+                <p className="text-2xl text-center max-w-lg md:max-w-2xl">
+                  Learning and innovation are at the core of everything we do. With our extraordinary team,
+                  we are dedicated to solving everyday challenges and pushing the boundaries of technology. Together, we are making it happen!
+                </p>
+              </div>
+            </div>
+
+            <div className="container ">
+              <div className="row text-center justify-content-center my-5">
+                <strong>
+                  <font className="fs-1 text-center display-5">
+                    <font color="#000">Lead</font>
+                  </font>
+                </strong>
+                <div className="col-xl-3 col-sm-4 my-3">
+                  <div className="bg-white rounded shadow-sm py-5 px-4 border border-4 border-blue">
+                    <img
+                      src={leadImg}
+                      alt=""
+                      width="100"
+                      className="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm"
+                    />
+                    <h5 className="mb-0 fs-4 fw-bold color-dark">Aryan Lohia</h5>
+                    <span className="small fw-light text-uppercase text-muted">
+                      Lead
+                    </span>
+                    <ul
+                      className="social mb-0 list-inline mt-2 mx-auto rounded rounded-5 p-1 bg-blue"
+                      style={{ width: "fit-content" }}
+                    >
+                      <li className="list-inline-item mx-2 ">
+                        <a href="#" className="social-link">
+                          <i className="fa-brands fa-x-twitter" style={{ color: "#fff" }}></i>
+                        </a>
+                      </li>
+                      <li className="list-inline-item mx-2">
+                        <a href="#" className="social-link">
+                          <i
+                            className="fa fa-instagram"
+                            style={{ color: "#fff" }}
+                          ></i>
+                        </a>
+                      </li>
+                      <li className="list-inline-item mx-2">
+                        <a href="#" className="social-link">
+                          <i className="fa fa-linkedin" style={{ color: "#fff" }}></i>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div className="container-fluid text-center my-3">
+                <strong>
+                  <font className="fs-1 text-center display-5">
+                    <font color="#000">Domain Leads</font>
+                  </font>
+                </strong>
+              </div>
+              <div className="container my-5">
+                <CardList teamData={domainLeadsData} />
+              </div>
+
+              <div className="container-fluid text-center my-3">
+                <strong>
+                  <font className="fs-1 text-center display-5">
+                    <font color="#000">Core Team Members</font>
+                  </font>
+                </strong>
+              </div>
+              <div className="container my-5">
+                <ul className="nav nav-pills d-flex justify-content-center border border-dark p-3" id="domainTabs">
+                  {uniqueDomains.map((domain) => (
+                    <li className="nav-item mx-3" key={domain}>
+                      <a
+                        className={`nav-link ${domain === activeDomain ? 'active' : ''}`}
+                        onClick={() => handleTabClick(domain)}
+                        style={{
+                          fontWeight: "bold",
+                          color: "black"
+                        }}
+                      >
+                        {domain}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+                <style>
+                  {`
+              .nav-link:hover {
+                cursor: pointer;
+              }
+            `}
+                </style>
+                <div className="tab-content" id="domainTabsContent">
+                  {uniqueDomains.map((domain) => (
+                    <div
+                      key={domain}
+                      className={`tab-pane fade ${domain === activeDomain ? 'show active' : ''}`}
+                    >
+                      <CardList teamData={filterTeamMembers(CoreTeamData, domain)} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <Footer />
+          </>
+      }
+    </>
+  );
+}
diff --git a/src/Components copy/Vision.jsx b/src/Components copy/Vision.jsx
new file mode 100644
index 0000000..1deef47
--- /dev/null
+++ b/src/Components copy/Vision.jsx	
@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+import { Link } from 'react-router-dom';
+
+const Vision = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
+  const visions = [
+    {
+      id: 1,
+      title: "Seminar",
+      image: "https://medschool.vanderbilt.edu/wp-content/uploads/sites/35/public_files/13314405705_fa3a6e6850_k.jpg",
+      description: "Exploring Emerging Tech Trends Together.",
+      classes: "bg-red rounded",
+    },
+    {
+      id: 2,
+      title: "Projects",
+      image: "https://www.thebvnewspaper.com/wp-content/uploads/2021/04/Group-Projects.jpg",
+      description: "Building Solutions, Empowering Communities.",
+      classes: "bg-green rounded",
+    },
+    {
+      id: 3,
+      title: "Workshop",
+      image: "https://studio180theatre.com/wp-content/uploads/2023/08/Studio-180-Education-Workshop-68-1-1200x801.jpg",
+      description: "Hands-On Learning for Tech Enthusiasts",
+      classes: "bg-yellow rounded",
+    },
+    {
+      id: 4,
+      title: "Hackathons",
+      image: "https://www.coresponsibility.com/wp-content/uploads/2016/03/cr-students-hack.jpg",
+      description: "Innovate, Collaborate, Create, Win!",
+      classes: "bg-blue rounded",
+    },
+  ];
+
+  return (
+    <>
+      <div className="my-5 w-75 mx-auto">
+        <div className="d-flex flex-column justify-center">
+          <h1 className="vision text-center display-5 font-bold">Vision</h1>
+          <p className="text-2xl text-center max-w-lg md:max-w-2xl">
+            GDSC SMIT is inspired by the Google Developer&apos;s Family
+          </p>
+          <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="d-flex flex-md-row flex-column text-center vh-25">
+          {visions.map(({ id, title, description, classes, image }) => (
+            id === 2 ? ( // Check if it's the "Projects" section
+              <Link to="/projects"   style={{color:"gray",textDecoration:"none"}}  key={id} className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'>
+                <div className="mt-4 mx-4 d-flex flex-column">
+                  <img className='w-100 rounded' src={image} style={{ height: "155px" }} />
+                  <span className={`vision_card__title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}>
+                    {title}
+                  </span>
+                </div>
+                <p className="w-75 mx-auto mb-2 ">{description}</p>
+              </Link>
+            ) : (
+              // For other sections, use regular divs
+              <div key={id} className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'>
+                <div className="mt-4 mx-4 d-flex flex-column">
+                  <img className='w-100 rounded' src={image} style={{ height: "155px" }} />
+                  <span className={`vision_card__title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}>
+                    {title}
+                  </span>
+                </div>
+                <p className="w-75 mx-auto mb-2 ">{description}</p>
+              </div>
+            )
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Vision;
diff --git a/src/Components copy/gototop.jsx b/src/Components copy/gototop.jsx
new file mode 100644
index 0000000..51c9545
--- /dev/null
+++ b/src/Components copy/gototop.jsx	
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import {FaArrowCircleUp} from 'react-icons/fa'; 
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Add a scroll event listener to check if the user has scrolled down 50% of the page.
+    const handleScroll = () => {
+      const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+      if (scrollY > window.innerHeight / 2) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    // Remove the event listener when the component unmounts.
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // You can change this to 'auto' for an instant scroll
+    });
+  };
+
+  return (
+    <div className={`scroll-to-top-button ${isVisible ? 'visible' : ''}`}>
+      <button onClick={scrollToTop}>
+        <FaArrowCircleUp/>
+      </button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx
new file mode 100644
index 0000000..35e149f
--- /dev/null
+++ b/src/Components/Projects.jsx
@@ -0,0 +1,79 @@
+import React, { useEffect } from "react";
+import AOS from 'aos';
+import Box from "@mui/material/Box";
+import { Link, redirect } from 'react-router-dom';
+
+
+const Projects = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
+  const projects = [
+    {
+      id: 1,
+      TechStack: "TechStack : Dart",
+      image:
+        "https://user-images.githubusercontent.com/109246240/274279691-fe48bc16-3ae6-4f6b-9fac-a0b8fc13acee.png",
+      description: "This repository houses the codebase for the mobile application that represents our community and showcases our events, projects, and resources.",
+      classes: "bg-red rounded",
+      Redirect:"https://github.com/gdscsmit/GDSC-SMIT-App",
+    },
+    {
+      id: 2,
+      TechStack: "TechStack : Python",
+      image:
+      "https://user-images.githubusercontent.com/34091879/274677601-ae6fa298-eb46-48f4-a39a-f886b9c828c8.gif",
+      description: "Welcome to fsociety, an all-in-one ethical hacking toolkit. This toolkit is designed to provide a comprehensive suite of tools for ethical hackers, security researchers, and cybersecurity enthusiasts.",
+      classes: "bg-green rounded",
+      Redirect:"https://github.com/gdscsmit/fsociety"
+    },
+    {
+      id: 3,
+      TechStack: "TechStack : JavaScript",
+      image:
+      "https://user-images.githubusercontent.com/109246240/274279691-fe48bc16-3ae6-4f6b-9fac-a0b8fc13acee.png",
+      description: "This repository houses the codebase for the website that represents our community and showcases our events, projects, and resources. ",
+      classes: "bg-yellow rounded",
+      Redirect:"https://github.com/gdscsmit/gdscsmit.github.io"
+    },
+  ];
+
+  return (
+    <Box
+      display="flex"
+      flexWrap="wrap"
+      justifyContent="center"
+      alignItems="center"
+      p={4} // Add padding as needed
+    >
+      {projects.map(({ id, TechStack, description, classes, Redirect ,image }) => (
+        <Box
+          key={id}
+          className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'
+          maxWidth="300px" // Set a maximum width as needed
+           
+          style={{height:"450px"}}
+          m={2} // Add margin as needed
+        >
+          <Link to={Redirect}  style={{color:"black",textDecoration:"none",}}  >
+            <div className="mt-4 mx-4 d-flex flex-column">
+              <img
+                className="w-100 rounded"
+                src={image}
+                style={{ height: "120px", }}
+              />
+              <span
+                className={`vision-card-title fw-bold cursor-pointer text-white rounded p-2 w-85 my-4 px-3 ${classes} mx-auto`}
+              >
+                {TechStack}
+              </span>
+            </div>
+            <p className="w-75 mx-auto mb-2">{description}</p>
+          </Link>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+export default Projects;
diff --git a/src/Components/Vision.jsx b/src/Components/Vision.jsx
index c53d15b..1deef47 100644
--- a/src/Components/Vision.jsx
+++ b/src/Components/Vision.jsx
@@ -1,74 +1,87 @@
-import React, { useEffect } from 'react'
+import React, { useEffect } from 'react';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
+import { Link } from 'react-router-dom';
 
 const Vision = () => {
+  useEffect(() => {
+    AOS.init();
+  }, []);
 
-    useEffect(() => {
-        AOS.init();
-      }, [])
+  const visions = [
+    {
+      id: 1,
+      title: "Seminar",
+      image: "https://medschool.vanderbilt.edu/wp-content/uploads/sites/35/public_files/13314405705_fa3a6e6850_k.jpg",
+      description: "Exploring Emerging Tech Trends Together.",
+      classes: "bg-red rounded",
+    },
+    {
+      id: 2,
+      title: "Projects",
+      image: "https://www.thebvnewspaper.com/wp-content/uploads/2021/04/Group-Projects.jpg",
+      description: "Building Solutions, Empowering Communities.",
+      classes: "bg-green rounded",
+    },
+    {
+      id: 3,
+      title: "Workshop",
+      image: "https://studio180theatre.com/wp-content/uploads/2023/08/Studio-180-Education-Workshop-68-1-1200x801.jpg",
+      description: "Hands-On Learning for Tech Enthusiasts",
+      classes: "bg-yellow rounded",
+    },
+    {
+      id: 4,
+      title: "Hackathons",
+      image: "https://www.coresponsibility.com/wp-content/uploads/2016/03/cr-students-hack.jpg",
+      description: "Innovate, Collaborate, Create, Win!",
+      classes: "bg-blue rounded",
+    },
+  ];
 
-    const visions = [
-        {
-            id: 1,
-            title: "Seminar",
-            image: "https://medschool.vanderbilt.edu/wp-content/uploads/sites/35/public_files/13314405705_fa3a6e6850_k.jpg", //input the images url here
-            description: "Exploring Emerging Tech Trends Together.",
-            classes: "bg-red rounded",
-        },
-        {
-            id: 2,
-            title: "Projects",
-            image: "https://www.thebvnewspaper.com/wp-content/uploads/2021/04/Group-Projects.jpg", //input the images url here
-            description: "Building Solutions, Empowering Communities.",
-            classes: "bg-green rounded",
-        },
-        {
-            id: 3,
-            title: "Workshop",
-            image: "https://studio180theatre.com/wp-content/uploads/2023/08/Studio-180-Education-Workshop-68-1-1200x801.jpg", //input the images url here
-            description: "Hands-On Learning for Tech Enthusiasts",
-            classes: "bg-yellow rounded",
-        },
-        {
-            id: 4,
-            title: "Hackathons",
-            image: "https://www.coresponsibility.com/wp-content/uploads/2016/03/cr-students-hack.jpg", //input the images url here
-            description: "Innovate, Collaborate, Create, Win!",
-            classes: "bg-blue rounded",
-        }
-    ];
-
-    return (
-        <>
-            <div className="my-5 w-75 mx-auto">
-                <div className="d-flex flex-column justify-center">
-                    <h1 className="vision text-center display-5 font-bold">Vision</h1>
-                    <p className="text-2xl text-center max-w-lg md:max-w-2xl">
-                        GDSC SMIT is inspired by the Google Developer&apos;s Family
-                    </p>
-                    <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>
+  return (
+    <>
+      <div className="my-5 w-75 mx-auto">
+        <div className="d-flex flex-column justify-center">
+          <h1 className="vision text-center display-5 font-bold">Vision</h1>
+          <p className="text-2xl text-center max-w-lg md:max-w-2xl">
+            GDSC SMIT is inspired by the Google Developer&apos;s Family
+          </p>
+          <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="d-flex flex-md-row flex-column text-center vh-25">
+          {visions.map(({ id, title, description, classes, image }) => (
+            id === 2 ? ( // Check if it's the "Projects" section
+              <Link to="/projects"   style={{color:"gray",textDecoration:"none"}}  key={id} className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'>
+                <div className="mt-4 mx-4 d-flex flex-column">
+                  <img className='w-100 rounded' src={image} style={{ height: "155px" }} />
+                  <span className={`vision_card__title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}>
+                    {title}
+                  </span>
                 </div>
-
-                <div className="d-flex flex-md-row flex-column text-center vh-25 ">
-                    {visions.map(({ id, title, description, classes, image }) => (
-                        <div key={id} className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'>
-                            <div className="mt-4 mx-4 d-flex flex-column ">
-                            <img className='w-100 rounded' src={image} style={{height: "155px"}}/>
-                                <span className={`vision_card__title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}>
-                                    {title}
-                                </span>
-                            </div>
-                            <p className="w-75 mx-auto mb-2 ">{description}</p>
-                        </div>
-                    ))}
+                <p className="w-75 mx-auto mb-2 ">{description}</p>
+              </Link>
+            ) : (
+              // For other sections, use regular divs
+              <div key={id} className="vision_card rounded my-2 mx-2 w-100 border border-light-subtle " data-aos="fade-up" data-aos-duration='1000'>
+                <div className="mt-4 mx-4 d-flex flex-column">
+                  <img className='w-100 rounded' src={image} style={{ height: "155px" }} />
+                  <span className={`vision_card__title fw-bold cursor-pointer text-white rounded p-2 w-75 my-4 px-3 ${classes} mx-auto`}>
+                    {title}
+                  </span>
                 </div>
-            </div>
-        </>
-    );
+                <p className="w-75 mx-auto mb-2 ">{description}</p>
+              </div>
+            )
+          ))}
+        </div>
+      </div>
+    </>
+  );
 };
 
-export default Vision;
\ No newline at end of file
+export default Vision;
diff --git a/src/main.jsx b/src/main.jsx
index 40fc7c6..aac6ea6 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,6 +8,7 @@ import BlogPage from "./Components/BlogPage.jsx";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import Blog from "./Components/Blog.jsx";
+import Projects  from "./Components/Projects.jsx";
 
 const MyApp = createBrowserRouter([
   {
@@ -34,6 +35,10 @@ const MyApp = createBrowserRouter([
     path: "/blogs/:id",
     element: <Blog />,
   },
+  {
+    path:"/projects",
+    element: <Projects />,
+  }
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")).render(