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

app/page.tsx

@@ -1,62 +1,61 @@
 /**
  * @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 { redirect } from "next/navigation";
 import Link from "next/link";
 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} 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;
   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
- * @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;
 
   if (session) {
@@ -65,13 +64,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 Glow (Scaled down for mobile performance) */}
+      {/* Background Ambient Glow */}
       <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%)",
@@ -81,8 +80,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 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">
             Master your work in seamless{" "}
             <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.
           </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"
+              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
-              <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
@@ -124,73 +110,36 @@ export default async function WelcomePage(): Promise<JSX.Element> {
               Sign In
             </Link>
           </div>
-        </div>
+        </section>
 
         {/* 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">
-            <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>
+        </section>
       </main>
 
-      {/* Footer Container */}
       <Footer />
     </div>
   );