Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: Chneemann:04cf44484881c3f827bd5fed98ebf94e78bba0e0
Branches Tags
Chneemann:main
..
compare: Chneemann:cdf1704499144194163cfca7fb19c9cf1e25a1ab
Branches Tags
Chneemann:main

No commits in common. "04cf44484881c3f827bd5fed98ebf94e78bba0e0" and "cdf1704499144194163cfca7fb19c9cf1e25a1ab" have entirely different histories.
04cf444848 ... cdf1704499

1 changed files with 113 additions and 74 deletions
Show stats Expand all files Collapse all files

187
app/page.tsx
View file

@ -1,68 +1,57 @@
/** /**
* @file app/page.tsx * @file app/page.tsx
* @description Welcome landing page with responsive hero section, features showcase, and auth check. * @description Welcome landing page component with responsive hero section, features showcase, and authentication redirect check.
*/ */
import { auth } from "@/auth"; import { auth } from "@/auth";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import Footer from "@/app/components/layout/Footer"; import Footer from "@/app/components/layout/Footer";
import {
Zap,
BarChart3,
ShieldCheck,
ArrowRight,
type LucideIcon,
} from "lucide-react";
import { JSX } from "react/jsx-runtime"; import { JSX } from "react/jsx-runtime";
/** /**
* Interface representing a feature item displayed in the features showcase. * Properties for the FeatureCard component.
* *
* @interface Feature * @interface FeatureCardProps
* @property {string} id - The unique identifier of the feature. * @property {React.ReactNode} icon - The icon element displayed inside the feature card.
* @property {string} title - The title of the feature. * @property {string} title - The title of the feature.
* @property {string} description - The explanatory description of the feature. * @property {string} description - A short explanatory description of the feature.
* @property {LucideIcon} icon - The Lucide icon component associated with the feature.
*/ */
interface Feature { interface FeatureCardProps {
id: string; icon: React.ReactNode;
title: string; title: string;
description: string; description: string;
icon: LucideIcon;
} }
/** /**
* List of key features showcased on the landing page. * Renders an individual feature card highlighting a specific platform capability.
* *
* @type {Feature[]} * @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.
*/ */
const FEATURES: Feature[] = [ function FeatureCard({ icon, title, description }: FeatureCardProps) {
{ return (
id: "velocity", <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">
title: "Hyper Velocity", <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">
description: {icon}
"Eliminate switching friction with optimized workflows keeping you directly in the zone.", </div>
icon: Zap, <div>
}, <h3 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1">
{ {title}
id: "metrics", </h3>
title: "Clean Metrics", <p className="text-xs text-foreground-muted leading-relaxed">
description: {description}
"Visualize focus states and process summaries clearly without visual clutter.", </p>
icon: BarChart3, </div>
}, </div>
{ );
id: "security", }
title: "Full Security",
description:
"Encrypted data and robust authentication guards protecting your workspace session.",
icon: ShieldCheck,
},
];
/** /**
* Renders the welcome landing page, redirecting authenticated users to the summary page. * Renders the fully responsive welcome landing page using custom Tailwind CSS variables.
* *
* @async * @async
* @returns {Promise<JSX.Element>} The rendered welcome landing page component. * @returns {Promise<JSX.Element>} The rendered welcome landing page component.
@ -76,13 +65,13 @@ export default async function WelcomePage(): Promise<JSX.Element> {
return ( return (
<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"> <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 Ambient Glow */} {/* Background Glow (Scaled down for mobile performance) */}
<div <div
aria-hidden="true" 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" className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
> >
<div <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" 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={{ style={{
clipPath: 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%)", "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%)",
@ -92,8 +81,8 @@ export default async function WelcomePage(): Promise<JSX.Element> {
{/* Main Content Area */} {/* 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"> <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 Section */} {/* Hero Header */}
<section className="text-center max-w-3xl mx-auto space-y-3 sm:space-y-4"> <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"> <h1 className="text-3xl sm:text-6xl font-extrabold tracking-tight text-foreground leading-tight">
Master your work in seamless{" "} Master your work in seamless{" "}
<span className="bg-linear-to-r from-primary to-accent bg-clip-text text-transparent"> <span className="bg-linear-to-r from-primary to-accent bg-clip-text text-transparent">
@ -106,52 +95,102 @@ export default async function WelcomePage(): Promise<JSX.Element> {
productivity with your modern workspace companion. productivity with your modern workspace companion.
</p> </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"> <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 <Link
href="/register" 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 gap-2" 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 Get Started
<ArrowRight className="w-4 h-4" /> <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>
<Link <Link
href="/login" 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" 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"
> >
Sign In Sign In
</Link> </Link>
</div> </div>
</section> </div>
{/* Features Showcase */} {/* Features Showcase */}
<section <div className="mt-8 sm:mt-12 w-full max-w-4xl">
aria-label="Key Features"
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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
{FEATURES.map(({ id, title, description, icon: Icon }) => ( <FeatureCard
<article icon={
key={id} <svg
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" className="w-5 h-5"
> fill="none"
<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"> viewBox="0 0 24 24"
<Icon className="w-5 h-5" /> stroke="currentColor"
</div> strokeWidth="2"
<div> >
<h2 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1"> <path
{title} strokeLinecap="round"
</h2> strokeLinejoin="round"
<p className="text-xs text-foreground-muted leading-relaxed"> d="M13 10V3L4 14h7v7l9-11h-7z"
{description} />
</p> </svg>
</div> }
</article> 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>
</section> </div>
</main> </main>
{/* Footer Container */}
<Footer /> <Footer />
</div> </div>
); );