From 49028c3b91c5fd70d2cb74286e2dbc9f3bedb5be Mon Sep 17 00:00:00 2001 From: Pushpindersingh-2027 Date: Thu, 7 May 2026 13:34:26 +1000 Subject: [PATCH 1/3] Add professional frontend public page sections --- frontend/src/App.tsx | 217 ++++++++++++++++++++++++++++------- frontend/src/index.css | 254 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 428 insertions(+), 43 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 39d0e60c..b72f1270 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -51,6 +51,37 @@ type SignUpData = { password: string; }; +const LoadingScreen = (): JSX.Element => ( +
+
+
+ +
+

Loading...

+
+
+); + // Protected Route Component const ProtectedRoute: React.FC = ({ children }) => { const navigate = useNavigate(); @@ -63,19 +94,7 @@ const ProtectedRoute: React.FC = ({ children }) => { }, [isAuthenticated, isLoading, navigate]); if (isLoading) { - return ( -
-
-
- - - - -
-

Loading...

-
-
- ); + return ; } return isAuthenticated ? <>{children} : null; @@ -88,35 +107,27 @@ const AdminRoute: React.FC = ({ children }) => { useEffect(() => { if (isLoading) return; + if (!isAuthenticated) { navigate('/login'); return; } + if ((user as { role?: string } | null | undefined)?.role !== 'admin') { navigate('/dashboard'); } }, [isAuthenticated, isLoading, navigate, user]); if (isLoading) { - return ( -
-
-
- - - - -
-

Loading...

-
-
- ); + return ; } - return isAuthenticated && (user as { role?: string } | null | undefined)?.role === 'admin' ? <>{children} : null; + return isAuthenticated && (user as { role?: string } | null | undefined)?.role === 'admin' + ? <>{children} + : null; }; -// Dashboard Layout Component (with sidebar) +// Dashboard Layout Component with sidebar const DashboardLayout: React.FC = ({ children, sidebarWidth, @@ -137,12 +148,17 @@ function App(): JSX.Element { const location = useLocation(); const navigate = useNavigate(); + const showPublicEnhancements = ['/', '/about', '/contact'].includes(location.pathname); + // Dashboard state const getInitialSidebarWidth = (): number => { if (typeof window === 'undefined') return 220; + try { const stored = window.localStorage.getItem('sidebarExpanded'); + if (stored === null) return 220; + return stored === 'true' ? 220 : 80; } catch { return 220; @@ -156,9 +172,11 @@ function App(): JSX.Element { useEffect(() => { const theme = localStorage.getItem('theme') ?? 'dark'; const dark = theme === 'dark'; + setIsDarkMode(dark); const root = document.documentElement; + if (dark) { root.classList.remove('light'); } else { @@ -166,16 +184,19 @@ function App(): JSX.Element { } }, []); - // Scroll restoration: - // - On route changes without hash, go to top. - // - Keep hash-based anchor behavior (e.g. /#features) intact. + // Scroll restoration useEffect(() => { if (location.hash) return; + window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); }, [location.pathname, location.hash]); // Authentication handlers - const handleUserLogin = async (email: string, password: string, remember: boolean = true): Promise => { + const handleUserLogin = async ( + email: string, + password: string, + remember: boolean = true, + ): Promise => { await auth.login(email, password, remember); navigate('/dashboard'); }; @@ -200,10 +221,12 @@ function App(): JSX.Element { const handleThemeToggle = (): void => { const newThemeIsDark = !isDarkMode; + setIsDarkMode(newThemeIsDark); localStorage.setItem('theme', newThemeIsDark ? 'dark' : 'light'); const root = document.documentElement; + if (newThemeIsDark) { root.classList.remove('light'); } else { @@ -226,9 +249,7 @@ function App(): JSX.Element { navigate('/login')} /> - } + element={ navigate('/login')} />} /> } /> - {/* Fallback route */} + {/* Fallback Route */} navigate('/login')} - /> - } + element={ navigate('/login')} />} /> + + {showPublicEnhancements && ( + <> +
+
+
+ Audit Readiness +

Built to support faster compliance preparation

+

+ AutoAudit brings evidence review, cloud visibility, and audit tracking + into one streamlined workflow, helping teams stay prepared before + compliance reviews begin. +

+
+ +
+
+

Evidence Visibility

+

Organise and review audit evidence across connected systems.

+
+ +
+

Risk Awareness

+

Highlight compliance gaps early so teams can respond before audit deadlines.

+
+ +
+

