From d4be857fcd846b55785c058cdc595fd09c1adf5e Mon Sep 17 00:00:00 2001 From: Sean San Date: Fri, 20 Feb 2026 23:51:36 -0800 Subject: [PATCH 01/23] style(Frontend): Add & update comments for theme toggling functionality --- frontend/src/App.jsx | 2 ++ frontend/src/styles/styles.css | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 37b2228..c4e1422 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -20,6 +20,7 @@ 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,6 +31,7 @@ function App() { localStorage.setItem("theme", theme); }, [theme]); + // Toggle between light and dark themes, and save preference to localStorage const toggleTheme = () => { setTheme(prev => prev === "light" ? "dark" : "light"); }; diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index c820158..87d31f6 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -1,4 +1,4 @@ -/* Light Mode & Dark Mode colors variables. +/* Light Mode(Default) & Dark Mode colors. Also sets html, body, and root defaults & standardized stylings. */ :root { /* Backgrounds */ @@ -43,7 +43,7 @@ background-color: var(--tinted-bg-color); } -/* Dark Mode(WIP) */ +/* Dark Mode */ [data-theme="dark"] { /* Backgrounds */ --true-bg-color: #121212; From aa8d23414268b86942f3a210cc7013a537eaf73b Mon Sep 17 00:00:00 2001 From: Sean San Date: Fri, 20 Feb 2026 23:56:06 -0800 Subject: [PATCH 02/23] feat(Frontend): Add basic logic for cream color theme When the button is clicked it will cycle through the three website themes: light -> dark -> cream -> light themes. --- frontend/src/App.jsx | 8 ++++++-- frontend/src/styles/styles.css | 30 ++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index c4e1422..0f415ed 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -31,9 +31,13 @@ function App() { localStorage.setItem("theme", theme); }, [theme]); - // Toggle between light and dark themes, and save preference to localStorage + // Cycles through: light -> dark -> cream -> light const toggleTheme = () => { - setTheme(prev => prev === "light" ? "dark" : "light"); + setTheme(prev => { + if (prev === "light") return "dark"; + if (prev === "dark") return "cream"; + return "light"; + }); }; return ( diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 87d31f6..cd7b29f 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -76,6 +76,36 @@ --input-box-shadow-color: rgb(78 168 255 / 35%); } +/* Cream Mode */ +[data-theme="cream"] { + /* Backgrounds */ + --true-bg-color: #fdf6e3; + --tinted-bg-color: #eee8d5; + + /* Text */ + --text-color: #586e75; + + /* Cards: Slightly lighter than the tinted background */ + --card-bg: #fdf6e3; + --card-bg-hover: #f5efdc; + --tinted-card-bg: #e4dec9; + --tinted-card-bg-hover: #d9d3bd; + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 8%); + + /* Accent colors */ + --main-accent-color: #b58900; + --main-accent-color-activte: #9e7700; + + /* Borders & Inputs */ + --box-border-color: #d6cfb8; + --input-bg-color: #fdf6e3; + --input-border-color: #ccc4ab; + --input-focus-border-color: #b58900; + + /* Ensure UI elements like scrollbars match the warm vibe */ + color-scheme: light; +} + /* Global stylings */ * { box-sizing: border-box; From 96bb7741ee7951c27bc7f0e3b06af61d1cb451da Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 00:10:25 -0800 Subject: [PATCH 03/23] feat/fix(Frontend): Adjust cream theme colors and fix toggle button text --- frontend/src/components/NavBar.jsx | 4 ++- frontend/src/styles/styles.css | 42 ++++++++++++++++-------------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 09503fe..d431220 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -58,7 +58,9 @@ function NavBar({ toggleTheme, theme }) {
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index cd7b29f..a86bd26 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -79,30 +79,34 @@ /* Cream Mode */ [data-theme="cream"] { /* Backgrounds */ - --true-bg-color: #fdf6e3; - --tinted-bg-color: #eee8d5; + --true-bg-color: #F5EBE0; + --tinted-bg-color: #EFE4D8; /* Text */ - --text-color: #586e75; + --text-color: #433D35; - /* Cards: Slightly lighter than the tinted background */ - --card-bg: #fdf6e3; - --card-bg-hover: #f5efdc; - --tinted-card-bg: #e4dec9; - --tinted-card-bg-hover: #d9d3bd; - --tinted-card-shadowcolor-hover: rgb(0 0 0 / 8%); + /* Cards */ + --card-bg: #F5EBE0; + --card-bg-hover: #E8DDD2; + --tinted-card-bg: #E8DDD2; + --tinted-card-bg-hover: #DCCFBF; + --tinted-card-shadowcolor-hover: rgba(67, 61, 53, 0.08); + --super-tinted-area-main-color: #DCCFBF; /* Accent colors */ - --main-accent-color: #b58900; - --main-accent-color-activte: #9e7700; - - /* Borders & Inputs */ - --box-border-color: #d6cfb8; - --input-bg-color: #fdf6e3; - --input-border-color: #ccc4ab; - --input-focus-border-color: #b58900; - - /* Ensure UI elements like scrollbars match the warm vibe */ + --main-accent-color: #5B85AA; + --main-accent-color-activte: #466A8D; + + /* Borders */ + --box-border-color: #C9BBAE; + + /* Inputs */ + --input-bg-color: #FBF7F2; + --input-border-color: #C9BBAE; + --input-focus-border-color: #5B85AA; + --input-box-shadow-color: rgba(91, 133, 170, 0.15); + + /* Force UI elements to light-mode style */ color-scheme: light; } From ca8d3d6fa95e2442709331e667e629a397f4f234 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 00:26:51 -0800 Subject: [PATCH 04/23] fix(Frontend): Adjust the cream colors to have warmer tones --- frontend/src/styles/styles.css | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index a86bd26..88c38b0 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -78,33 +78,31 @@ /* Cream Mode */ [data-theme="cream"] { - /* Backgrounds */ - --true-bg-color: #F5EBE0; + /* Backgrounds: Warm Peach/Sand */ + --true-bg-color: #F9F1E7; --tinted-bg-color: #EFE4D8; /* Text */ - --text-color: #433D35; + --text-color: #4A3B31; - /* Cards */ - --card-bg: #F5EBE0; - --card-bg-hover: #E8DDD2; + /* Cards & Areas */ + --card-bg: #FDF9F3; + --card-bg-hover: #F5EBE0; --tinted-card-bg: #E8DDD2; --tinted-card-bg-hover: #DCCFBF; - --tinted-card-shadowcolor-hover: rgba(67, 61, 53, 0.08); --super-tinted-area-main-color: #DCCFBF; - /* Accent colors */ + /* Accent */ --main-accent-color: #5B85AA; --main-accent-color-activte: #466A8D; /* Borders */ - --box-border-color: #C9BBAE; - + --box-border-color: #D6C8B8; + /* Inputs */ - --input-bg-color: #FBF7F2; - --input-border-color: #C9BBAE; + --input-bg-color: #FFFFFF; + --input-border-color: #D6C8B8; --input-focus-border-color: #5B85AA; - --input-box-shadow-color: rgba(91, 133, 170, 0.15); /* Force UI elements to light-mode style */ color-scheme: light; From e5b5232a6eccc8c010e6a8735bc0ef34af6434ef Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 00:37:06 -0800 Subject: [PATCH 05/23] feat(Frontend): Add midnight blue theme to NavBar's button Now there are 4 themes: light, dark, cream, and midnight. --- frontend/src/App.jsx | 5 +++-- frontend/src/components/NavBar.jsx | 3 ++- frontend/src/styles/styles.css | 31 ++++++++++++++++++++++++++++++ 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0f415ed..e8260c4 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -34,8 +34,9 @@ function App() { // Cycles through: light -> dark -> cream -> light const toggleTheme = () => { setTheme(prev => { - if (prev === "light") return "dark"; - if (prev === "dark") return "cream"; + if (prev === "light") return "cream"; + if (prev === "cream") return "midnight"; // New step! + if (prev === "midnight") return "dark"; return "light"; }); }; diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index d431220..67bc63b 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -60,7 +60,8 @@ function NavBar({ toggleTheme, theme }) { diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 88c38b0..c2297e0 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -113,6 +113,37 @@ box-sizing: border-box; } +/* Midnight Blue Mode */ +[data-theme="midnight"] { + /* Backgrounds: Deep charcoal-blue */ + --true-bg-color: #242933; /* Dark but clearly blue-grey */ + --tinted-bg-color: #2E3440; /* Soft "Nord" blue-dark */ + + /* Text: Snow White/Frost */ + --text-color: #ECEFF4; + + /* Cards */ + --card-bg: #3B4252; + --card-bg-hover: #434C5E; + --tinted-card-bg: #3B4252; + --tinted-card-bg-hover: #4C566A; + --super-tinted-area-main-color: #434C5E; + + /* Accent: Electric Blue (Vibrant against the dark blue) */ + --main-accent-color: #88C0D0; + --main-accent-color-activte: #81A1C1; + + /* Borders */ + --box-border-color: #4C566A; + + /* Inputs */ + --input-bg-color: #3B4252; + --input-border-color: #4C566A; + --input-focus-border-color: #88C0D0; + + color-scheme: dark; /* Even though it's blue, it's dark enough for dark scrollbars */ +} + /* More global stylings */ html, body, #root { min-width: 100%; From 154d1118fa57a6f43940e83fe4c8189f374f0b0c Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 00:45:49 -0800 Subject: [PATCH 06/23] fix/refactor(Frontend): Fix toogle theme button and refactor css This fixes the toggle theme button where what it said did not match with what it did when clicked. It also refactors the css so it matches the order the themes are toggled in: Light -> Cream -> Midnight -> Dark -> Light -> ... --- frontend/src/components/NavBar.jsx | 6 +-- frontend/src/styles/styles.css | 68 +++++++++++++++--------------- 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 67bc63b..21a5854 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -58,10 +58,10 @@ function NavBar({ toggleTheme, theme }) {
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index c2297e0..f1a2da6 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -43,39 +43,6 @@ background-color: var(--tinted-bg-color); } -/* Dark Mode */ -[data-theme="dark"] { - /* Backgrounds */ - --true-bg-color: #121212; - --tinted-bg-color: #1e1e1e; - - /* Text */ - --text-color: #fff; - - /* Cards */ - --card-bg: #1f1f1f; - --card-bg-hover: #2a2a2a; - --tinted-card-bg: #2a2a2a; - --tinted-card-bg-hover: #333; - --tinted-card-shadowcolor-hover: rgb(0 0 0 / 40%); - - /* Accent colors */ - --main-accent-color: #4ea8ff; - --main-accent-color-activte: #3c8ed6; - - /* Borders */ - --box-border-color: #333; - - /* Review/secondary areas */ - --review-area-main-color: #2a2a2a; - - /* Inputs */ - --input-bg-color: #2a2a2a; - --input-border-color: #444; - --input-focus-border-color: #4ea8ff; - --input-box-shadow-color: rgb(78 168 255 / 35%); -} - /* Cream Mode */ [data-theme="cream"] { /* Backgrounds: Warm Peach/Sand */ @@ -144,6 +111,41 @@ color-scheme: dark; /* Even though it's blue, it's dark enough for dark scrollbars */ } +/* Dark Mode */ +[data-theme="dark"] { + /* Backgrounds */ + --true-bg-color: #121212; + --tinted-bg-color: #1e1e1e; + + /* Text */ + --text-color: #fff; + + /* Cards */ + --card-bg: #1f1f1f; + --card-bg-hover: #2a2a2a; + --tinted-card-bg: #2a2a2a; + --tinted-card-bg-hover: #333; + --tinted-card-shadowcolor-hover: rgb(0 0 0 / 40%); + --super-tinted-area-main-color: #3f3c3c; + + /* Accent colors */ + --main-accent-color: #4ea8ff; + --main-accent-color-activte: #3c8ed6; + + /* Borders */ + --box-border-color: #333; + + /* Review/secondary areas */ + --review-area-main-color: #2a2a2a; + + /* Inputs */ + --input-bg-color: #2a2a2a; + --input-border-color: #444; + --input-focus-border-color: #4ea8ff; + --input-box-shadow-color: rgb(78 168 255 / 35%); +} + + /* More global stylings */ html, body, #root { min-width: 100%; From 7ad1ff6f5102ebbc675187aa881fbd42065ab832 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 02:22:41 -0800 Subject: [PATCH 07/23] fix(GitHub): Fix the pull request template CI --- .../default.md => pull_request_template.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/{PULL_REQUEST_TEMPLATE/default.md => pull_request_template.md} (100%) diff --git a/.github/PULL_REQUEST_TEMPLATE/default.md b/.github/pull_request_template.md similarity index 100% rename from .github/PULL_REQUEST_TEMPLATE/default.md rename to .github/pull_request_template.md From ef79c7c229208c1039c119a2e960dd098dcd32a6 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 23:44:43 -0800 Subject: [PATCH 08/23] feat(Frontend): Add 3 new components for Home Page These components are HomeStatistics, RecommendProvr, and CommitToAction. They will be used to display statistics on the home page, recommend providers to users, and encourage users to take action, respectively. These components will enhance the user experience and provide valuable information to users visiting the home page. No functionality has been added yet, but the structure and basic layout of the components have been created. --- frontend/src/components/CommitToAction.jsx | 9 +++++++++ frontend/src/components/HomeStatistics.jsx | 9 +++++++++ frontend/src/components/RecommendProvr.jsx | 9 +++++++++ frontend/src/pages/AboutPage.jsx | 2 -- frontend/src/pages/ContactPage.jsx | 2 -- frontend/src/pages/DashboardPage.jsx | 1 - frontend/src/pages/FormPage.jsx | 1 - frontend/src/pages/HomePage.jsx | 3 +-- 8 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/CommitToAction.jsx create mode 100644 frontend/src/components/HomeStatistics.jsx create mode 100644 frontend/src/components/RecommendProvr.jsx diff --git a/frontend/src/components/CommitToAction.jsx b/frontend/src/components/CommitToAction.jsx new file mode 100644 index 0000000..04381f3 --- /dev/null +++ b/frontend/src/components/CommitToAction.jsx @@ -0,0 +1,9 @@ +function CommitToAction() { + return ( +
+ {/* */} +
+ ); +} + +export default CommitToAction; \ No newline at end of file diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx new file mode 100644 index 0000000..a64ffd1 --- /dev/null +++ b/frontend/src/components/HomeStatistics.jsx @@ -0,0 +1,9 @@ +function HomeStatistics() { + return ( +
+ {/* */} +
+ ); +} + +export default HomeStatistics; \ No newline at end of file diff --git a/frontend/src/components/RecommendProvr.jsx b/frontend/src/components/RecommendProvr.jsx new file mode 100644 index 0000000..28179d8 --- /dev/null +++ b/frontend/src/components/RecommendProvr.jsx @@ -0,0 +1,9 @@ +function RecommendProvr() { + return ( +
+ {/* */} +
+ ); +} + +export default RecommendProvr; \ No newline at end of file diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index c82befa..48db944 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -1,5 +1,3 @@ -import NavBar from "../components/NavBar"; - function AboutPage() { return (
diff --git a/frontend/src/pages/ContactPage.jsx b/frontend/src/pages/ContactPage.jsx index 6f3c654..625b340 100644 --- a/frontend/src/pages/ContactPage.jsx +++ b/frontend/src/pages/ContactPage.jsx @@ -1,5 +1,3 @@ -import NavBar from "../components/NavBar"; - function ContactPage() { return (
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx index 43af1b9..41a945e 100644 --- a/frontend/src/pages/DashboardPage.jsx +++ b/frontend/src/pages/DashboardPage.jsx @@ -1,4 +1,3 @@ -import NavBar from "../components/NavBar"; import FileUpload from "../components/FileUpload"; function DashboardPage() { diff --git a/frontend/src/pages/FormPage.jsx b/frontend/src/pages/FormPage.jsx index afa9362..4a035ab 100644 --- a/frontend/src/pages/FormPage.jsx +++ b/frontend/src/pages/FormPage.jsx @@ -1,4 +1,3 @@ -import NavBar from "../components/NavBar"; import Form from "../components/Form"; function FormPage() { diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 1e12c3a..83222d9 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -1,8 +1,7 @@ -import NavBar from "../components/NavBar"; import HeroArea from "../components/HeroArea"; +import HowItWorks from "../components/HowItWorks"; import Reviews from "../components/Reviews"; import Footer from "../components/Footer"; -import HowItWorks from "../components/HowItWorks"; function HomePage() { return ( From a669d40a731b53b5e5686099d54e7a1a36c50175 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sat, 21 Feb 2026 23:58:48 -0800 Subject: [PATCH 09/23] feat(Frontend): Layout the basic HTML structure for the home pg stats There are 2 sections, one for success stats and the other of website stats. The stats are currently hardcoded, but will be dynamic when the database is built out more. --- frontend/src/components/HomeStatistics.jsx | 35 ++++++++++++++++++++-- frontend/src/pages/HomePage.jsx | 2 ++ frontend/src/styles/home-page.css | 9 ++++++ 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx index a64ffd1..5279683 100644 --- a/frontend/src/components/HomeStatistics.jsx +++ b/frontend/src/components/HomeStatistics.jsx @@ -1,7 +1,38 @@ function HomeStatistics() { return ( -
- {/* */} +
+

Home Statistics

+
+

Users

+

0

+
+
+

Impact Statistics

+
+
+

ATS Optimized

+
+
+

Jobs Landed

+
+
+

Hours Saved

+
+
+ +

The Method Statistics

+
+
+

Resumes Optimize

+
+
+

Hours Practicing Inteviews

+
+
+

Jobs Applied

+
+
+
); } diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 83222d9..3af99eb 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -1,5 +1,6 @@ import HeroArea from "../components/HeroArea"; import HowItWorks from "../components/HowItWorks"; +import HomeStatistics from "../components/HomeStatistics"; import Reviews from "../components/Reviews"; import Footer from "../components/Footer"; @@ -8,6 +9,7 @@ function HomePage() {
+
diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index b5f21b4..3f7b783 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -37,6 +37,7 @@ background-color: var(--main-accent-color-activte); } +/* How It Works Area */ #how-it-works { background-color: var(--tinted-bg-color); } @@ -96,6 +97,14 @@ cursor: pointer; } +/* Home Statistics Area */ +#home-statistics-area { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 2rem; +} + /* Reviews Area */ #reviews-area { display: flex; From df8daae4bc32bf02dc2490e2f5e7a7b4ccbc1b0a Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 00:08:17 -0800 Subject: [PATCH 10/23] refactor(Frontend): Update HTML id selectors to be more descriptive --- frontend/src/components/HomeStatistics.jsx | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx index 5279683..0f6d8e6 100644 --- a/frontend/src/components/HomeStatistics.jsx +++ b/frontend/src/components/HomeStatistics.jsx @@ -7,29 +7,29 @@ function HomeStatistics() {

0

-

Impact Statistics

-
-
-

ATS Optimized

+

Impact Statistics

+
+
+

Resumes Sent

-
-

Jobs Landed

+
+

Interviews Held

-
-

Hours Saved

+
+

Jobs Offered

-

The Method Statistics

-
-
-

Resumes Optimize

+

The Method Statistics

+
+
+

Resumes Optimized

-
-

Hours Practicing Inteviews

+
+

Hours Practicing Interviews

-
-

Jobs Applied

+
+

Jobs Found

From 857feae5821b72ffe11ee2917548a189dc6178a0 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 00:23:25 -0800 Subject: [PATCH 11/23] feat(Frontend): Position the stats area & make How It Works title bigger This makes the stats area more visible and makes the How It Works title more prominent, improving the flow of the home page. --- frontend/src/components/HomeStatistics.jsx | 6 ++- frontend/src/styles/home-page.css | 55 +++++++++++++++++++++- 2 files changed, 57 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx index 0f6d8e6..ea7fce2 100644 --- a/frontend/src/components/HomeStatistics.jsx +++ b/frontend/src/components/HomeStatistics.jsx @@ -1,11 +1,13 @@ function HomeStatistics() { return (
-

Home Statistics

+

Real Success

+

Users

0

+

Impact Statistics

@@ -29,7 +31,7 @@ function HomeStatistics() {

Hours Practicing Interviews

-

Jobs Found

+

Jobs Recommended

diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 3f7b783..955c66e 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -48,6 +48,7 @@ } #how-it-works-title{ + font-size: 4rem; text-align: center; margin-top: 2rem; } @@ -100,11 +101,61 @@ /* Home Statistics Area */ #home-statistics-area { display: flex; - flex-direction: row; + flex-direction: column; justify-content: space-around; - padding: 2rem; + align-items: center; +} + +#home-statistics-title-h2 { + font-size: 4rem; + margin: 8px; + padding: 0; +} + +#home-users-count { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 2rem; + margin: 8px; + padding: 0; } +#home-statistics { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + width: 100%; +} + + #home-impact-statistics-subarea { + font-size: 2rem; + margin: 8px; + padding: 0; + } + + #impact-statistics-data { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + } + + #home-the-method-statistics-subarea { + font-size: 2rem; + margin: 8px; + padding: 0; + } + + #home-the-method-statistics-data { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + } + /* Reviews Area */ #reviews-area { display: flex; From ef77198c4def87de6b00384152f34b9c6fd205dd Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 00:45:38 -0800 Subject: [PATCH 12/23] feat(Frontend): Add backgrounds to each statistic & format entire area The boxes now sit nicely in 3 rows. Each statistic has a background color and basic border-radius styling. --- frontend/src/components/HomeStatistics.jsx | 8 ++++- frontend/src/styles/home-page.css | 37 ++++++++++++++++++++-- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx index ea7fce2..9cab3a6 100644 --- a/frontend/src/components/HomeStatistics.jsx +++ b/frontend/src/components/HomeStatistics.jsx @@ -13,12 +13,15 @@ function HomeStatistics() {

Resumes Sent

+

0

-
+

Interviews Held

+

0

Jobs Offered

+

0

@@ -26,12 +29,15 @@ function HomeStatistics() {

Resumes Optimized

+

0

Hours Practicing Interviews

+

0

Jobs Recommended

+

0

diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 955c66e..3c12314 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -118,8 +118,12 @@ justify-content: center; align-items: center; font-size: 2rem; + width: 8%; + height: auto; margin: 8px; - padding: 0; + padding: 8px; + background-color: red; + border-radius: 10px; } #home-statistics { @@ -140,7 +144,21 @@ display: flex; flex-direction: row; justify-content: space-around; - width: 100%; + width: 60%; + } + + #impact-statistics-data div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 20%; + height: auto; + margin: 8px; + padding: 8px; + /* var(--tinted-card-bg) */ + background-color: red; + border-radius: 10px; } #home-the-method-statistics-subarea { @@ -153,7 +171,20 @@ display: flex; flex-direction: row; justify-content: space-around; - width: 100%; + width: 60%; + } + + #home-the-method-statistics-data div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 20%; + height: auto; + margin: 8px; + padding: 8px; + background-color: red; + border-radius: 10px; } /* Reviews Area */ From ec7abbbf0c2a7591b259268dae99b7cc7107696f Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 01:15:10 -0800 Subject: [PATCH 13/23] feat(Frontend): Apply color scheme to boxes on home page statistics area This colors each box and adds a border to them, making them more visually distinct and easier to read. The color scheme is consistent with the overall design of the website, creating a cohesive look and feel. It also updates the font sizing for all the headings and paragraphs in the statistics area, making them more visually appealing and easier to read. --- frontend/src/styles/home-page.css | 33 ++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 3c12314..82fbed8 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -104,7 +104,28 @@ flex-direction: column; justify-content: space-around; align-items: center; + margin: 64px 0; } + /* Style h3 */ + #home-statistics-area h3 { + font-size: 2rem; + margin: 8px; + padding: 0; + } + + /* Style all h4 */ + #home-statistics-area h4 { + font-size: 1.25rem; + margin: 8px; + padding: 0; + } + +/* Style all paragraphs */ + #home-statistics-area p { + font-size: 1.5rem; + margin: 8px; + padding: 0; + } #home-statistics-title-h2 { font-size: 4rem; @@ -122,7 +143,8 @@ height: auto; margin: 8px; padding: 8px; - background-color: red; + background-color: var(--card-bg); + border: 4px var(--box-border-color) solid; border-radius: 10px; } @@ -156,8 +178,8 @@ height: auto; margin: 8px; padding: 8px; - /* var(--tinted-card-bg) */ - background-color: red; + background-color: var(--tinted-card-bg); + border: 4px var(--box-border-color) solid; border-radius: 10px; } @@ -171,7 +193,7 @@ display: flex; flex-direction: row; justify-content: space-around; - width: 60%; + width: 75%; } #home-the-method-statistics-data div { @@ -183,7 +205,8 @@ height: auto; margin: 8px; padding: 8px; - background-color: red; + background-color: var(--card-bg); + border: 4px var(--box-border-color) solid; border-radius: 10px; } From 2f3dec90e8d472885986e1a74f5f2ce437a96833 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 01:34:06 -0800 Subject: [PATCH 14/23] feat(Frontend): Update statistic area on home page to be spaced out more --- frontend/src/components/HomeStatistics.jsx | 67 +++++------ frontend/src/styles/home-page.css | 123 +++++++++++++-------- 2 files changed, 113 insertions(+), 77 deletions(-) diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx index 9cab3a6..a5745a5 100644 --- a/frontend/src/components/HomeStatistics.jsx +++ b/frontend/src/components/HomeStatistics.jsx @@ -1,43 +1,48 @@ function HomeStatistics() { return (
-

Real Success

- -
-

Users

-

0

+
+

Real Success

+
+

Users

+

0

+
-

Impact Statistics

-
-
-

Resumes Sent

-

0

-
-
-

Interviews Held

-

0

-
-
-

Jobs Offered

-

0

+
+

Impact Statistics

+
+
+

Resumes Sent

+

0

+
+
+

Interviews Held

+

0

+
+
+

Jobs Offered

+

0

+
-

The Method Statistics

-
-
-

Resumes Optimized

-

0

-
-
-

Hours Practicing Interviews

-

0

-
-
-

Jobs Recommended

-

0

+
+

The Method Statistics

+
+
+

Resumes Optimized

+

0

+
+
+

Hours Practicing Interviews

+

0

+
+
+

Jobs Recommended

+

0

+
diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 82fbed8..8d96d77 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -37,9 +37,11 @@ background-color: var(--main-accent-color-activte); } + /* How It Works Area */ #how-it-works { - background-color: var(--tinted-bg-color); + padding: 32px; + background-color: var(--super-tinted-area-main-color); } #how-it-works-method-section { @@ -70,7 +72,7 @@ width: 100%; max-width: 1200px; margin: 0 auto; - background-color: var(--tinted-bg-color); + background-color: var(--super-tinted-area-main-color); } .steps-box { @@ -98,6 +100,7 @@ cursor: pointer; } + /* Home Statistics Area */ #home-statistics-area { display: flex; @@ -105,7 +108,16 @@ justify-content: space-around; align-items: center; margin: 64px 0; + gap: 32px +} + +#home-users-count-subarea { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } + /* Style h3 */ #home-statistics-area h3 { font-size: 2rem; @@ -120,7 +132,7 @@ padding: 0; } -/* Style all paragraphs */ + /* Style all paragraphs */ #home-statistics-area p { font-size: 1.5rem; margin: 8px; @@ -139,7 +151,7 @@ justify-content: center; align-items: center; font-size: 2rem; - width: 8%; + width: 50%; height: auto; margin: 8px; padding: 8px; @@ -154,62 +166,80 @@ justify-content: space-around; align-items: center; width: 100%; + gap: 32px; } #home-impact-statistics-subarea { - font-size: 2rem; - margin: 8px; - padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; } - #impact-statistics-data { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 60%; - } - - #impact-statistics-data div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 20%; - height: auto; + #home-impact-statistics-h3 { + font-size: 2rem; margin: 8px; - padding: 8px; - background-color: var(--tinted-card-bg); - border: 4px var(--box-border-color) solid; - border-radius: 10px; + padding: 0; } + #impact-statistics-data { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 60%; + } + + #impact-statistics-data div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 20%; + height: auto; + margin: 8px; + padding: 8px; + background-color: var(--card-bg); + border: 4px var(--box-border-color) solid; + border-radius: 10px; + } + #home-the-method-statistics-subarea { - font-size: 2rem; - margin: 8px; - padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; } - #home-the-method-statistics-data { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 75%; - } - - #home-the-method-statistics-data div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 20%; - height: auto; + #home-the-method-statistics-h3 { + font-size: 2rem; margin: 8px; - padding: 8px; - background-color: var(--card-bg); - border: 4px var(--box-border-color) solid; - border-radius: 10px; + padding: 0; } + #home-the-method-statistics-data { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 75%; + } + + #home-the-method-statistics-data div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 20%; + height: auto; + margin: 8px; + padding: 8px; + background-color: var(--card-bg); + border: 4px var(--box-border-color) solid; + border-radius: 10px; + } + + /* Reviews Area */ #reviews-area { display: flex; @@ -269,6 +299,7 @@ margin: 0; } + /* Footer Area */ #footer-information-area { display: flex; From 2dd0367c64d5eef1e6ef85cceedda15c38f988d1 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 01:58:09 -0800 Subject: [PATCH 15/23] feat(Frontend): Add RecommendProvr component and integrate into HomePage This sets up the basic HTML content and structure for the RecommendProvr component, which promotes the Provr platform. It also integrates this new component into the HomePage, ensuring that it is displayed alongside the other existing components. --- frontend/src/components/RecommendProvr.jsx | 9 +++++++-- frontend/src/pages/HomePage.jsx | 2 ++ frontend/src/styles/home-page.css | 9 +++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/RecommendProvr.jsx b/frontend/src/components/RecommendProvr.jsx index 28179d8..0859496 100644 --- a/frontend/src/components/RecommendProvr.jsx +++ b/frontend/src/components/RecommendProvr.jsx @@ -1,7 +1,12 @@ function RecommendProvr() { return ( -
- {/* */} +
+

Try Provr!

+

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. +

+
); } diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 3af99eb..0474cca 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -2,6 +2,7 @@ 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 Footer from "../components/Footer"; function HomePage() { @@ -11,6 +12,7 @@ function HomePage() { +
); diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 8d96d77..5933929 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -299,6 +299,15 @@ margin: 0; } +#recommend-provr-area { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 32px; + gap: 16px; +} + /* Footer Area */ #footer-information-area { From 326893be823befe06b3e7e415c4e10b8fb79f16b Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 02:08:33 -0800 Subject: [PATCH 16/23] feat(Frontend): Color and style the Provr area of the homepage --- frontend/src/styles/home-page.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 5933929..c48b8d2 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -308,6 +308,33 @@ gap: 16px; } +#try-provr-h2 { + font-size: 4rem; + margin: 8px; + padding: 0; +} + +#recommend-provr-p { + font-size: 1.5rem; + margin: 8px; + padding: 0; + max-width: 800px; + text-align: center; +} + +#visit-provr-button { + width: 15rem; + height: 5rem; + border-radius: 10px; + cursor: pointer; + font-size: 2rem; + background-color: var(--main-accent-color); +} + + #visit-provr-button:active { + transform: scale(0.95); + background-color: var(--main-accent-color-activte); + } /* Footer Area */ #footer-information-area { From 1b2d4d21fb6e8f223ece3e3e69b3071a6ab2d812 Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 02:17:27 -0800 Subject: [PATCH 17/23] feat/fix(Frontend): Add link to the Provr website and fix styling issues --- frontend/src/components/RecommendProvr.jsx | 4 +++- frontend/src/styles/home-page.css | 27 ++++++++++++++-------- frontend/src/styles/styles.css | 2 +- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/RecommendProvr.jsx b/frontend/src/components/RecommendProvr.jsx index 0859496..0f0eb95 100644 --- a/frontend/src/components/RecommendProvr.jsx +++ b/frontend/src/components/RecommendProvr.jsx @@ -6,7 +6,9 @@ function RecommendProvr() { learning as opposed to shallow AI learning. It focuses on building real connections and skills that take time to devleop.

- + + +
); } diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index c48b8d2..26b8498 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -322,20 +322,27 @@ text-align: center; } -#visit-provr-button { - width: 15rem; - height: 5rem; - border-radius: 10px; - cursor: pointer; - font-size: 2rem; - background-color: var(--main-accent-color); +#visit-provr-link { + text-decoration: none; } - #visit-provr-button:active { - transform: scale(0.95); - background-color: var(--main-accent-color-activte); + #visit-provr-button { + all: unset; + text-align: center; + color: var(--text-color); + width: 15rem; + height: 5rem; + border-radius: 10px; + cursor: pointer; + font-size: 2rem; + background-color: var(--main-accent-color); } + #visit-provr-button:active { + transform: scale(0.95); + background-color: var(--main-accent-color-activte); + } + /* Footer Area */ #footer-information-area { display: flex; diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index f1a2da6..5b020f9 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -67,7 +67,7 @@ --box-border-color: #D6C8B8; /* Inputs */ - --input-bg-color: #FFFFFF; + --input-bg-color: #FFF; --input-border-color: #D6C8B8; --input-focus-border-color: #5B85AA; From 12b6011e1c9147fe910d6380f4a3ff0b97650cca Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 02:37:03 -0800 Subject: [PATCH 18/23] feat/refactor(Frontend): Rename CallToAction component and style area This styles the call to action area, which was just formating it and making it have the right sizing and colors. --- frontend/src/components/CallToAction.jsx | 24 +++++++++++ frontend/src/components/CommitToAction.jsx | 9 ----- frontend/src/pages/HomePage.jsx | 2 + frontend/src/styles/home-page.css | 46 ++++++++++++++++++++++ 4 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/CallToAction.jsx delete mode 100644 frontend/src/components/CommitToAction.jsx diff --git a/frontend/src/components/CallToAction.jsx b/frontend/src/components/CallToAction.jsx new file mode 100644 index 0000000..0c166ee --- /dev/null +++ b/frontend/src/components/CallToAction.jsx @@ -0,0 +1,24 @@ +import { useNavigate } from 'react-router-dom' + +function CallToAction() { + const navigate = useNavigate() + + return ( +
+

Ready to get started?

+

Make Resumes. Prep for Interviews. Get Hired.

+

Its the 3 step Method

+ +
+ ); +} + +export default CallToAction; \ No newline at end of file diff --git a/frontend/src/components/CommitToAction.jsx b/frontend/src/components/CommitToAction.jsx deleted file mode 100644 index 04381f3..0000000 --- a/frontend/src/components/CommitToAction.jsx +++ /dev/null @@ -1,9 +0,0 @@ -function CommitToAction() { - return ( -
- {/* */} -
- ); -} - -export default CommitToAction; \ No newline at end of file diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 0474cca..8c7cd63 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -3,6 +3,7 @@ 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"; function HomePage() { @@ -13,6 +14,7 @@ function HomePage() { +
); diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css index 26b8498..8b9f670 100644 --- a/frontend/src/styles/home-page.css +++ b/frontend/src/styles/home-page.css @@ -299,6 +299,7 @@ margin: 0; } +/* Recommend Provr Area */ #recommend-provr-area { display: flex; flex-direction: column; @@ -343,6 +344,51 @@ background-color: var(--main-accent-color-activte); } +/* Call To Action Area */ +#call-to-action-area { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 32px; + background-color: var(--super-tinted-area-main-color); +} + +#ready-to-get-started-h2 { + font-size: 4rem; + margin: 8px; + padding: 0; +} + +#call-to-action-p-top { + font-size: 1.5rem; + margin: 8px; + padding: 0; +} + +#call-to-action-p-bottom { + font-size: 1.5rem; + margin: 8px; + padding: 0; +} + +#call-to-action-sign-up-button { + all: unset; + text-align: center; + color: var(--text-color); + width: 15rem; + height: 5rem; + border-radius: 10px; + cursor: pointer; + font-size: 2rem; + background-color: var(--main-accent-color); +} + + #call-to-action-sign-up-button:active { + transform: scale(0.95); + background-color: var(--main-accent-color-activte); + } + /* Footer Area */ #footer-information-area { display: flex; From 52725d477efffb965601185a2f6639cc497e7d6d Mon Sep 17 00:00:00 2001 From: Sean San Date: Sun, 22 Feb 2026 02:51:15 -0800 Subject: [PATCH 19/23] feat/fix(Frontend): Adds new component pages and updates footer area This updates the footer to container more useful links like FAQs, Pricing, Terms of Service, and Privacy Policy. It also adds new React component pages for FAQs, Pricing, Terms of Service, and Privacy Policy. Finally, it fixes the CallToAction component to scroll to the top of the page when navigating to the form page. Before it brought the user to the middle of the form page due to how React Router works. --- frontend/src/components/Footer.jsx | 15 ++++++++++++--- frontend/src/pages/FAQs.jsx | 0 frontend/src/pages/PricingPage.jsx | 0 frontend/src/pages/PrivacyPolicyPage.jsx | 0 frontend/src/pages/TermsOfServicePage.jsx | 0 5 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 frontend/src/pages/FAQs.jsx create mode 100644 frontend/src/pages/PricingPage.jsx create mode 100644 frontend/src/pages/PrivacyPolicyPage.jsx create mode 100644 frontend/src/pages/TermsOfServicePage.jsx diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 31eddc1..52511cd 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -23,11 +23,20 @@ function Footer() {

