From aa250894faf89d219d903672cc30b965dbf7adee Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:26:34 +0530
Subject: [PATCH 1/8] Refactor footer component for improved structure and
 styling

---
 src/components/footer.tsx | 46 +++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index b49e730..8758df4 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,41 +1,49 @@
 import { ExternalLink, Github, Heart } from "lucide-react";
 
 export function Footer() {
+  const year = new Date().getFullYear();
+
   return (
-    <footer className="mt-auto border-t border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm">
+    <footer className="mt-auto border-t border-slate-200 dark:border-slate-800">
       <div className="container mx-auto px-4 py-6 max-w-6xl">
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-600 dark:text-slate-400">
-          {/* Left side - Author info */}
+          {/* Left */}
           <div className="flex items-center gap-2">
-            <span>Built with</span>
-            <Heart className="h-4 w-4 text-red-500 fill-current animate-pulse" />
-            <span>by</span>
-            <a
-              href="https://usmans.me"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-slate-900 dark:text-slate-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center gap-1"
-            >
-              Usman S.
-              <ExternalLink className="h-3 w-3" />
-            </a>
+            <span>© {year} Whim</span>
+            <span className="hidden sm:inline text-slate-400">•</span>
+            <span className="flex items-center gap-1">
+              Built by
+              <a
+                href="https://usmans.me"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 font-medium text-slate-800 dark:text-slate-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/30 rounded"
+              >
+                Usman S.
+                <ExternalLink className="h-3.5 w-3.5 opacity-70" aria-hidden="true" />
+              </a>
+              <Heart className="h-3.5 w-3.5 text-rose-500/80 ml-1" aria-hidden="true" />
+            </span>
           </div>
 
-          {/* Right side - Open source info */}
+          {/* Right */}
           <div className="flex items-center gap-4">
-            <span className="text-xs">Open Source</span>
+            <span className="text-xs">Open source</span>
             <a
               href="https://github.com/max-programming/whim"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100/80 dark:bg-slate-700/80 hover:bg-slate-200/80 dark:hover:bg-slate-600/80 transition-all duration-200 text-slate-700 dark:text-slate-300"
+              aria-label="View Whim on GitHub"
+              className="inline-flex items-center gap-2 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/30 rounded"
             >
               <Github className="h-4 w-4" />
-              <span className="text-xs font-medium">View on GitHub</span>
+              <span className="text-xs font-medium underline underline-offset-4 decoration-slate-300/70 hover:decoration-current">
+                View on GitHub
+              </span>
             </a>
           </div>
         </div>
       </div>
     </footer>
   );
-}
+}
\ No newline at end of file

From ce5889b423fe4e2927dced3c064c7d88f7801949 Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:26:42 +0530
Subject: [PATCH 2/8] Add ThemeRender component for dynamic theming support

---
 src/components/theme-renderer.tsx | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/theme-renderer.tsx

diff --git a/src/components/theme-renderer.tsx b/src/components/theme-renderer.tsx
new file mode 100644
index 0000000..83c2f32
--- /dev/null
+++ b/src/components/theme-renderer.tsx
@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+
+interface ThemeRenderProps {
+  children: ReactNode;
+}
+
+export default function ThemeRender({ children }: ThemeRenderProps) {
+  return (
+    <div className="min-h-screen w-full relative overflow-hidden">
+  {/* Base background */}
+  <div className="absolute inset-0 -z-20 bg-white dark:bg-black" />
+
+  {/* Light mode gradient - more visible */}
+  <div
+    className="absolute inset-0 -z-10 dark:hidden"
+    style={{
+      background: `
+        radial-gradient(125% 125% at 50% 100%, 
+          transparent 30%, 
+          rgb(99 102 241 / 0.08) 70%,
+          rgb(139 92 246 / 0.12) 100%
+        )
+      `,
+    }}
+  />
+
+  {/* Dark mode gradient */}
+  <div
+    className="absolute inset-0 -z-10 hidden dark:block"
+    style={{
+      background:
+        "radial-gradient(125% 125% at 50% 100%, transparent 40%, #010133 100%)",
+    }}
+  />
+
+  {/* Noise texture overlay */}
+  <div 
+    className="absolute inset-0 -z-10 opacity-[0.03] dark:opacity-[0.02]" 
+    style={{
+      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+      backgroundRepeat: 'repeat',
+    }}
+  />
+
+  <div className="relative z-0">{children}</div>
+</div>
+  );
+}

From 96bc94565055fc9e8deff81b0e1407bd61ad5a31 Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:26:51 +0530
Subject: [PATCH 3/8] Refactor LandingHero component for improved layout and
 content clarity

