Added about page

client/package.json

@@ -15,6 +15,7 @@
     "react-router-dom": "^6.15.0",
     "react-scroll": "^1.8.9",
     "react-tsparticles": "^2.12.2",
+    "react-typed": "^1.2.0",
     "tsparticles": "^2.12.0",
     "tsparticles-slim": "^2.12.0"
   },

client/src/App.jsx

@@ -1,22 +1,26 @@
 import { useState } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Router } from "react-router-dom";
 import "./App.css";
 import LandingPage from "./pages/LandingPage"
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+import About from "./pages/About";
 
 function App() {
 	return (
-		<div className="bg-neutral-100 flex flex-col justify-center items-center">
-			<BrowserRouter>
-			<Navbar />
-			<Routes>
-				<Route path="/" element={<LandingPage />} />
-			</Routes>
-			<Footer />
-			</BrowserRouter>
+		<>
+			<div className="bg-neutral-100 flex flex-col justify-center items-center">
+				<BrowserRouter>
+				<Navbar />
+				<Routes>
+					<Route path="/" element={<LandingPage />} />
+					<Route path= '/about' element = {<About />} />
+				</Routes>
+				<Footer />
+				</BrowserRouter>
 
-		</div>
+			</div>
+		</>
 	);
 }
 

client/src/components/ActivitiesB.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import activity from "../../images/activity.jpg"
+
+const ActivitiesB = () => {
+    <>
+        <div className='flex flex-col justify-center items-center'>
+            <img src={activity} alt="activity" className="rounded-lg md:h-64 2xl:h-72" />
+        </div>  
+    </>
+}
+
+export default ActivitiesB

client/src/components/MissionB.jsx

@@ -0,0 +1,41 @@
+import networking from "../../images/network.png"
+import machineLearning from "../../images/deep-learning.png"
+import coding from "../../images/code.png"
+import solution from "../../images/solution.png"
+
+const MissionB = () => {
+    return (
+      <>
+        <div className="flex flex-row gap-24">
+          <div className="flex flex-col items-center justify-center bg-gradient-to-r from-[#ffbc08] via-[#fcac04] to-[#f48604] px-16 py-8 sm:px-4 sm:gap-2 sm:rounded-2xl gap-6 rounded-lg  md:w-[300px] md:h-[700px] shadow-xl">
+            <img src={networking} className="align-top"></img>
+            <span className="w-[260px] h-[800px]"><p className="text-gray-700 font-medium text-2xl mr-auto text-left ">Establish and cultivate a professional and supportive network for machine learning enthusiasts and practitioners within the academic community of San Jose State University.
+            </p></span>
+          {/* <img src={icon} alt="networking" className="w-32 h-32 sm:w-16 sm:h-16" /> */}
+          </div>
+          <div className="flex flex-col items-center justify-center bg-gradient-to-r from-[#ffbc08] via-[#fcac04] to-[#f48604] px-16 py-8 sm:px-4 sm:gap-2 sm:rounded-2xl gap-6 rounded-lg md:w-[300px] md:h-[700px] shadow-xl">
+          <img src={machineLearning} className="align-top"></img>
+          <span className="w-[260px] h-[800px]"><p className="text-gray-700 font-medium text-2xl mr-auto text-left ">To equip students with practical machine learning skills that will empower them to excel in real-world applications and contribute to cutting-edge technological advancements in various industries.
+            </p></span>
+          {/* <img src={icon} alt="networking" className="w-32 h-32 sm:w-16 sm:h-16" /> */}
+          </div>
+          <div className="flex flex-col items-center justify-center bg-gradient-to-r from-[#ffbc08] via-[#fcac04] to-[#f48604] px-16 py-8 sm:px-4 sm:gap-2 sm:rounded-2xl gap-6 rounded-lg md:w-[300px] md:h-[700px] shadow-xl">
+          <img src={coding} className="align-top"></img>
+            <span className="w-[260px] h-[800px]"><p className="text-gray-700 font-medium text-2xl mr-auto text-left ">To address and find solutions to globally impactful problems, actively engage with underrepresented communities, and creating an environment where their voices and perspectives are valued and integrated into the decision-making processes.
+            </p></span>
+
+          {/* <img src={icon} alt="networking" className="w-32 h-32 sm:w-16 sm:h-16" /> */}
+          </div>
+          <div className="flex flex-col items-center justify-center bg-gradient-to-r from-[#ffbc08] via-[#fcac04] to-[#f48604] px-16 py-8 sm:px-4 sm:gap-2 sm:rounded-2xl gap-6 rounded-lg md:w-[300px] md:h-[700px] shadow-xl">
+          <img src={solution} className="align-top"></img>
+          <span className="w-[260px] h-[800px]"><p className="text-gray-700 font-medium text-2xl mr-auto text-left ">We aim to substantiate our community's exceptional expertise in machine learning through rigorous research, practical implementations, and knowledge sharing.
+            </p></span>
+          {/* <img src={icon} alt="networking" className="w-32 h-32 sm:w-16 sm:h-16" /> */}
+          </div>
+        </div>
+      </>
+    )
+}
+
+export default MissionB
+