Ved Patel

-

Socials

+

Socials/Contacts

LinkedIn

Email

-

-

+

GitHub

+

Reddit

+

Discord

+
+
+

Extras

+

Pricing

+

About

+

Terms of Service

+

Privacy Policy

+

FAQs

) diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx index 21a5854..c5f9633 100644 --- a/frontend/src/components/NavBar.jsx +++ b/frontend/src/components/NavBar.jsx @@ -44,10 +44,10 @@ function NavBar({ toggleTheme, theme }) {
  • isActive ? 'active-link' : undefined} > - Contact + Pricing
    • diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index e69de29..c37f556 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -0,0 +1,49 @@ +function PricingPage() { + return ( +
    +

    Pricing Page

    +
    +

    Free

    +

    Basic features for everyone

    +

    $0/month

    +
    +
      +
    • Basic access to all features
      • +
    • Community support
      • +
    +
    +
    + +
    +

    Student

    +

    Discounted pricing for students

    +

    $2.49/month

    +
    +
      +
    • Everything in free plan +
      • +
    • Store 10 more resumes
      • +
    • Priority support
      • +
    • Feature requests
      • +
    • WIP
      • +
    +
    + +
    + +
    +

    Premium

    +

    All features for professionals

    +

    $6.99/month

    +
    +
      +
    • Everything in free plan +
      • +
    • WIP
      • +
    +
    + +
    +
    + ); +} + +export default PricingPage; \ No newline at end of file diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css new file mode 100644 index 0000000..f052e7a --- /dev/null +++ b/frontend/src/styles/pricing-page.css @@ -0,0 +1,13 @@ +#pricing-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; +} + +#pricing-page-h1 { + font-size: 2.5rem; + text-align: center; + margin-top: 2rem; +} \ No newline at end of file From 3a4356723b451788d9617526965c10bc56042f66 Mon Sep 17 00:00:00 2001 From: Sean San Date: Mon, 23 Feb 2026 13:00:50 -0800 Subject: [PATCH 21/23] feat(Frontend): Layout the pricing page using flexbox This puts all 3 tiers into a box and lays them out horizontally. --- frontend/src/pages/PricingPage.jsx | 78 +++++++++++++++------------- frontend/src/styles/pricing-page.css | 19 +++++++ 2 files changed, 60 insertions(+), 37 deletions(-) diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index c37f556..3a3dd60 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -2,47 +2,51 @@ function PricingPage() { return (

    Pricing Page

    -
    -

    Free

    -

    Basic features for everyone

    -

    $0/month

    -
    -
      -
    • Basic access to all features
      • -
    • Community support
      • -
    +
    +
    +

    Free

    +

    Basic features for everyone

    +

    $0/month

    +
    +
      +
    • Basic access to all features
      • +
    • Community support
      • +
    • Interview Prep
      • +
    • Job Apply
      • +
    • WIP
      • +
    +
    -
    - -
    -

    Student

    -

    Discounted pricing for students

    -

    $2.49/month

    -
    -
      -
    • Everything in free plan +
      • -
    • Store 10 more resumes
      • -
    • Priority support
      • -
    • Feature requests
      • -
    • WIP
      • -
    +
    +

    Student

    +

    Discounted pricing for students

    +

    $2.49/month

    +
    +
      +
    • Everything in free plan +
      • +
    • Store 10 more resumes
      • +
    • Priority support
      • +
    • Feature requests
      • +
    • WIP
      • +
    +
    - -
    - -
    -

    Premium

    -

    All features for professionals

    -

    $6.99/month

    -
    -
      -
    • Everything in free plan +
      • -
    • WIP
      • -
    +
    +

    Premium

    +

    All features for professionals

    +

    $6.99/month

    +
    +
      +
    • Everything in free plan +
      • +
    • Store 15 more resumes
      • +
    • Use more optimization options
      • +
    • 5 more resume templates
      • +
    • WIP
      • +
    +
    - +
    -
    ); } diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index f052e7a..1478e99 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -10,4 +10,23 @@ font-size: 2.5rem; text-align: center; margin-top: 2rem; +} + +#pricing-tiers-subarea { + width: 75%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +} + +#pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { + width: 100%; + height: 100%; + background-color: red; + padding: 2rem; + border-radius: 8px; + width: 300px; + margin: 1rem; } \ No newline at end of file From 091e6bde0ada8b72849099ec70d2ea27cc0bd84e Mon Sep 17 00:00:00 2001 From: Sean San Date: Mon, 23 Feb 2026 13:08:46 -0800 Subject: [PATCH 22/23] feat(Frontend): Color pricing page boxes and add hover effects --- frontend/src/pages/PricingPage.jsx | 18 +++++++++--------- frontend/src/styles/pricing-page.css | 17 +++++++++++++---- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx index 3a3dd60..0b996a7 100644 --- a/frontend/src/pages/PricingPage.jsx +++ b/frontend/src/pages/PricingPage.jsx @@ -4,9 +4,9 @@ function PricingPage() {

    Pricing Page

    -

    Free

    -

    Basic features for everyone

    -

    $0/month

    +

    Free

    +

    Basic features for everyone

    +

    $0/month

    • Basic access to all features
      • @@ -18,9 +18,9 @@ function PricingPage() {
    -

    Student

    -

    Discounted pricing for students

    -

    $2.49/month

    +

    Student

    +

    Discounted pricing for students

    +

    $2.49/month

    • Everything in free plan +
      • @@ -32,9 +32,9 @@ function PricingPage() {
    -

    Premium

    -

    All features for professionals

    -

    $6.99/month

    +

    Premium

    +

    All features for professionals

    +

    $6.99/month

    • Everything in free plan +
      • diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index 1478e99..187d3c6 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -7,13 +7,13 @@ } #pricing-page-h1 { - font-size: 2.5rem; + font-size: 3.5rem; text-align: center; margin-top: 2rem; } #pricing-tiers-subarea { - width: 75%; + width: 50%; display: flex; flex-direction: row; justify-content: space-between; @@ -24,9 +24,18 @@ #pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { width: 100%; height: 100%; - background-color: red; + background-color: var(--card-bg); + border: solid 2px var(--main-accent-color); padding: 2rem; border-radius: 8px; width: 300px; margin: 1rem; -} \ No newline at end of file +} + +#pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { + background-color: var(--main-accent-color); + color: var(--tinted-bg-color); + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; +} + From d97f7c17a0f39147d8864b05e4de65f96b1d50bf Mon Sep 17 00:00:00 2001 From: Sean San Date: Mon, 23 Feb 2026 14:38:11 -0800 Subject: [PATCH 23/23] fix(Frontend): Fixes the duplicated CSS width property There was a duplicated width property in the CSS for the pricing tiers. This removes it so it can pass the CI check for linting. --- frontend/src/styles/pricing-page.css | 32 ++++++++++++++-------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css index 187d3c6..5241b77 100644 --- a/frontend/src/styles/pricing-page.css +++ b/frontend/src/styles/pricing-page.css @@ -1,3 +1,4 @@ +/* Pricing Page Area */ #pricing-page { display: flex; flex-direction: column; @@ -21,21 +22,20 @@ margin-top: 2rem; } -#pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { - width: 100%; - height: 100%; - background-color: var(--card-bg); - border: solid 2px var(--main-accent-color); - padding: 2rem; - border-radius: 8px; - width: 300px; - margin: 1rem; -} + #pricing-free-tier, #pricing-student-tier, #pricing-premium-tier { + width: 300px; + height: 100%; + background-color: var(--card-bg); + border: solid 2px var(--main-accent-color); + padding: 2rem; + border-radius: 8px; + margin: 1rem; + } -#pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { - background-color: var(--main-accent-color); - color: var(--tinted-bg-color); - cursor: pointer; - transition: background-color 0.3s ease, color 0.3s ease; -} + #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover { + background-color: var(--main-accent-color); + color: var(--tinted-bg-color); + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; + }