feat(Frontend): Footer and related pages(WIP)

frontend/package.json

@@ -27,6 +27,7 @@
     "globals": "^16.5.0",
     "stylelint": "^17.3.0",
     "stylelint-config-standard": "^40.0.0",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vite-plugin-svgr": "^4.5.0"
   }
 }

frontend/src/App.jsx

@@ -8,13 +8,20 @@ import FormPage from  './pages/FormPage';
 import DashboardPage from  './pages/DashboardPage';
 import AboutPage from  './pages/AboutPage';
 import PricingPage from  './pages/PricingPage';
+import NewsPage from  './pages/NewsPage';
+import DataPage from  './pages/DataPage';
+import TermsOfServicePage from  './pages/TermsOfServicePage';
+import PrivacyPolicyPage from  './pages/PrivacyPolicyPage';
+import FAQsPage from  './pages/FAQsPage';
+
 
 import './styles/styles.css'
 import './styles/home-page.css'
 import './styles/form-page.css'
 import './styles/dashboard-page.css'
 import './styles/about-page.css'
 import './styles/pricing-page.css'
+import './styles/news-page.css'
 
 import './styles/contact-page.css'
 
@@ -34,14 +41,9 @@ function App() {
         localStorage.setItem("theme", theme);
     }, [theme]);
 
