feat(ui): redesign landing page with modern hero section and feature cards

Completely revamped the landing page with a modern, professional design featuring:
- New gradient hero section with compelling value proposition
- Three feature cards highlighting Smart Imports, Secure Storage, and Analytics
- Responsive grid layout with improved typography and spacing
- Enhanced call-to-action buttons with user state awareness
- Added new icons (Zap, Shield, BarChart3, ArrowRight) for visual appeal

Updated header navigation to use consistent button styling and LayoutGrid icon
for the back-to-dashboard functionality across both desktop and mobile views.

app/components/header.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Menu, Home, Settings, User, LogOut, LogIn, ArrowLeft } from "lucide-react";
+import { LayoutGrid, Menu, Home, Settings, User, LogOut, LogIn } from "lucide-react";
 import { DarkModeToggle } from "./dark-mode-toggle";
 import React from "react";
 import { usePathname } from "next/navigation";
@@ -62,9 +62,11 @@ export default function Header() {
               />
             </Link>
             {shouldShowBackButton && (
-              <Link href="/dashboard" className="flex items-center space-x-2 text-sm font-medium hover:text-accent-foreground transition-colors">
-                <ArrowLeft className="h-4 w-4" />
-                <span>Back to dashboard</span>
+              <Link href="/dashboard">
+                <Button variant="ghost" size="sm">
+                  <LayoutGrid className="w-4 h-4 mr-2" />
+                  Back to Dashboard
+                </Button>
               </Link>
             )}
           </div>
@@ -92,9 +94,9 @@ export default function Header() {
           </Link>
           {shouldShowBackButton && (
             <Link href="/dashboard">
-              <Button variant="outline" size="sm" className="flex items-center space-x-2">
-                <ArrowLeft className="h-4 w-4" />
-                <span>Back to dashboard</span>
+              <Button variant="ghost" size="sm">
+                <LayoutGrid className="w-4 h-4 mr-2" />
+                Back to Dashboard
               </Button>
             </Link>
           )}

app/page.tsx

@@ -1,54 +1,128 @@
-import Image from "next/image";
 import Link from "next/link";
 import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
-import { LayoutGrid } from "lucide-react";
+import { ArrowRight, Zap, Shield, BarChart3 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default async function Home() {
   const { getUser } = getKindeServerSession();
   const user = await getUser();
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden py-24 sm:py-32">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl">
+              Welcome to{" "}
+              <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                VTOR.IO
+              </span>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-muted-foreground">
+              Streamline your workflow with powerful file management, intelligent imports,
+              and comprehensive analytics. Built for modern teams who value efficiency.
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              {user ? (
+                <Link href="/dashboard">
+                  <Button size="lg" className="group">
+                    Go to Dashboard
+                    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                  </Button>
+                </Link>
+              ) : (
+                <>
+                  <Link href="/api/auth/login">
+                    <Button size="lg" className="group">
+                      Get Started
+                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                    </Button>
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Background decoration */}
+        <div className="absolute inset-0 -z-10 overflow-hidden">
+          <div className="absolute left-1/2 top-0 -translate-x-1/2 blur-3xl">
+            <div className="aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20"></div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-24 sm:py-32">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center mb-16">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+              Everything you need to manage your data
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground">
+              Powerful features designed to help you work smarter, not harder.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            <Card className="relative overflow-hidden">
+              <CardHeader>
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <Zap className="w-6 h-6 text-primary" />
+                </div>
+                <CardTitle>Smart Imports</CardTitle>
+                <CardDescription>
+                  Process Excel files with intelligent mapping and validation
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Upload your Excel files and let our system intelligently map columns,
+                  validate data, and create structured imports with ease.
+                </p>
+              </CardContent>
+            </Card>
 
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Site coming soon, written in{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              next.js
-            </code>
-            !
-          </li>
-          <li>Meanwhile, enjoy some media.</li>
-        </ol>
+            <Card className="relative overflow-hidden">
+              <CardHeader>
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <Shield className="w-6 h-6 text-primary" />
+                </div>
+                <CardTitle>Secure Storage</CardTitle>
+                <CardDescription>
+                  Your files are encrypted and safely stored in the cloud
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Enterprise-grade security with encrypted file storage,
+                  access controls, and audit trails for complete peace of mind.
+                </p>
+              </CardContent>
+            </Card>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <Link
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://request.vixflix.online/"
-            target="_blank"
-            rel="noopener noreferrer" >
-            <Image
-              className="dark:invert"
-              src="/overseerr.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Go to VixFlixOnline
-          </Link>
-          
-          {user && (
-            <Link
-              className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-              href="/dashboard"
-            >
-              <LayoutGrid className="w-5 h-5 mr-2" />
-              Dashboard
-            </Link>
-          )}
+            <Card className="relative overflow-hidden">
+              <CardHeader>
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <BarChart3 className="w-6 h-6 text-primary" />
+                </div>
+                <CardTitle>Analytics & Insights</CardTitle>
+                <CardDescription>
+                  Get detailed reports and actionable insights from your data
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Transform your raw data into meaningful insights with
+                  comprehensive analytics and customizable reporting dashboards.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
         </div>
-      </main>
+      </section>
     </div>
   );
 }