Workflow Clarity

+

Keep compliance tasks clear, trackable, and easier to manage.

+
+
+
+
+ +
+
+
+ Platform Value +

Designed for clear, secure, and reliable audit workflows

+

+ The public interface now communicates AutoAudit’s value more clearly by + highlighting usability, consistency, compliance focus, and responsive access + across different screen sizes. +

+
+ +
+
+ 01 +

Clear Navigation

+

Supports users in understanding audit-related features with less friction.

+
+ +
+ 02 +

Consistent Interface

+

Strengthens the visual structure of public-facing product sections.

+
+ +
+ 03 +

Compliance Focus

+

Highlights evidence, risk, and governance workflows in a professional way.

+
+ +
+ 04 +

Responsive Layout

+

Improves the presentation across desktop, tablet, and mobile screens.

+
+
+
+
+ +
+
+
+

AutoAudit

+

+ AutoAudit helps teams streamline audit preparation, manage compliance + evidence, and improve visibility across security and governance workflows. +

+
+ +
+

Platform

+

Compliance Dashboard

+

Evidence Scanner

+

Cloud Integrations

+

Audit Reports

+
+ +
+

Security

+

Secure Evidence Review

+

Policy Alignment

+

Access Control

+

Risk Monitoring

+
+ +
+

Project

+

Open-source Platform

+

Frontend Interface

+

Responsive UI Design

+

Built for Audit Readiness

+
+
+ +
+

+ © 2026 AutoAudit. Built to support secure, reliable, and automated + compliance workflows. +