client/src/components/Navbar.jsx

@@ -1,37 +1,81 @@
 import React from 'react'
 import logo from "../../images/logo.svg";
-import { Link } from 'react-scroll'
+import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
-
+import {AiOutlineClose, AiOutlineMenu} from 'react-icons/ai'
+import { useState } from 'react';
+import { Button } from 'react-scroll';
 const Navbar = () => {
+    const [nav, setNav] = useState(false)
+
+    const handleNav = () => {
+      setNav(!nav)
+    }
+
   return (
-    <nav className="bg-neutral-100 md:px-16 md:py-3 flex items-center justify-center sticky w-screen top-0 left-0 right-0 drop-shadow-md">
-      <img className="h-14" src={logo} alt="logo" />
-      {/* <div className="flex gap-10">
-        <Link
-          to=""
-          smooth={true}
-          duration={1000}
-          className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04]'>
-          <p>About</p>
-        </Link>
-        <Link
-          to="our-team"
-          smooth={true}
-          duration={1000}
-          className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04]'>
-          <p>Our Team</p>
-        </Link>
-        <Link
-          to="get-involved"
-          smooth={true}
-          duration={1000}
-          className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04]'>
-          <p>Get Involved</p>
-        </Link>
-      </div> */}
-    </nav>
+    <>
+      {/* <nav className="bg-neutral-100 md:px-16 md:py-3 flex items-center justify-center sticky w-screen top-0 left-0 right-0 drop-shadow-md">
+        <img className="h-14 mr-auto" src={logo} alt="logo" />
+        <div className="flex gap-10">
+          <Link
+            to="/about"
+            smooth={true}
+            duration={1000}
+            className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04] text-2xl '>
+            <p>About</p>
+          </Link>
+          <Link
+            to="our-team"
+            smooth={true}
+            duration={1000}
+            className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04] text-2xl'>
+            <p>Our Team</p>
+          </Link>
+          <Link
+            to="get-involved"
+            smooth={true}
+            duration={1000}
+            className='cursor-pointer text-gray-500 font-semibold hover:text-[#ec6c04] text-2xl'>
+            <p>Get Involved</p>
+          </Link>
+        </div>
+      </nav> */}
+      <div className='flex justify-between items-center h-24 w-screen mx-auto px-4 text-black'>
+      <img className=" h-14 mr-auto" src={logo} alt="logo" />
+        <ul className='hidden md:flex '>
+
+          <a href='/about' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl'>
+              About
+          </a>
+          <a href='/team' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl'>
+            Our Team
+          </a>
+          <a href='/getinvolved' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl'>
+            Get Involved
+          </a>
+
+        </ul>
+        <div onClick = {handleNav} className='hidden sm:flex'>
+          {!nav ? <AiOutlineMenu size = {20} />   : <AiOutlineClose size = {20} />}
+
+        </div>
+        <div className= {nav ? 'fixed left-0 top-0 w-80 h-full border-r-100 border-r-gray-900 ease-in-out duration-500' : 'fixed left-[-100%]'}>
+          <ul className=' flex flex-col pt-24  p-4 bg-gray-100 w-80 h-screen '>
+            <a href='/about' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl border-gray'>
+                About
+            </a>
+            <a href='/team' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl border-gray'>
+              Our Team
+            </a>
+            <a href='getinvolved' className='p-4 cursor-pointer text-gray-500 font-semibold hover:text-[#EC6C04] text-xl border-gray'>
+              Get Involved
+            </a>
+          </ul>
+        </div>
+      </div>
+    </>
   )
 }
 
-export default Navbar
+export default Navbar 
+

client/src/components/OfficerCard.jsx

@@ -2,10 +2,11 @@ import React from 'react'
 import LinkedIn from '../../images/linkedin2.svg'
 import GitHub from '../../images/github.svg'
 import Portfolio from '../../images/portfolio.png'
+import { joinPaths } from '@remix-run/router'
 
 const OfficerCard = ({ photo, name, role, linkedin, github, website }) => {
   return (
-    <div className="flex gap-6">
+    <div className="flex gap-6 hover:scale-110 duration-300">
 
       <img src={photo} alt={name} className="rounded-full object-cover w-40 h-40 shadow-lg" />
 

client/src/index.css

@@ -5,3 +5,4 @@
 @tailwind components;
 @tailwind utilities;
 
+