-    // Cycles through: light -> dark -> cream -> light
-    const toggleTheme = () => {
-        setTheme(prev => {
-            if (prev === "light") return "cream";
-            if (prev === "cream") return "midnight"; // New step!
-            if (prev === "midnight") return "dark";
-            return "light";
-        });
+    // Sets theme directly from navbar selection
+    const toggleTheme = (selectedTheme) => {
+        setTheme(selectedTheme);
     };
 
     return (
@@ -54,6 +56,11 @@ function App() {
             <Route path="/dashboard" element={<DashboardPage />} />
             <Route path="/about" element={<AboutPage />} />
             <Route path="/pricing" element={<PricingPage />} />
+            <Route path="/news" element={<NewsPage />} />
+            <Route path="/data" element={<DataPage />} />
+            <Route path="/terms-of-service" element={<TermsOfServicePage />} />
+            <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
+            <Route path="/faqs" element={<FAQsPage />} />
         </Routes>
     </div>
     )

frontend/src/components/Footer.jsx

@@ -1,3 +1,5 @@
+import { NavLink } from 'react-router-dom'
+
 function Footer() {
     return (
         <div>
@@ -6,37 +8,66 @@ function Footer() {
                     <h2>The <span className="method-word">Method's</span> Moto</h2>
                     <p>Make Every Task Happen, Own Destiny</p>
                 </div>
-                <div>
+                <div id="quick-links">
                     <h2>Quick Links</h2>
-                    <p>Home</p>
-                    <p>Resume</p>
-                    <p>Dashboard</p>
-                    <p>About</p>
-                    <p>Contact</p>
+                    <NavLink id="home-quick-navlink"
+                        to="/"
+                        className={({ isActive }) => isActive ? 'active-link' : undefined}
+                    >
+                        Home
+                    </NavLink>
+
+                    <NavLink id="home-quick-navlink"
+                        to="/form"
+                        className={({ isActive }) => isActive ? 'active-link' : undefined}
+                    >
+                        Form
+                    </NavLink>
+
+                    <NavLink id="home-quick-navlink"
+                        to="/dashboard"
+                        className={({ isActive }) => isActive ? 'active-link' : undefined}
+                    >
+                        Dashboard
+                    </NavLink>
+
+                    <NavLink id="home-quick-navlink"
+                        to="/about"
+                        className={({ isActive }) => isActive ? 'active-link' : undefined}
+                    >
+                        About
+                    </NavLink>
+
+                    <NavLink id="home-quick-navlink"
+                        to="/pricing"
+                        className={({ isActive }) => isActive ? 'active-link' : undefined}
+                    >
+                        Pricing
+                    </NavLink>
                 </div>
-                <div>
+                <div id="team-section">
                     <h2>The Team</h2>
-                    <p>Cole Saldanha</p>
-                    <p>Daniel Hurtarte</p>
-                    <p>Lien Jabujab</p>
-                    <p>Sean San</p>
-                    <p>Ved Patel</p>
+                    <a href="https://www.linkedin.com/in/cole-saldanha/" target="_blank" rel="noopener noreferrer">Cole Saldanha</a>
+                    <a href="https://www.linkedin.com/in/daniel-ricardo-hurtarte-29a911389/" target="_blank" rel="noopener noreferrer">Daniel Hurtarte</a>
+                    <a href="https://www.linkedin.com/in/lien-jabujab-0498a22b7/" target="_blank" rel="noopener noreferrer">Lien Jabujab</a>
+                    <a href="https://www.linkedin.com/in/seansan06/" target="_blank" rel="noopener noreferrer">Sean San</a>
+                    <a href="https://www.linkedin.com/in/vedevpatel24/" target="_blank" rel="noopener noreferrer">Ved Patel</a>
                 </div>
-                <div>
+                <div id="socials-section">
                     <h2>Socials/Contacts</h2>
                     <p>LinkedIn</p>
                     <p>Email</p>
                     <p>GitHub</p>
                     <p>Reddit</p>
                     <p>Discord</p>
                 </div>
-                <div>
+                <div id="extras-section">
                     <h2>Extras</h2>
-                    <p>Pricing</p>
-                    <p>About</p>
-                    <p>Terms of Service</p>
-                    <p>Privacy Policy</p>
-                    <p>FAQs</p>
+                    <NavLink to="/news" className={({ isActive }) => isActive ? 'active-link' : undefined}>News</NavLink>
+                    <NavLink to="/data" className={({ isActive }) => isActive ? 'active-link' : undefined}>Data</NavLink>
+                    <NavLink to="/terms-of-service" className={({ isActive }) => isActive ? 'active-link' : undefined}>Terms of Service</NavLink>
+                    <NavLink to="/privacy-policy" className={({ isActive }) => isActive ? 'active-link' : undefined}>Privacy Policy</NavLink>
+                    <NavLink to="/faqs" className={({ isActive }) => isActive ? 'active-link' : undefined}>FAQs</NavLink>
                 </div>
             </div>
             <p id="copyright">

frontend/src/components/NavBar.jsx

@@ -1,7 +1,25 @@
 import { NavLink } from 'react-router-dom'
+import { useState } from 'react'
 
 
 function NavBar({ toggleTheme, theme }) {
+    const [showThemeMenu, setShowThemeMenu] = useState(false)
+
+    const themes = ['light', 'cream', 'midnight', 'dark']
+    const themeLabels = {
+        light: 'Light',
+        cream: 'Cream',
+        midnight: 'Midnight',
+        dark: 'Dark'
+    }
+
+    const handleThemeSelect = (selectedTheme) => {
+        if (selectedTheme !== theme) {
+            toggleTheme(selectedTheme)
+        }
+        setShowThemeMenu(false)
+    }
+
     return  (
         <nav href="/" id="nav-bar">
             <h2 id="the-method">The <span className="method-word">Method</span></h2>
@@ -57,12 +75,24 @@ function NavBar({ toggleTheme, theme }) {
                     <button>Sign up</button>
                 </div>  
                 <div id="light-dark-toggle">
-                    <button onClick={toggleTheme}>
-                        {theme === "light" && "Switch to Cream"}
-                        {theme === "cream" && "Switch to Midnight"}
-                        {theme === "midnight" && "Switch to Dark"}
-                        {theme === "dark" && "Switch to Light"}
-                    </button>
+                    <div className="theme-selector-container">
+                        <button onClick={() => setShowThemeMenu(!showThemeMenu)}>
+                            Theme: {themeLabels[theme]}
+                        </button>
+                        {showThemeMenu && (
+                            <div className="theme-menu">
+                                {themes.map(t => (
+                                    <button
+                                        key={t}
+                                        className={`theme-option ${t === theme ? 'active' : ''}`}
+                                        onClick={() => handleThemeSelect(t)}
+                                    >
+                                        {themeLabels[t]}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
 

frontend/src/pages/AboutPage.jsx

@@ -1,6 +1,35 @@
 function AboutPage() {
     return  (
-        <div>
+        <div id="about-page">
+            <div id="about-page-content">
+                <a id="go-back-home" href="/">Go back home</a>
+                <h1>About The Method</h1>
+                <h2>Who</h2>
+                <p>Made by a team of 2nd and 3rd year Computer Science students at UCI.</p>
+                <h2>What</h2>
+                <p>The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:</p>
+                <ul>
+                    <li>#1) Resume Builder</li>
+                    <li>#2) Interview Practice</li>
+                    <li>#3) Job Search Tools</li>
+                    <li>#4) Progress Tracking</li>
+                </ul>
+                <h2>When</h2>
+                <p>Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.</p>
+                <h2>Where</h2>
+                <p>Based in Irvine, California, United States</p>
+                <h2>Why</h2>
+                <p>Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that
+                    can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their
+                    performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field.
+                </p>
+                <h2>How</h2>
+                <p>For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP).
+                    If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team.
+                    We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work
+                    from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion.
+                </p>
+            </div>
         </div>
     );
 }

frontend/src/pages/DataPage.jsx

@@ -0,0 +1,11 @@
+function Data() {
+    return  (
+        <div id="data">
+                <h1>Your Data</h1>
+                <p>Manage your data and privacy settings.</p>
+                <p>Here you can view and manage the data we have collected about you, as well as adjust your privacy settings and preferences.</p>
+        </div>
+    );
+}
+
+export default Data;

frontend/src/pages/FAQsPage.jsx

@@ -0,0 +1,10 @@
+function FAQs() {
+    return  (
+        <div id="faqs">
+            <h1>Frequently Asked Questions (FAQs)</h1>
+            <p>Find answers to common questions about The Method.</p>
+        </div>
+    );
+}
+
+export default FAQs;

frontend/src/pages/NewsPage.jsx

@@ -0,0 +1,63 @@
+function News() {
+    const updates = [
+        {
+            id: "idhere1",
+            title: "Title goes here",
+            caption: "Caption would go here",
+            body: "Example text of what this thing does.",
+            date: "March 10, 2026 @ 2:00 PM",
+        },
+        {
+            id: "idhere2",
+            title: "Title goes here",
+            caption: "Caption would go here",
+            body: "Example text of what this thing does.",
+            date: "March 11, 2026 @ 3:00 PM",
+        },
+        {
+            id: "idhere2",
+            title: "Title goes here",
+            caption: "Caption would go here",
+            body: "Example text of what this thing does.",
+            date: "March 11, 2026 @ 3:00 PM",
+        },
+        {
+            id: "idhere2",
+            title: "Title goes here",
+            caption: "Caption would go here",
+            body: "Example text of what this thing does.",
+            date: "March 11, 2026 @ 3:00 PM",
+        },
+    ];
+
+    return (
+        <section id="news" aria-labelledby="news-title">
+            <h1 id="news-title" className="news-title">News</h1>
+            <p className="news-intro">
+                Latest updates about The Method, including features, improvements, and announcements.
+            </p>
+
+            <ul className="news-grid" role="list">
+                {updates.map((item) => (
+                    <li key={item.id}>
+                        <article className="news-card" aria-labelledby={`news-item-title-${item.id}`}>
+                            <header>
+                                <div className="news-heading">
+                                    <h2 id={`news-item-title-${item.id}`}>{item.title}</h2>
+                                    <p className="news-caption">{item.caption}</p>
+                                </div>
+
+                                <p className="news-date">
+                                    <time dateTime={item.date}>{item.date}</time>
+                                </p>
+                            </header>
+                            <p>{item.body}</p>
+                        </article>
+                    </li>
+                ))}
+            </ul>
+        </section>
+    );
+}
+
+export default News;

frontend/src/pages/PricingPage.jsx

@@ -1,11 +1,16 @@
+import FreeIcon from "../assets/pricingFree.svg?react";
+import StudentIcon from "../assets/pricingStudent.svg?react";
+import PremiumIcon from "../assets/pricingPremium.svg?react";
+
 function PricingPage() {
     return  (
         <div id="pricing-page">
             <h1 id="pricing-page-h1">Pricing Page</h1>
             <div id="pricing-tiers-subarea">
                 <div id="pricing-free-tier">
+                    <FreeIcon className="pricing-icon" />
                     <h2 className="pricing-h2">Free</h2>
-                    <p className="pricing-p">Basic features for everyone</p>
+                    <p className="pricing-p">Essential features for all users</p>
                     <p className="pricing-price-p">$0/month</p>
                     <div>
                         <ul>
@@ -18,8 +23,9 @@ function PricingPage() {
                     </div>
                 </div>
                 <div id="pricing-student-tier">
+                    <StudentIcon className="pricing-icon" />
                     <h2 className="pricing-h2">Student</h2>
-                    <p className="pricing-p">Discounted pricing for students</p>
+                    <p className="pricing-p">Discounts for students</p>
                     <p className="pricing-price-p">$2.49/month</p>
                     <div>
                         <ul>
@@ -32,9 +38,10 @@ function PricingPage() {
                     </div>
                 </div>
                 <div id="pricing-premium-tier">
+                    <PremiumIcon className="pricing-icon" />
                     <h2 className="pricing-h2">Premium</h2>
                     <p className="pricing-p">All features for professionals</p>
-                    <p className="pricing-price-p">$6.99/month</p>
+                    <p className="pricing-price-p">$5.49/month</p>
                     <div>
                         <ul>
                             <li>Everything in free plan +</li>

frontend/src/pages/PrivacyPolicyPage.jsx

@@ -0,0 +1,11 @@
+function PrivacyPolicy() {
+    return  (
+        <div id="privacy-policy">
+            <h1>Privacy Policy</h1>
+            <p>Learn about our privacy practices.</p>
+            <p>At The Method, we are committed to protecting your privacy. This privacy policy explains how we collect, use, and safeguard your information when you use our platform. Please read it carefully to understand our practices regarding your personal data.</p>
+        </div>
+    );
+}
+
+export default PrivacyPolicy;