feat(Frontend): Add content to main pages & website themes

frontend/src/App.jsx

@@ -7,19 +7,23 @@ import HomePage from './pages/HomePage';
 import FormPage from  './pages/FormPage';
 import DashboardPage from  './pages/DashboardPage';
 import AboutPage from  './pages/AboutPage';
-import ContactPage from  './pages/ContactPage';
+import PricingPage from  './pages/PricingPage';
 
 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/contact-page.css'
+
 import './styles/specific-component/resume-template.css'
 
 // Defines what Page Component appears for each of the 5 webpages 
 // based on the current path
 function App() {
+    // Initialize theme based on what user set. If new user, default to light
     const [theme, setTheme] = useState(() => {
         return localStorage.getItem("theme") || "light";
     });
@@ -30,8 +34,14 @@ function App() {
         localStorage.setItem("theme", theme);
     }, [theme]);
 
+    // Cycles through: light -> dark -> cream -> light
     const toggleTheme = () => {
-        setTheme(prev => prev === "light" ? "dark" : "light");
+        setTheme(prev => {
+            if (prev === "light") return "cream";
+            if (prev === "cream") return "midnight"; // New step!
+            if (prev === "midnight") return "dark";
+            return "light";
+        });
     };
 
     return (
@@ -43,7 +53,7 @@ function App() {
             <Route path="/form" element={<FormPage />} />
             <Route path="/dashboard" element={<DashboardPage />} />
             <Route path="/about" element={<AboutPage />} />
-            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/pricing" element={<PricingPage />} />
         </Routes>
     </div>
     )

frontend/src/components/CallToAction.jsx

@@ -0,0 +1,24 @@
+import { useNavigate } from 'react-router-dom'
+
+function CallToAction() {
+    const navigate = useNavigate()
+
+    return  (
+        <div id="call-to-action-area">
+            <h2 id="ready-to-get-started-h2">Ready to get started?</h2>
+            <p id="call-to-action-p-top">Make Resumes. Prep for Interviews. Get Hired.</p>
+            <p id="call-to-action-p-bottom">Its the 3 step Method</p>
+            <button 
+                id="call-to-action-sign-up-button" 
+                onClick={() => {
+                    navigate('/form');
+                    window.scrollTo(0, 0);
+                }}
+            >
+                Sign Up Now
+            </button>
+        </div>
+    );
+}
+
+export default CallToAction;

frontend/src/components/Footer.jsx

@@ -23,11 +23,20 @@ function Footer() {
                     <p>Ved Patel</p>
                 </div>
                 <div>
-                    <h2>Socials</h2>
+                    <h2>Socials/Contacts</h2>
                     <p>LinkedIn</p>
                     <p>Email</p>
-                    <p></p>
-                    <p></p>
+                    <p>GitHub</p>
+                    <p>Reddit</p>
+                    <p>Discord</p>
+                </div>
+                <div>
+                    <h2>Extras</h2>
+                    <p>Pricing</p>
+                    <p>About</p>
+                    <p>Terms of Service</p>
+                    <p>Privacy Policy</p>
+                    <p>FAQs</p>
                 </div>
             </div>
             <p id="copyright">

frontend/src/components/HomeStatistics.jsx

@@ -0,0 +1,53 @@
+function HomeStatistics() {
+    return  (
+        <div id="home-statistics-area">
+            <div id="home-users-count-subarea">
+                <h2 id="home-statistics-title-h2">Real Success</h2>
+                <div id="home-users-count">
+                    <h4>Users</h4>
+                    <p>0</p>
+                </div>
+            </div>
+
+            <div id="home-statistics">
+                <div id="home-impact-statistics-subarea">
+                    <h3 id="home-impact-statistics-h3">Impact Statistics</h3>
+                    <div id="impact-statistics-data">
+                        <div id="home-resumes-sent">
+                            <h4>Resumes Sent</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-interviews-held">
+                            <h4>Interviews Held</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-jobs-offered">
+                            <h4>Jobs Offered</h4>
+                            <p>0</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="home-impact-statistics-subarea">
+                    <h3 id="home-the-method-statistics-h3">The Method Statistics</h3>
+                    <div id="home-the-method-statistics-data">
+                        <div id="home-resumes-optimized">
+                            <h4>Resumes Optimized</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-hours-practicing-interviews">
+                            <h4>Hours Practicing Interviews</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-jobs-found">
+                            <h4>Jobs Recommended</h4>
+                            <p>0</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default HomeStatistics;

frontend/src/components/NavBar.jsx

@@ -44,10 +44,10 @@ function NavBar({ toggleTheme, theme }) {
 
                 <li>
                     <NavLink
-                        to="/contact"
+                        to="/pricing"
                         className={({ isActive }) => isActive ? 'active-link' : undefined}
                     >
-                        Contact
+                        Pricing
                     </NavLink>
                 </li>
             </ul>
@@ -58,7 +58,10 @@ function NavBar({ toggleTheme, theme }) {
                 </div>  
                 <div id="light-dark-toggle">
                     <button onClick={toggleTheme}>
-                        {theme === "light" ? "Dark Mode" : "Light Mode"}
+                        {theme === "light" && "Switch to Cream"}
+                        {theme === "cream" && "Switch to Midnight"}
+                        {theme === "midnight" && "Switch to Dark"}
+                        {theme === "dark" && "Switch to Light"}
                     </button>
                 </div>
             </div>

frontend/src/components/RecommendProvr.jsx

@@ -0,0 +1,16 @@
+function RecommendProvr() {
+    return  (
+        <div id="recommend-provr-area">
+            <h2 id="try-provr-h2">Try Provr!</h2>
+            <p id="recommend-provr-p">Want to master a new skill or improve your existing one? Provr focus on real 
+                learning as opposed to shallow AI learning. It focuses on building real 
+                connections and skills that take time to devleop.
+            </p>
+            <a href="https://www.provr.me/" target="_blank" rel="noopener noreferrer" id="visit-provr-link">
+                <button id="visit-provr-button">Visit Provr</button>
+            </a>
+        </div>
+    );
+}
+
+export default RecommendProvr;

frontend/src/pages/AboutPage.jsx

@@ -1,5 +1,3 @@
-import NavBar from "../components/NavBar";
-
 function AboutPage() {
     return  (
         <div>

frontend/src/pages/ContactPage.jsx

@@ -1,5 +1,3 @@
-import NavBar from "../components/NavBar";
-
 function ContactPage() {
     return  (
         <div>

frontend/src/pages/DashboardPage.jsx

@@ -1,4 +1,3 @@
-import NavBar from "../components/NavBar";
 import FileUpload from "../components/FileUpload";
 
 function DashboardPage() {

frontend/src/pages/FormPage.jsx

@@ -1,4 +1,3 @@
-import NavBar from "../components/NavBar";
 import Form from "../components/Form";
 
 function FormPage() {

frontend/src/pages/HomePage.jsx

@@ -1,15 +1,20 @@
-import NavBar from "../components/NavBar";
 import HeroArea from "../components/HeroArea";
+import HowItWorks from "../components/HowItWorks";
+import HomeStatistics from "../components/HomeStatistics";
 import Reviews from "../components/Reviews";
+import RecommendProvr from "../components/RecommendProvr";
+import CallToAction from "../components/CallToAction";
 import Footer from "../components/Footer";
-import HowItWorks from "../components/HowItWorks";
 
 function HomePage() {
     return  (
         <div>
             <HeroArea />
             <HowItWorks />
+            <HomeStatistics />
             <Reviews />
+            <RecommendProvr />
+            <CallToAction />
             <Footer />
         </div>
     );

frontend/src/pages/PricingPage.jsx

@@ -0,0 +1,53 @@
+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">
+                    <h2 className="pricing-h2">Free</h2>
+                    <p className="pricing-p">Basic features for everyone</p>
+                    <p className="pricing-price-p">$0/month</p>
+                    <div>
+                        <ul>
+                            <li>Basic access to all features</li>
+                            <li>Community support</li>
+                            <li>Interview Prep</li>
+                            <li>Job Apply</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="pricing-student-tier">
+                    <h2 className="pricing-h2">Student</h2>
+                    <p className="pricing-p">Discounted pricing for students</p>
+                    <p className="pricing-price-p">$2.49/month</p>
+                    <div>
+                        <ul>
+                            <li>Everything in free plan +</li>
+                            <li>Store 10 more resumes</li>
+                            <li>Priority support</li>
+                            <li>Feature requests</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="pricing-premium-tier">
+                    <h2 className="pricing-h2">Premium</h2>
+                    <p className="pricing-p">All features for professionals</p>
+                    <p className="pricing-price-p">$6.99/month</p>
+                    <div>
+                        <ul>
+                            <li>Everything in free plan +</li>
+                            <li>Store 15 more resumes</li>
+                            <li>Use more optimization options</li>
+                            <li>5 more resume templates</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                        </div>
+            </div>
+    );
+}
+
+export default PricingPage;