feat(welcome): overhaul welcome page with responsive design and theme tokens

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,
+ * Properties for the FeatureCard component.
- * and navigation links for signing in or registering.
+ *
+ * @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="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="flex-1 flex flex-col items-center justify-center p-6 text-center">
+      {/* Background Glow (Scaled down for mobile performance) */}
-        <div className="max-w-md space-y-6">
+      <div
-          <h1 className="text-4xl font-extrabold tracking-tight">Flowstate</h1>
+        aria-hidden="true"
-          <p className="text-foreground-muted">Welcome Page</p>
+        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 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"
       >
-              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/"
+              href="/login/"
-              className="px-4 py-2 text-sm font-medium rounded-lg border border-border hover:opacity-70 transition-opacity"
+              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>
   );