Skip to content

Add professional frontend public page sections #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pushpindersingh-2027 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add professional frontend public page sections #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49028c3
Add professional frontend public page sections
Pushpindersingh-2027 May 7, 2026
d9df3fc
fix: remove duplicate footer rendering
Pushpindersingh-2027 May 7, 2026
f83c562
refactor public sections to use Tailwind styling
Pushpindersingh-2027 May 17, 2026
a9c8585
Merge branch 'main' into frontend-platform-value-section
Pushpindersingh-2027 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 198 additions & 78 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,37 @@ type SignUpData = {
agreeTerms: boolean;
};

const LoadingScreen = (): JSX.Element => (
Comment thread
Pushpindersingh-2027 marked this conversation as resolved.
<div className="flex h-screen items-center justify-center bg-slate-900">
<div className="text-center">
<div className="animate-spin">
<svg
className="h-8 w-8 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
<p className="mt-4 text-slate-400">Loading...</p>
</div>
</div>
);

// Protected Route Component
const ProtectedRoute: React.FC<RouteWrapperProps> = ({ children }) => {
const navigate = useNavigate();
Expand All @@ -66,35 +97,7 @@ const ProtectedRoute: React.FC<RouteWrapperProps> = ({ children }) => {
}, [isAuthenticated, isLoading, navigate]);

if (isLoading) {
return (
<div className="flex justify-center items-center h-screen bg-slate-900">
<div className="text-center">
<div className="animate-spin">
<svg
className="w-8 h-8 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
<p className="mt-4 text-slate-400">Loading...</p>
</div>
</div>
);
return <LoadingScreen />;
}

return isAuthenticated ? <>{children}</> : null;
Expand All @@ -107,45 +110,19 @@ const AdminRoute: React.FC<RouteWrapperProps> = ({ 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 (
<div className="flex justify-center items-center h-screen bg-slate-900">
<div className="text-center">
<div className="animate-spin">
<svg
className="w-8 h-8 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
<p className="mt-4 text-slate-400">Loading...</p>
</div>
</div>
);
return <LoadingScreen />;
}

return isAuthenticated &&
Expand All @@ -154,7 +131,7 @@ const AdminRoute: React.FC<RouteWrapperProps> = ({ children }) => {
) : null;
};

// Dashboard Layout Component (with sidebar)
// Dashboard Layout Component with sidebar
const DashboardLayout: React.FC<DashboardLayoutProps> = ({
children,
sidebarWidth,
Expand All @@ -174,12 +151,19 @@ 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;
Expand All @@ -193,18 +177,24 @@ function App(): JSX.Element {

// Theme management
useEffect(() => {
localStorage.setItem('theme', 'dark');
setIsDarkMode(true);
const theme = localStorage.getItem("theme") ?? "dark";
const dark = theme === "dark";

setIsDarkMode(dark);

const root = document.documentElement;
root.classList.remove('light');

if (dark) {
root.classList.remove("light");
} else {
root.classList.add("light");
}
}, []);

// 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]);

Expand Down Expand Up @@ -243,18 +233,20 @@ function App(): JSX.Element {
navigate("/dashboard");
};

// const handleThemeToggle = (): void => {
// const newThemeIsDark = !isDarkMode;
// setIsDarkMode(newThemeIsDark);
// localStorage.setItem('theme', newThemeIsDark ? 'dark' : 'light');
const handleThemeToggle = (): void => {
const newThemeIsDark = !isDarkMode;

// const root = document.documentElement;
// if (newThemeIsDark) {
// root.classList.remove('light');
// } else {
// root.classList.add('light');
// }
// };
setIsDarkMode(newThemeIsDark);
localStorage.setItem("theme", newThemeIsDark ? "dark" : "light");

const root = document.documentElement;

if (newThemeIsDark) {
root.classList.remove("light");
} else {
root.classList.add("light");
}
};

const handleSidebarWidthChange = (width: number): void => {
setSidebarWidth(width);
Expand Down Expand Up @@ -418,14 +410,142 @@ function App(): JSX.Element {

<Route path="/styleguide" element={<StyleGuide />} />

{/* Fallback route */}
{/* Fallback Route */}
<Route
path="*"
element={<LandingPage onSignInClick={() => navigate("/login")} />}
/>
</Routes>

{showPublicEnhancements && (
Comment thread
Pushpindersingh-2027 marked this conversation as resolved.
<>
<section className="w-full bg-gradient-to-b from-surface-1 to-surface-2 px-6 py-16 text-text-strong">
<div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[1.1fr_1.9fr] lg:items-center">
<div>
<span className="inline-flex rounded-full border border-accent-teal/20 bg-accent-teal/10 px-3 py-2 text-xs font-bold uppercase tracking-wide text-accent-teal">
Audit Readiness
</span>

<h2 className="mt-4 max-w-2xl text-3xl font-bold leading-tight md:text-4xl">
Built to support faster compliance preparation
</h2>

<p className="mt-4 max-w-2xl text-sm leading-7 text-text-muted md:text-base">
AutoAudit brings evidence review, cloud visibility, and audit
tracking into one streamlined workflow, helping teams stay
prepared before compliance reviews begin.
</p>
</div>

<div className="grid gap-5 md:grid-cols-3">
<article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<h3 className="text-base font-bold text-text-strong">
Evidence Visibility
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Organise and review audit evidence across connected systems.
</p>
</article>

<article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<h3 className="text-base font-bold text-text-strong">
Risk Awareness
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Highlight compliance gaps early so teams can respond before
audit deadlines.
</p>
</article>

<article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<h3 className="text-base font-bold text-text-strong">
Workflow Clarity
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Keep compliance tasks clear, trackable, and easier to manage.
</p>
</article>
</div>
</div>
</section>

<section className="w-full bg-surface-1 px-6 py-16 text-text-strong">
<div className="mx-auto max-w-7xl">
<div className="mb-9 max-w-3xl">
<span className="inline-flex rounded-full border border-accent-teal/20 bg-accent-teal/10 px-3 py-2 text-xs font-bold uppercase tracking-wide text-accent-teal">
Platform Value
</span>

<h2 className="mt-4 text-3xl font-bold leading-tight md:text-4xl">
Designed for clear, secure, and reliable audit workflows
</h2>

<p className="mt-4 text-sm leading-7 text-text-muted md:text-base">
The public interface now communicates AutoAudit’s value more
clearly by highlighting usability, consistency, compliance
focus, and responsive access across different screen sizes.
</p>
</div>

<div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
<article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
01
</span>
<h3 className="mt-4 text-base font-bold text-text-strong">
Clear Navigation
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Supports users in understanding audit-related features with
less friction.
</p>
</article>

<article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
02
</span>
<h3 className="mt-4 text-base font-bold text-text-strong">
Consistent Interface
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Strengthens the visual structure of public-facing product
sections.
</p>
</article>

<article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
03
</span>
<h3 className="mt-4 text-base font-bold text-text-strong">
Compliance Focus
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Highlights evidence, risk, and governance workflows in a
professional way.
</p>
</article>

<article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
<span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
04
</span>
<h3 className="mt-4 text-base font-bold text-text-strong">
Responsive Layout
</h3>
<p className="mt-3 text-sm leading-6 text-text-muted">
Improves the presentation across desktop, tablet, and mobile
screens using Tailwind utility classes.
</p>
</article>
</div>
</div>
</section>
</>
)}
</div>
);
}

export default App;
export default App;
Loading