app/page.tsx

@@ -1,68 +1,57 @@
 /**
  * @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 { redirect } from "next/navigation";
 import Link from "next/link";
 import Footer from "@/app/components/layout/Footer";
-import {
-  Zap,
-  BarChart3,
-  ShieldCheck,
-  ArrowRight,
-  type LucideIcon,
-} from "lucide-react";
 import { JSX } from "react/jsx-runtime";
 
 /**
- * Interface representing a feature item displayed in the features showcase.
+ * Properties for the FeatureCard component.
  *
- * @interface Feature
- * @property {string} id - The unique identifier of the feature.
+ * @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 - The explanatory description of the feature.
- * @property {LucideIcon} icon - The Lucide icon component associated with the feature.
+ * @property {string} description - A short explanatory description of the feature.
  */
-interface Feature {
-  id: string;
+interface FeatureCardProps {
+  icon: React.ReactNode;
   title: 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[] = [
-  {
-    id: "velocity",
-    title: "Hyper Velocity",
-    description:
-      "Eliminate switching friction with optimized workflows keeping you directly in the zone.",
-    icon: Zap,
-  },
-  {
-    id: "metrics",
-    title: "Clean Metrics",
-    description:
-      "Visualize focus states and process summaries clearly without visual clutter.",
-    icon: BarChart3,
-  },
-  {
-    id: "security",
-    title: "Full Security",
-    description:
-      "Encrypted data and robust authentication guards protecting your workspace session.",
-    icon: ShieldCheck,
-  },
-];
+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 welcome landing page, redirecting authenticated users to the summary page.
+ * Renders the fully responsive welcome landing page using custom Tailwind CSS variables.
  *
  * @async
  * @returns {Promise<JSX.Element>} The rendered welcome landing page component.
@@ -76,13 +65,13 @@ export default async function WelcomePage(): Promise<JSX.Element> {
 
   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">
-      {/* Background Ambient Glow */}
+      {/* 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"
       >
         <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={{
             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%)",
@@ -92,8 +81,8 @@ export default async function WelcomePage(): Promise<JSX.Element> {
 
       {/* 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 Section */}
-        <section className="text-center max-w-3xl mx-auto space-y-3 sm:space-y-4">
+        {/* 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">
@@ -106,52 +95,102 @@ export default async function WelcomePage(): Promise<JSX.Element> {
             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 gap-2"
+              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
-              <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
-              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"
             >
               Sign In
             </Link>
           </div>
-        </section>
+        </div>
 
         {/* Features Showcase */}
-        <section
-          aria-label="Key Features"
-          className="mt-8 sm:mt-12 w-full max-w-4xl"
-        >
+        <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">
-            {FEATURES.map(({ id, title, description, icon: Icon }) => (
-              <article
-                key={id}
-                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 className="w-5 h-5" />
-                </div>
-                <div>
-                  <h2 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1">
-                    {title}
-                  </h2>
-                  <p className="text-xs text-foreground-muted leading-relaxed">
-                    {description}
-                  </p>
-                </div>
-              </article>
-            ))}
+            <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>
-        </section>
+        </div>
       </main>
 
+      {/* Footer Container */}
       <Footer />
     </div>
   );