Merge pull request #18 from Princeton21/feature/navbar-footer

Added Navbar and Footer component

client/package.json

@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

client/src/App.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Navbar from "./components/Navbar/Navbar";
+import Footer from "./components/Footer/Footer";
+
+// Import your pages or components for each route
+import Home from "./pages/Home";
+import Events from "./pages/Events";
+import Team from "./pages/Team";
+import Contact from "./pages/Contact";
+
+function App() {
+  return (
+    <Router>
+      <Navbar />
+      <Routes>
+        <Route path="/" exact component={Home} />
+        <Route path="/events" component={Events} />
+        <Route path="/team" component={Team} />
+        <Route path="/contact" component={Contact} />
+      </Routes>
+      <Footer />
+    </Router>
+  );
+}
+
+export default App;

client/src/components/Footer/Footer.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styles from "./Footer.module.css";
+import { RiInstagramLine, RiLinkedinBoxLine, RiFacebookBoxLine } from "react-icons/ri";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { SiHashnode, SiGithub } from "react-icons/si";
+import { Link } from "react-router-dom";
+
+const Footer = () => {
+  return (
+    <>
+      <div className={styles.footer}>
+        <h2 className={styles.header}>Thank you for your love and support!</h2>
+        <p className={styles.para}>Connect with us</p>
+
+        <div className={styles.socialMedia}>
+          <Link to="https://twitter.com" className={styles.socialMediaIcon}>
+            <FaSquareXTwitter />
+          </Link>
+          <Link
+            to="https://instagram.com/"
+            className={styles.socialMediaIcon}
+          >
+            <RiInstagramLine />
+          </Link>
+          <Link
+            to="https://linkedin.com/"
+            className={styles.socialMediaIcon}
+          >
+            <RiLinkedinBoxLine />
+          </Link>
+          <Link
+            to="https://facebook.com/"
+            className={styles.socialMediaIcon}
+          >
+            <RiFacebookBoxLine />
+          </Link>
+          <Link
+            to="https://hashnode.com/"
+            className={styles.socialMediaIcon}
+          >
+            <SiHashnode />
+          </Link>
+          <Link
+            to="https://github.com/"
+            className={styles.socialMediaIcon}
+          >
+            <SiGithub />
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Footer;

client/src/components/Footer/Footer.module.css

@@ -0,0 +1,29 @@
+.footer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding:3rem;
+}
+.header{
+    padding: 1rem 2rem;
+    background: #fff;
+    position: relative;
+    z-index: 1000;
+    font-size: 2rem;
+}
+
+.para{
+    padding:1rem;
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: #000;
+    margin: 0 1rem;
+}
+
+.socialMedia a{
+    color: #000;
+    font-size: 3rem;
+    margin: 0 1rem;
+    transition: color 0.3s linear;
+}

client/src/components/Navbar/Navbar.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styles from "./Navbar.module.css";
+import { HiMiniMoon } from "react-icons/hi2";
+
+const Navbar = () => {
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.logo}>GDSC UPES</div>
+      <ul className={styles.navLinks}>
+        <li className={styles.navLink}>
+          <Link to="/">Home</Link>
+        </li>
+        <li className={styles.navLink}>
+          <Link to="/events">Events</Link>
+        </li>
+        <li className={styles.navLink}>
+          <Link to="/team">Team</Link>
+        </li>
+        <li className={styles.navLink}>
+          <Link to="/contact">Contact</Link>
+        </li>
+      </ul>
+      <button className={styles.button}><HiMiniMoon/></button>
+    </nav>
+  );
+};
+
+export default Navbar;

client/src/components/Navbar/Navbar.module.css

@@ -0,0 +1,81 @@
+.navbar {
+    color: #000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+.logo {
+    font-size: 20px;
+}
+
+.navLinks {
+    list-style: none;
+    display: flex;
+    padding : 0 0 0 40rem; 
+}
+
+.navLink {
+    margin: 0 20px;
+    text-decoration: none;
+    list-style: none;
+    padding: .5rem 1.5rem;
+    border: 2px solid #000;
+    border-radius:20px;
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+}
+
+.navLink a{
+    text-decoration: none;
+    color: #000;
+}
+
+.navLink:hover {
+    transform: translateY(-2px);
+}
+
+.navLink:active {
+    background-color: blue;
+}
+
+.navLink:nth-child(1) {
+    border-color: var(--red-color);
+}
+.navLink:nth-child(1):hover {
+    background-color: var(--red-color-light);
+}
+
+.navLink:nth-child(2) {
+    border-color: var(--blue-color);
+}
+.navLink:nth-child(2):hover {
+    background-color: var(--blue-color-light);
+}
+
+.navLink:nth-child(3) {
+    border-color: var(--green-color);
+}
+.navLink:nth-child(3):hover {
+    background-color: var(--green-color-light);
+}
+
+.navLink:nth-child(4) {
+    border-color: var(--yellow-color);
+}
+.navLink:nth-child(4):hover {
+    background-color: var(--yellow-color-light);
+}
+
+.button {
+    background-color:#000;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: none;
+    color:white;    
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding-top: 0.2rem;
+}

client/src/index.css

@@ -1,13 +1,17 @@
-body {
+*{
+  padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+:root {
+  --red-color: hsl(5, 81%, 56%);
+  --blue-color: hsl(219, 80%, 62%);
+  --green-color: hsl(151, 85%, 33%);
+  --yellow-color: hsl(45, 96%, 50%);
+
+  --red-color-light: hsl(4, 82%, 90%);
+  --blue-color-light: hsl(219, 82%, 90%);
+  --green-color-light: hsl(151, 87%, 90%);
+  --yellow-color-light: hsl(45, 97%, 90%);
+}

client/src/pages/Contact.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Contact = () => {
+  return (
+    <div>Contact</div>
+  )
+}
+
+export default Contact

client/src/pages/Events.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Events = () => {
+  return (
+    <div>Events</div>
+  )
+}
+
+export default Events