+
+
+ + )} ); } diff --git a/frontend/src/index.css b/frontend/src/index.css index 02adf836..6bb18a36 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -35,10 +35,12 @@ --landing-bg-alt-mid: 26 58 79; --landing-bg-alt-end: 42 74 95; - /* Spacing & Radius */ + /* Spacing, Radius & Shadow */ --radius-1: 8px; --radius-2: 12px; --radius-3: 16px; + --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.2); + --shadow-2: 0 10px 25px rgba(0, 0, 0, 0.3); /* Fonts */ --font-header: "League Spartan", ui-sans-serif, system-ui, "Segoe UI", @@ -129,7 +131,8 @@ outline-offset: 2px; } - a, button { + a, + button { @apply cursor-pointer; } @@ -222,7 +225,254 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ============================================================================ + 5. PUBLIC FRONTEND ENHANCEMENTS + ============================================================================ */ + +/* Audit Readiness Section */ +.autoaudit-readiness-section { + width: 100%; + padding: 64px 32px; + background: linear-gradient( + 180deg, + rgb(var(--surface-1)) 0%, + rgb(var(--surface-2)) 100% + ); + color: rgb(var(--text-strong)); +} + +.autoaudit-readiness-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 1.9fr); + gap: 48px; + align-items: center; +} + +.autoaudit-section-label { + display: inline-flex; + align-items: center; + margin-bottom: 14px; + padding: 7px 12px; + border-radius: 999px; + background: rgba(var(--accent-teal), 0.12); + color: rgb(var(--accent-teal)); + font-size: 13px; + font-weight: 700; + letter-spacing: 0.5px; + text-transform: uppercase; + border: 1px solid rgba(var(--accent-teal), 0.2); +} + +.autoaudit-readiness-text h2, +.autoaudit-value-header h2 { + max-width: 720px; + margin: 0 0 16px; + font-size: clamp(24px, 3vw, 34px); + line-height: 1.15; + font-weight: 750; + color: rgb(var(--text-strong)); +} + +.autoaudit-readiness-text p, +.autoaudit-value-header p { + max-width: 680px; + margin: 0; + font-size: 15px; + line-height: 1.8; + color: rgb(var(--text-muted)); +} + +.autoaudit-readiness-cards { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; +} + +.autoaudit-readiness-card, +.autoaudit-value-card { + min-height: 168px; + padding: 24px; + border-radius: var(--radius-3); + background: rgba(var(--surface-1), 0.58); + border: 1px solid rgba(var(--text-muted), 0.18); + box-shadow: var(--shadow-1); + transition: + transform 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease; +} + +.autoaudit-readiness-card:hover, +.autoaudit-value-card:hover { + transform: translateY(-3px); + border-color: rgba(var(--accent-teal), 0.28); + box-shadow: var(--shadow-2); +} + +.autoaudit-readiness-card h3, +.autoaudit-value-card h3 { + margin: 0 0 12px; + font-size: 16px; + font-weight: 700; + color: rgb(var(--text-strong)); +} + +.autoaudit-readiness-card p, +.autoaudit-value-card p { + margin: 0; + font-size: 14px; + line-height: 1.7; + color: rgb(var(--text-muted)); +} + +/* Platform Value Section */ +.autoaudit-value-section { + width: 100%; + padding: 64px 32px; + background: rgb(var(--surface-1)); + color: rgb(var(--text-strong)); +} + +.autoaudit-value-container { + max-width: 1400px; + margin: 0 auto; +} + +.autoaudit-value-header { + max-width: 780px; + margin-bottom: 34px; +} + +.autoaudit-value-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 18px; +} + +.autoaudit-value-card { + background: rgba(var(--surface-2), 0.72); +} + +.autoaudit-value-card span { + display: inline-block; + margin-bottom: 16px; + font-size: 13px; + font-weight: 800; + color: rgb(var(--accent-teal)); +} + +/* Professional Footer */ +.autoaudit-footer { + width: 100%; + margin-top: 0; + padding: 48px 32px 24px; + background: rgb(var(--surface-2)); + color: rgb(var(--text-strong)); + border-top: 1px solid rgba(var(--text-muted), 0.18); +} + +.autoaudit-footer-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(160px, 1fr)); + gap: 48px; +} + +.autoaudit-footer-brand h3, +.autoaudit-footer-column h4 { + margin: 0 0 16px; + font-size: 18px; + font-weight: 700; + color: rgb(var(--text-strong)); +} + +.autoaudit-footer-brand p { + max-width: 540px; + margin: 0; + font-size: 15px; + line-height: 1.7; + color: rgb(var(--text-muted)); +} + +.autoaudit-footer-column p { + margin: 10px 0; + font-size: 14px; + line-height: 1.5; + color: rgb(var(--text-muted)); +} + +.autoaudit-footer-bottom { + max-width: 1400px; + margin: 34px auto 0; + padding-top: 20px; + border-top: 1px solid rgba(var(--text-muted), 0.18); + text-align: center; +} + +.autoaudit-footer-bottom p { + margin: 0; + font-size: 14px; + color: rgb(var(--text-muted)); +} + +/* Responsive layout */ +@media (max-width: 1100px) { + .autoaudit-readiness-content { + grid-template-columns: 1fr; + } + + .autoaudit-readiness-cards { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .autoaudit-value-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .autoaudit-footer-content { + grid-template-columns: 1fr 1fr; + gap: 36px; + } +} + +@media (max-width: 760px) { + .autoaudit-readiness-section, + .autoaudit-value-section { + padding: 48px 22px; + } + + .autoaudit-readiness-cards, + .autoaudit-value-grid { + grid-template-columns: 1fr; + } + + .autoaudit-footer { + padding: 40px 22px 22px; + } + + .autoaudit-footer-content { + grid-template-columns: 1fr; + gap: 28px; + } +} + +@media (prefers-reduced-motion: reduce) { + .autoaudit-readiness-card, + .autoaudit-value-card { + transition: none; + } + + .autoaudit-readiness-card:hover, + .autoaudit-value-card:hover { + transform: none; + } } \ No newline at end of file From d9df3fca574b324eb13a0ad36dcb177ef814d592 Mon Sep 17 00:00:00 2001 From: Pushpindersingh-2027 Date: Thu, 7 May 2026 14:29:42 +1000 Subject: [PATCH 2/3] fix: remove duplicate footer rendering --- frontend/src/App.tsx | 43 ------------------------------------------- 1 file changed, 43 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b72f1270..05cc6930 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -482,49 +482,6 @@ function App(): JSX.Element { - -
-
-
-

AutoAudit

-

- AutoAudit helps teams streamline audit preparation, manage compliance - evidence, and improve visibility across security and governance workflows. -

-
- -
-

Platform

-

Compliance Dashboard

-

Evidence Scanner

-

Cloud Integrations

-

Audit Reports

-
- -
-

Security

-

Secure Evidence Review

-

Policy Alignment

-

Access Control

-

Risk Monitoring

-
- -
-

Project

-

Open-source Platform

-

Frontend Interface

-

Responsive UI Design

-

Built for Audit Readiness

-
-
- -
-

- © 2026 AutoAudit. Built to support secure, reliable, and automated - compliance workflows. -

-
-
)} From f83c562ac58e961195408fc972368b703d5e3f9e Mon Sep 17 00:00:00 2001 From: Pushpindersingh-2027 Date: Sun, 17 May 2026 13:58:33 +1000 Subject: [PATCH 3/3] refactor public sections to use Tailwind styling --- frontend/src/App.tsx | 171 ++++++++++++++++++---------- frontend/src/index.css | 248 +---------------------------------------- 2 files changed, 113 insertions(+), 306 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 05cc6930..4fd60a98 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -52,11 +52,11 @@ type SignUpData = { }; const LoadingScreen = (): JSX.Element => ( -
+
-
-
-
- Audit Readiness -

Built to support faster compliance preparation

-

- AutoAudit brings evidence review, cloud visibility, and audit tracking - into one streamlined workflow, helping teams stay prepared before - compliance reviews begin. +

+
+
+ + Audit Readiness + + +

+ Built to support faster compliance preparation +

+ +

+ AutoAudit brings evidence review, cloud visibility, and audit + tracking into one streamlined workflow, helping teams stay + prepared before compliance reviews begin.

-
-
-

Evidence Visibility

-

Organise and review audit evidence across connected systems.

-
- -
-

Risk Awareness

-

Highlight compliance gaps early so teams can respond before audit deadlines.

-
- -
-

Workflow Clarity

-

Keep compliance tasks clear, trackable, and easier to manage.

-
+
+
+

+ Evidence Visibility +

+

+ Organise and review audit evidence across connected systems. +

+
+ +
+

+ Risk Awareness +

+

+ Highlight compliance gaps early so teams can respond before + audit deadlines. +

+
+ +
+

+ Workflow Clarity +

+

+ Keep compliance tasks clear, trackable, and easier to manage. +

+
-
-
-
- Platform Value -

Designed for clear, secure, and reliable audit workflows

-

- The public interface now communicates AutoAudit’s value more clearly by - highlighting usability, consistency, compliance focus, and responsive access - across different screen sizes. +

+
+
+ + Platform Value + + +

+ Designed for clear, secure, and reliable audit workflows +

+ +

+ The public interface now communicates AutoAudit’s value more + clearly by highlighting usability, consistency, compliance + focus, and responsive access across different screen sizes.

-
-
- 01 -

Clear Navigation

-

Supports users in understanding audit-related features with less friction.

-
- -
- 02 -

Consistent Interface

-

Strengthens the visual structure of public-facing product sections.

-
- -
- 03 -

Compliance Focus

-

Highlights evidence, risk, and governance workflows in a professional way.

-
- -
- 04 -

Responsive Layout

-

Improves the presentation across desktop, tablet, and mobile screens.

-
+
+
+ + 01 + +

+ Clear Navigation +

+

+ Supports users in understanding audit-related features with + less friction. +

+
+ +
+ + 02 + +

+ Consistent Interface +

+

+ Strengthens the visual structure of public-facing product + sections. +

+
+ +
+ + 03 + +

+ Compliance Focus +

+

+ Highlights evidence, risk, and governance workflows in a + professional way. +

+
+ +
+ + 04 + +

+ Responsive Layout +

+

+ Improves the presentation across desktop, tablet, and mobile + screens using Tailwind utility classes. +

+
diff --git a/frontend/src/index.css b/frontend/src/index.css index 6bb18a36..6c8d1f71 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -165,7 +165,7 @@ } .stat-label { - @apply mb-1 font-medium text-sm; + @apply mb-1 text-sm font-medium; color: rgb(var(--text-muted)); } @@ -229,250 +229,4 @@ to { transform: rotate(360deg); } -} - -/* ============================================================================ - 5. PUBLIC FRONTEND ENHANCEMENTS - ============================================================================ */ - -/* Audit Readiness Section */ -.autoaudit-readiness-section { - width: 100%; - padding: 64px 32px; - background: linear-gradient( - 180deg, - rgb(var(--surface-1)) 0%, - rgb(var(--surface-2)) 100% - ); - color: rgb(var(--text-strong)); -} - -.autoaudit-readiness-content { - max-width: 1400px; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 1.9fr); - gap: 48px; - align-items: center; -} - -.autoaudit-section-label { - display: inline-flex; - align-items: center; - margin-bottom: 14px; - padding: 7px 12px; - border-radius: 999px; - background: rgba(var(--accent-teal), 0.12); - color: rgb(var(--accent-teal)); - font-size: 13px; - font-weight: 700; - letter-spacing: 0.5px; - text-transform: uppercase; - border: 1px solid rgba(var(--accent-teal), 0.2); -} - -.autoaudit-readiness-text h2, -.autoaudit-value-header h2 { - max-width: 720px; - margin: 0 0 16px; - font-size: clamp(24px, 3vw, 34px); - line-height: 1.15; - font-weight: 750; - color: rgb(var(--text-strong)); -} - -.autoaudit-readiness-text p, -.autoaudit-value-header p { - max-width: 680px; - margin: 0; - font-size: 15px; - line-height: 1.8; - color: rgb(var(--text-muted)); -} - -.autoaudit-readiness-cards { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; -} - -.autoaudit-readiness-card, -.autoaudit-value-card { - min-height: 168px; - padding: 24px; - border-radius: var(--radius-3); - background: rgba(var(--surface-1), 0.58); - border: 1px solid rgba(var(--text-muted), 0.18); - box-shadow: var(--shadow-1); - transition: - transform 0.18s ease, - border-color 0.18s ease, - box-shadow 0.18s ease; -} - -.autoaudit-readiness-card:hover, -.autoaudit-value-card:hover { - transform: translateY(-3px); - border-color: rgba(var(--accent-teal), 0.28); - box-shadow: var(--shadow-2); -} - -.autoaudit-readiness-card h3, -.autoaudit-value-card h3 { - margin: 0 0 12px; - font-size: 16px; - font-weight: 700; - color: rgb(var(--text-strong)); -} - -.autoaudit-readiness-card p, -.autoaudit-value-card p { - margin: 0; - font-size: 14px; - line-height: 1.7; - color: rgb(var(--text-muted)); -} - -/* Platform Value Section */ -.autoaudit-value-section { - width: 100%; - padding: 64px 32px; - background: rgb(var(--surface-1)); - color: rgb(var(--text-strong)); -} - -.autoaudit-value-container { - max-width: 1400px; - margin: 0 auto; -} - -.autoaudit-value-header { - max-width: 780px; - margin-bottom: 34px; -} - -.autoaudit-value-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 18px; -} - -.autoaudit-value-card { - background: rgba(var(--surface-2), 0.72); -} - -.autoaudit-value-card span { - display: inline-block; - margin-bottom: 16px; - font-size: 13px; - font-weight: 800; - color: rgb(var(--accent-teal)); -} - -/* Professional Footer */ -.autoaudit-footer { - width: 100%; - margin-top: 0; - padding: 48px 32px 24px; - background: rgb(var(--surface-2)); - color: rgb(var(--text-strong)); - border-top: 1px solid rgba(var(--text-muted), 0.18); -} - -.autoaudit-footer-content { - max-width: 1400px; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(160px, 1fr)); - gap: 48px; -} - -.autoaudit-footer-brand h3, -.autoaudit-footer-column h4 { - margin: 0 0 16px; - font-size: 18px; - font-weight: 700; - color: rgb(var(--text-strong)); -} - -.autoaudit-footer-brand p { - max-width: 540px; - margin: 0; - font-size: 15px; - line-height: 1.7; - color: rgb(var(--text-muted)); -} - -.autoaudit-footer-column p { - margin: 10px 0; - font-size: 14px; - line-height: 1.5; - color: rgb(var(--text-muted)); -} - -.autoaudit-footer-bottom { - max-width: 1400px; - margin: 34px auto 0; - padding-top: 20px; - border-top: 1px solid rgba(var(--text-muted), 0.18); - text-align: center; -} - -.autoaudit-footer-bottom p { - margin: 0; - font-size: 14px; - color: rgb(var(--text-muted)); -} - -/* Responsive layout */ -@media (max-width: 1100px) { - .autoaudit-readiness-content { - grid-template-columns: 1fr; - } - - .autoaudit-readiness-cards { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .autoaudit-value-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .autoaudit-footer-content { - grid-template-columns: 1fr 1fr; - gap: 36px; - } -} - -@media (max-width: 760px) { - .autoaudit-readiness-section, - .autoaudit-value-section { - padding: 48px 22px; - } - - .autoaudit-readiness-cards, - .autoaudit-value-grid { - grid-template-columns: 1fr; - } - - .autoaudit-footer { - padding: 40px 22px 22px; - } - - .autoaudit-footer-content { - grid-template-columns: 1fr; - gap: 28px; - } -} - -@media (prefers-reduced-motion: reduce) { - .autoaudit-readiness-card, - .autoaudit-value-card { - transition: none; - } - - .autoaudit-readiness-card:hover, - .autoaudit-value-card:hover { - transform: none; - } } \ No newline at end of file