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

refactor(welcome): replace raw SVGs with lucide-react icons and clean up markup

Browse source
This commit is contained in:
Chneemann 2026-10-06 08:43:58 +02:00
parent cdf1704499
commit eac60ddcec
No known key found for this signature in database
1 changed files with 66 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

183
app/page.tsx
View file

@ -1,62 +1,61 @@
/** /**
* @file app/page.tsx * @file app/page.tsx
* @description Welcome landing page component with responsive hero section, features showcase, and authentication redirect check. * @description Welcome landing page with responsive hero section, features showcase, and auth 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 { JSX } from "react/jsx-runtime"; import { Zap, BarChart3, ShieldCheck, ArrowRight } from "lucide-react";
/** /**
* Properties for the FeatureCard component. * Properties for a feature item displayed in the features showcase.
* *
* @interface FeatureCardProps * @interface Feature
* @property {React.ReactNode} icon - The icon element displayed inside the feature card. * @property {string} id - Unique identifier for the feature.
* @property {string} title - The title of the feature. * @property {string} title - The title of the feature.
* @property {string} description - A short explanatory description of the feature. * @property {string} description - Explanatory text detailing the feature.
* @property {React.ReactNode} icon - Icon element representing the feature.
*/ */
interface FeatureCardProps { interface Feature {
icon: React.ReactNode; id: string;
title: string; title: string;
description: string; description: string;
icon: React.ReactNode;
} }
/** const FEATURES: Feature[] = [
* Renders an individual feature card highlighting a specific platform capability. {
* id: "velocity",
* @param {FeatureCardProps} props - The component props. title: "Hyper Velocity",
* @param {React.ReactNode} props.icon - The feature icon. description:
* @param {string} props.title - The feature title. "Eliminate switching friction with optimized workflows keeping you directly in the zone.",
* @param {string} props.description - The feature description text. icon: <Zap className="w-5 h-5" />,
* @returns {JSX.Element} The rendered feature card component. },
*/ {
function FeatureCard({ icon, title, description }: FeatureCardProps) { id: "metrics",
return ( title: "Clean Metrics",
<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"> description:
<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"> "Visualize focus states and process summaries clearly without visual clutter.",
{icon} icon: <BarChart3 className="w-5 h-5" />,
</div> },
<div> {
<h3 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1"> id: "security",
{title} title: "Full Security",
</h3> description:
<p className="text-xs text-foreground-muted leading-relaxed"> "Encrypted data and robust authentication guards protecting your workspace session.",
{description} icon: <ShieldCheck className="w-5 h-5" />,
</p> },
</div> ];
</div>
);
}
/** /**
* Renders the fully responsive welcome landing page using custom Tailwind CSS variables. * Renders the welcome landing page with session validation and responsive layout.
* *
* @async * @async
* @returns {Promise<JSX.Element>} The rendered welcome landing page component. * @returns {Promise<JSX.Element>} The rendered welcome page component.
*/ */
export default async function WelcomePage(): Promise<JSX.Element> { export default async function WelcomePage() {
const session = typeof auth === "function" ? await auth() : null; const session = typeof auth === "function" ? await auth() : null;
if (session) { if (session) {
@ -65,13 +64,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 Glow (Scaled down for mobile performance) */} {/* Background Ambient Glow */}
<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%)",
@ -81,8 +80,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 Header */} {/* Hero Section */}
<div className="text-center max-w-3xl mx-auto space-y-3 sm:space-y-4"> <section 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">
@ -95,26 +94,13 @@ 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" 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"
> >
Get Started Get Started
<svg <ArrowRight className="w-4 h-4" />
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
@ -124,73 +110,36 @@ export default async function WelcomePage(): Promise<JSX.Element> {
Sign In Sign In
</Link> </Link>
</div> </div>
</div> </section>
{/* Features Showcase */} {/* Features Showcase */}
<div className="mt-8 sm:mt-12 w-full max-w-4xl"> <section
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">
<FeatureCard {FEATURES.map((feature) => (
icon={ <article
<svg key={feature.id}
className="w-5 h-5" 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"
fill="none" >
viewBox="0 0 24 24" <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">
stroke="currentColor" {feature.icon}
strokeWidth="2" </div>
> <div>
<path <h2 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1">
strokeLinecap="round" {feature.title}
strokeLinejoin="round" </h2>
d="M13 10V3L4 14h7v7l9-11h-7z" <p className="text-xs text-foreground-muted leading-relaxed">
/> {feature.description}
</svg> </p>
} </div>
title="Hyper Velocity" </article>
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>
</div> </section>
</main> </main>
{/* Footer Container */}
<Footer /> <Footer />
</div> </div>
); );