Events page created and a few changes here and there

package.json

@@ -16,6 +16,8 @@
     "react-icons": "^5.2.1",
     "react-photo-album": "^2.4.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
+    "swiper": "^11.1.4",
     "tailwind-merge": "^2.3.0",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,26 +1,30 @@
 import React from 'react';
 import Header from './components/header';
-import Footer from './components/footer';
 import Homepage from './pages/homepage';
 import Events from './pages/events';
 import Gallery from './pages/gallery';
 import Projects from './pages/projects';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import SplashScreen from './components/ui/splashscreen';
+import Team from "./pages/team";
+import Blogs from "./pages/blogs";
 
 
 function App() {
   return (
 
-  <BrowserRouter><SplashScreen/>
-        <Header type={1} />
-          <Routes>
-            <Route path="/" element={<Homepage />}/>
-            <Route path="/events" element={<Events />}/>
-            <Route path="/gallery" element={<Gallery />}/>
-            <Route path="/projects" element={<Projects />}/>
-          </Routes>
-        <Footer /></BrowserRouter>
+  <BrowserRouter>
+      <SplashScreen/>
+      <Header type={1} />
+      <Routes>
+          <Route path="/" element={<Homepage />}/>
+          <Route path="/team" element={<Team />}/>
+          <Route path="/events" element={<Events />}/>
+          <Route path="/gallery" element={<Gallery />}/>
+          <Route path="/projects" element={<Projects />}/>
+          <Route path="/blogs" element={<Blogs />}/>
+      </Routes>
+  </BrowserRouter>
   );
 }
 

src/components/header.jsx

@@ -4,7 +4,7 @@ import { NavLink } from 'react-router-dom';
 const Header = ({ type }) => {
   return (
     <header className={`w-full bg-gradient-to-b from-black to-slate-950 text-white p-4 shadow-md ${type ? "fixed top-0 left-0 z-50" : ""}`}>
-      <div className="px-10 py-4 px-7 flex justify-between items-center relative">
+      <div className="py-4 px-7 flex justify-between items-center relative">
         <img src={logo} alt="IEEE Logo" className=" absolute h-12 w-12" />
         <nav className="flex-1">
           <ul className="flex justify-end space-x-16 text-slate-500 my-2 font-bold font-montserrat text-xl ">
@@ -20,7 +20,7 @@ const Header = ({ type }) => {
             </li>
             <li>
               <NavLink
-                to='/events'
+                to='/team'
                 className="custom-underline hover:text-white "
                 activeClassName="link-activee"
 
@@ -59,7 +59,7 @@ const Header = ({ type }) => {
             </li>
             <li>
               <NavLink
-                to="/gallery"
+                to="/blogs"
                 className="custom-underline hover:text-white"
                 activeClassName="link-activee"
 

src/index.css

@@ -76,6 +76,68 @@ div {
   bottom: -2px; /* Adjust the distance from the text */
   left: 0;
 }
+
 .link-activee {
   color: white;
 }
+
+.events-container {
+  max-width: 124rem;
+  padding: 4rem 0;
+  margin: 0 auto;
+}
+
+.swiper-container {
+  height: 36rem;
+  padding: 2rem 0;
+  position: relative;
+}
+
+.swiper-slide {
+  width: 28rem;
+  height: 36rem;
+  position: relative;
+}
+
+.swiper-slide img {
+  width: 28rem;
+  height: 36rem;
+  border-radius: 1rem;
+  object-fit: cover;
+}
+
+.slider-controler {
+  position: relative;
+  bottom: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 500px) {
+  .swiper-container {
+    height: 36rem;
+  }
+  .swiper-slide {
+    width: 28rem !important;
+    height: 36rem !important;
+  }
+  .swiper-slide img {
+    width: 28rem !important;
+    height: 36rem !important;
+  }
+}
+
+.swiper-pagination {
+  position: relative;
+  width: 15rem !important;
+  bottom: 1rem;
+}
+
+.swiper-pagination .swiper-pagination-bullet {
+  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
+}
+
+.swiper-pagination .swiper-pagination-bullet-active {
+  background: white;
+}