14 course files page

package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
@@ -19,6 +19,7 @@
     "font-awesome": "^4.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",

src/App.js

@@ -2,17 +2,22 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Landingpage from "./pages/landingpage";
 import Home from "./pages/Home";
 import SignIn from "./pages/SignIn";
+import CourseFiles from "./pages/CourseFiles";
 import SignUp from "./pages/SignUp";
 
+
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Landingpage />} />
 
         <Route path="/Home" element={<Home />} />
-        <Route path="/SignUp" element={<SignUp />} />
         <Route path="/SignIn" element={<SignIn />} />
+
+        <Route path="/SignUp" element={<SignUp />} />
+
+        <Route path="/CourseFiles" element={<CourseFiles />} />
       </Routes>
     </Router>
   );

src/components/Navbar.jsx

@@ -1,31 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 import "../styles/Navbar.css";
 import MenuIcon from "@mui/icons-material/Menu";
-import { useState } from "react";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const Navbar = () => {
   const [showNav, setShowNav] = useState(false);
-  const [showYearDrop, setShowYearDrop] =useState(false)
+  const [showYearDrop, setShowYearDrop] = useState(false);
 
   const handleHamburgerClick = () => {
     setShowNav(!showNav);
   };
+
   const showYearDropDown = () => {
-    setShowYearDrop(!showYearDrop)
-  }
+    setShowYearDrop(!showYearDrop);
+  };
+
   return (
     <>
       <div className="nav">
         <div>
           <div className="Address">
             <img src="./acesLogo.jpeg" alt="aceslogo" />
-
             <h3 className="poppins-regular">Hi, Logical883</h3>
           </div>
-
           <p className="email">[email protected]</p>
-
           <div className="hamburger-icon">
             <MenuIcon
               onClick={handleHamburgerClick}
@@ -37,44 +35,31 @@ const Navbar = () => {
           <ul className="mainLinks">
             <li>
               <div>
-              <a href="#">Select Year <ExpandMoreIcon/></a>
+                <a href="#" className="nav-link">
+                  <span>Select Year</span> <ExpandMoreIcon className="icon" />
+                </a>
               </div>
               <ul className="dropdown">
-                <li>
-                  <a href="#">Year 1</a>
-                </li>
-                <li>
-                  <a href="#">Year 2</a>
-                </li>
-                <li>
-                  <a href="#">Year 3</a>
-                </li>
-                <li>
-                  <a href="#">Year 4</a>
-                </li>
+                <li><a href="#">Year 1</a></li>
+                <li><a href="#">Year 2</a></li>
+                <li><a href="#">Year 3</a></li>
+                <li><a href="#">Year 4</a></li>
               </ul>
             </li>
             <li>
-              <a href="#">More Info <ExpandMoreIcon/></a>
+              <a href="#" className="nav-link">
+                <span>More Info</span> <ExpandMoreIcon className="icon" />
+              </a>
               <ul className="dropdown">
-                <li>
-                  <a href="#">Team</a>
-                </li>
-                <li>
-                  <a href="#">History</a>
-                </li>
-                <li>
-                  <a href="#">Mission</a>
-                </li>
+                <li><a href="#">Team</a></li>
+                <li><a href="#">History</a></li>
+                <li><a href="#">Mission</a></li>
               </ul>
             </li>
             <li>
-              <a href="#">User Instructions <ExpandMoreIcon/></a>
-              {/* <ul className="dropdown">
-            <li><a href="#">Web Development</a></li>
-            <li><a href="#">Graphic Design</a></li>
-            <li><a href="#">Consulting</a></li>
-          </ul> */}
+              <a href="#" className="nav-link">
+                <span>User Instructions</span> <ExpandMoreIcon className="icon" />
+              </a>
             </li>
           </ul>
         </div>
@@ -85,51 +70,38 @@ const Navbar = () => {
           <h3 className="poppins-regular">Hi, Logical883</h3>
         </div>
         <p className="email">[email protected]</p>
-
         <ul className="sideLinks">
           <li>
-            <a href="#"  onClick={showYearDropDown }><ExpandMoreIcon/>Select Year</a>
+            <a href="#" onClick={showYearDropDown} className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              <span style={{ marginLeft: "5px" }}>Select Year</span>
+            </a>
             <ul className={`sidedropdown ${showYearDrop ? "active" : ""}`}>
-              <li>
-                <a href="#">Year 1</a>
-              </li>
-              <li>
-                <a href="#">Year 2</a>
-              </li>
-              <li>
-                <a href="#">Year 3</a>
-              </li>
-              <li>
-                <a href="#">Year 4</a>
-              </li>
+              <li><a href="#">Year 1</a></li>
+              <li><a href="#">Year 2</a></li>
+              <li><a href="#">Year 3</a></li>
+              <li><a href="#">Year 4</a></li>
             </ul>
           </li>
           <li>
-            <a href="#"><ExpandMoreIcon/>More Info</a>
+            <a href="#" className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              More Info
+            </a>
             <ul className="dropdown">
-              <li>
-                <a href="#">Team</a>
-              </li>
-              <li>
-                <a href="#">History</a>
-              </li>
-              <li>
-                <a href="#">Mission</a>
-              </li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">History</a></li>
+              <li><a href="#">Mission</a></li>
             </ul>
           </li>
           <li>
-            <a href="#"><ExpandMoreIcon/>User Instructions</a>
-            {/* <ul className="dropdown">
-            <li><a href="#">Web Development</a></li>
-            <li><a href="#">Graphic Design</a></li>
-            <li><a href="#">Consulting</a></li>
-          </ul> */}
+            <a href="#" className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              User Instructions
+            </a>
           </li>
         </ul>
-        <button className="logout-button">
-          Log Out
-        </button>
+        <button className="logout-button">Log Out</button>
       </div>
     </>
   );

src/index.css

@@ -1,4 +1,10 @@
+
+/* body {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url("./assets/gradient_2.jpg");
+} */
+
 /* body {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
       url("./assets/gradient_2.jpg");
-  } */
+  } */

src/pages/CourseFiles.js

@@ -0,0 +1,49 @@
+import React from "react";
+import "../styles/coursefiles.css";
+import { Link } from "react-router-dom";
+
+import { FaBook, FaDownload } from "react-icons/fa";
+import Navbar from "../components/Navbar";
+
+function CourseFiles() {
+  const courses = [
+    "Algebra",
+    "Applied Electricity",
+    "Basic Mechanics",
+    "Comm. Skills",
+    "Environ. Studies",
+  ];
+
+  return (
+    <>
+      <Navbar />
+      <div className="cf-container">
+        <h1 className="cf-heading">ACES Course Files</h1>
+        <div className="cf-content">
+          <h2>First Semester</h2>
+          <ul>
+            {courses.map((course) => (
+              <li key={course}>
+                <FaBook /> {course} <FaDownload />
+              </li>
+            ))}
+          </ul>
+          <Link
+            to="/Home"
+            style={{ textDecoration: "None", textAlign: "center" }}
+            className="go-back"
+          >
+            <button
+              style={{ background: "inherit", border: "none", color: "#000" }}
+              className="go-back-icon"
+            >
+              Back
+            </button>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default CourseFiles;

src/pages/Home.js

@@ -1,4 +1,5 @@
 import "../styles/Home.css"
+import { Link } from "react-router-dom";
 import Navbar from "../components/Navbar";
 
 function Home() {
@@ -10,26 +11,34 @@ function Home() {
       <div className="course-Container">
          <div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         </div>
         <div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         </div>
       </div>