---
 src/components/landing/landing-hero.tsx | 109 ++++++++----------------
 1 file changed, 35 insertions(+), 74 deletions(-)

diff --git a/src/components/landing/landing-hero.tsx b/src/components/landing/landing-hero.tsx
index 55669ef..29f4be6 100644
--- a/src/components/landing/landing-hero.tsx
+++ b/src/components/landing/landing-hero.tsx
@@ -1,91 +1,52 @@
 import { Clock, Lock, Shield } from "lucide-react";
-import { Card, CardContent } from "~/components/ui/card";
 
 export function LandingHero() {
   return (
-    <div className="space-y-9">
-      {/* Brand Badge with Whim */}
-      <div className="inline-flex items-center gap-2 bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 rounded-full text-indigo-700 dark:text-indigo-300 font-medium text-sm border border-indigo-100 dark:border-indigo-800">
-        <img src="/favicon-32x32.png" alt="Whim" className="w-6 h-6" />
-        Whim
+    <div className="space-y-8">
+      <div className="flex justify-center">
+        <div className="inline-flex items-center gap-2 bg-slate-300 dark:bg-slate-800 px-3 py-1.5 rounded-full">
+          <img src="/favicon-32x32.png" alt="Whim" className="w-4 h-4" />
+          <span className="text-sm font-medium text-slate-600 dark:text-slate-400">
+            Whim
+          </span>
+        </div>
       </div>
 
-      {/* Headline */}
-      <div className="space-y-3">
-        <h1 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
-          Share Secrets
-          <span className="text-indigo-600 dark:text-indigo-400 block">
-            Safely & Securely
+      <div className="space-y-4 text-center">
+        <h1 className="text-3xl font-semibold lg:text-4xl xl:text-5xl text-slate-900 dark:text-white capitalize">
+          Send secrets that
+          <span className="block  text-indigo-600 dark:text-indigo-400">
+            disappear after they're read
           </span>
         </h1>
 
-        <p className="text-base lg:text-lg text-slate-600 dark:text-slate-300 leading-relaxed max-w-md">
-          Share sensitive information on a{" "}
-          <span className="font-medium text-slate-700 dark:text-slate-200">
-            whim
-          </span>{" "}
-          - your secrets automatically self-destruct after being read or when
-          time expires. Perfect for one-time sharing of API keys, passwords, and
-          confidential data.
+        <p className="text-base lg:text-lg text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl mx-auto">
+          Securely share passwords, API keys, or confidential notes in a single-use,
+          encrypted message. Once opened, it’s gone forever — private, safe, and simple.
         </p>
       </div>
 
-      {/* Essential Features - Condensed on Mobile */}
-      <div className="grid grid-cols-3 gap-2 sm:gap-3">
-        <Card className="py-2 sm:py-4 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-          <CardContent className="px-2 sm:px-4 py-0">
-            <div className="text-center space-y-1 sm:space-y-2">
-              <div className="flex justify-center">
-                <Shield className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
-              </div>
-              <div>
-                <div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
-                  Encrypted
-                </div>
-                <div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
-                  End-to-end encrypted
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
 
-        <Card className="py-2 sm:py-4 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-          <CardContent className="px-2 sm:px-4 py-0">
-            <div className="text-center space-y-1 sm:space-y-2">
-              <div className="flex justify-center">
-                <Clock className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
-              </div>
-              <div>
-                <div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
-                  Self-Destruct
-                </div>
-                <div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
-                  Deleted after reading (once or multiple times)
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+      <div className="flex flex-col lg:flex-row items-center justify-center gap-4 lg:gap-8">
+        <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
+          <Shield className="w-4 h-4 text-slate-400" />
+          <span>AES-256 encrypted</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
+          <Clock className="w-4 h-4 text-slate-400" />
+          <span>Auto-destructs</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
+          <Lock className="w-4 h-4 text-slate-400" />
+          <span>OTP protected</span>
+        </div>
+      </div>
 
-        <Card className="py-2 sm:py-4 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-          <CardContent className="px-2 sm:px-4 py-0">
-            <div className="text-center space-y-1 sm:space-y-2">
-              <div className="flex justify-center">
-                <Lock className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
-              </div>
-              <div>
-                <div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
-                  Password Protected
-                </div>
-                <div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
-                  OTP required
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+      <div className="text-center">
+        <p className="text-xs text-slate-500 dark:text-slate-500">
+          Open source • Zero knowledge • No registration required
+        </p>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 8227d384a87e456cefa3fff70e69cca20840ed20 Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:26:58 +0530
Subject: [PATCH 4/8] Refactor LandingProcessFlow component for improved
 structure and clarity

---
 .../landing/landing-process-flow.tsx          | 184 ++++++------------
 1 file changed, 59 insertions(+), 125 deletions(-)

diff --git a/src/components/landing/landing-process-flow.tsx b/src/components/landing/landing-process-flow.tsx
index a9e1d6e..ce9bad4 100644
--- a/src/components/landing/landing-process-flow.tsx
+++ b/src/components/landing/landing-process-flow.tsx
@@ -1,137 +1,71 @@
-import { Clock, Edit3, Eye, Link2, Shield, Zap } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Edit3, Shield, Link2, Eye, Zap } from "lucide-react";
 
 export function LandingProcessFlow() {
-  return (
-    <div>
-      <Card className="shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/30 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-        <CardHeader className="pb-4">
-          <CardTitle className="text-xl text-slate-900 dark:text-slate-100 flex items-center gap-2">
-            <Shield className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
-            How It Works
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Step 1 */}
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
-              <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
-                1
-              </span>
-            </div>
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <Edit3 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
-                  Write Your Secret
-                </h3>
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-300">
-                Type your sensitive information (API keys, passwords, private
-                notes) into the secure form.
-              </p>
-            </div>
-          </div>
-
-          {/* Step 2 */}
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
-              <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
-                2
-              </span>
-            </div>
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <Shield className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
-                  Encrypt & Generate
-                </h3>
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-300">
-                Your secret is encrypted end-to-end and a unique URL + one-time
-                password (OTP) are generated.
-              </p>
-            </div>
-          </div>
+  const steps = [
+    {
+      icon: Edit3,
+      title: "Write your secret",
+      description: "Enter your sensitive information in the secure form",
+    },
+    {
+      icon: Shield,
+      title: "Encrypt automatically",
+      description: "Your message is encrypted with AES-256 before leaving your browser",
+    },
+    {
+      icon: Link2,
+      title: "Share credentials",
+      description: "Send the unique URL and OTP to your recipient",
+    },
+    {
+      icon: Eye,
+      title: "Recipient views once",
+      description: "They access the secret with the OTP for the set number of times",
+    },
+    {
+      icon: Zap,
+      title: "Auto-destruction",
+      description: "The secret vanishes forever after viewing",
+      isLast: true,
+    },
+  ];
 
-          {/* Step 3 */}
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
-              <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
-                3
-              </span>
-            </div>
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <Link2 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
-                  Share the Link & OTP
-                </h3>
-              </div>
-              <p className="text-sm text-slate-600 dark:text-slate-300">
-                Send the URL and OTP to your recipient through separate channels
-                for maximum security.
-              </p>
-            </div>
-          </div>
-
-          {/* Step 4 */}
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
-              <span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
-                4
-              </span>
-            </div>
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <Eye className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
-                  Limited Access
-                </h3>
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {steps.map((step, index) => (
+          <div key={index} className="flex gap-4">
+            <div className="flex-shrink-0">
+              <div className={`
+                w-8 h-8 rounded-full flex items-center justify-center text-sm
+                ${step.isLast 
+                  ? 'bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400' 
+                  : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400'
+                }
+              `}>
+                {index + 1}
               </div>
-              <p className="text-sm text-slate-600 dark:text-slate-300">
-                The recipient opens the link, enters the OTP, and views your
-                secret for the allowed number of times.
-              </p>
             </div>
-          </div>
-
-          {/* Step 5 */}
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900/50 rounded-full flex items-center justify-center">
-              <span className="text-red-600 dark:text-red-400 font-semibold text-sm">
-                5
-              </span>
-            </div>
-            <div className="flex-1">
-              <div className="flex items-center gap-2 mb-1">
-                <Zap className="w-4 h-4 text-red-600 dark:text-red-400" />
-                <h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
-                  Automatic Destruction
-                </h3>
+            <div className="flex-1 space-y-1">
+              <div className="flex items-center gap-2">
+                <step.icon className="w-3 h-3 text-slate-400" />
+                <h4 className="text-sm font-medium text-slate-900 dark:text-white">
+                  {step.title}
+                </h4>
               </div>
-              <p className="text-sm text-slate-600 dark:text-slate-300">
-                The secret is permanently deleted from our servers after all
-                allowed accesses are used.
+              <p className="text-xs text-slate-500 dark:text-slate-500 leading-relaxed">
+                {step.description}
               </p>
             </div>
           </div>
+        ))}
+      </div>
 
-          {/* Security Note */}
-          <div className="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-3 mt-4">
-            <div className="flex items-start gap-2">
-              <Clock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" />
-              <div className="text-sm text-indigo-800 dark:text-indigo-200">
-                <p className="font-medium mb-1">Zero-Knowledge Security</p>
-                <p className="text-indigo-700 dark:text-indigo-300">
-                  Your secret is encrypted in your browser before being sent to
-                  our servers. We never see your data in plain text.
-                </p>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <div className="pt-3 border-t border-slate-200 dark:border-slate-800">
+        <p className="text-xs text-slate-500 dark:text-slate-500">
+          Zero-knowledge architecture • We never see your unencrypted data
+        </p>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 51473dca452cefbfef9db9a6e2438f43e54ef80d Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:27:02 +0530
Subject: [PATCH 5/8] Refactor LandingSecretForm component for improved layout
 and user experience

---
 .../landing/landing-secret-form.tsx           | 453 ++++++++----------
 1 file changed, 199 insertions(+), 254 deletions(-)

diff --git a/src/components/landing/landing-secret-form.tsx b/src/components/landing/landing-secret-form.tsx
index ed0070a..a7fd396 100644
--- a/src/components/landing/landing-secret-form.tsx
+++ b/src/components/landing/landing-secret-form.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import {
-  AlertTriangle,
-  CheckCircle,
+  Lock,
   Copy,
   Eye,
   Shield,
-  Zap,
+  Sparkles,
+  CheckCircle2,
+  AlertCircle,
 } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
@@ -26,17 +27,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "~/components/ui/alert-dialog";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
@@ -69,8 +63,8 @@ export function LandingSecretForm() {
         onSuccess: (data: { id: string; otp: string }) => {
           setWhimResult(data);
           setIsDialogOpen(true);
-          setMessage(""); // Clear the form
-          setMaxAttempts(1); // Reset to default
+          setMessage("");
+          setMaxAttempts(1);
         },
       }
     );
@@ -97,272 +91,223 @@ export function LandingSecretForm() {
     : "";
 
   return (
-    <div className="lg:pl-4">
-      <TooltipProvider>
-        <Card className="border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 shadow-md hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-          <CardHeader className="text-center pb-4">
-            <CardTitle className="text-xl text-slate-900 dark:text-slate-100">
-              Create Your Secret Whim
-            </CardTitle>
-            <CardDescription className="text-slate-500 dark:text-slate-400">
-              Share on a whim, vanish without a trace
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="space-y-5 px-6">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-                Your Secret
-              </label>
-              <Textarea
-                placeholder="Type your secret on a whim... API keys, passwords, private notes, or anything confidential"
-                value={message}
-                onChange={e => setMessage(e.target.value)}
-                className="min-h-[120px] resize-none bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600 focus:border-indigo-300 dark:focus:border-indigo-500 focus:ring-indigo-200 dark:focus:ring-indigo-500/20 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-500 dark:placeholder:text-slate-400"
-                disabled={isPending}
-              />
+    <div className="w-full max-w-2xl mx-auto">
+      <Card className="border border-slate-200/50 dark:border-slate-800/50 shadow-xs bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm">
+        <CardHeader className="space-y-1 pb-6">
+          <div className="flex items-center justify-center mb-2">
+            <div className="p-2 rounded-full bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-950">
+              <Lock className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
             </div>
+          </div>
+          <CardTitle className="text-2xl font-light text-center text-slate-800 dark:text-slate-100">
+            Create a Secret Whim
+          </CardTitle>
+          <CardDescription className="text-center text-slate-600 dark:text-slate-400">
+            Ephemeral secrets that vanish after viewing
+          </CardDescription>
+        </CardHeader>
 
-            {/* Max Attempts Selection */}
-            <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">
-                Access Limit
-              </label>
-              <div className="grid grid-cols-5 gap-2">
-                {[1, 2, 3, 5, 10].map(num => (
-                  <Button
-                    key={num}
-                    type="button"
-                    variant={maxAttempts === num ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setMaxAttempts(num)}
-                    disabled={isPending}
-                    className={`text-xs ${
-                      maxAttempts === num
-                        ? "bg-indigo-600 hover:bg-indigo-700 text-white"
-                        : "hover:bg-slate-50 dark:hover:bg-slate-700"
-                    }`}
-                  >
-                    {num}
-                  </Button>
-                ))}
-              </div>
-              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
-                Number of times this whim can be accessed before
-                self-destructing
-              </p>
-            </div>
+        <CardContent className="space-y-6">
+          {/* Secret Input */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+              Your Secret
+            </label>
+            <Textarea
+              placeholder="Enter your confidential message..."
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+              className="min-h-[140px] resize-none outline-none border-slate-200 dark:border-slate-700 focus:border-indigo-400 dark:focus:border-indigo-500 bg-transparent placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-colors"
+              disabled={isPending}
+            />
+          </div>
 
-            <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
-              <div className="flex items-start gap-2">
-                <Eye className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-blue-800 dark:text-blue-200">
-                  <p className="font-medium mb-1">
-                    {maxAttempts === 1
-                      ? "One-Time Access"
-                      : `${maxAttempts}-Time Access`}
-                  </p>
-                  <p className="text-blue-700 dark:text-blue-300">
-                    Your secret will be permanently destroyed after being
-                    accessed{" "}
-                    {maxAttempts === 1 ? "once" : `${maxAttempts} times`}, even
-                    if it hasn't reached the expiry time.
-                  </p>
-                </div>
-              </div>
+          {/* Access Limit */}
+          <div className="space-y-3">
+            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+              View Limit
+            </label>
+            <div className="flex gap-2">
+              {[1, 2, 3, 5, 10].map(num => (
+                <button
+                  key={num}
+                  type="button"
+                  onClick={() => setMaxAttempts(num)}
+                  disabled={isPending}
+                  className={`
+                    flex-1 py-2.5 px-3 rounded-lg text-sm font-medium transition-all
+                    ${maxAttempts === num
+                      ? "bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow-sm"
+                      : "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700"
+                    }
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                  `}
+                >
+                  {num}
+                </button>
+              ))}
             </div>
-
-            {/* Create Button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>
-                  <Button
-                    onClick={handleCreateSecret}
-                    disabled={!isFormValid || isPending}
-                    className="w-full h-12 text-lg font-semibold bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 disabled:bg-slate-300 dark:disabled:bg-slate-600 disabled:text-slate-500 dark:disabled:text-slate-400 transition-all duration-200 transform hover:scale-[1.02] shadow-md hover:shadow-lg text-white"
-                  >
-                    {isPending ? (
-                      <>
-                        <div className="animate-spin w-5 h-5 border-2 border-white border-t-transparent rounded-full" />
-                        Creating...
-                      </>
-                    ) : (
-                      <>
-                        <Zap className="size-5" />
-                        Share This Whim
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </TooltipTrigger>
-              {!isFormValid && !isPending && (
-                <TooltipContent>
-                  <p>Enter a message to create your whim</p>
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </CardContent>
-
-          <CardFooter className="justify-center -mb-2 -mt-3 text-slate-500 dark:text-slate-400">
-            <Shield className="size-3 mr-1" />
-            <p className="text-sm">
-              Your whim is encrypted • OTP protected • Limited access
+            <p className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1">
+              <Eye className="w-3 h-3" />
+              Self-destructs after {maxAttempts} {maxAttempts === 1 ? 'view' : 'views'}
             </p>
-          </CardFooter>
-        </Card>
-
-        {/* Confirmation Dialog */}
-        <AlertDialog
-          open={isConfirmDialogOpen}
-          onOpenChange={setIsConfirmDialogOpen}
-        >
-          <AlertDialogContent className="sm:max-w-lg">
-            <AlertDialogHeader>
-              <AlertDialogTitle className="flex items-center gap-2 text-amber-700">
-                <AlertTriangle className="w-5 h-5" />
-                Confirm Your Secret
-              </AlertDialogTitle>
-              <AlertDialogDescription className="text-left">
-                You're about to create a whim with the following message. This
-                secret will be encrypted and will <strong>self-destruct</strong>{" "}
-                after being accessed{" "}
-                {maxAttempts === 1 ? "once" : `${maxAttempts} times`}.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
+          </div>
 
-            <div className="my-4">
-              <div className="bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg p-4 max-h-32 overflow-y-auto">
-                <p className="text-sm text-slate-800 dark:text-slate-200 whitespace-pre-wrap break-words">
-                  {message}
+          {/* Info Banner */}
+          <div className="rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30 p-4 border border-indigo-100 dark:border-indigo-900">
+            <div className="flex gap-3">
+              <Shield className="w-4 h-4 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-indigo-900 dark:text-indigo-200">
+                  End-to-End Encrypted
+                </p>
+                <p className="text-xs text-indigo-700 dark:text-indigo-300">
+                  Your secret is encrypted before storage and requires an OTP to access
                 </p>
               </div>
             </div>
+          </div>
 
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 mb-4">
-              <div className="flex items-start gap-2">
-                <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-red-800 dark:text-red-200">
-                  <p className="font-medium mb-1">⚠️ Important Warning</p>
-                  <p className="text-red-700 dark:text-red-300">
-                    Once created, this secret will be destroyed forever after
-                    the first person opens the link. Make sure you really want
-                    to share this information.
-                  </p>
-                </div>
+          {/* Create Button */}
+          <Button
+            onClick={handleCreateSecret}
+            disabled={!isFormValid || isPending}
+            className="w-full h-11 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-sm hover:shadow-md transition-all disabled:from-slate-400 disabled:to-slate-400"
+          >
+            {isPending ? (
+              <div className="flex items-center gap-2">
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                Creating...
               </div>
-            </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Sparkles className="w-4 h-4" />
+                Create Whim
+              </div>
+            )}
+          </Button>
+        </CardContent>
+      </Card>
 
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={handleConfirmCreate}
-                className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white"
-              >
-                Yes, Create Whim
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
+      {/* Confirmation Dialog */}
+      <AlertDialog
+        open={isConfirmDialogOpen}
+        onOpenChange={setIsConfirmDialogOpen}
+      >
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertCircle className="w-5 h-5 text-amber-600" />
+              Confirm Creation
+            </AlertDialogTitle>
+            <AlertDialogDescription className="pt-2">
+              This secret will self-destruct after {maxAttempts} {maxAttempts === 1 ? 'view' : 'views'}.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
 
-        {/* Success Dialog */}
-        <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle className="flex items-center gap-2 text-green-700">
-                <CheckCircle className="w-5 h-5" />
-                Whim Created Successfully!
-              </DialogTitle>
-              <DialogDescription>
-                Your secret is now encrypted and ready to share. Save these
-                details securely.
-              </DialogDescription>
-            </DialogHeader>
+          <div className="my-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-3">
+              {message}
+            </p>
+          </div>
 
-            <div className="space-y-4 mt-4">
-              {/* OTP Section */}
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-                  One-Time Password (OTP)
-                </label>
-                <div className="flex items-center gap-2">
-                  <div className="flex-1 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md font-mono text-lg font-bold text-center tracking-wider text-slate-900 dark:text-slate-100">
-                    {whimResult?.otp}
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() =>
-                      whimResult && copyToClipboard(whimResult.otp, "otp")
-                    }
-                    className="px-3"
-                  >
-                    {copiedStates.otp ? (
-                      <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
-                    ) : (
-                      <Copy className="w-4 h-4" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-slate-500 dark:text-slate-400">
-                  The recipient will need this OTP to access the secret.
-                </p>
-              </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="border-slate-200 dark:border-slate-700">
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmCreate}
+              className="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white"
+            >
+              Create Whim
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
 
-              {/* URL Section */}
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-                  Share URL
-                </label>
-                <div className="flex items-center gap-2">
-                  <div className="flex-1 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md font-mono text-sm break-all text-slate-900 dark:text-slate-100">
-                    {whimUrl}
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => copyToClipboard(whimUrl, "url")}
-                    className="px-3"
-                  >
-                    {copiedStates.url ? (
-                      <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
-                    ) : (
-                      <Copy className="w-4 h-4" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-slate-500 dark:text-slate-400">
-                  Share this URL with the intended recipient.
-                </p>
+      {/* Success Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <div className="flex items-center justify-center mb-4">
+              <div className="p-3 rounded-full bg-green-50 dark:bg-green-950">
+                <CheckCircle2 className="w-6 h-6 text-green-600 dark:text-green-400" />
               </div>
+            </div>
+            <DialogTitle className="text-center">
+              Whim Created
+            </DialogTitle>
+            <DialogDescription className="text-center">
+              Share these credentials securely with the recipient
+            </DialogDescription>
+          </DialogHeader>
 
-              {/* Warning */}
-              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
-                <div className="flex items-start gap-2">
-                  <Eye className="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
-                  <div className="text-sm text-amber-800 dark:text-amber-200">
-                    <p className="font-medium mb-1">Important</p>
-                    <p className="text-amber-700 dark:text-amber-300">
-                      The secret will be permanently destroyed after the first
-                      access or when the link expires. Make sure to share both
-                      the URL and OTP securely.
-                    </p>
-                  </div>
+          <div className="space-y-4 mt-6">
+            {/* OTP */}
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                Access Code
+              </label>
+              <div className="relative group">
+                <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 font-mono text-xl text-center tracking-widest font-semibold text-slate-900 dark:text-slate-100">
+                  {whimResult?.otp}
                 </div>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => whimResult && copyToClipboard(whimResult.otp, "otp")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  {copiedStates.otp ? (
+                    <CheckCircle2 className="w-4 h-4 text-green-600" />
+                  ) : (
+                    <Copy className="w-4 h-4" />
+                  )}
+                </Button>
               </div>
+            </div>
 
-              {/* Action Buttons */}
-              <div className="flex justify-center pt-2">
+            {/* URL */}
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                Secret URL
+              </label>
+              <div className="relative group">
+                <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 font-mono text-xs break-all text-slate-700 dark:text-slate-300">
+                  {whimUrl}
+                </div>
                 <Button
-                  onClick={handleDialogClose}
-                  className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => copyToClipboard(whimUrl, "url")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
                 >
-                  Create Another
+                  {copiedStates.url ? (
+                    <CheckCircle2 className="w-4 h-4 text-green-600" />
+                  ) : (
+                    <Copy className="w-4 h-4" />
+                  )}
                 </Button>
               </div>
             </div>
-          </DialogContent>
-        </Dialog>
-      </TooltipProvider>
+
+            {/* Notice */}
+            <div className="p-3 bg-amber-50 dark:bg-amber-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
+              <p className="text-xs text-amber-800 dark:text-amber-200 text-center">
+                This secret will be permanently deleted after {maxAttempts} {maxAttempts === 1 ? 'access' : 'accesses'}
+              </p>
+            </div>
+
+            <Button
+              onClick={handleDialogClose}
+              variant="outline"
+              className="w-full border-slate-200 dark:border-slate-700"
+            >
+              Create Another
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
-}
+}
\ No newline at end of file

From 30c7d0241e2ec6b201411d24d2159054fe8bfc5d Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:27:09 +0530
Subject: [PATCH 6/8] Refactor LandingStats component for improved layout and
 styling

---
 src/components/landing/landing-stats.tsx | 61 +++++++++++++-----------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/components/landing/landing-stats.tsx b/src/components/landing/landing-stats.tsx
index 2bc806c..dc955d8 100644
--- a/src/components/landing/landing-stats.tsx
+++ b/src/components/landing/landing-stats.tsx
@@ -1,40 +1,47 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Edit3, Zap } from "lucide-react";
-import { Card, CardContent } from "~/components/ui/card";
 import { statsQuery } from "~/lib/queries";
 
 export function LandingStats() {
   const { data: stats } = useSuspenseQuery(statsQuery);
 
   return (
-    <div className="grid grid-cols-2 gap-2 w-full">
-      <Card className="py-2 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-        <CardContent className="px-3 py-0 text-center">
-          <div className="flex items-center justify-center gap-1 mb-0.5">
-            <Edit3 className="size-4 text-indigo-600 dark:text-indigo-400" />
-            <div className="text-lg font-bold text-slate-900 dark:text-slate-100">
-              {stats.whimsCreated}
-            </div>
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-slate-700 dark:text-slate-300">
+        Platform Statistics
+      </h3>
+      
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1">
+          <div className="flex items-baseline gap-2">
+            <span className="text-2xl font-light text-slate-900 dark:text-white">
+              {stats.whimsCreated.toLocaleString()}
+            </span>
+            <Edit3 className="w-3 h-3 text-slate-400" />
           </div>
-          <div className="text-xs text-slate-600 dark:text-slate-300">
-            Whims Created
-          </div>
-        </CardContent>
-      </Card>
+          <p className="text-xs text-slate-500 dark:text-slate-500 capitalize">
+            Whims created
+          </p>
+        </div>
 
-      <Card className="py-2 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
-        <CardContent className="px-3 py-0 text-center">
-          <div className="flex items-center justify-center gap-1 mb-0.5">
-            <Zap className="size-4 text-red-500 dark:text-red-400" />
-            <div className="text-lg font-bold text-slate-900 dark:text-slate-100">
-              {stats.secretsVanished}
-            </div>
-          </div>
-          <div className="text-xs text-slate-600 dark:text-slate-300">
-            Secrets Vanished
+        <div className="space-y-1">
+          <div className="flex items-baseline gap-2">
+            <span className="text-2xl font-light text-slate-900 dark:text-white">
+              {stats.secretsVanished.toLocaleString()}
+            </span>
+            <Zap className="w-3 h-3 text-slate-400" />
           </div>
-        </CardContent>
-      </Card>
+          <p className="text-xs text-slate-500 dark:text-slate-500 capitalize">
+            Whims vanished
+          </p>
+        </div>
+      </div>
+
+      <div className="pt-3 border-t border-slate-200 dark:border-slate-800">
+        <p className="text-xs text-slate-500 dark:text-slate-500">
+          Updated in real-time • Completely anonymous
+        </p>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 413b05c16a5a17ecaaca0a2a9e063344763ec9ab Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:27:15 +0530
Subject: [PATCH 7/8] Refactor Textarea component for improved focus styling
 and accessibility

---
 src/components/ui/textarea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 1c7ebff..b0735d3 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
@@ -15,4 +15,4 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   )
 }
 
-export { Textarea }
+export { Textarea } 
\ No newline at end of file

From 43296c29d9a86826100a83cc3d3aa6774dd1de7f Mon Sep 17 00:00:00 2001
From: Grenish rai <107925840+Grenish@users.noreply.github.com>
Date: Sun, 10 Aug 2025 15:27:20 +0530
Subject: [PATCH 8/8] Refactor LandingPage component for improved layout and
 structure

---
 src/routes/index.tsx | 84 +++++++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 36 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 2beae45..8736d12 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -5,6 +5,7 @@ import {
   LandingSecretForm,
   LandingStats,
 } from "~/components/landing";
+import ThemeRender from "~/components/theme-renderer";
 import { statsQuery } from "~/lib/queries";
 
 export const Route = createFileRoute("/")({
@@ -16,47 +17,58 @@ export const Route = createFileRoute("/")({
 
 function LandingPage() {
   return (
-    <div className="flex-1 flex items-center bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
-      <div className="container mx-auto px-4 py-6 max-w-6xl">
-        <div className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl border border-slate-200/60 dark:border-slate-700/60 shadow-lg p-6 lg:p-8">
-          {/* Mobile-First Layout */}
-          <div className="lg:hidden space-y-6">
-            {/* Hero Section */}
-            <LandingHero />
+    <ThemeRender>
+      <div className="min-h-screen flex flex-col">
+        <div className="relative flex-1 overflow-hidden">
+          <div className="relative container mx-auto px-4 py-8 lg:py-12">
+            <div className="max-w-7xl mx-auto">
+              <div className="hidden lg:block">
+                <div className="mb-12 text-center max-w-4xl mx-auto">
+                  <LandingHero />
+                </div>
+                <div className="grid grid-cols-12 gap-8 mb-12">
+                  <div className="col-span-7">
+                    <div className="sticky top-8">
+                      <LandingSecretForm />
+                    </div>
+                  </div>
+                  <div className="col-span-5 space-y-8">
+                    <div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-xs p-6">
+                      <LandingStats />
+                    </div>
 
-            {/* Form - High Priority on Mobile */}
-            <LandingSecretForm />
-
-            {/* Stats */}
-            <LandingStats />
-
-            {/* How It Works - Lower Priority on Mobile */}
-            <LandingProcessFlow />
-          </div>
-
-          {/* Desktop Layout */}
-          <div className="hidden lg:block space-y-8">
-            {/* First Row - Hero/Stats + Form */}
-            <div className="grid grid-cols-12 gap-8">
-              {/* Left Column - Hero and Stats */}
-              <div className="col-span-5 flex flex-col justify-between">
-                <LandingHero />
-                <LandingStats />
+                    <div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-xs p-6">
+                      <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4 flex items-center gap-2">
+                        <div className="w-1 h-5 bg-gradient-to-b from-indigo-500 to-purple-500 rounded-full" />
+                        How It Works
+                      </h3>
+                      <LandingProcessFlow />
+                    </div>
+                  </div>
+                </div>
               </div>
-
-              {/* Right Column - Form */}
-              <div className="col-span-7">
-                <LandingSecretForm />
+              <div className="lg:hidden space-y-6">
+                <div className="text-center">
+                  <LandingHero />
+                </div>
+                <div className="bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-xl">
+                  <LandingSecretForm />
+                </div>
+                <div className="bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-xl p-6">
+                  <LandingStats />
+                </div>
+                <div className="bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-xl p-6">
+                  <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">
+                    How It Works
+                  </h3>
+                  <LandingProcessFlow />
+                </div>
               </div>
             </div>
-
-            {/* Second Row - How It Works (Full Width) */}
-            <div className="w-full">
-              <LandingProcessFlow />
-            </div>
           </div>
         </div>
       </div>
-    </div>
+    </ThemeRender>
+
   );
-}
+}
\ No newline at end of file