feat(welcome): overhaul welcome page with responsive design and theme tokens
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 1m27s
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 1m27s
This commit is contained in:
Chneemann
parent
f3378796bb
commit
cdf1704499
1 changed files with 164 additions and 17 deletions
181
app/page.tsx
181
app/page.tsx
|
|
@ -1,49 +1,196 @@
|
|||
/**
|
||||
* @file app/page.tsx
|
||||
* @description Server component acting as the welcome landing page, redirecting authenticated users to the summary view or presenting sign-in and register options.
|
||||
* @description Welcome landing page component with responsive hero section, features showcase, and authentication redirect check.
|
||||
*/
|
||||
|
||||
import { auth } from "@/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Footer from "@/app/components/layout/Footer";
|
||||
import { JSX } from "react/jsx-runtime";
|
||||
|
||||
/**
|
||||
* Renders the welcome page containing branding elements, authentication status checks,
|
||||
* and navigation links for signing in or registering.
|
||||
* Properties for the FeatureCard component.
|
||||
*
|
||||
* @interface FeatureCardProps
|
||||
* @property {React.ReactNode} icon - The icon element displayed inside the feature card.
|
||||
* @property {string} title - The title of the feature.
|
||||
* @property {string} description - A short explanatory description of the feature.
|
||||
*/
|
||||
interface FeatureCardProps {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an individual feature card highlighting a specific platform capability.
|
||||
*
|
||||
* @param {FeatureCardProps} props - The component props.
|
||||
* @param {React.ReactNode} props.icon - The feature icon.
|
||||
* @param {string} props.title - The feature title.
|
||||
* @param {string} props.description - The feature description text.
|
||||
* @returns {JSX.Element} The rendered feature card component.
|
||||
*/
|
||||
function FeatureCard({ icon, title, description }: FeatureCardProps) {
|
||||
return (
|
||||
<div className="group relative flex flex-row sm:flex-col items-center sm:items-start gap-4 sm:gap-0 p-4 sm:p-5 rounded-xl border border-border bg-card backdrop-blur-sm transition-all duration-300 hover:border-primary/40">
|
||||
<div className="shrink-0 sm:mb-3 rounded-lg p-2.5 bg-background text-primary transition-colors group-hover:bg-primary group-hover:text-background">
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs text-foreground-muted leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the fully responsive welcome landing page using custom Tailwind CSS variables.
|
||||
*
|
||||
* @async
|
||||
* @returns {Promise<JSX.Element>} The rendered welcome landing page component.
|
||||
*/
|
||||
export default async function WelcomePage() {
|
||||
export default async function WelcomePage(): Promise<JSX.Element> {
|
||||
const session = typeof auth === "function" ? await auth() : null;
|
||||
|
||||
if (session) {
|
||||
redirect("/summary");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-dvh w-full justify-between">
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
|
||||
<div className="max-w-md space-y-6">
|
||||
<h1 className="text-4xl font-extrabold tracking-tight">Flowstate</h1>
|
||||
<p className="text-foreground-muted">Welcome Page</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Link
|
||||
href="/login/"
|
||||
className="px-4 py-2 text-sm font-medium rounded-lg bg-foreground text-background hover:opacity-70 transition-opacity"
|
||||
<div className="relative min-h-dvh w-full flex flex-col justify-between overflow-x-hidden bg-background text-foreground selection:bg-primary selection:text-background">
|
||||
{/* Background Glow (Scaled down for mobile performance) */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
|
||||
>
|
||||
Sign In
|
||||
<div
|
||||
className="relative left-[calc(50%-10rem)] aspect-1155/678 w-[20rem] sm:w-50rem -translate-x-1/2 rotate-30deg bg-linear-to-tr from-accent to-primary opacity-20 sm:opacity-15"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 w-full flex flex-col items-center justify-center px-4 sm:px-6 py-8 sm:py-12 max-w-6xl mx-auto z-10">
|
||||
{/* Hero Header */}
|
||||
<div className="text-center max-w-3xl mx-auto space-y-3 sm:space-y-4">
|
||||
<h1 className="text-3xl sm:text-6xl font-extrabold tracking-tight text-foreground leading-tight">
|
||||
Master your work in seamless{" "}
|
||||
<span className="bg-linear-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
Flowstate
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-sm sm:text-lg text-foreground-muted max-w-xl mx-auto leading-relaxed px-2">
|
||||
Eliminate friction, organize your focus, and achieve effortless
|
||||
productivity with your modern workspace companion.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2.5 sm:gap-3 pt-3 w-full max-w-xs sm:max-w-none mx-auto">
|
||||
<Link
|
||||
href="/register/"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg bg-primary text-background shadow-md hover:bg-primary-hover transition-colors duration-200"
|
||||
>
|
||||
Get Started
|
||||
<svg
|
||||
className="ml-2 -mr-1 h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/register/"
|
||||
className="px-4 py-2 text-sm font-medium rounded-lg border border-border hover:opacity-70 transition-opacity"
|
||||
href="/login/"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg border border-border bg-card hover:bg-border/40 text-foreground transition-colors duration-200"
|
||||
>
|
||||
Register
|
||||
Sign In
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Showcase */}
|
||||
<div className="mt-8 sm:mt-12 w-full max-w-4xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
|
||||
<FeatureCard
|
||||
icon={
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
title="Hyper Velocity"
|
||||
description="Eliminate switching friction with optimized workflows keeping you directly in the zone."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
title="Clean Metrics"
|
||||
description="Visualize focus states and process summaries clearly without visual clutter."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
title="Full Security"
|
||||
description="Encrypted data and robust authentication guards protecting your workspace session."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer Container */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue