diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..e0aa528
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,12 @@
+/**
+ * Minimal ESLint config (legacy .eslintrc.cjs) so `next lint` runs non-interactively.
+ * It extends the Next.js recommended rules. Adjust rules as needed.
+ */
+module.exports = {
+  root: true,
+  extends: ["next/core-web-vitals"],
+  rules: {
+    // Keep rules conservative for automated fixes.
+    // You can add/adjust rules here.
+  },
+};
diff --git a/app/globals.css b/app/globals.css
index 7648226..bf5415a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,52 +4,61 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 220 33% 97%;
+    --foreground: 222 47% 11%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 239 84% 67%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --destructive: 0 84.2% 60.2%;
+    --secondary: 214 32% 88%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 217 25% 92%;
+    --muted-foreground: 219 15% 35%;
+    --accent: 214 32% 88%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.75rem;
+    --border: 214 32% 90%;
+    --input: 214 32% 88%;
+    --ring: 242 84% 70%;
+    --radius: 0.875rem;
+    --glow: 243 96% 76%;
+    --surface-glass: rgba(255, 255, 255, 0.68);
+    --surface-muted: rgba(242, 246, 255, 0.92);
+    --shadow-soft: 0 24px 80px rgba(15, 23, 42, 0.12);
+    --shadow-strong: 0 40px 120px rgba(30, 64, 175, 0.22);
 
-    /* Transition timing */
     --theme-transition-duration: 0.5s;
     --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .dark {
-    --background: 0 0% 0%;
-    --foreground: 210 40% 98%;
-    --card: 0 0% 0%;
-    --card-foreground: 210 40% 98%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 262 83% 58%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 262 83% 14%;
-    --muted-foreground: 215.4 16.3% 65%;
-    --accent: 262 83% 14%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --background: 230 38% 3%;
+    --foreground: 216 100% 97%;
+    --card: rgba(9, 11, 25, 0.78);
+    --card-foreground: 216 100% 97%;
+    --popover: rgba(9, 11, 25, 0.78);
+    --popover-foreground: 216 100% 97%;
+    --primary: 240 84% 71%;
+    --primary-foreground: 216 100% 97%;
+    --secondary: rgba(33, 42, 80, 0.86);
+    --secondary-foreground: 216 100% 97%;
+    --muted: rgba(33, 42, 80, 0.68);
+    --muted-foreground: 220 35% 78%;
+    --accent: rgba(88, 28, 135, 0.68);
+    --accent-foreground: 216 100% 97%;
+    --destructive: 0 78% 48%;
     --destructive-foreground: 210 40% 98%;
-    --border: 262 83% 14%;
-    --input: 262 83% 14%;
-    --ring: 217.2 91.2% 59.8%;
+    --border: rgba(148, 163, 184, 0.12);
+    --input: rgba(148, 163, 184, 0.12);
+    --ring: rgba(129, 140, 248, 0.9);
+    --glow: rgba(124, 58, 237, 0.55);
+    --surface-glass: rgba(18, 22, 40, 0.62);
+    --surface-muted: rgba(24, 32, 68, 0.5);
+    --shadow-soft: 0 32px 96px rgba(15, 23, 42, 0.42);
+    --shadow-strong: 0 52px 160px rgba(59, 130, 246, 0.32);
   }
 }
 
@@ -58,7 +67,6 @@
     @apply border-border;
   }
 
-  /* Smooth transitions for all elements */
   *,
   *::before,
   *::after {
@@ -69,71 +77,475 @@
       fill var(--theme-transition-duration) var(--theme-transition-timing),
       stroke var(--theme-transition-duration) var(--theme-transition-timing),
       box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
-      backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing);
+      backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing),
+      transform 240ms ease;
+  }
+
+  html {
+    @apply scroll-smooth;
   }
 
   body {
-    @apply bg-background text-foreground;
-    transition: background var(--theme-transition-duration) var(--theme-transition-timing), color
-      var(--theme-transition-duration) var(--theme-transition-timing);
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-inter), system-ui, -apple-system, "Segoe UI", sans-serif;
+    background-image: radial-gradient(
+        circle at 10% 20%,
+        rgba(59, 130, 246, 0.16) 0%,
+        rgba(59, 130, 246, 0) 40%
+      ),
+      radial-gradient(
+        circle at 80% 0%,
+        rgba(147, 51, 234, 0.18) 0%,
+        rgba(147, 51, 234, 0) 45%
+      ),
+      linear-gradient(
+        120deg,
+        rgba(255, 255, 255, 0.92),
+        rgba(229, 231, 235, 0.66)
+      );
+    min-height: 100vh;
+    transition: background 700ms ease,
+      color var(--theme-transition-duration) var(--theme-transition-timing);
   }
 
-  /* Custom dark mode background with smooth transition */
   .dark body {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%);
+    background-image: radial-gradient(
+        circle at 3% -10%,
+        rgba(56, 189, 248, 0.25) 0%,
+        rgba(56, 189, 248, 0) 45%
+      ),
+      radial-gradient(
+        circle at 110% 20%,
+        rgba(124, 58, 237, 0.32) 0%,
+        rgba(124, 58, 237, 0) 55%
+      ),
+      linear-gradient(160deg, rgba(3, 7, 18, 0.98), rgba(15, 23, 42, 0.92));
     background-attachment: fixed;
   }
 
-  .dark .bg-background {
-    background: rgba(26, 26, 46, 0.8);
-    backdrop-filter: blur(10px);
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-slate-900 dark:text-white;
+    font-family: var(--font-sora), "Inter", system-ui, sans-serif;
+    letter-spacing: -0.015em;
   }
 
-  .dark .bg-muted\/30 {
-    background: rgba(83, 52, 131, 0.2);
-    backdrop-filter: blur(10px);
+  h1 {
+    @apply text-4xl font-bold sm:text-5xl;
   }
 
-  .dark .bg-card {
-    background: rgba(22, 33, 62, 0.8);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(83, 52, 131, 0.3);
+  h2 {
+    @apply text-3xl font-semibold sm:text-4xl;
   }
 
-  /* Smooth transitions for specific components */
-  .theme-transition {
-    transition: all var(--theme-transition-duration) var(--theme-transition-timing);
+  h3 {
+    @apply text-2xl font-semibold sm:text-3xl;
   }
 
-  /* Enhanced transitions for interactive elements */
-  button,
-  a,
-  .card,
-  .badge {
-    transition:
-      background-color var(--theme-transition-duration) var(--theme-transition-timing),
-      border-color var(--theme-transition-duration) var(--theme-transition-timing),
-      color var(--theme-transition-duration) var(--theme-transition-timing),
-      box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
-      transform 0.2s ease;
+  h4 {
+    @apply text-xl font-semibold sm:text-2xl;
+  }
+
+  h5 {
+    @apply text-lg font-semibold;
+  }
+
+  h6 {
+    @apply text-base font-semibold;
+  }
+
+  p {
+    @apply leading-relaxed;
+  }
+
+  .font-display {
+    font-family: var(--font-sora), "Inter", system-ui, sans-serif;
+  }
+
+  .font-sans {
+    font-family: var(--font-inter), system-ui, sans-serif;
+  }
+
+  ::selection {
+    background-color: theme("colors.indigo.500");
+    color: white;
   }
 
-  /* Gradient transitions */
-  .gradient-transition {
-    background-size: 200% 200%;
-    transition: background-position var(--theme-transition-duration) var(--theme-transition-timing), background-color
-      var(--theme-transition-duration) var(--theme-transition-timing);
+  :-moz-focusring,
+  :focus-visible {
+    outline: 2px solid rgba(129, 140, 248, 0.9);
+    outline-offset: 2px;
   }
 
-  /* Icon transitions */
-  svg {
-    transition: color var(--theme-transition-duration) var(--theme-transition-timing), fill
-      var(--theme-transition-duration) var(--theme-transition-timing), stroke var(--theme-transition-duration)
+  .glass-surface {
+    background: var(--surface-glass);
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(18px) saturate(140%);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+  }
+
+  .dark .glass-surface {
+    border-color: rgba(148, 163, 184, 0.16);
+  }
+
+  .soft-shadow {
+    box-shadow: var(--shadow-soft);
+  }
+
+  .strong-shadow {
+    box-shadow: var(--shadow-strong);
+  }
+
+  .theme-transition {
+    transition: all var(--theme-transition-duration)
       var(--theme-transition-timing);
   }
 
-  /* Prevent transitions on page load */
-  .preload * {
+  .preload *,
+  .preload *::before,
+  .preload *::after {
     transition: none !important;
   }
 }
+
+@layer components {
+  .container-responsive {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .section-shell {
+    @apply relative isolate overflow-hidden py-20;
+  }
+
+  .interactive-card {
+    @apply rounded-3xl border border-white/10 bg-white/70 p-8 shadow-xl backdrop-blur-xl transition;
+  }
+
+  .interactive-card:hover {
+    @apply -translate-y-2 shadow-2xl;
+  }
+
+  .dark .interactive-card {
+    /* Use explicit dark-mode overrides rather than variant @apply to avoid
+       PostCSS/Tailwind @apply variant limitations in some environments. */
+    border-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 30px 120px rgba(15, 23, 42, 0.45);
+  }
+
+  .glow-ring {
+    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.14),
+      0 20px 80px rgba(99, 102, 241, 0.25);
+  }
+
+  .floating {
+    animation: floating 8s ease-in-out infinite;
+  }
+
+  .floating-delayed {
+    animation-delay: 2.5s;
+  }
+
+  .gradient-border {
+    position: relative;
+  }
+  .gradient-border::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(
+      135deg,
+      rgba(129, 140, 248, 0.8),
+      rgba(236, 72, 153, 0.6)
+    );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .scroll-indicator-gradient {
+    background: linear-gradient(
+      90deg,
+      rgba(129, 140, 248, 0.35),
+      rgba(236, 72, 153, 0.35)
+    );
+  }
+
+  .focus-ring {
+    /* Provide an accessible focus ring without using variant prefixes in @apply. */
+    outline: none;
+  }
+
+  .focus-ring:focus-visible {
+    outline: 2px solid rgba(129, 140, 248, 0.9);
+    outline-offset: 2px;
+  }
+}
+
+@layer utilities {
+  .text-gradient-primary {
+    @apply bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent;
+  }
+
+  .text-gradient-secondary {
+    @apply bg-gradient-to-br from-sky-400 via-indigo-400 to-fuchsia-500 bg-clip-text text-transparent;
+  }
+
+  .bg-grid {
+    background-image: linear-gradient(
+        rgba(148, 163, 184, 0.12) 1px,
+        transparent 0
+      ),
+      linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 0);
+    background-size: 40px 40px;
+  }
+
+  .dark .bg-grid {
+    background-image: linear-gradient(rgba(55, 65, 81, 0.32) 1px, transparent 0),
+      linear-gradient(90deg, rgba(55, 65, 81, 0.32) 1px, transparent 0);
+  }
+
+  .backdrop-gradient {
+    background-image: linear-gradient(
+      120deg,
+      rgba(59, 130, 246, 0.18),
+      rgba(236, 72, 153, 0.2)
+    );
+  }
+
+  .dark .backdrop-gradient {
+    background-image: linear-gradient(
+      120deg,
+      rgba(59, 130, 246, 0.28),
+      rgba(236, 72, 153, 0.32)
+    );
+  }
+
+  .section-divider {
+    @apply relative isolate overflow-hidden py-6;
+  }
+}
+
+@keyframes floating {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -12px, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/* Scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(99, 102, 241, 0.8) rgba(148, 163, 184, 0.16);
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: linear-gradient(
+    180deg,
+    rgba(129, 140, 248, 0.92),
+    rgba(236, 72, 153, 0.85)
+  );
+  border-radius: 9999px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Entrance utilities */
+.fade-up {
+  opacity: 0;
+  transform: translateY(16px);
+  animation: fadeUp 0.8s ease forwards;
+}
+
+.fade-right {
+  opacity: 0;
+  transform: translateX(-16px);
+  animation: fadeRight 0.8s ease forwards;
+}
+
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Animation delay utilities */
+.animate-delay-02s {
+  animation-delay: 0.2s;
+}
+
+.animate-delay-04s {
+  animation-delay: 0.4s;
+}
+
+.animate-delay-06s {
+  animation-delay: 0.6s;
+}
+
+.animate-delay-08s {
+  animation-delay: 0.8s;
+}
+
+.animate-delay-1s {
+  animation-delay: 1s;
+}
+
+.animate-delay-2s {
+  animation-delay: 2s;
+}
+
+.animate-delay-3s {
+  animation-delay: 3s;
+}
+
+.animate-delay-4s {
+  animation-delay: 4s;
+}
+
+/* Feature card animation delays */
+.animate-delay-01s {
+  animation-delay: 0.1s;
+}
+
+.animate-delay-02s {
+  animation-delay: 0.2s;
+}
+
+.animate-delay-03s {
+  animation-delay: 0.3s;
+}
+
+.animate-delay-04s {
+  animation-delay: 0.4s;
+}
+
+.animate-delay-05s {
+  animation-delay: 0.5s;
+}
+
+.animate-delay-06s {
+  animation-delay: 0.6s;
+}
+
+.animate-delay-09s {
+  animation-delay: 0.9s;
+}
+
+.animate-delay-12s {
+  animation-delay: 1.2s;
+}
+
+.animate-delay-15s {
+  animation-delay: 1.5s;
+}
+
+.animate-delay-18s {
+  animation-delay: 1.8s;
+}
+
+.animate-delay-21s {
+  animation-delay: 2.1s;
+}
+
+.animate-delay-24s {
+  animation-delay: 2.4s;
+}
+
+.animate-delay-27s {
+  animation-delay: 2.7s;
+}
+
+.animate-delay-30s {
+  animation-delay: 3.0s;
+}
+
+.animate-duration-15s {
+  animation-duration: 15s;
+}
+
+.animate-duration-20s {
+  animation-duration: 20s;
+}
+
+.animate-reverse {
+  animation-direction: reverse;
+}
+
+/* Text shadow utilities */
+.text-shadow-glow {
+  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(147, 51, 234, 0.3), 0 0 60px rgba(236, 72, 153, 0.2);
+}
+
+/* Navbar link underline + active state */
+.nav-link {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 6px;
+}
+.nav-link::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  height: 3px;
+  width: 0;
+  border-radius: 9999px;
+  background: linear-gradient(90deg, rgba(99,102,241,0.95), rgba(168,85,247,0.9));
+  transition: width 220ms cubic-bezier(.2,.9,.2,1);
+}
+.nav-link:hover::after,
+.nav-link.active::after {
+  width: 48px;
+}
+
+/* Mobile menu slide down */
+.mobile-popover {
+  transform-origin: top center;
+  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
+}
+.mobile-popover.open {
+  transform: translateY(0) scaleY(1);
+  opacity: 1;
+}
+.mobile-popover.closed {
+  transform: translateY(-6px) scaleY(0.98);
+  opacity: 0;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 2674f82..7ca1a77 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,16 +6,69 @@ import { ThemeProvider } from "@/components/theme-provider"
 
 const inter = Inter({ subsets: ["latin"] })
 
+const siteUrl = "https://s3ducky.app"
+const ogImage = "https://s3ducky.app/og-image.png"
+const twitterHandle = "@s3ducky"
+
 export const metadata: Metadata = {
-  title: "S3Ducky - Modern S3 Bucket Viewer for Windows",
+  metadataBase: new URL(siteUrl),
+  title: {
+    default: "S3Ducky — Advanced S3 Bucket Explorer",
+    template: "%s | S3Ducky",
+  },
   description:
-    "A powerful, secure, and user-friendly desktop application for browsing, managing, and downloading files from your AWS S3 buckets.",
-  generator: 'v0.dev',
+    "S3Ducky is a modern, secure desktop experience for exploring, managing, and downloading AWS S3 bucket content with confidence.",
+  keywords: [
+    "S3",
+    "AWS",
+    "object storage",
+    "desktop app",
+    "file manager",
+    "cloud explorer",
+  ],
+  generator: "Cascade",
+  applicationName: "S3Ducky",
+  authors: [{ name: "S3Ducky", url: siteUrl }],
   icons: {
     icon: [
-      { url: '/S3DuckyLogo.ico', type: 'image/x-icon' }
-    ]
-  }
+      { url: "/S3DuckyLogo.ico", type: "image/x-icon" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+    ],
+    apple: { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+  },
+  manifest: "/site.webmanifest",
+  openGraph: {
+    title: "S3Ducky — Advanced S3 Bucket Explorer",
+    description:
+      "Discover a beautifully crafted S3 management experience with secure credential handling, intelligent filtering, and buttery-smooth UX.",
+    url: siteUrl,
+    siteName: "S3Ducky",
+    images: [
+      {
+        url: ogImage,
+        width: 1200,
+        height: 630,
+        alt: "Preview of the S3Ducky desktop application UI",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    creator: twitterHandle,
+    site: twitterHandle,
+    title: "S3Ducky — Advanced S3 Bucket Explorer",
+    description:
+      "A bold reimagining of the S3 browsing experience with a focus on security, clarity, and speed.",
+    images: [ogImage],
+  },
+  themeColor: "#f9fafb",
+  category: "software",
+  alternates: {
+    canonical: siteUrl,
+  },
 }
 
 export default function RootLayout({
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..b8ee0e8
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import Link from "next/link"
+
+export default function NotFound() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-background text-foreground">
+      <div className="max-w-2xl text-center p-8">
+        <h1 className="text-6xl font-bold mb-4">404</h1>
+        <p className="text-lg text-muted-foreground mb-6">We couldn't find the page you're looking for.</p>
+        <Link href="/" className="inline-block px-6 py-3 bg-primary text-primary-foreground rounded-md">Return home</Link>
+      </div>
+    </main>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index cd38654..9a9d3f6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,52 +1,21 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import { Download, Shield, FolderOpen, Filter, MousePointer, Monitor, AlertTriangle, ChevronDown, ExternalLink, Github } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import {
-  Download,
-  Shield,
-  FolderOpen,
-  Filter,
-  MousePointer,
-  Monitor,
-  AlertTriangle,
-  Github,
-  ExternalLink,
-  Moon,
-  Sun,
-  ChevronDown,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import DownloadCards from "@/components/DownloadCards"
 import Header from "@/components/Header"
+import DownloadCards from "@/components/DownloadCards"
 
 export default function S3DuckyLanding() {
-  const { theme, setTheme } = useTheme()
-  const [expandedVersion, setExpandedVersion] = useState<string | null>(null)
   const [mounted, setMounted] = useState(false)
+  const [expandedVersion, setExpandedVersion] = useState<string | null>(null)
 
-  // Ensure component is mounted before rendering theme-dependent content
   useEffect(() => {
     setMounted(true)
-    // Remove preload class after component mounts to enable transitions
-    const timer = setTimeout(() => {
-      document.body.classList.remove("preload")
-    }, 100)
-    return () => clearTimeout(timer)
   }, [])
 
-  // Add preload class to prevent transitions on initial load
-  useEffect(() => {
-    document.body.classList.add("preload")
-  }, [])
-
-  const handleThemeToggle = () => {
-    const newTheme = theme === "dark" ? "light" : "dark"
-    setTheme(newTheme)
-  }
-
   const features = [
     {
       icon: Shield,
@@ -110,88 +79,153 @@ export default function S3DuckyLanding() {
   }
 
   return (
-    <div className="min-h-screen bg-background theme-transition">
-      {/* Header */}
+    <div className="min-h-screen bg-background theme-transition relative overflow-hidden pt-18">
+      {/* Animated Background Elements */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400/20 to-purple-600/20 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute top-1/2 -left-40 w-96 h-96 bg-gradient-to-tr from-pink-400/15 to-cyan-500/15 rounded-full blur-3xl animate-pulse animate-delay-2s"></div>
+        <div className="absolute -bottom-40 right-1/4 w-64 h-64 bg-gradient-to-tl from-yellow-400/10 to-orange-500/10 rounded-full blur-3xl animate-pulse animate-delay-4s"></div>
+      </div>
+
       <Header />
 
       {/* Hero Section */}
-      <section className="py-20 px-4 theme-transition">
-        <div className="container mx-auto text-center max-w-4xl">
-          <div className="mb-8">
+      <section className="relative py-32 px-4 theme-transition">
+        <div className="container mx-auto text-center max-w-5xl relative z-10">
+          {/* Floating Elements */}
+          <div className="absolute top-20 left-10 w-4 h-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-bounce opacity-60 animate-delay-1s"></div>
+          <div className="absolute top-32 right-16 w-3 h-3 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full animate-bounce opacity-50 animate-delay-3s"></div>
+          <div className="absolute bottom-20 left-20 w-2 h-2 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full animate-bounce opacity-40 animate-delay-2s"></div>
+
+          <div className="mb-12 relative">
+            {/* Animated Ring */}
+            <div className="absolute inset-0 rounded-full border-2 border-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 animate-spin animate-duration-20s"></div>
+            <div className="absolute inset-4 rounded-full border border-gradient-to-r from-cyan-500/15 via-blue-500/15 to-purple-500/15 animate-spin animate-duration-15s animate-reverse"></div>
+            <div className="absolute inset-6 rounded-full border border-gradient-to-r from-pink-500/10 via-purple-500/10 to-cyan-500/10 animate-spin animate-duration-20s"></div>
           </div>
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent gradient-transition">
-            S3Ducky
+
+          <h1 className="text-6xl md:text-8xl font-bold mb-8 gradient-transition animate-fade-up relative drop-shadow-2xl text-shadow-glow">
+            <span className="relative inline-block bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent dark:from-blue-400 dark:via-purple-400 dark:to-pink-400">
+              S3Ducky
+              {/* Enhanced Glow Effect */}
+              <div className="absolute inset-0 bg-gradient-to-r from-blue-600/30 via-purple-600/30 to-pink-600/30 dark:from-blue-400/40 dark:via-purple-400/40 dark:to-pink-400/40 blur-2xl -z-10 animate-pulse"></div>
+              <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-pink-400/20 dark:from-blue-300/30 dark:via-purple-300/30 dark:to-pink-300/30 blur-xl -z-10 animate-pulse animate-delay-1s"></div>
+              {/* Light mode text shadow for better visibility */}
+              <div className="absolute inset-0 text-black dark:text-transparent text-6xl md:text-8xl font-bold -z-5 drop-shadow-lg dark:drop-shadow-none">
+                S3Ducky
+              </div>
+            </span>
           </h1>
-          <p className="text-xl md:text-2xl text-muted-foreground mb-8 theme-transition">
+
+          <p className="text-2xl md:text-3xl text-muted-foreground mb-10 theme-transition animate-fade-up animate-delay-02s">
             Modern S3 Bucket Viewer for Windows
           </p>
-          <p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto theme-transition">
+
+          <p className="text-xl text-muted-foreground mb-16 max-w-3xl mx-auto theme-transition animate-fade-up leading-relaxed animate-delay-04s">
             A powerful, secure, and user-friendly desktop application for browsing, managing, and downloading files from
-            your AWS S3 buckets.
+            your AWS S3 buckets with stunning visual design.
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+
+          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center animate-fade-up animate-delay-06s">
             <Button
               size="lg"
-              className="text-lg px-8 py-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 gradient-transition"
+              className="group text-xl px-10 py-8 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 hover:from-blue-700 hover:via-purple-700 hover:to-pink-700 gradient-transition shadow-2xl hover:shadow-blue-500/25 transform hover:scale-105 transition-all duration-300 relative overflow-hidden"
               asChild
             >
-              <a href="#download" className="flex items-center">
-                <Download className="w-5 h-5 mr-2" />
+              <a href="#download" className="flex items-center relative z-10">
+                <Download className="w-6 h-6 mr-3 group-hover:animate-bounce" />
                 Download S3Ducky v1.0.0
+                {/* Button Glow */}
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-pink-600/20 blur-xl group-hover:blur-2xl transition-all duration-300"></div>
               </a>
             </Button>
-            <Button variant="outline" size="lg" className="text-lg px-8 py-6 bg-transparent theme-transition" asChild>
-              <a href="#demo" className="flex items-center">
+
+            <Button
+              variant="outline"
+              size="lg"
+              className="group text-xl px-10 py-8 border-2 border-gradient-to-r from-blue-500/50 via-purple-500/50 to-pink-500/50 bg-transparent/50 backdrop-blur-sm hover:bg-gradient-to-r hover:from-blue-500/10 hover:via-purple-500/10 hover:to-pink-500/10 theme-transition shadow-xl hover:shadow-purple-500/20 transform hover:scale-105 transition-all duration-300"
+              asChild
+            >
+              <a href="#demo" className="flex items-center relative z-10">
                 View Screenshots
+                <div className="ml-3 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full group-hover:animate-ping"></div>
               </a>
             </Button>
           </div>
-          <div className="mt-8 flex justify-center items-center space-x-4 text-sm text-muted-foreground">
+
+          <div className="mt-16 flex justify-center items-center space-x-6 text-sm animate-fade-up animate-delay-08s">
             <Badge
               variant="secondary"
-              className="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 theme-transition"
+              className="group bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/50 dark:to-blue-800/50 text-blue-800 dark:text-blue-200 theme-transition shadow-lg hover:shadow-blue-500/20 transform hover:scale-110 transition-all duration-300 px-4 py-2"
             >
-              Windows 10+
+              <div className="flex items-center">
+                Windows 10+
+                <div className="ml-2 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+              </div>
             </Badge>
             <Badge
               variant="secondary"
-              className="bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 theme-transition"
+              className="group bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900/50 dark:to-green-800/50 text-green-800 dark:text-green-200 theme-transition shadow-lg hover:shadow-green-500/20 transform hover:scale-110 transition-all duration-300 px-4 py-2"
             >
-              Free & Open Source
+              <div className="flex items-center">
+                Free & Open Source
+                <div className="ml-2 w-2 h-2 bg-blue-500 rounded-full animate-pulse animate-delay-1s"></div>
+              </div>
             </Badge>
             <Badge
               variant="secondary"
-              className="bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200 theme-transition"
+              className="group bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900/50 dark:to-purple-800/50 text-purple-800 dark:text-purple-200 theme-transition shadow-lg hover:shadow-purple-500/20 transform hover:scale-110 transition-all duration-300 px-4 py-2"
             >
-              MIT License
+              <div className="flex items-center">
+                MIT License
+                <div className="ml-2 w-2 h-2 bg-pink-500 rounded-full animate-pulse animate-delay-2s"></div>
+              </div>
             </Badge>
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="py-20 px-4 bg-muted/30 theme-transition">
-        <div className="container mx-auto max-w-6xl">
+  {/* Features Section */}
+  <section id="features" className="py-20 px-4 bg-muted/30 theme-transition relative overflow-hidden">
+        {/* Section Background Effects */}
+        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5"></div>
+        <div className="absolute top-10 left-10 w-20 h-20 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-xl animate-pulse"></div>
+        <div className="absolute bottom-10 right-10 w-16 h-16 bg-gradient-to-tl from-purple-500/10 to-pink-500/10 rounded-full blur-xl animate-pulse animate-delay-2s"></div>
+
+        <div className="container mx-auto max-w-6xl relative z-10">
           <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition">Powerful Features</h2>
-            <p className="text-lg text-muted-foreground max-w-2xl mx-auto theme-transition">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent animate-fade-up">Powerful Features</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto theme-transition animate-fade-up animate-delay-02s">
               Everything you need to manage your S3 buckets efficiently and securely
             </p>
+            {/* Decorative Line */}
+            <div className="mt-6 flex justify-center">
+              <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full animate-fade-up animate-delay-04s"></div>
+            </div>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {features.map((feature, index) => (
               <Card
                 key={index}
-                className="border-0 shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105 theme-transition"
+                className="border-0 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 theme-transition group relative overflow-hidden animate-fade-up"
               >
-                <CardContent className="p-6">
+                {/* Card Background Glow */}
+                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                
+                {/* Floating Particles */}
+                <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-0 group-hover:opacity-60 animate-bounce transition-opacity duration-500"></div>
+                <div className="absolute bottom-4 left-4 w-1 h-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full opacity-0 group-hover:opacity-40 animate-bounce transition-opacity duration-500"></div>
+
+                <CardContent className="p-6 relative z-10">
                   <div className="flex items-center mb-4">
-                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-4 shadow-lg gradient-transition">
-                      <feature.icon className="w-6 h-6 text-white" />
+                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-4 shadow-lg gradient-transition group-hover:shadow-blue-500/25 group-hover:scale-110 transition-all duration-300 relative overflow-hidden">
+                      <feature.icon className="w-6 h-6 text-white group-hover:animate-pulse transition-all duration-300" />
+                      {/* Icon Glow */}
+                      <div className="absolute inset-0 bg-gradient-to-br from-blue-400/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     </div>
-                    <h3 className="text-xl font-semibold theme-transition">{feature.title}</h3>
+                    <h3 className="text-xl font-semibold theme-transition group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">{feature.title}</h3>
                   </div>
-                  <p className="text-muted-foreground theme-transition">{feature.description}</p>
+                  <p className="text-muted-foreground theme-transition group-hover:text-foreground/80 transition-colors duration-300">{feature.description}</p>
                 </CardContent>
               </Card>
             ))}
@@ -199,87 +233,176 @@ export default function S3DuckyLanding() {
         </div>
       </section>
 
-      {/* Screenshots Section */}
-      <section id="demo" className="py-20 px-4 theme-transition">
-        <div className="container mx-auto max-w-6xl">
+  {/* Screenshots / Action Section */}
+  <section id="action" className="py-20 px-4 theme-transition relative overflow-hidden">
+        {/* Section Background Effects */}
+        <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 via-transparent to-blue-500/5"></div>
+        <div className="absolute top-20 right-20 w-24 h-24 bg-gradient-to-br from-green-500/10 to-blue-500/10 rounded-full blur-xl animate-pulse"></div>
+        <div className="absolute bottom-20 left-20 w-18 h-18 bg-gradient-to-tl from-blue-500/10 to-purple-500/10 rounded-full blur-xl animate-pulse animate-delay-3s"></div>
+
+        <div className="container mx-auto max-w-6xl relative z-10">
           <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition">See S3Ducky in Action</h2>
-            <p className="text-lg text-muted-foreground theme-transition">
-              Clean, intuitive interface designed for productivity
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition bg-gradient-to-r from-green-600 via-blue-600 to-purple-600 bg-clip-text text-transparent animate-fade-up">See S3Ducky in Action</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto theme-transition animate-fade-up animate-delay-02s">
+              Explore the intuitive interface and powerful features through these screenshots
             </p>
+            {/* Decorative Line */}
+            <div className="mt-6 flex justify-center">
+              <div className="w-24 h-1 bg-gradient-to-r from-green-500 via-blue-500 to-purple-500 rounded-full animate-fade-up animate-delay-04s"></div>
+            </div>
           </div>
-          <div className="grid md:grid-cols-2 gap-8">
-            <Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 theme-transition">
-              <CardContent className="p-0">
-                <div className="w-full h-64 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/30 dark:to-purple-900/30 flex items-center justify-center gradient-transition">
-                  <div className="text-center">
-                    <Shield className="w-16 h-16 mx-auto mb-4 text-blue-600 dark:text-blue-400 theme-transition" />
-                    <p className="text-muted-foreground theme-transition">Credential Input Screenshot</p>
-                  </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <Card className="overflow-hidden border-0 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 theme-transition group relative animate-fade-up animate-delay-01s">
+              {/* Card Background Glow */}
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+              
+              {/* Floating Particles */}
+              <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-0 group-hover:opacity-60 animate-bounce transition-opacity duration-500 animate-delay-02s"></div>
+              <div className="absolute bottom-4 left-4 w-1 h-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full opacity-0 group-hover:opacity-40 animate-bounce transition-opacity duration-500 animate-delay-03s"></div>
+
+              <div className="aspect-video bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 flex items-center justify-center relative overflow-hidden group-hover:from-blue-200 group-hover:to-purple-200 dark:group-hover:from-blue-800/30 dark:group-hover:to-purple-800/30 transition-all duration-500">
+                {/* Animated Background Pattern */}
+                <div className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity duration-500">
+                  <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-transparent animate-pulse"></div>
+                  <div className="absolute inset-0 bg-gradient-to-tl from-purple-500/20 to-transparent animate-pulse animate-delay-1s"></div>
                 </div>
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold mb-2 theme-transition">Secure Credential Input</h3>
-                  <p className="text-muted-foreground theme-transition">
-                    Simple and secure AWS credential management with encrypted local storage
-                  </p>
+                <div className="text-center relative z-10">
+                  <Monitor className="w-16 h-16 mx-auto mb-4 text-blue-600 dark:text-blue-400 group-hover:scale-110 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-all duration-300" />
+                  <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">Main Interface</p>
                 </div>
+              </div>
+              <CardContent className="p-4 relative z-10">
+                <h3 className="font-semibold mb-2 theme-transition group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">Clean Modern Interface</h3>
+                <p className="text-sm text-muted-foreground theme-transition group-hover:text-foreground/80 transition-colors duration-300">
+                  Intuitive design with easy navigation and clear visual hierarchy
+                </p>
               </CardContent>
             </Card>
-            <Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 theme-transition">
-              <CardContent className="p-0">
-                <div className="w-full h-64 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/30 dark:to-blue-900/30 flex items-center justify-center gradient-transition">
-                  <div className="text-center">
-                    <FolderOpen className="w-16 h-16 mx-auto mb-4 text-green-600 dark:text-green-400 theme-transition" />
-                    <p className="text-muted-foreground theme-transition">File Browser Screenshot</p>
-                  </div>
+
+            <Card className="overflow-hidden border-0 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 theme-transition group relative animate-fade-up animate-delay-02s">
+              {/* Card Background Glow */}
+              <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 via-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+              
+              {/* Floating Particles */}
+              <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-green-500 to-blue-500 rounded-full opacity-0 group-hover:opacity-60 animate-bounce transition-opacity duration-500 animate-delay-04s"></div>
+              <div className="absolute bottom-4 left-4 w-1 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-0 group-hover:opacity-40 animate-bounce transition-opacity duration-500 animate-delay-06s"></div>
+
+              <div className="aspect-video bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/20 dark:to-blue-900/20 flex items-center justify-center relative overflow-hidden group-hover:from-green-200 group-hover:to-blue-200 dark:group-hover:from-green-800/30 dark:group-hover:to-blue-800/30 transition-all duration-500">
+                {/* Animated Background Pattern */}
+                <div className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity duration-500">
+                  <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-transparent animate-pulse"></div>
+                  <div className="absolute inset-0 bg-gradient-to-tl from-blue-500/20 to-transparent animate-pulse animate-delay-1s"></div>
                 </div>
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold mb-2 theme-transition">Intuitive File Browser</h3>
-                  <p className="text-muted-foreground theme-transition">
-                    Browse your S3 buckets with full metadata, filtering, and multi-selection support
-                  </p>
+                <div className="text-center relative z-10">
+                  <FolderOpen className="w-16 h-16 mx-auto mb-4 text-green-600 dark:text-green-400 group-hover:scale-110 group-hover:text-green-700 dark:group-hover:text-green-300 transition-all duration-300" />
+                  <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">File Browser</p>
                 </div>
+              </div>
+              <CardContent className="p-4 relative z-10">
+                <h3 className="font-semibold mb-2 theme-transition group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors duration-300">S3 Bucket Explorer</h3>
+                <p className="text-sm text-muted-foreground theme-transition group-hover:text-foreground/80 transition-colors duration-300">
+                  Browse files and folders with full metadata display and navigation
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="overflow-hidden border-0 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105 theme-transition group relative animate-fade-up animate-delay-03s">
+              {/* Card Background Glow */}
+              <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-pink-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+              
+              {/* Floating Particles */}
+              <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full opacity-0 group-hover:opacity-60 animate-bounce transition-opacity duration-500 animate-delay-06s"></div>
+              <div className="absolute bottom-4 left-4 w-1 h-1 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full opacity-0 group-hover:opacity-40 animate-bounce transition-opacity duration-500 animate-delay-09s"></div>
+
+              <div className="aspect-video bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 flex items-center justify-center relative overflow-hidden group-hover:from-purple-200 group-hover:to-pink-200 dark:group-hover:from-purple-800/30 dark:group-hover:to-pink-800/30 transition-all duration-500">
+                {/* Animated Background Pattern */}
+                <div className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity duration-500">
+                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-transparent animate-pulse"></div>
+                  <div className="absolute inset-0 bg-gradient-to-tl from-pink-500/20 to-transparent animate-pulse animate-delay-1s"></div>
+                </div>
+                <div className="text-center relative z-10">
+                  <MousePointer className="w-16 h-16 mx-auto mb-4 text-purple-600 dark:text-purple-400 group-hover:scale-110 group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-all duration-300" />
+                  <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">Multi-Selection</p>
+                </div>
+              </div>
+              <CardContent className="p-4 relative z-10">
+                <h3 className="font-semibold mb-2 theme-transition group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">Batch Operations</h3>
+                <p className="text-sm text-muted-foreground theme-transition group-hover:text-foreground/80 transition-colors duration-300">
+                  Select multiple files for batch downloads and ZIP creation
+                </p>
               </CardContent>
             </Card>
           </div>
         </div>
       </section>
 
-      {/* Version Info Section */}
-      <section className="py-20 px-4 bg-muted/30 theme-transition">
-        <div className="container mx-auto max-w-4xl">
+  {/* Version Info Section */}
+  <section id="versions" className="py-20 px-4 bg-muted/30 theme-transition relative overflow-hidden">
+        {/* Section Background Effects */}
+        <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-pink-500/5"></div>
+        <div className="absolute top-16 left-16 w-22 h-22 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-full blur-xl animate-pulse"></div>
+        <div className="absolute bottom-16 right-16 w-20 h-20 bg-gradient-to-tl from-pink-500/10 to-cyan-500/10 rounded-full blur-xl animate-pulse animate-delay-4s"></div>
+
+        <div className="container mx-auto max-w-4xl relative z-10">
           <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition">Release History</h2>
-            <p className="text-lg text-muted-foreground theme-transition">Track the evolution of S3Ducky</p>
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 bg-clip-text text-transparent animate-fade-up">Version History</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto theme-transition animate-fade-up animate-delay-02s">
+              Stay updated with the latest features and improvements
+            </p>
+            {/* Decorative Line */}
+            <div className="mt-6 flex justify-center">
+              <div className="w-24 h-1 bg-gradient-to-r from-purple-500 via-pink-500 to-cyan-500 rounded-full animate-fade-up animate-delay-04s"></div>
+            </div>
           </div>
           <div className="space-y-4">
             {versions.map((version, index) => (
-              <Card key={index} className="hover:shadow-lg transition-shadow duration-300 theme-transition">
-                <CardContent className="p-6">
+              <Card
+                key={index}
+                className="border-0 shadow-lg hover:shadow-2xl transition-all duration-500 theme-transition group relative overflow-hidden animate-fade-up"
+              >
+                {/* Card Background Glow */}
+                <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-pink-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                
+                {/* Floating Particles */}
+                <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full opacity-0 group-hover:opacity-60 animate-bounce transition-opacity duration-500 animate-delay-1s"></div>
+                <div className="absolute bottom-4 left-4 w-1 h-1 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-full opacity-0 group-hover:opacity-40 animate-bounce transition-opacity duration-500 animate-delay-2s"></div>
+
+                <CardContent className="p-6 relative z-10">
                   <div
-                    className="flex items-center justify-between cursor-pointer"
+                    className="flex items-center justify-between cursor-pointer group/header"
                     onClick={() => setExpandedVersion(expandedVersion === version.version ? null : version.version)}
                   >
                     <div className="flex items-center space-x-4">
-                      <Badge
-                        variant={index === 0 ? "default" : "secondary"}
-                        className={`${index === 0 ? "bg-gradient-to-r from-blue-600 to-purple-600 gradient-transition" : "theme-transition"}`}
-                      >
-                        {version.version}
-                      </Badge>
-                      <span className="text-sm text-muted-foreground theme-transition">{version.date}</span>
+                      <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center shadow-lg gradient-transition group-hover/header:shadow-purple-500/25 group-hover/header:scale-110 transition-all duration-300 relative overflow-hidden">
+                        <Badge className="bg-white text-purple-600 hover:bg-white group-hover/header:animate-pulse transition-all duration-300">{version.version}</Badge>
+                        {/* Icon Glow */}
+                        <div className="absolute inset-0 bg-gradient-to-br from-purple-400/20 to-pink-600/20 opacity-0 group-hover/header:opacity-100 transition-opacity duration-300"></div>
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-semibold theme-transition group-hover/header:text-purple-600 dark:group-hover/header:text-purple-400 transition-colors duration-300">Version {version.version}</h3>
+                        <p className="text-sm text-muted-foreground theme-transition">Released on {version.date}</p>
+                      </div>
                     </div>
                     <ChevronDown
-                      className={`w-4 h-4 transition-transform duration-300 theme-transition ${expandedVersion === version.version ? "rotate-180" : ""}`}
+                      className={`w-5 h-5 transition-all duration-300 group-hover/header:text-purple-600 ${
+                        expandedVersion === version.version ? 'rotate-180 text-purple-600' : 'group-hover/header:rotate-12'
+                      }`}
                     />
                   </div>
                   {expandedVersion === version.version && (
-                    <div className="mt-4 pt-4 border-t theme-transition">
+                    <div className="mt-6 pt-6 border-t border-border/50 animate-fade-in">
+                      <h4 className="font-semibold mb-3 theme-transition text-purple-600 dark:text-purple-400">What's New:</h4>
                       <ul className="space-y-2">
                         {version.changes.map((change, changeIndex) => (
-                          <li key={changeIndex} className="flex items-start">
-                            <span className="w-2 h-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full mt-2 mr-3 flex-shrink-0 gradient-transition"></span>
-                            <span className="text-sm text-muted-foreground theme-transition">{change}</span>
+                          <li key={changeIndex} className={`flex items-start animate-fade-up ${
+                            changeIndex === 0 ? 'animate-delay-01s' :
+                            changeIndex === 1 ? 'animate-delay-02s' :
+                            changeIndex === 2 ? 'animate-delay-03s' :
+                            changeIndex === 3 ? 'animate-delay-04s' :
+                            'animate-delay-05s'
+                          }`}>
+                            <div className="w-2 h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mt-2 mr-3 flex-shrink-0 animate-pulse"></div>
+                            <p className="text-muted-foreground theme-transition hover:text-foreground/80 transition-colors duration-300">{change}</p>
                           </li>
                         ))}
                       </ul>
@@ -289,133 +412,78 @@ export default function S3DuckyLanding() {
               </Card>
             ))}
           </div>
-          <div className="text-center mt-8">
-            <Button
-              variant="outline"
-              asChild
-              className="hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 hover:text-white transition-all duration-300 bg-transparent theme-transition"
-            >
-              <a href="https://github.com/S3Ducky/frontend/releases" target="_blank" rel="noopener noreferrer">
-                <ExternalLink className="w-4 h-4 mr-2" />
-                View All Releases
-              </a>
-            </Button>
-          </div>
         </div>
       </section>
 
-      {/* Download Section */}
-      <DownloadCards />
+      {/* Get Started / Download Section */}
+      <section id="get-started" className="py-20 px-4 theme-transition">
+        <div className="container mx-auto max-w-4xl text-center mb-8">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 theme-transition bg-gradient-to-r from-pink-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">Ready to Get Started?</h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">Download S3Ducky and start browsing your S3 buckets securely.</p>
+        </div>
+        <DownloadCards />
+      </section>
 
       {/* Footer */}
-      <footer className="border-t bg-muted/30 py-12 px-4 theme-transition">
+      <footer className="py-12 px-4 bg-muted/50 theme-transition border-t">
         <div className="container mx-auto max-w-6xl">
-          <div className="grid md:grid-cols-4 gap-8">
-            <div>
-              <div className="flex items-center space-x-2 mb-4">
-                <div className="w-6 h-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded flex items-center justify-center gradient-transition">
-                  <span className="text-white font-bold text-xs">S3</span>
-                </div>
-                <span className="font-bold theme-transition">S3Ducky</span>
-              </div>
-            </div>
+          <div className="grid md:grid-cols-3 gap-8 mb-8">
             <div>
-              <h4 className="font-semibold mb-4 theme-transition">Resources</h4>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Documentation
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    API Reference
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Tutorials
-                  </a>
-                </li>
-              </ul>
+              <h3 className="text-lg font-semibold mb-4 theme-transition">S3Ducky</h3>
+              <p className="text-sm text-muted-foreground theme-transition">
+                Modern S3 Bucket Viewer for Windows. Secure, fast, and user-friendly.
+              </p>
             </div>
             <div>
-              <h4 className="font-semibold mb-4 theme-transition">Community</h4>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    GitHub Issues
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Discussions
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Contributing
-                  </a>
-                </li>
-              </ul>
+              <h4 className="font-semibold mb-4 theme-transition">Links</h4>
+              <div className="space-y-2">
+                <a href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors theme-transition">
+                  Features
+                </a>
+                <a href="#demo" className="block text-sm text-muted-foreground hover:text-foreground transition-colors theme-transition">
+                  Screenshots
+                </a>
+                <a href="#download" className="block text-sm text-muted-foreground hover:text-foreground transition-colors theme-transition">
+                  Download
+                </a>
+              </div>
             </div>
             <div>
-              <h4 className="font-semibold mb-4 theme-transition">Legal</h4>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    MIT License
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Privacy Policy
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-                  >
-                    Terms of Use
-                  </a>
-                </li>
-              </ul>
+              <h4 className="font-semibold mb-4 theme-transition">Connect</h4>
+              <div className="flex space-x-4">
+                <a
+                  href="https://github.com/s3ducky"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
+                  title="View on GitHub"
+                >
+                  <Github className="w-5 h-5" />
+                </a>
+                <a
+                  href="#"
+                  className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
+                  title="External link"
+                >
+                  <ExternalLink className="w-5 h-5" />
+                </a>
+              </div>
             </div>
           </div>
-          <div className="border-t mt-8 pt-8 flex flex-col md:flex-row justify-between items-center theme-transition">
-            <p className="text-sm text-muted-foreground theme-transition">© 2025 S3Ducky — Version 1.1.1</p>
-            <div className="flex items-center space-x-4 mt-4 md:mt-0">
-              <a
-                href="https://github.com/s3ducky"
-                className="text-muted-foreground hover:text-foreground transition-colors theme-transition"
-              >
-                <Github className="w-5 h-5" />
-              </a>
+          <div className="pt-8 border-t border-border/50">
+            <div className="flex flex-col md:flex-row justify-between items-center">
+              <p className="text-sm text-muted-foreground theme-transition">
+                © 2025 S3Ducky.
+              </p>
+              <div className="flex items-center space-x-4 mt-4 md:mt-0">
+                <Badge
+                  variant="outline"
+                  className="bg-background/50 theme-transition"
+                >
+                  v1.0.0
+                </Badge>
+                
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/DownloadCards.tsx b/components/DownloadCards.tsx
index f48a08f..fadb49d 100644
--- a/components/DownloadCards.tsx
+++ b/components/DownloadCards.tsx
@@ -91,7 +91,7 @@ function DownloadCard({
               })}
               asChild
             >
-              <a href={dl.href}>
+              <a href={dl.href} target="_blank" rel="noopener noreferrer">
                 <Download className="w-5 h-5 mr-2" />
                 {dl.label}
               </a>
@@ -175,18 +175,10 @@ export default function DownloadCards() {
   const cards = getCards(theme, RELEASE_VERSION, BASE_URL);
 
   return (
-    <section id="download" className="py-20 px-4 theme-transition">
-      <div className="container mx-auto max-w-6xl">
-        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-center theme-transition">Ready to Get Started?</h2>
-        <p className="text-lg text-muted-foreground mb-8 text-center theme-transition">
-          Download S3Ducky now and start managing your S3 buckets with ease
-        </p>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {cards.map((card, idx) => (
-            <DownloadCard key={card.name} {...card} theme={theme} />
-          ))}
-        </div>
-      </div>
-    </section>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+      {cards.map((card, _idx) => (
+        <DownloadCard key={card.name} {...card} theme={theme} />
+      ))}
+    </div>
   )
 } 
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index fdd2b94..34d7af6 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,58 +1,263 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "@/components/ui/button"
-import { Github, Sun, Moon } from "lucide-react"
+import { Github, Menu, Sun, Moon } from "lucide-react"
 import { useTheme } from "next-themes"
 import Image from "next/image"
 
 export default function Header() {
   const { theme, setTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [active, setActive] = useState<string>("features")
+  const menuButtonRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     setMounted(true)
   }, [])
 
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setMenuOpen(false)
+    }
+    if (menuOpen) document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [menuOpen])
+
   const handleThemeToggle = () => {
-    const currentTheme = theme ?? "dark"
-    const newTheme = currentTheme === "dark" ? "light" : "dark"
-    setTheme(newTheme)
+    const current = theme ?? "dark"
+    setTheme(current === "dark" ? "light" : "dark")
+  }
+
+  const scrollTo = (id: string) => {
+    const el = document.getElementById(id)
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" })
+      // update hash without jumping
+      history.replaceState(null, "", `#${id}`)
+    } else {
+      // fallback: navigate using location (works if on another route)
+      window.location.hash = id
+    }
+  }
+
+  const handleNavClick = (e: React.MouseEvent, id: string) => {
+    e.preventDefault()
+    setActive(id)
+    scrollTo(id)
   }
 
+  // Update active nav item based on scroll position
+  useEffect(() => {
+    const ids = ["features", "action", "versions", "get-started"]
+
+    // Helper to observe sections and pick the most visible
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Choose the entry with largest intersectionRatio that is intersecting
+        let best: IntersectionObserverEntry | null = null
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && (!best || entry.intersectionRatio > best.intersectionRatio)) {
+            best = entry
+          }
+        })
+
+        if (best) {
+          const target = best.target as HTMLElement
+          if (target && target.id) {
+            const { id } = target
+            // Keep in sync with current active state
+            setActive((prev) => (prev === id ? prev : id))
+            try {
+              history.replaceState(null, "", `#${id}`)
+            } catch (e) {
+              // ignore history errors in some platforms
+            }
+          }
+        }
+      },
+      {
+        // rootMargin nudges the trigger so the section becomes active when
+        // it reaches roughly the top third of the viewport.
+        root: null,
+        rootMargin: "0px 0px -60% 0px",
+        threshold: [0.25, 0.5, 0.75],
+      }
+    )
+
+    ids.forEach((id) => {
+      const el = document.getElementById(id)
+      if (el) observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
   if (!mounted) return null
 
   return (
-    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 theme-transition">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <div className="flex items-center space-x-2">
-          <div className="w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden">
-            <Image src="/S3DuckyLogo.png" alt="S3Ducky Logo" width={28} height={28} className="object-contain" />
+    <header className="fixed top-6 left-0 right-0 z-50 pointer-events-none">
+      <div className="container mx-auto px-4 relative z-20 pointer-events-auto">
+        {/* Centered pill navbar */}
+        <nav className="relative mx-auto max-w-4xl bg-background/80 dark:bg-[#0b1020]/85 border border-border/40 rounded-full px-4 py-2 flex items-center justify-between shadow-2xl shadow-black/10 backdrop-blur-md">
+          {/* Left - logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-white dark:bg-[#07070b] flex items-center justify-center shadow-md ring-1 ring-border/30">
+              <Image src="/S3DuckyLogo.png" alt="S3Ducky" width={24} height={24} className="object-contain" />
+            </div>
+          </div>
+
+          {/* Center - links */}
+          <ul className="hidden md:flex items-center gap-8 px-4">
+            <li>
+              <a
+                href="#features"
+                onClick={(e) => handleNavClick(e, "features")}
+                className={`nav-link text-sm ${active === "features" ? "active text-foreground font-semibold" : "text-muted-foreground"} hover:text-foreground transition-colors duration-200`}
+              >
+                Features
+              </a>
+            </li>
+            <li>
+              <a
+                href="#action"
+                onClick={(e) => handleNavClick(e, "action")}
+                className={`nav-link text-sm ${active === "action" ? "active text-foreground font-semibold" : "text-muted-foreground"} hover:text-foreground transition-colors duration-200`}
+              >
+                Action
+              </a>
+            </li>
+            <li>
+              <a
+                href="#versions"
+                onClick={(e) => handleNavClick(e, "versions")}
+                className={`nav-link text-sm ${active === "versions" ? "active text-foreground font-semibold" : "text-muted-foreground"} hover:text-foreground transition-colors duration-200`}
+              >
+                Version
+              </a>
+            </li>
+            <li>
+              <a
+                href="#get-started"
+                onClick={(e) => handleNavClick(e, "get-started")}
+                className={`nav-link text-sm ${active === "get-started" ? "active text-foreground font-semibold" : "text-muted-foreground"} hover:text-foreground transition-colors duration-200`}
+              >
+                Get Started
+              </a>
+            </li>
+          </ul>
+
+          {/* Right - email chip + small actions */}
+          <div className="flex items-center gap-3">
+            <Button variant="outline" asChild className="theme-transition bg-transparent border-2 border-gradient-to-r from-blue-500/50 via-purple-500/50 to-pink-500/50 hover:border-blue-500/70 hover:shadow-lg hover:shadow-blue-500/25 group relative overflow-hidden">
+              <a href="https://github.com/s3ducky" target="_blank" rel="noopener noreferrer" className="flex items-center relative z-10 px-3 py-2 rounded-full">
+                <Github className="w-4 h-4 mr-2 group-hover:animate-pulse transition-all duration-300" />
+                <span className="text-sm">GitHub</span>
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></div>
+              </a>
+            </Button>
+
+            {/* Theme toggle (desktop) */}
+            <button
+              aria-label="Toggle theme"
+              onClick={handleThemeToggle}
+              className="hidden md:inline-flex p-2 rounded-full hover:bg-background/60 dark:hover:bg-white/5 transition-colors"
+            >
+              {theme === "dark" ? <Sun className="w-5 h-5 text-muted-foreground" /> : <Moon className="w-5 h-5 text-muted-foreground" />}
+            </button>
+
+            {/* Mobile menu button */}
+            <button
+              ref={menuButtonRef}
+              aria-label="Open menu"
+              aria-controls="mobile-menu"
+              onClick={() => setMenuOpen((s) => !s)}
+              className="md:hidden p-2 rounded-full hover:bg-background/60 dark:hover:bg-white/5 transition-colors"
+            >
+              <Menu className="w-5 h-5 text-muted-foreground" />
+            </button>
           </div>
-          <span className="text-xl font-bold theme-transition">S3Ducky</span>
-        </div>
-        <div className="flex items-center space-x-4">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={handleThemeToggle}
-            aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
-            className="relative theme-transition"
+
+          {/* Mobile popover */}
+          <div
+            id="mobile-menu"
+            ref={menuRef}
+            className={`absolute left-1/2 -translate-x-1/2 top-full mt-3 w-11/12 bg-background/95 dark:bg-[#071025]/95 border border-border/40 rounded-xl p-3 shadow-lg mobile-popover ${menuOpen ? "open" : "closed"} md:hidden`}
           >
-            {theme === "dark" ? (
-              <Sun className="h-4 w-4 transition-all duration-300" />
-            ) : (
-              <Moon className="h-4 w-4 transition-all duration-300" />
-            )}
-            <span className="sr-only">Toggle theme</span>
-          </Button>
-          <Button variant="outline" asChild className="theme-transition bg-transparent">
-            <a href="https://github.com/s3ducky" target="_blank" rel="noopener noreferrer">
-              <Github className="w-4 h-4 mr-2" />
-              GitHub
-            </a>
-          </Button>
-        </div>
+            <ul role="menu" aria-orientation="vertical" className="flex flex-col gap-2">
+              <li role="none">
+                <a
+                  href="#features"
+                  role="menuitem"
+                  tabIndex={menuOpen ? 0 : -1}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setActive("features")
+                    setMenuOpen(false)
+                    scrollTo("features")
+                    menuButtonRef.current?.focus()
+                  }}
+                  className="block px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-background/50 hover:text-foreground transition-colors"
+                >
+                  Features
+                </a>
+              </li>
+              <li role="none">
+                <a
+                  href="#action"
+                  role="menuitem"
+                  tabIndex={menuOpen ? 0 : -1}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setActive("action")
+                    setMenuOpen(false)
+                    scrollTo("action")
+                    menuButtonRef.current?.focus()
+                  }}
+                  className="block px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-background/50 hover:text-foreground transition-colors"
+                >
+                  Action
+                </a>
+              </li>
+              <li role="none">
+                <a
+                  href="#versions"
+                  role="menuitem"
+                  tabIndex={menuOpen ? 0 : -1}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setActive("versions")
+                    setMenuOpen(false)
+                    scrollTo("versions")
+                    menuButtonRef.current?.focus()
+                  }}
+                  className="block px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-background/50 hover:text-foreground transition-colors"
+                >
+                  Version
+                </a>
+              </li>
+              <li role="none">
+                <a
+                  href="#get-started"
+                  role="menuitem"
+                  tabIndex={menuOpen ? 0 : -1}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setActive("get-started")
+                    setMenuOpen(false)
+                    scrollTo("get-started")
+                    menuButtonRef.current?.focus()
+                  }}
+                  className="block px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-background/50 hover:text-foreground transition-colors"
+                >
+                  Get Started
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
       </div>
     </header>
   )
diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx
new file mode 100644
index 0000000..1536518
--- /dev/null
+++ b/components/ScrollToTop.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ChevronUp } from "lucide-react"
+
+export default function ScrollToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 300)
+    window.addEventListener("scroll", onScroll, { passive: true })
+    onScroll()
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <button
+      aria-label="Scroll to top"
+      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+      className="fixed right-6 bottom-6 z-50 inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-foreground shadow-lg hover:scale-105 transform transition"
+    >
+      <ChevronUp className="w-5 h-5" />
+    </button>
+  )
+}
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index 61d2b45..0655517 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+// Navigation icons removed due to updated react-day-picker component typings.
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
@@ -53,10 +53,9 @@ function Calendar({
         day_hidden: "invisible",
         ...classNames,
       }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
+      // Use DayPicker's default navigation icons to avoid strict component typing
+      // differences between versions. Custom icons can be re-added with proper
+      // typings if needed.
       {...props}
     />
   )
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
index 02e111d..c7ca8c3 100644
--- a/components/ui/use-toast.ts
+++ b/components/ui/use-toast.ts
@@ -18,7 +18,10 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
-const actionTypes = {
+// The following constant is used for type inference only. Disable the unused-var
+// lint check because the runtime value is intentionally unused.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const _actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
@@ -32,7 +35,7 @@ function genId() {
   return count.toString()
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof _actionTypes
 
 type Action =
   | {
diff --git a/eslint.config.cjs b/eslint.config.cjs
new file mode 100644
index 0000000..a7cc3f9
--- /dev/null
+++ b/eslint.config.cjs
@@ -0,0 +1,35 @@
+// Minimal flat ESLint config to ensure `npx eslint` runs non-interactively in this environment.
+// This avoids shareable "extends" usage which can trigger interactive installs.
+// Minimal flat ESLint config to ensure `npx eslint` runs non-interactively in this environment.
+// This avoids shareable "extends" usage which can trigger interactive installs.
+module.exports = [
+  {
+    ignores: ["node_modules/**", ".next/**"],
+  },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: 2024,
+        sourceType: "module",
+        ecmaFeatures: { jsx: true },
+        // Keep `project: false` to avoid expensive type-aware parsing by default.
+        // If you want stronger type-aware rules later, change to ['./tsconfig.json'].
+        project: false,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": require("@typescript-eslint/eslint-plugin"),
+    },
+    rules: {
+      // Keep this minimal; we will run `--fix` for simple stylistic issues.
+      // Enable a TypeScript-aware unused-vars rule and ignore args starting with _.
+      "no-unused-vars": "off",
+      "no-undef": "off",
+      "no-console": "off",
+      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    },
+  },
+];
+
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
index 02e111d..0020771 100644
--- a/hooks/use-toast.ts
+++ b/hooks/use-toast.ts
@@ -18,6 +18,9 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
+// The following constant is used for type inference only. Disable the unused-var
+// lint check because the runtime value is intentionally unused.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
diff --git a/next-build-debug.log b/next-build-debug.log
new file mode 100644
index 0000000..785b076
--- /dev/null
+++ b/next-build-debug.log
@@ -0,0 +1,229 @@
+   Γû▓ Next.js 15.2.4
+
+   Creating an optimized production build ...
+2025-10-26T23:58:03.856Z next:build:webpack-build using separate compiler workers
+2025-10-26T23:58:06.329Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './*' ] }
+2025-10-26T23:58:06.332Z next:jsconfig-paths-plugin resolved baseUrl: { baseUrl: 'D:\\frontend', isImplicit: true }
+2025-10-26T23:58:06.357Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './*' ] }
+2025-10-26T23:58:06.357Z next:jsconfig-paths-plugin resolved baseUrl: { baseUrl: 'D:\\frontend', isImplicit: true }
+2025-10-26T23:58:06.419Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './*' ] }
+2025-10-26T23:58:06.419Z next:jsconfig-paths-plugin resolved baseUrl: { baseUrl: 'D:\\frontend', isImplicit: true }
+2025-10-26T23:58:06.592Z next:build:webpack-build starting compiler server
+2025-10-26T23:58:06.593Z next:build:webpack-build starting server compiler
+2025-10-26T23:58:07.159Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-route-loader
+2025-10-26T23:58:07.163Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.163Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.226Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-route-loader
+2025-10-26T23:58:07.231Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-route-loader
+2025-10-26T23:58:07.234Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-route-loader
+2025-10-26T23:58:07.237Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.238Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.240Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.241Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.242Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.243Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-app-loader
+2025-10-26T23:58:07.283Z next:jsconfig-paths-plugin moduleName did not match any paths pattern @opentelemetry/api
+2025-10-26T23:58:07.322Z next:jsconfig-paths-plugin moduleName did not match any paths pattern @opentelemetry/api
+2025-10-26T23:58:07.394Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.395Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/static.edge
+2025-10-26T23:58:07.400Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.400Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/static.edge
+2025-10-26T23:58:07.448Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/static.edge
+2025-10-26T23:58:07.449Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.449Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:07.450Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/static.edge
+2025-10-26T23:58:07.450Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.451Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:07.478Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.479Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.481Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.481Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.490Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\theme-provider
+2025-10-26T23:58:07.490Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ScrollToTop
+2025-10-26T23:58:07.490Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toaster
+2025-10-26T23:58:07.491Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.536Z next:jsconfig-paths-plugin moduleName did not match any paths pattern @opentelemetry/api
+2025-10-26T23:58:07.537Z next:jsconfig-paths-plugin moduleName did not match any paths pattern @opentelemetry/api
+2025-10-26T23:58:07.544Z next:jsconfig-paths-plugin moduleName did not match any paths pattern server-only
+2025-10-26T23:58:07.547Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\theme-provider
+2025-10-26T23:58:07.547Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ScrollToTop
+2025-10-26T23:58:07.547Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toaster
+2025-10-26T23:58:07.549Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.551Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\theme-provider
+2025-10-26T23:58:07.553Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\theme-provider
+2025-10-26T23:58:07.554Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ScrollToTop
+2025-10-26T23:58:07.555Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ScrollToTop
+2025-10-26T23:58:07.556Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toaster
+2025-10-26T23:58:07.557Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toaster
+2025-10-26T23:58:07.558Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.559Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.588Z next:jsconfig-paths-plugin moduleName did not match any paths pattern server-only
+2025-10-26T23:58:07.597Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.598Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.598Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.598Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.600Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.600Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.600Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.600Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.603Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.603Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.604Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.604Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:07.687Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.688Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.689Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.690Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.691Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.697Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.697Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.697Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.697Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.698Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.699Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.707Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.707Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.708Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.709Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.710Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.710Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.710Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.710Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.710Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.718Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.718Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.718Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.718Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.718Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.719Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.720Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.721Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.721Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.721Z next:jsconfig-paths-plugin moduleName did not match any paths pattern next-flight-client-entry-loader
+2025-10-26T23:58:07.785Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.787Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.789Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\badge
+2025-10-26T23:58:07.790Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\badge
+2025-10-26T23:58:07.791Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.791Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.792Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\Header
+2025-10-26T23:58:07.793Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\Header
+2025-10-26T23:58:07.794Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\DownloadCards
+2025-10-26T23:58:07.795Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\DownloadCards
+2025-10-26T23:58:07.796Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\hooks\use-toast
+2025-10-26T23:58:07.796Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toast
+2025-10-26T23:58:07.797Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toast
+2025-10-26T23:58:07.799Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\badge
+2025-10-26T23:58:07.801Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\badge
+2025-10-26T23:58:07.803Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.803Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.804Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.805Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.806Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\Header
+2025-10-26T23:58:07.807Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\Header
+2025-10-26T23:58:07.808Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\DownloadCards
+2025-10-26T23:58:07.809Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\DownloadCards
+2025-10-26T23:58:07.840Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:07.841Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:07.843Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toast
+2025-10-26T23:58:07.844Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\toast
+2025-10-26T23:58:07.846Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\hooks\use-toast
+2025-10-26T23:58:07.856Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\hooks\use-toast
+2025-10-26T23:58:07.857Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\hooks\use-toast
+2025-10-26T23:58:07.901Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.902Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.902Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.902Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.903Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.904Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.904Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.904Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.907Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.907Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.907Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.907Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.909Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.910Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.910Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.911Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.922Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.922Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.926Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.927Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\button
+2025-10-26T23:58:07.928Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.929Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.930Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.931Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\components\ui\card
+2025-10-26T23:58:07.934Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.934Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.938Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.939Z next:jsconfig-paths-plugin skipping request as it is an absolute path D:\frontend\lib\utils
+2025-10-26T23:58:07.967Z next:jsconfig-paths-plugin skipping request as it is inside node_modules ../shared/lib/image-external
+2025-10-26T23:58:08.000Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:08.000Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/client.edge
+2025-10-26T23:58:08.009Z next:jsconfig-paths-plugin skipping request as it is inside node_modules ../shared/lib/image-external
+2025-10-26T23:58:08.157Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:08.158Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:08.159Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:08.160Z next:jsconfig-paths-plugin moduleName did not match any paths pattern react-server-dom-webpack/server.edge
+2025-10-26T23:58:08.779Z next:build:webpack-build server compiler finished 2186ms
+Failed to compile.
+
+./app/page.tsx + 18 modules
+Unexpected end of JSON input
+
+./app/layout.tsx + 1 modules
+Unexpected end of JSON input
+
+
+> Build failed because of webpack errors
diff --git a/package-lock.json b/package-lock.json
index 695b3fd..c68c9ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,28 +40,28 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "1.0.4",
-        "date-fns": "4.1.0",
+        "date-fns": "^3.6.0",
         "embla-carousel-react": "8.5.1",
         "input-otp": "1.4.1",
         "lucide-react": "^0.454.0",
         "next": "15.2.4",
         "next-themes": "latest",
-        "react": "^19",
-        "react-day-picker": "8.10.1",
-        "react-dom": "^19",
+        "react": "^19.2.0",
+        "react-day-picker": "^9.11.1",
+        "react-dom": "^19.2.0",
         "react-hook-form": "^7.54.1",
         "react-resizable-panels": "^2.1.7",
         "recharts": "2.15.0",
         "sonner": "^1.7.1",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
-        "vaul": "^0.9.6",
+        "vaul": "^1.1.2",
         "zod": "^3.24.1"
       },
       "devDependencies": {
         "@types/node": "^22",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.2",
         "postcss": "^8.5",
         "tailwindcss": "^3.4.17",
         "typescript": "^5"
@@ -89,6 +89,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.4.tgz",
@@ -2152,9 +2158,9 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.1.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
-      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2162,13 +2168,13 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
-      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/ansi-regex": {
@@ -2682,15 +2688,21 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -3648,38 +3660,55 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
-      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-day-picker": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
-      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
+      "integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
       "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/gpbl"
       },
       "peerDependencies": {
-        "date-fns": "^2.28.0 || ^3.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-day-picker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.0"
+        "react": "^19.2.0"
       }
     },
     "node_modules/react-hook-form": {
@@ -3926,9 +3955,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -4443,16 +4472,16 @@
       "license": "MIT"
     },
     "node_modules/vaul": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.9.tgz",
-      "integrity": "sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.1"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
     "node_modules/victory-vendor": {
diff --git a/package.json b/package.json
index 8773dfe..4401530 100644
--- a/package.json
+++ b/package.json
@@ -41,28 +41,28 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
-    "date-fns": "4.1.0",
+  "date-fns": "^3.6.0",
     "embla-carousel-react": "8.5.1",
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
     "next": "15.2.4",
     "next-themes": "latest",
-    "react": "^19",
-    "react-day-picker": "8.10.1",
-    "react-dom": "^19",
+  "react": "^19.2.0",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.54.1",
     "react-resizable-panels": "^2.1.7",
     "recharts": "2.15.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.9.6",
+    "vaul": "^1.1.2",
     "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/node": "^22",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+  "@types/react": "^19.2.2",
+  "@types/react-dom": "^19.2.2",
     "postcss": "^8.5",
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
diff --git a/public/hero-illustration.svg b/public/hero-illustration.svg
new file mode 100644
index 0000000..6573c71
--- /dev/null
+++ b/public/hero-illustration.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Simple, professional SVG illustration for the hero.
+  Replace this file with your preferred SVG to customize the hero.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
+  <defs>
+    <linearGradient id="gradA" x1="0" x2="1">
+      <stop offset="0" stop-color="#60A5FA" />
+      <stop offset="1" stop-color="#A78BFA" />
+    </linearGradient>
+    <linearGradient id="gradB" x1="0" x2="1">
+      <stop offset="0" stop-color="#34D399" />
+      <stop offset="1" stop-color="#60A5FA" />
+    </linearGradient>
+    <filter id="blurLarge" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="28" />
+    </filter>
+  </defs>
+
+  <!-- soft background blobs -->
+  <ellipse cx="980" cy="110" rx="260" ry="110" fill="url(#gradA)" opacity="0.5" filter="url(#blurLarge)" />
+  <ellipse cx="120" cy="690" rx="220" ry="90" fill="url(#gradB)" opacity="0.45" filter="url(#blurLarge)" />
+
+  <!-- device mockup -->
+  <g transform="translate(220,140)">
+    <rect x="0" y="0" rx="20" ry="20" width="760" height="420" fill="#0b1220" opacity="0.95" />
+    <rect x="25" y="30" width="710" height="360" rx="12" ry="12" fill="#ffffff" />
+    <rect x="40" y="52" width="680" height="300" rx="8" ry="8" fill="url(#gradA)" opacity="0.06" />
+    <!-- simplified UI lines -->
+    <g transform="translate(60,76)" fill="#0b1220" opacity="0.12">
+      <rect width="620" height="16" rx="6" />
+      <rect y="44" width="520" height="12" rx="4" />
+      <rect y="78" width="420" height="12" rx="4" />
+    </g>
+  </g>
+
+  <!-- small accents -->
+  <circle cx="960" cy="640" r="30" fill="#F472B6" opacity="0.9" />
+  <circle cx="180" cy="160" r="22" fill="#34D399" opacity="0.95" />
+</svg>