Homepage UI updates

src/App.css

@@ -26,3 +26,20 @@
     0 0 30px #1CD34D,
     inset 0 0 5px rgba(28, 211, 77, 0.3) !important;
 }
+
+
+.appLayout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.pageArea {
+  flex: 1;
+  overflow: auto;
+}
+
+body {
+  margin: 0;
+  background: black;
+}

src/App.jsx

@@ -1,48 +1,31 @@
-import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
-import './App.css';
-import Login from './Components/Login';
-import Signup from './Components/Signup';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import "./App.css";
+
+import Home from "./Pages/Home";
+import Login from "./Components/Login";
+import Signup from "./Components/Signup";
 import Brainrot from "./Components/Brainrot";
-import Home from './Pages/Home';
+import BottomNav from "./Components/BottomNav";
 
 function App() {
   return (
     <Router>
-      <div className="App">
-        <nav >
-          <NavLink 
-            to="/">
-            Home
-          </NavLink>
-          <NavLink 
-            to="/login" 
-
-          >
-            Login
-          </NavLink>
-          <NavLink 
-            to="/signup" 
-          >
-            Signup
-          </NavLink>
-          <NavLink 
-            to="/brainrot" 
-          >
-            Brainrot
-          </NavLink>
-        </nav>
+      <div className="appLayout">
 
-        <div>
+        <div className="pageArea">
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
             <Route path="/brainrot" element={<Brainrot />} />
           </Routes>
         </div>
+
+        <BottomNav />
+
       </div>
     </Router>
   );
 }
 
-export default App;
+export default App;

src/Components/BottomNav.css

@@ -0,0 +1,36 @@
+.bottomNav {
+  height: 80px;
+  background: black;
+  border-top: 1px solid #222;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.tab {
+  text-decoration: none;
+  color: red;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.tabIcon {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  border: 2px solid limegreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.tabLabel {
+  font-size: 12px;
+}
+
+.tab.active {
+  color: limegreen;
+}

src/Components/BottomNav.jsx

@@ -0,0 +1,25 @@
+import { NavLink } from "react-router-dom";
+import "./BottomNav.css";
+
+function Tab({ to, icon, label }) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) => "tab" + (isActive ? " active" : "")}
+    >
+      <div className="tabIcon">{icon}</div>
+      <div className="tabLabel">{label}</div>
+    </NavLink>
+  );
+}
+
+export default function BottomNav() {
+  return (
+    <nav className="bottomNav">
+      <Tab to="/brainrot" icon="💪" label="Workouts" />
+      <Tab to="/signup" icon="🗓️" label="Calendar" />
+      <Tab to="/login" icon="👤" label="Profile" />
+      <Tab to="/" icon="🏠" label="Home" />
+    </nav>
+  );
+}

src/Pages/Home.css

@@ -72,3 +72,66 @@
   .links-grid{ flex-direction:column; align-items:center;  }
   .begin-card{ flex: none; width:100%; margin-left: auto,}
 }
+
+
+/*  OPEN SOURCE CHANGES */
+
+/* home screen style */
+.homeScreen {
+  width: 100vw;
+  height: 100vh;
+  background: black;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 30px;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* title style */
+.appTitle {
+  color: #00e0ff;
+  font-size: 28px;
+  margin: 0;
+  text-align: center;
+  font-weight: bold;
+}
+
+/* chart styles */
+.chartFrame {
+  width: 100%;
+  max-width: 400px;
+  border: 2px solid #1e66ff;
+  padding: 12px;
+}
+
+.chartImage {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+
+/* stats box styles */
+.statsCard {
+  width: 100%;
+  max-width: 400px;
+  border: 2px solid #1e66ff;
+  border-radius: 24px;
+  background: #5e5e5e;
+  padding: 25px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 18px;
+  color: black;
+}
+
+.statsCol {
+  margin: 0;
+  padding-left: 20px;
+  line-height: 1.8;
+}

src/Pages/Home.jsx

@@ -1,57 +1,30 @@
-import React from 'react';
-import '../App.css';
-import './Home.css';
+import React from "react";
+import "./Home.css";
+import chartImg from "./chart.png";
 
-function Home({ onBegin }) {
+function Home() {
   return (
-    <div className="home-root">
-      <header className="home-header">
-        <h1 className="neon-title text">OSC's Epic Workout App</h1>
-        <p className="neon-subtitle text">Lock in. Gain aura. Save money.</p>
-      </header>
-
-
-
-      <main className="home-main">
-        {/* Begin Workout - Prominent at the top */}
-        <div className="begin-container">
-          <div className="link-card button begin-card">
-            <div className="card-title text ">Begin Workout</div>
-            <div className="card-sub text">Primary action</div>
-            <button
-              className="begin-button neon-blue text"
-              onClick={() => {
-                if (typeof onBegin === 'function') onBegin();
-              }}
-            >
-              Begin Workout
-            </button>
-          </div>
-        </div>
-
-        {/* Choices panel */}
-        <section className="links-panel">
-          <h2 className="panel-title text">Choices</h2>
-          <div className="choices-column">
-            <button className="link-card neon-red small-link" onClick={() => {/* TODO: Implement previous workout functionality */}}>
-              <div className="card-title text">Previous Workout</div>
-              <div className="card-sub text">View stats</div>
-            </button>
-
-            <button className="link-card neon-green small-link" onClick={() => {/* TODO: Implement aura board functionality */}}>
-              <div className="card-title text">Aura Board</div>
-              <div className="card-sub text">See your aura</div>
-            </button>
-
-            <button className="link-card neon-red small-link" onClick={() => {/* TODO: Implement settings functionality */}}>
-              <div className="card-title text">Settings</div>
-              <div className="card-sub text">Adjust app</div>
-            </button>
-          </div>
-        </section>
-      </main>
-
-      <footer className="home-footer text">© OSC Workout App</footer>
+    <div className="homeScreen">
+
+      <h1 className="appTitle">OSC Workout App</h1>
+
+
+      <div className="chartFrame">
+        <img src={chartImg} alt="Workout Chart" className="chartImage" />
+      </div>
+
+      <div className="statsCard">
+        <ul className="statsCol">
+          <li>Total</li>
+          <li>Sessions</li>
+        </ul>
+
+        <ul className="statsCol">
+          <li>Weight Lifted</li>
+          <li>PRs Hit</li>
+        </ul>
+      </div>
+
     </div>
   );
 }