From 12a4c42b4ae7dd62a9a4885acb4629bbbc63569d Mon Sep 17 00:00:00 2001
From: Val Neekman <val@neekware.com>
Date: Fri, 5 Sep 2025 15:03:54 -0400
Subject: [PATCH 1/3] interactive

---
 eslint.config.mjs                             |   2 +
 src/pages/focus.tsx                           |   6 +-
 src/pages/form-submit.tsx                     | 279 ------
 src/pages/forms.tsx                           | 899 +++++++++++-------
 src/pages/hover.tsx                           |   8 +-
 src/pages/index.tsx                           |  44 +-
 .../{interactions.tsx => interactive.tsx}     |   0
 src/pages/navigation-search.tsx               | 494 ++++++++++
 src/pages/navigation.tsx                      | 221 -----
 src/pages/scroll.tsx                          |  56 +-
 src/pages/search.tsx                          | 297 ------
 11 files changed, 1126 insertions(+), 1180 deletions(-)
 delete mode 100644 src/pages/form-submit.tsx
 rename src/pages/{interactions.tsx => interactive.tsx} (100%)
 create mode 100644 src/pages/navigation-search.tsx
 delete mode 100644 src/pages/navigation.tsx
 delete mode 100644 src/pages/search.tsx

diff --git a/eslint.config.mjs b/eslint.config.mjs
index ee614fb..7138d1a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -137,6 +137,8 @@ export default [
   },
   {
     ignores: [
+      ".next/**",
+      "out/**",
       "src-backend/src/bundle.js",
       "src-backend/src/bundle.js.map",
       "cli.mjs",
diff --git a/src/pages/focus.tsx b/src/pages/focus.tsx
index a27e7f2..703b26a 100644
--- a/src/pages/focus.tsx
+++ b/src/pages/focus.tsx
@@ -277,8 +277,8 @@ export default function Focus() {
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="space-y-3 rounded-lg border-2 border-blue-300 bg-blue-50 p-4">
-                  <p className="text-sm text-blue-700">
+                <div className="space-y-3 rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 p-4">
+                  <p className="text-sm text-gray-700 dark:text-gray-300">
                     Tab navigation is trapped within this box:
                   </p>
                   <Input
@@ -307,7 +307,7 @@ export default function Focus() {
                         document.getElementById("trap-input-1")?.focus();
                       }
                     }}
-                    className="w-full bg-blue-600 hover:bg-blue-700"
+                    className="w-full"
                   >
                     Last element (Tab goes back to first)
                   </Button>
diff --git a/src/pages/form-submit.tsx b/src/pages/form-submit.tsx
deleted file mode 100644
index 992f7d5..0000000
--- a/src/pages/form-submit.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import React, { useState } from "react";
-import { motion } from "framer-motion";
-import {
-  CheckCircle,
-  Mail,
-  MessageSquare,
-  RotateCcw,
-  Send,
-  User,
-} from "lucide-react";
-import { Layout } from "@/components/layout";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-export default function FormSubmit() {
-  const [formData, setFormData] = useState({
-    firstName: "",
-    lastName: "",
-    email: "",
-    message: "",
-  });
-  const [submittedData, setSubmittedData] = useState<typeof formData | null>(
-    null,
-  );
-  const [submitCount, setSubmitCount] = useState(0);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setSubmittedData({ ...formData });
-    setSubmitCount((count) => count + 1);
-  };
-
-  const handleReset = () => {
-    setFormData({
-      firstName: "",
-      lastName: "",
-      email: "",
-      message: "",
-    });
-    setSubmittedData(null);
-  };
-
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <div className="mb-8">
-            <h1 className="gradient-text mb-4 text-4xl font-bold">
-              Form Submit Test
-            </h1>
-            <p className="text-muted-foreground text-lg">
-              Test form submission and validation handling
-            </p>
-          </div>
-
-          <div className="grid max-w-6xl gap-8 md:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <User className="h-5 w-5" />
-                  Contact Form
-                </CardTitle>
-                <CardDescription>
-                  Fill out the form to test submission
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form
-                  id="contact-form"
-                  onSubmit={handleSubmit}
-                  className="space-y-6"
-                >
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="firstName">First Name *</Label>
-                      <Input
-                        id="firstName"
-                        name="firstName"
-                        type="text"
-                        required
-                        value={formData.firstName}
-                        onChange={(e) =>
-                          setFormData({
-                            ...formData,
-                            firstName: e.target.value,
-                          })
-                        }
-                        placeholder="John"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="lastName">Last Name *</Label>
-                      <Input
-                        id="lastName"
-                        name="lastName"
-                        type="text"
-                        required
-                        value={formData.lastName}
-                        onChange={(e) =>
-                          setFormData({ ...formData, lastName: e.target.value })
-                        }
-                        placeholder="Doe"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="email" className="flex items-center gap-2">
-                      <Mail className="h-4 w-4" />
-                      Email *
-                    </Label>
-                    <Input
-                      id="email"
-                      name="email"
-                      type="email"
-                      required
-                      value={formData.email}
-                      onChange={(e) =>
-                        setFormData({ ...formData, email: e.target.value })
-                      }
-                      placeholder="john.doe@example.com"
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label
-                      htmlFor="message"
-                      className="flex items-center gap-2"
-                    >
-                      <MessageSquare className="h-4 w-4" />
-                      Message
-                    </Label>
-                    <Textarea
-                      id="message"
-                      name="message"
-                      rows={5}
-                      value={formData.message}
-                      onChange={(e) =>
-                        setFormData({ ...formData, message: e.target.value })
-                      }
-                      placeholder="Your message here..."
-                    />
-                  </div>
-
-                  <div className="flex gap-3">
-                    <Button id="submit-btn" type="submit" className="flex-1">
-                      <Send className="mr-2 h-4 w-4" />
-                      Submit Form
-                    </Button>
-                    <Button
-                      id="reset-btn"
-                      type="button"
-                      onClick={handleReset}
-                      variant="outline"
-                    >
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      Reset
-                    </Button>
-                  </div>
-                </form>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <CheckCircle className="h-5 w-5" />
-                  Form Status
-                </CardTitle>
-                <CardDescription>
-                  View submission results and manage data
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div
-                  id="form-status"
-                  className={`min-h-[200px] rounded-lg border-2 p-6 ${
-                    submittedData
-                      ? "border-green-200 bg-green-50"
-                      : "bg-muted border-gray-200"
-                  }`}
-                >
-                  {submittedData ? (
-                    <div className="space-y-4">
-                      <div className="flex items-center gap-2 text-green-700">
-                        <CheckCircle className="h-5 w-5" />
-                        <h3 className="text-lg font-semibold">
-                          Form Submitted Successfully!
-                        </h3>
-                      </div>
-                      <Badge
-                        variant="outline"
-                        className="border-green-300 text-green-700"
-                      >
-                        Submit count: {submitCount}
-                      </Badge>
-                      <div>
-                        <h4 className="mb-3 font-semibold">Submitted Data:</h4>
-                        <div className="space-y-2 text-sm">
-                          <div className="flex justify-between">
-                            <span className="font-medium">Name:</span>
-                            <span>
-                              {submittedData.firstName} {submittedData.lastName}
-                            </span>
-                          </div>
-                          <div className="flex justify-between">
-                            <span className="font-medium">Email:</span>
-                            <span>{submittedData.email}</span>
-                          </div>
-                          <div className="flex items-start justify-between">
-                            <span className="font-medium">Message:</span>
-                            <span className="max-w-xs text-right">
-                              {submittedData.message || "(No message provided)"}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="space-y-2 py-8 text-center">
-                      <h3 className="text-muted-foreground font-semibold">
-                        No form submitted yet
-                      </h3>
-                      <p className="text-muted-foreground text-sm">
-                        Fill out the form and click submit to see the results
-                        here.
-                      </p>
-                    </div>
-                  )}
-                </div>
-
-                <div className="mt-6 space-y-3">
-                  <h3 className="font-semibold">Quick Actions</h3>
-                  <div className="flex gap-3">
-                    <Button
-                      onClick={() =>
-                        setFormData({
-                          firstName: "John",
-                          lastName: "Doe",
-                          email: "john.doe@example.com",
-                          message: "This is a test message.",
-                        })
-                      }
-                      variant="outline"
-                      size="sm"
-                    >
-                      Fill Sample Data
-                    </Button>
-                    <Button
-                      onClick={() => setSubmittedData(null)}
-                      variant="outline"
-                      size="sm"
-                    >
-                      Clear Results
-                    </Button>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </motion.div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/forms.tsx b/src/pages/forms.tsx
index 23c29db..d763fd4 100644
--- a/src/pages/forms.tsx
+++ b/src/pages/forms.tsx
@@ -1,6 +1,16 @@
 import React, { useState } from "react";
 import { motion } from "framer-motion";
-import { AlertCircle, CheckCircle, FileText, Save } from "lucide-react";
+import {
+  AlertCircle,
+  CheckCircle,
+  FileText,
+  Mail,
+  MessageSquare,
+  RotateCcw,
+  Save,
+  Send,
+  User,
+} from "lucide-react";
 import { Layout } from "@/components/layout";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,11 +34,25 @@ import {
 } from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/hooks/use-toast";
 
 export default function Forms() {
-  const [formData, setFormData] = useState({
+  // Simple form state
+  const [simpleForm, setSimpleForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    message: "",
+  });
+  const [submittedData, setSubmittedData] = useState<typeof simpleForm | null>(
+    null,
+  );
+  const [submitCount, setSubmitCount] = useState(0);
+
+  // Complex form state
+  const [complexForm, setComplexForm] = useState({
     username: "",
     email: "",
     password: "",
@@ -41,49 +65,64 @@ export default function Forms() {
     newsletter: false,
     privacy: false,
   });
-
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const [submitted, setSubmitted] = useState(false);
+  const [complexSubmitted, setComplexSubmitted] = useState(false);
+
+  // Simple form handlers
+  const handleSimpleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmittedData({ ...simpleForm });
+    setSubmitCount((count) => count + 1);
+    toast({
+      title: "Simple form submitted!",
+      description: "Check the submission details below.",
+    });
+  };
 
-  const validateForm = () => {
+  const handleSimpleReset = () => {
+    setSimpleForm({
+      firstName: "",
+      lastName: "",
+      email: "",
+      message: "",
+    });
+    setSubmittedData(null);
+    setSubmitCount(0);
+  };
+
+  // Complex form handlers
+  const validateComplexForm = () => {
     const newErrors: Record<string, string> = {};
 
-    if (!formData.username) newErrors.username = "Username is required";
-    if (!formData.email) newErrors.email = "Email is required";
-    else if (!/\S+@\S+\.\S+/.test(formData.email))
-      newErrors.email = "Email is invalid";
-    if (!formData.password) newErrors.password = "Password is required";
-    else if (formData.password.length < 6)
-      newErrors.password = "Password must be at least 6 characters";
-    if (!formData.country) newErrors.country = "Please select a country";
-    if (!formData.terms) newErrors.terms = "You must accept the terms";
+    if (!complexForm.username) newErrors.username = "Username is required";
+    if (!complexForm.email) newErrors.email = "Email is required";
+    if (!complexForm.password) newErrors.password = "Password is required";
+    if (!complexForm.country) newErrors.country = "Please select a country";
+    if (!complexForm.terms) newErrors.terms = "You must accept the terms";
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleComplexSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-
-    if (validateForm()) {
-      setSubmitted(true);
+    if (validateComplexForm()) {
+      setComplexSubmitted(true);
       toast({
-        title: "Form Submitted Successfully!",
-        description:
-          "Your form has been submitted with all validations passed.",
+        title: "Complex form submitted successfully!",
+        description: "All validations passed.",
       });
-      console.log("Form Data:", formData);
     } else {
       toast({
-        title: "Validation Failed",
-        description: "Please fix the errors in the form.",
+        title: "Validation failed",
+        description: "Please fix the errors and try again.",
         variant: "destructive",
       });
     }
   };
 
-  const handleReset = () => {
-    setFormData({
+  const handleComplexReset = () => {
+    setComplexForm({
       username: "",
       email: "",
       password: "",
@@ -97,340 +136,524 @@ export default function Forms() {
       privacy: false,
     });
     setErrors({});
-    setSubmitted(false);
+    setComplexSubmitted(false);
+  };
+
+  const pageVariants = {
+    initial: { opacity: 0, y: 20 },
+    in: { opacity: 1, y: 0 },
+    out: { opacity: 0, y: -20 },
   };
 
   return (
     <Layout>
-      <div className="container mx-auto max-w-4xl px-4 py-8">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <div className="mb-8">
+      <motion.div
+        initial="initial"
+        animate="in"
+        exit="out"
+        variants={pageVariants}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="container mx-auto py-8">
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="mb-8"
+          >
             <h1 className="gradient-text mb-4 text-4xl font-bold">
-              Form Elements Test
+              Form Examples
             </h1>
             <p className="text-muted-foreground text-lg">
-              Comprehensive form with all input types and validation
+              Test various form implementations from simple to complex
             </p>
-          </div>
+          </motion.div>
 
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <FileText className="h-5 w-5" />
-                  Basic Information
-                </CardTitle>
-                <CardDescription>
-                  Enter your basic account information
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="username">Username *</Label>
-                  <Input
-                    id="username"
-                    name="username"
-                    placeholder="Enter your username"
-                    value={formData.username}
-                    onChange={(e) =>
-                      setFormData({ ...formData, username: e.target.value })
-                    }
-                    className={errors.username ? "border-destructive" : ""}
-                  />
-                  {errors.username && (
-                    <p className="text-destructive flex items-center gap-1 text-sm">
-                      <AlertCircle className="h-3 w-3" />
-                      {errors.username}
-                    </p>
-                  )}
-                </div>
+          <Tabs defaultValue="simple" className="space-y-4">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="simple">Simple Form</TabsTrigger>
+              <TabsTrigger value="complex">Complex Form</TabsTrigger>
+            </TabsList>
 
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email *</Label>
-                  <Input
-                    id="email"
-                    name="email"
-                    type="email"
-                    placeholder="your@email.com"
-                    value={formData.email}
-                    onChange={(e) =>
-                      setFormData({ ...formData, email: e.target.value })
-                    }
-                    className={errors.email ? "border-destructive" : ""}
-                  />
-                  {errors.email && (
-                    <p className="text-destructive flex items-center gap-1 text-sm">
-                      <AlertCircle className="h-3 w-3" />
-                      {errors.email}
-                    </p>
-                  )}
-                </div>
+            <TabsContent value="simple">
+              <div className="grid gap-6 md:grid-cols-2">
+                {/* Simple Form */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <FileText className="h-5 w-5" />
+                      Contact Form
+                    </CardTitle>
+                    <CardDescription>
+                      A simple form with basic validation and submission
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <form
+                      id="simple-form"
+                      onSubmit={handleSimpleSubmit}
+                      className="space-y-4"
+                    >
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor="firstName">
+                            <User className="mr-1 inline h-4 w-4" />
+                            First Name
+                          </Label>
+                          <Input
+                            id="firstName"
+                            value={simpleForm.firstName}
+                            onChange={(e) =>
+                              setSimpleForm({
+                                ...simpleForm,
+                                firstName: e.target.value,
+                              })
+                            }
+                            placeholder="John"
+                            required
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="lastName">Last Name</Label>
+                          <Input
+                            id="lastName"
+                            value={simpleForm.lastName}
+                            onChange={(e) =>
+                              setSimpleForm({
+                                ...simpleForm,
+                                lastName: e.target.value,
+                              })
+                            }
+                            placeholder="Doe"
+                            required
+                          />
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="email">
+                          <Mail className="mr-1 inline h-4 w-4" />
+                          Email
+                        </Label>
+                        <Input
+                          id="email"
+                          type="email"
+                          value={simpleForm.email}
+                          onChange={(e) =>
+                            setSimpleForm({
+                              ...simpleForm,
+                              email: e.target.value,
+                            })
+                          }
+                          placeholder="john.doe@example.com"
+                          required
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="message">
+                          <MessageSquare className="mr-1 inline h-4 w-4" />
+                          Message
+                        </Label>
+                        <Textarea
+                          id="message"
+                          value={simpleForm.message}
+                          onChange={(e) =>
+                            setSimpleForm({
+                              ...simpleForm,
+                              message: e.target.value,
+                            })
+                          }
+                          placeholder="Enter your message here..."
+                          rows={4}
+                          required
+                        />
+                      </div>
+                      <div className="flex gap-2">
+                        <Button type="submit" className="flex-1">
+                          <Send className="mr-2 h-4 w-4" />
+                          Submit Form
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={handleSimpleReset}
+                        >
+                          <RotateCcw className="mr-2 h-4 w-4" />
+                          Reset
+                        </Button>
+                      </div>
+                    </form>
+                  </CardContent>
+                </Card>
 
-                <div className="space-y-2">
-                  <Label htmlFor="password">Password *</Label>
-                  <Input
-                    id="password"
-                    name="password"
-                    type="password"
-                    placeholder="Enter your password"
-                    value={formData.password}
-                    onChange={(e) =>
-                      setFormData({ ...formData, password: e.target.value })
-                    }
-                    className={errors.password ? "border-destructive" : ""}
-                  />
-                  {errors.password && (
-                    <p className="text-destructive flex items-center gap-1 text-sm">
-                      <AlertCircle className="h-3 w-3" />
-                      {errors.password}
-                    </p>
-                  )}
-                </div>
+                {/* Submission Details */}
+                <div className="space-y-4">
+                  <Card id="submission-result">
+                    <CardHeader>
+                      <CardTitle className="flex items-center gap-2">
+                        <CheckCircle className="h-5 w-5 text-green-500" />
+                        Submission Details
+                      </CardTitle>
+                      <CardDescription>
+                        Form data after submission
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      {submittedData ? (
+                        <div className="space-y-3">
+                          {Object.entries(submittedData).map(([key, value]) => (
+                            <div key={key} className="flex justify-between">
+                              <span className="text-muted-foreground capitalize">
+                                {key.replace(/([A-Z])/g, " $1").trim()}:
+                              </span>
+                              <span className="font-medium">{value || "N/A"}</span>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-muted-foreground text-center py-8">
+                          No data submitted yet
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
 
-                <div className="space-y-2">
-                  <Label htmlFor="bio">Bio</Label>
-                  <Textarea
-                    id="bio"
-                    name="bio"
-                    placeholder="Tell us about yourself..."
-                    value={formData.bio}
-                    onChange={(e) =>
-                      setFormData({ ...formData, bio: e.target.value })
-                    }
-                    className="min-h-[100px]"
-                  />
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Form Statistics</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="flex items-center justify-between">
+                        <span>Submit Count:</span>
+                        <Badge variant="secondary" className="text-lg">
+                          {submitCount}
+                        </Badge>
+                      </div>
+                    </CardContent>
+                  </Card>
                 </div>
-              </CardContent>
-            </Card>
+              </div>
+            </TabsContent>
 
-            <Card>
-              <CardHeader>
-                <CardTitle>Preferences</CardTitle>
-                <CardDescription>Customize your experience</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                <div className="space-y-2">
-                  <Label htmlFor="country">Country *</Label>
-                  <Select
-                    value={formData.country}
-                    onValueChange={(value) =>
-                      setFormData({ ...formData, country: value })
-                    }
-                  >
-                    <SelectTrigger
-                      id="country"
-                      className={errors.country ? "border-destructive" : ""}
+            <TabsContent value="complex">
+              <div className="grid gap-6 lg:grid-cols-2">
+                {/* Complex Form */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <FileText className="h-5 w-5" />
+                      Advanced Form
+                    </CardTitle>
+                    <CardDescription>
+                      Complex form with various input types and validation
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <form
+                      id="complex-form"
+                      onSubmit={handleComplexSubmit}
+                      className="space-y-6"
                     >
-                      <SelectValue placeholder="Select your country" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="us">United States</SelectItem>
-                      <SelectItem value="uk">United Kingdom</SelectItem>
-                      <SelectItem value="ca">Canada</SelectItem>
-                      <SelectItem value="au">Australia</SelectItem>
-                      <SelectItem value="de">Germany</SelectItem>
-                      <SelectItem value="fr">France</SelectItem>
-                      <SelectItem value="jp">Japan</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  {errors.country && (
-                    <p className="text-destructive flex items-center gap-1 text-sm">
-                      <AlertCircle className="h-3 w-3" />
-                      {errors.country}
-                    </p>
-                  )}
-                </div>
+                      {/* Text Inputs */}
+                      <div className="space-y-4">
+                        <div className="space-y-2">
+                          <Label htmlFor="username">Username</Label>
+                          <Input
+                            id="username"
+                            value={complexForm.username}
+                            onChange={(e) =>
+                              setComplexForm({
+                                ...complexForm,
+                                username: e.target.value,
+                              })
+                            }
+                            className={errors.username ? "border-red-500" : ""}
+                          />
+                          {errors.username && (
+                            <p className="text-sm text-red-500">{errors.username}</p>
+                          )}
+                        </div>
 
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="notifications">Email Notifications</Label>
-                    <p className="text-muted-foreground text-sm">
-                      Receive emails about your account activity
-                    </p>
-                  </div>
-                  <Switch
-                    id="notifications"
-                    checked={formData.notifications}
-                    onCheckedChange={(checked) =>
-                      setFormData({ ...formData, notifications: checked })
-                    }
-                  />
-                </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="complex-email">Email</Label>
+                          <Input
+                            id="complex-email"
+                            type="email"
+                            value={complexForm.email}
+                            onChange={(e) =>
+                              setComplexForm({
+                                ...complexForm,
+                                email: e.target.value,
+                              })
+                            }
+                            className={errors.email ? "border-red-500" : ""}
+                          />
+                          {errors.email && (
+                            <p className="text-sm text-red-500">{errors.email}</p>
+                          )}
+                        </div>
 
-                <div className="space-y-2">
-                  <Label>Theme Preference</Label>
-                  <RadioGroup
-                    value={formData.theme}
-                    onValueChange={(value) =>
-                      setFormData({ ...formData, theme: value })
-                    }
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="light" id="light" />
-                      <Label htmlFor="light">Light</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="dark" id="dark" />
-                      <Label htmlFor="dark">Dark</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="system" id="system" />
-                      <Label htmlFor="system">System</Label>
-                    </div>
-                  </RadioGroup>
-                </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="password">Password</Label>
+                          <Input
+                            id="password"
+                            type="password"
+                            value={complexForm.password}
+                            onChange={(e) =>
+                              setComplexForm({
+                                ...complexForm,
+                                password: e.target.value,
+                              })
+                            }
+                            className={errors.password ? "border-red-500" : ""}
+                          />
+                          {errors.password && (
+                            <p className="text-sm text-red-500">{errors.password}</p>
+                          )}
+                        </div>
+                      </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="volume">
-                    Volume Level: {formData.volume[0]}%
-                  </Label>
-                  <Slider
-                    id="volume"
-                    min={0}
-                    max={100}
-                    step={1}
-                    value={formData.volume}
-                    onValueChange={(value) =>
-                      setFormData({ ...formData, volume: value })
-                    }
-                    className="w-full"
-                  />
-                </div>
-              </CardContent>
-            </Card>
+                      {/* Textarea */}
+                      <div className="space-y-2">
+                        <Label htmlFor="bio">Bio</Label>
+                        <Textarea
+                          id="bio"
+                          value={complexForm.bio}
+                          onChange={(e) =>
+                            setComplexForm({
+                              ...complexForm,
+                              bio: e.target.value,
+                            })
+                          }
+                          placeholder="Tell us about yourself..."
+                          rows={3}
+                        />
+                      </div>
 
-            <Card>
-              <CardHeader>
-                <CardTitle>Legal Agreements</CardTitle>
-                <CardDescription>
-                  Please review and accept our terms
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="terms"
-                    checked={formData.terms}
-                    onCheckedChange={(checked) =>
-                      setFormData({ ...formData, terms: checked as boolean })
-                    }
-                  />
-                  <Label
-                    htmlFor="terms"
-                    className={`text-sm font-normal ${errors.terms ? "text-destructive" : ""}`}
-                  >
-                    I accept the terms and conditions *
-                  </Label>
-                </div>
+                      {/* Select */}
+                      <div className="space-y-2">
+                        <Label htmlFor="country">Country</Label>
+                        <Select
+                          value={complexForm.country}
+                          onValueChange={(value) =>
+                            setComplexForm({ ...complexForm, country: value })
+                          }
+                        >
+                          <SelectTrigger
+                            id="country"
+                            className={errors.country ? "border-red-500" : ""}
+                          >
+                            <SelectValue placeholder="Select a country" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="us">United States</SelectItem>
+                            <SelectItem value="uk">United Kingdom</SelectItem>
+                            <SelectItem value="ca">Canada</SelectItem>
+                            <SelectItem value="au">Australia</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.country && (
+                          <p className="text-sm text-red-500">{errors.country}</p>
+                        )}
+                      </div>
 
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="newsletter"
-                    checked={formData.newsletter}
-                    onCheckedChange={(checked) =>
-                      setFormData({
-                        ...formData,
-                        newsletter: checked as boolean,
-                      })
-                    }
-                  />
-                  <Label htmlFor="newsletter" className="text-sm font-normal">
-                    Subscribe to our newsletter
-                  </Label>
-                </div>
+                      {/* Switch */}
+                      <div className="flex items-center justify-between">
+                        <Label htmlFor="notifications">Email Notifications</Label>
+                        <Switch
+                          id="notifications"
+                          checked={complexForm.notifications}
+                          onCheckedChange={(checked) =>
+                            setComplexForm({
+                              ...complexForm,
+                              notifications: checked,
+                            })
+                          }
+                        />
+                      </div>
 
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="privacy"
-                    checked={formData.privacy}
-                    onCheckedChange={(checked) =>
-                      setFormData({ ...formData, privacy: checked as boolean })
-                    }
-                  />
-                  <Label htmlFor="privacy" className="text-sm font-normal">
-                    I have read the privacy policy
-                  </Label>
-                </div>
-              </CardContent>
-            </Card>
+                      {/* Radio Group */}
+                      <div className="space-y-2">
+                        <Label>Theme Preference</Label>
+                        <RadioGroup
+                          value={complexForm.theme}
+                          onValueChange={(value) =>
+                            setComplexForm({ ...complexForm, theme: value })
+                          }
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="light" id="light" />
+                            <Label htmlFor="light">Light</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="dark" id="dark" />
+                            <Label htmlFor="dark">Dark</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="system" id="system" />
+                            <Label htmlFor="system">System</Label>
+                          </div>
+                        </RadioGroup>
+                      </div>
 
-            <Card>
-              <CardContent className="pt-6">
-                <div className="flex gap-4">
-                  <Button type="submit" size="lg" className="flex-1">
-                    <Save className="mr-2 h-4 w-4" />
-                    Submit Form
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="lg"
-                    onClick={handleReset}
-                  >
-                    Reset
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </form>
+                      {/* Slider */}
+                      <div className="space-y-2">
+                        <Label>
+                          Volume: {complexForm.volume[0]}%
+                        </Label>
+                        <Slider
+                          value={complexForm.volume}
+                          onValueChange={(value) =>
+                            setComplexForm({ ...complexForm, volume: value })
+                          }
+                          max={100}
+                          step={1}
+                        />
+                      </div>
+
+                      {/* Checkboxes */}
+                      <div className="space-y-4">
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="terms"
+                            checked={complexForm.terms}
+                            onCheckedChange={(checked) =>
+                              setComplexForm({
+                                ...complexForm,
+                                terms: checked as boolean,
+                              })
+                            }
+                          />
+                          <Label
+                            htmlFor="terms"
+                            className={errors.terms ? "text-red-500" : ""}
+                          >
+                            I accept the terms and conditions
+                          </Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="newsletter"
+                            checked={complexForm.newsletter}
+                            onCheckedChange={(checked) =>
+                              setComplexForm({
+                                ...complexForm,
+                                newsletter: checked as boolean,
+                              })
+                            }
+                          />
+                          <Label htmlFor="newsletter">
+                            Subscribe to newsletter
+                          </Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="privacy"
+                            checked={complexForm.privacy}
+                            onCheckedChange={(checked) =>
+                              setComplexForm({
+                                ...complexForm,
+                                privacy: checked as boolean,
+                              })
+                            }
+                          />
+                          <Label htmlFor="privacy">
+                            I agree to the privacy policy
+                          </Label>
+                        </div>
+                      </div>
+
+                      {/* Submit Buttons */}
+                      <div className="flex gap-2">
+                        <Button type="submit" className="flex-1">
+                          <Save className="mr-2 h-4 w-4" />
+                          Submit Form
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={handleComplexReset}
+                        >
+                          <RotateCcw className="mr-2 h-4 w-4" />
+                          Reset
+                        </Button>
+                      </div>
+                    </form>
+                  </CardContent>
+                </Card>
 
-          {submitted && (
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="mt-6"
-            >
-              <Card className="border-green-500">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-green-600">
-                    <CheckCircle className="h-5 w-5" />
-                    Form Submitted Successfully!
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-muted-foreground mb-4 text-sm">
-                    Here&apos;s what was submitted:
-                  </p>
-                  <div className="space-y-2 text-sm">
-                    <div className="flex gap-2">
-                      <span className="font-medium">Username:</span>
-                      <Badge variant="secondary">{formData.username}</Badge>
-                    </div>
-                    <div className="flex gap-2">
-                      <span className="font-medium">Email:</span>
-                      <Badge variant="secondary">{formData.email}</Badge>
-                    </div>
-                    <div className="flex gap-2">
-                      <span className="font-medium">Country:</span>
-                      <Badge variant="secondary">{formData.country}</Badge>
-                    </div>
-                    <div className="flex gap-2">
-                      <span className="font-medium">Theme:</span>
-                      <Badge variant="secondary">{formData.theme}</Badge>
-                    </div>
-                    <div className="flex gap-2">
-                      <span className="font-medium">Notifications:</span>
-                      <Badge
-                        variant={formData.notifications ? "default" : "outline"}
-                      >
-                        {formData.notifications ? "Enabled" : "Disabled"}
-                      </Badge>
-                    </div>
-                    <div className="flex gap-2">
-                      <span className="font-medium">Volume:</span>
-                      <Badge variant="secondary">{formData.volume[0]}%</Badge>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          )}
-        </motion.div>
-      </div>
+                {/* Status Card */}
+                <div className="space-y-4">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Form Status</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <span>Validation Errors:</span>
+                          <Badge
+                            variant={
+                              Object.keys(errors).length > 0
+                                ? "destructive"
+                                : "secondary"
+                            }
+                          >
+                            {Object.keys(errors).length}
+                          </Badge>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <span>Form Status:</span>
+                          <Badge
+                            variant={complexSubmitted ? "success" : "secondary"}
+                          >
+                            {complexSubmitted ? "Submitted" : "Not Submitted"}
+                          </Badge>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Validation Summary */}
+                  {Object.keys(errors).length > 0 && (
+                    <Card>
+                      <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                          <AlertCircle className="h-5 w-5 text-red-500" />
+                          Validation Errors
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <ul className="space-y-2">
+                          {Object.entries(errors).map(([field, error]) => (
+                            <li key={field} className="text-sm text-red-500">
+                              • {error}
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+                  )}
+
+                  {/* Success Message */}
+                  {complexSubmitted && (
+                    <Card>
+                      <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                          <CheckCircle className="h-5 w-5 text-green-500" />
+                          Success!
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p>Form submitted successfully with all data valid.</p>
+                      </CardContent>
+                    </Card>
+                  )}
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </motion.div>
     </Layout>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/hover.tsx b/src/pages/hover.tsx
index b8e2be9..48d273d 100644
--- a/src/pages/hover.tsx
+++ b/src/pages/hover.tsx
@@ -147,10 +147,10 @@ export default function Hover() {
                   onMouseMove={handleMouseMove}
                   onMouseEnter={() => setHoveredItem("tracker")}
                   onMouseLeave={() => setHoveredItem(null)}
-                  className="relative h-48 w-full overflow-hidden rounded-lg border-2 border-gray-300 bg-gray-100"
+                  className="relative h-48 w-full overflow-hidden rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800"
                 >
                   <div className="p-5">
-                    <p className="mb-2 text-sm text-gray-700">
+                    <p className="mb-2 text-sm text-gray-700 dark:text-gray-300">
                       Move your mouse here
                     </p>
                     <Badge variant="outline">
@@ -248,8 +248,8 @@ export default function Hover() {
                     onMouseLeave={() => setCardHovered(null)}
                     className={`cursor-pointer rounded-xl border-2 p-6 transition-all duration-300 ${
                       cardHovered === num
-                        ? "border-green-400 bg-green-50 shadow-lg"
-                        : "border-gray-200 bg-white hover:shadow-md"
+                        ? "border-green-400 bg-green-50 dark:bg-green-950/50 shadow-lg"
+                        : "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:shadow-md"
                     }`}
                   >
                     <h3 className="mb-2 text-lg font-semibold">Card {num}</h3>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f101126..bfb441e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,10 +10,11 @@ import {
   FileText,
   Focus,
   Menu,
+  MessageSquare,
   MousePointer,
   Navigation,
+  Quote,
   ScrollText,
-  Search,
   Settings,
   Sliders,
   Sparkles,
@@ -52,8 +53,8 @@ const testCategories = [
         color: "bg-blue-500",
       },
       {
-        href: "/form-submit",
-        label: "Form Submit",
+        href: "/forms",
+        label: "Forms",
         icon: FileInput,
         color: "bg-green-500",
       },
@@ -112,16 +113,16 @@ const testCategories = [
         color: "bg-cyan-500",
       },
       {
-        href: "/navigation",
-        label: "Navigation",
+        href: "/navigation-search",
+        label: "Navigation & Search",
         icon: Navigation,
         color: "bg-emerald-500",
       },
       {
-        href: "/search",
-        label: "Search",
-        icon: Search,
-        color: "bg-violet-500",
+        href: "/interactive",
+        label: "Interactive",
+        icon: MessageSquare,
+        color: "bg-amber-500",
       },
     ],
   },
@@ -186,7 +187,7 @@ export default function Home() {
           </motion.div>
           <div className="mx-auto mt-8 max-w-2xl text-center">
             <p className="text-foreground/80 mb-3 text-2xl font-medium">
-              Introducing Betsey (bTc) — Between the Clicks
+              Introducing Betsey (bTc) — <span className="dark:text-white/90 text-black/80 font-bold">B</span>etween <span className="dark:text-white/90 text-black/80 font-bold">T</span>he <span className="dark:text-white/90 text-black/80 font-bold">C</span>licks
             </p>
             <p className="text-muted-foreground text-xl">
               MCP Automation with Vision and Control.
@@ -259,6 +260,29 @@ export default function Home() {
           ))}
         </div>
 
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          className="my-12 flex justify-center"
+        >
+          <Card className="glass w-[30%]">
+            <CardContent className="pt-6">
+              <div className="flex items-start gap-4">
+                <Quote className="h-12 w-12 text-muted-foreground/50 flex-shrink-0" />
+                <div>
+                  <p className="text-muted-foreground text-2xl italic">
+                    We created Betsey (bTc) not only to train our ehAye™ Engine Vision & Control, but because Betsey needs to exist.
+                  </p>
+                  <p className="text-muted-foreground/80 text-sm mt-4">
+                    — Val Neekman @ Neekware Inc.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
diff --git a/src/pages/interactions.tsx b/src/pages/interactive.tsx
similarity index 100%
rename from src/pages/interactions.tsx
rename to src/pages/interactive.tsx
diff --git a/src/pages/navigation-search.tsx b/src/pages/navigation-search.tsx
new file mode 100644
index 0000000..3bfa912
--- /dev/null
+++ b/src/pages/navigation-search.tsx
@@ -0,0 +1,494 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { motion } from "framer-motion";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Clock,
+  ExternalLink,
+  Hash,
+  Home,
+  RotateCcw,
+  Search as SearchIcon,
+  X,
+} from "lucide-react";
+import { Layout } from "@/components/layout";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function NavigationSearch() {
+  // Navigation state
+  const [visitCount, setVisitCount] = useState(1);
+  const router = useRouter();
+
+  // Search state
+  const [searchQuery, setSearchQuery] = useState("");
+  const [instantQuery, setInstantQuery] = useState("");
+  const [urlQuery, setUrlQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<string[]>([]);
+  const [instantResults, setInstantResults] = useState<string[]>([]);
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+
+  const mockData = [
+    "Apple iPhone 15 Pro",
+    "Samsung Galaxy S24",
+    "Google Pixel 8",
+    "MacBook Pro M3",
+    "Dell XPS 15",
+    "iPad Air",
+    "Microsoft Surface",
+    "Sony PlayStation 5",
+    "Xbox Series X",
+    "Nintendo Switch",
+  ];
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const results = mockData.filter((item) =>
+      item.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+    setSearchResults(results);
+
+    if (searchQuery.trim() && !searchHistory.includes(searchQuery)) {
+      setSearchHistory((prev) => [searchQuery, ...prev.slice(0, 4)]);
+    }
+  };
+
+  const handleInstantSearch = (query: string) => {
+    setInstantQuery(query);
+    if (query.trim()) {
+      const results = mockData.filter((item) =>
+        item.toLowerCase().includes(query.toLowerCase()),
+      );
+      setInstantResults(results);
+    } else {
+      setInstantResults([]);
+    }
+  };
+
+  const handleUrlSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (urlQuery.trim()) {
+      window.location.href = `/navigation-search?q=${encodeURIComponent(urlQuery)}`;
+    }
+  };
+
+  const clearHistory = () => {
+    setSearchHistory([]);
+  };
+
+  return (
+    <Layout>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="container mx-auto px-4 py-8">
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="mb-8"
+          >
+            <h1 className="gradient-text mb-4 text-4xl font-bold">
+              Navigation & Search
+            </h1>
+            <p className="text-muted-foreground text-lg">
+              Test navigation methods and search functionality
+            </p>
+            <Badge variant="outline" className="mt-2">
+              Page visits: {visitCount}
+            </Badge>
+          </motion.div>
+
+          <Tabs defaultValue="navigation" className="space-y-4">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="navigation">Navigation</TabsTrigger>
+              <TabsTrigger value="search">Search</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="navigation">
+              <div className="grid gap-6 md:grid-cols-2">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <ExternalLink className="h-5 w-5" />
+                      Links Navigation
+                    </CardTitle>
+                    <CardDescription>
+                      Navigation using Next.js Link components
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Link
+                        href="/"
+                        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        <Home className="h-4 w-4" />
+                        Home
+                      </Link>
+                      <Link
+                        href="/forms"
+                        className="bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        Forms
+                      </Link>
+                      <Link
+                        href="/interactive"
+                        className="bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        Interactive
+                      </Link>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Programmatic Navigation</CardTitle>
+                    <CardDescription>
+                      Navigation using the Next.js router
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Button
+                        onClick={() => router.push("/")}
+                        className="flex items-center gap-2"
+                      >
+                        <Home className="h-4 w-4" />
+                        Go to Home
+                      </Button>
+                      <Button
+                        onClick={() => router.back()}
+                        variant="outline"
+                        className="flex items-center gap-2"
+                      >
+                        <ArrowLeft className="h-4 w-4" />
+                        Go Back
+                      </Button>
+                      <Button
+                        onClick={() => router.forward()}
+                        variant="outline"
+                        className="flex items-center gap-2"
+                      >
+                        <ArrowRight className="h-4 w-4" />
+                        Go Forward
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Hash className="h-5 w-5" />
+                      Hash Navigation
+                    </CardTitle>
+                    <CardDescription>
+                      Navigate to sections within the page
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <a
+                        href="#section1"
+                        className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        Section 1
+                      </a>
+                      <a
+                        href="#section2"
+                        className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        Section 2
+                      </a>
+                      <a
+                        href="#section3"
+                        className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
+                      >
+                        Section 3
+                      </a>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <RotateCcw className="h-5 w-5" />
+                      Reload Test
+                    </CardTitle>
+                    <CardDescription>
+                      Test page reload functionality
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Button
+                      onClick={() => {
+                        setVisitCount((count) => count + 1);
+                        window.location.reload();
+                      }}
+                      variant="destructive"
+                      className="flex items-center gap-2"
+                    >
+                      <RotateCcw className="h-4 w-4" />
+                      Reload Page
+                    </Button>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <div className="mt-8 space-y-8">
+                <Card id="section1" className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950">
+                  <CardHeader>
+                    <CardTitle className="text-blue-800 dark:text-blue-200">Section 1</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-blue-700 dark:text-blue-300">
+                      This is section 1 content. You can navigate here using the
+                      hash navigation buttons above.
+                    </p>
+                  </CardContent>
+                </Card>
+
+                <Card id="section2" className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950">
+                  <CardHeader>
+                    <CardTitle className="text-green-800 dark:text-green-200">Section 2</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-green-700 dark:text-green-300">
+                      This is section 2 content. Hash navigation allows smooth
+                      scrolling to specific page sections.
+                    </p>
+                  </CardContent>
+                </Card>
+
+                <Card id="section3" className="border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950">
+                  <CardHeader>
+                    <CardTitle className="text-purple-800 dark:text-purple-200">Section 3</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-purple-700 dark:text-purple-300">
+                      This is section 3 content, the final section in our navigation
+                      test page.
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="search">
+              <div className="grid gap-6 lg:grid-cols-2">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <SearchIcon className="h-5 w-5" />
+                      Standard Search
+                    </CardTitle>
+                    <CardDescription>
+                      Traditional form submit search
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <form
+                      id="search-form"
+                      onSubmit={handleSearch}
+                      className="space-y-4"
+                    >
+                      <div className="flex gap-2">
+                        <Input
+                          id="search-input"
+                          name="q"
+                          type="search"
+                          value={searchQuery}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                          placeholder="Search products..."
+                          className="flex-1"
+                        />
+                        <Button id="search-button" type="submit">
+                          Search
+                        </Button>
+                      </div>
+                    </form>
+                    {searchResults.length > 0 && (
+                      <div className="mt-4">
+                        <h4 className="mb-2 text-sm font-medium">Results:</h4>
+                        <div className="space-y-2">
+                          {searchResults.map((result, index) => (
+                            <motion.div
+                              key={index}
+                              initial={{ opacity: 0, x: -20 }}
+                              animate={{ opacity: 1, x: 0 }}
+                              transition={{ delay: index * 0.05 }}
+                            >
+                              <Badge
+                                variant="secondary"
+                                className="w-full justify-start"
+                              >
+                                {result}
+                              </Badge>
+                            </motion.div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Instant Search</CardTitle>
+                    <CardDescription>Real-time search as you type</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Input
+                      id="instant-search"
+                      type="search"
+                      placeholder="Type to search instantly..."
+                      value={instantQuery}
+                      onChange={(e) => handleInstantSearch(e.target.value)}
+                    />
+                    {instantResults.length > 0 && (
+                      <div className="mt-4">
+                        <h4 className="mb-2 text-sm font-medium">Live Results:</h4>
+                        <div className="space-y-2">
+                          {instantResults.map((result, index) => (
+                            <motion.div
+                              key={index}
+                              initial={{ opacity: 0, scale: 0.95 }}
+                              animate={{ opacity: 1, scale: 1 }}
+                              transition={{ duration: 0.2 }}
+                            >
+                              <Badge
+                                variant="outline"
+                                className="w-full justify-start"
+                              >
+                                {result}
+                              </Badge>
+                            </motion.div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {instantQuery && instantResults.length === 0 && (
+                      <p className="text-muted-foreground mt-4 text-sm">
+                        No results found
+                      </p>
+                    )}
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <ExternalLink className="h-5 w-5" />
+                      URL Parameter Search
+                    </CardTitle>
+                    <CardDescription>
+                      Search that updates browser URL
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <form onSubmit={handleUrlSearch} className="space-y-4">
+                      <div className="flex gap-2">
+                        <Input
+                          type="search"
+                          placeholder="Search and update URL..."
+                          value={urlQuery}
+                          onChange={(e) => setUrlQuery(e.target.value)}
+                          className="flex-1"
+                        />
+                        <Button type="submit">Search with URL</Button>
+                      </div>
+                    </form>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Clock className="h-5 w-5" />
+                      Search History
+                    </CardTitle>
+                    <CardDescription>Recently searched terms</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div id="search-history">
+                      {searchHistory.length > 0 ? (
+                        <div className="space-y-2">
+                          {searchHistory.map((query, index) => (
+                            <Button
+                              key={index}
+                              variant="ghost"
+                              size="sm"
+                              className="w-full justify-start"
+                              onClick={() => {
+                                setSearchQuery(query);
+                                handleInstantSearch(query);
+                              }}
+                            >
+                              <Clock className="mr-2 h-3 w-3" />
+                              {query}
+                            </Button>
+                          ))}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="w-full"
+                            onClick={clearHistory}
+                          >
+                            <X className="mr-2 h-3 w-3" />
+                            Clear History
+                          </Button>
+                        </div>
+                      ) : (
+                        <p className="text-muted-foreground text-sm">
+                          No search history
+                        </p>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <Card className="mt-6">
+                <CardHeader>
+                  <CardTitle>Search Results Summary</CardTitle>
+                  <CardDescription>
+                    Combined results from all search types
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div id="search-results" className="text-muted-foreground">
+                    {searchQuery || instantQuery ? (
+                      <p>
+                        Showing results for:{" "}
+                        <strong>{searchQuery || instantQuery}</strong>
+                      </p>
+                    ) : (
+                      <p>Enter a search query to see results</p>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </motion.div>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/navigation.tsx b/src/pages/navigation.tsx
deleted file mode 100644
index ab0e00c..0000000
--- a/src/pages/navigation.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { motion } from "framer-motion";
-import {
-  ArrowLeft,
-  ArrowRight,
-  ExternalLink,
-  Hash,
-  Home,
-  RotateCcw,
-} from "lucide-react";
-import { Layout } from "@/components/layout";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-export default function Navigation() {
-  const [visitCount, setVisitCount] = useState(1);
-  const router = useRouter();
-
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <div className="mb-8">
-            <h1 className="gradient-text mb-4 text-4xl font-bold">
-              Navigation Tests
-            </h1>
-            <p className="text-muted-foreground text-lg">
-              Test various navigation methods and routing
-            </p>
-            <Badge variant="outline" className="mt-2">
-              Page visits: {visitCount}
-            </Badge>
-          </div>
-
-          <div className="mb-8 grid gap-6 md:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <ExternalLink className="h-5 w-5" />
-                  Links Navigation
-                </CardTitle>
-                <CardDescription>
-                  Navigation using Next.js Link components
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex flex-wrap gap-3">
-                  <Link
-                    href="/"
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    <Home className="h-4 w-4" />
-                    Home
-                  </Link>
-                  <Link
-                    href="/forms"
-                    className="bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    Forms
-                  </Link>
-                  <Link
-                    href="/interactions"
-                    className="bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    Interactions
-                  </Link>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle>Programmatic Navigation</CardTitle>
-                <CardDescription>
-                  Navigation using the Next.js router
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    onClick={() => router.push("/")}
-                    className="flex items-center gap-2"
-                  >
-                    <Home className="h-4 w-4" />
-                    Go to Home
-                  </Button>
-                  <Button
-                    onClick={() => router.back()}
-                    variant="outline"
-                    className="flex items-center gap-2"
-                  >
-                    <ArrowLeft className="h-4 w-4" />
-                    Go Back
-                  </Button>
-                  <Button
-                    onClick={() => router.forward()}
-                    variant="outline"
-                    className="flex items-center gap-2"
-                  >
-                    <ArrowRight className="h-4 w-4" />
-                    Go Forward
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Hash className="h-5 w-5" />
-                  Hash Navigation
-                </CardTitle>
-                <CardDescription>
-                  Navigate to sections within the page
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex flex-wrap gap-3">
-                  <a
-                    href="#section1"
-                    className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    Section 1
-                  </a>
-                  <a
-                    href="#section2"
-                    className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    Section 2
-                  </a>
-                  <a
-                    href="#section3"
-                    className="bg-accent text-accent-foreground hover:bg-accent/90 inline-flex items-center gap-2 rounded-md px-3 py-2 transition-colors"
-                  >
-                    Section 3
-                  </a>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <RotateCcw className="h-5 w-5" />
-                  Reload Test
-                </CardTitle>
-                <CardDescription>
-                  Test page reload functionality
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button
-                  onClick={() => {
-                    setVisitCount((count) => count + 1);
-                    window.location.reload();
-                  }}
-                  variant="destructive"
-                  className="flex items-center gap-2"
-                >
-                  <RotateCcw className="h-4 w-4" />
-                  Reload Page
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="space-y-8">
-            <Card id="section1" className="border-blue-200 bg-blue-50">
-              <CardHeader>
-                <CardTitle className="text-blue-800">Section 1</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-blue-700">
-                  This is section 1 content. You can navigate here using the
-                  hash navigation buttons above.
-                </p>
-              </CardContent>
-            </Card>
-
-            <Card id="section2" className="border-green-200 bg-green-50">
-              <CardHeader>
-                <CardTitle className="text-green-800">Section 2</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-green-700">
-                  This is section 2 content. Hash navigation allows smooth
-                  scrolling to specific page sections.
-                </p>
-              </CardContent>
-            </Card>
-
-            <Card id="section3" className="border-purple-200 bg-purple-50">
-              <CardHeader>
-                <CardTitle className="text-purple-800">Section 3</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-purple-700">
-                  This is section 3 content, the final section in our navigation
-                  test page.
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-        </motion.div>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/scroll.tsx b/src/pages/scroll.tsx
index eb3572c..b24408e 100644
--- a/src/pages/scroll.tsx
+++ b/src/pages/scroll.tsx
@@ -86,7 +86,7 @@ export default function Scroll() {
           </div>
 
           {/* Fixed position scroll indicator */}
-          <Card className="fixed right-4 top-4 z-50 shadow-lg">
+          <Card className="fixed left-4 bottom-4 z-50 shadow-lg dark:bg-gray-900">
             <CardContent className="p-4">
               <div className="space-y-2 text-sm">
                 <div className="flex items-center justify-between">
@@ -199,25 +199,25 @@ export default function Scroll() {
 
           <Card
             id="section1"
-            className="mb-6 min-h-[600px] border-red-200 bg-red-50"
+            className="mb-6 min-h-[600px]"
           >
             <CardHeader>
-              <CardTitle className="text-red-800">
+              <CardTitle className="text-red-800 dark:text-red-200">
                 Section 1: Introduction
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <p className="text-red-700">
+              <p className="text-red-700 dark:text-red-300">
                 This is the first section. Scroll down to see more content.
               </p>
-              <p className="text-red-700">
+              <p className="text-red-700 dark:text-red-300">
                 The navigation buttons above will highlight as you scroll
                 through sections.
               </p>
               <Button
                 id="section1-next"
                 onClick={() => scrollToElement("section2")}
-                className="mt-4 bg-red-600 hover:bg-red-700"
+                className="mt-4"
               >
                 Go to Section 2 →
               </Button>
@@ -226,18 +226,18 @@ export default function Scroll() {
 
           <Card
             id="section2"
-            className="mb-6 min-h-[600px] border-blue-200 bg-blue-50"
+            className="mb-6 min-h-[600px]"
           >
             <CardHeader>
-              <CardTitle className="text-blue-800">
+              <CardTitle className="text-blue-800 dark:text-blue-200">
                 Section 2: Features
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <p className="text-blue-700">
+              <p className="text-blue-700 dark:text-blue-300">
                 This section demonstrates smooth scrolling between sections.
               </p>
-              <ul className="list-inside list-disc space-y-2 text-blue-700">
+              <ul className="list-inside list-disc space-y-2 text-blue-700 dark:text-blue-300">
                 <li>Smooth scroll animations</li>
                 <li>Scroll position tracking</li>
                 <li>Section visibility detection</li>
@@ -245,7 +245,7 @@ export default function Scroll() {
               </ul>
               <Button
                 onClick={() => scrollToElement("section3")}
-                className="mt-4 bg-blue-600 hover:bg-blue-700"
+                className="mt-4"
               >
                 Continue to Section 3 →
               </Button>
@@ -254,26 +254,26 @@ export default function Scroll() {
 
           <Card
             id="section3"
-            className="mb-6 min-h-[600px] border-green-200 bg-green-50"
+            className="mb-6 min-h-[600px]"
           >
             <CardHeader>
-              <CardTitle className="text-green-800">
+              <CardTitle className="text-green-800 dark:text-green-200">
                 Section 3: Horizontal Scroll
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <p className="text-green-700">
+              <p className="text-green-700 dark:text-green-300">
                 This section includes a horizontal scroll area:
               </p>
               <div
                 id="horizontal-scroll"
-                className="flex gap-5 overflow-x-auto rounded-lg border bg-white p-5"
+                className="flex gap-5 overflow-x-auto rounded-lg border bg-white dark:bg-gray-800 p-5"
               >
                 {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
                   <motion.div
                     key={num}
                     whileHover={{ scale: 1.05 }}
-                    className="flex h-36 min-w-[200px] flex-shrink-0 items-center justify-center rounded-lg text-2xl font-bold text-white"
+                    className="flex h-36 min-w-[200px] flex-shrink-0 items-center justify-center rounded-lg text-2xl font-bold text-white dark:brightness-50"
                     style={{ backgroundColor: `hsl(${num * 45}, 70%, 60%)` }}
                   >
                     Card {num}
@@ -285,16 +285,16 @@ export default function Scroll() {
 
           <Card
             id="section4"
-            className="mb-6 min-h-[600px] border-orange-200 bg-orange-50"
+            className="mb-6 min-h-[600px]"
           >
             <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-orange-800">
+              <CardTitle className="flex items-center gap-2 text-orange-800 dark:text-orange-200">
                 <Target className="h-5 w-5" />
                 Section 4: Scroll Into View
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <p className="text-orange-700">
+              <p className="text-orange-700 dark:text-orange-300">
                 Test the scrollIntoView functionality with different options:
               </p>
               <div className="flex flex-wrap gap-3">
@@ -335,40 +335,40 @@ export default function Scroll() {
                   Scroll to Hidden (Bottom)
                 </Button>
               </div>
-              <div className="mt-12 flex h-96 items-center justify-center rounded-lg bg-orange-100">
-                <p className="text-orange-600">Scroll area filler content...</p>
+              <div className="mt-12 flex h-96 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
+                <p className="text-orange-600 dark:text-orange-400">Scroll area filler content...</p>
               </div>
               <motion.div
                 id="hidden-element"
                 whileHover={{ scale: 1.02 }}
-                className="rounded-lg bg-green-500 p-5 text-center text-xl font-bold text-white"
+                className="rounded-lg bg-green-500 dark:bg-gray-800 p-5 text-center text-xl font-bold text-white dark:text-green-400"
               >
                 🎯 You found the hidden element!
               </motion.div>
-              <div className="flex h-96 items-center justify-center rounded-lg bg-orange-100">
-                <p className="text-orange-600">More filler content...</p>
+              <div className="flex h-96 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
+                <p className="text-orange-600 dark:text-orange-400">More filler content...</p>
               </div>
             </CardContent>
           </Card>
 
           <Card
             id="section5"
-            className="min-h-[600px] border-pink-200 bg-pink-50"
+            className="min-h-[600px]"
           >
             <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-pink-800">
+              <CardTitle className="flex items-center gap-2 text-pink-800 dark:text-pink-200">
                 <BarChart3 className="h-5 w-5" />
                 Section 5: Conclusion
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-6">
-              <p className="text-pink-700">
+              <p className="text-pink-700 dark:text-pink-300">
                 This is the final section. You&apos;ve reached the end of the
                 scroll test!
               </p>
 
               <div>
-                <h3 className="mb-3 text-lg font-semibold text-pink-800">
+                <h3 className="mb-3 text-lg font-semibold text-pink-800 dark:text-pink-200">
                   Quick Navigation
                 </h3>
                 <div className="flex gap-3">
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
deleted file mode 100644
index 992c8f2..0000000
--- a/src/pages/search.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import React, { useState } from "react";
-// import { useRouter } from 'next/router';
-import { motion } from "framer-motion";
-import { Clock, ExternalLink, Search as SearchIcon, X } from "lucide-react";
-import { Layout } from "@/components/layout";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-
-export default function Search() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [instantQuery, setInstantQuery] = useState("");
-  const [urlQuery, setUrlQuery] = useState("");
-  const [searchResults, setSearchResults] = useState<string[]>([]);
-  const [instantResults, setInstantResults] = useState<string[]>([]);
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-  // const router = useRouter();
-
-  const mockData = [
-    "Apple iPhone 15 Pro",
-    "Samsung Galaxy S24",
-    "Google Pixel 8",
-    "MacBook Pro M3",
-    "Dell XPS 15",
-    "iPad Air",
-    "Microsoft Surface",
-    "Sony PlayStation 5",
-    "Xbox Series X",
-    "Nintendo Switch",
-  ];
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const results = mockData.filter((item) =>
-      item.toLowerCase().includes(searchQuery.toLowerCase()),
-    );
-    setSearchResults(results);
-
-    if (searchQuery.trim() && !searchHistory.includes(searchQuery)) {
-      setSearchHistory((prev) => [searchQuery, ...prev.slice(0, 4)]);
-    }
-  };
-
-  const handleInstantSearch = (query: string) => {
-    setInstantQuery(query);
-    if (query.trim()) {
-      const results = mockData.filter((item) =>
-        item.toLowerCase().includes(query.toLowerCase()),
-      );
-      setInstantResults(results);
-    } else {
-      setInstantResults([]);
-    }
-  };
-
-  const handleUrlSearch = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (urlQuery.trim()) {
-      // router.push(`/search?q=${encodeURIComponent(urlQuery)}`);
-      window.location.href = `/search?q=${encodeURIComponent(urlQuery)}`;
-    }
-  };
-
-  const clearHistory = () => {
-    setSearchHistory([]);
-  };
-
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <div className="mb-8">
-            <h1 className="gradient-text mb-4 text-4xl font-bold">
-              Search Functionality Test
-            </h1>
-            <p className="text-muted-foreground text-lg">
-              Test various search implementations and behaviors
-            </p>
-          </div>
-
-          <div className="grid gap-6 lg:grid-cols-2">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <SearchIcon className="h-5 w-5" />
-                  Standard Search
-                </CardTitle>
-                <CardDescription>
-                  Traditional form submit search
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form
-                  id="search-form"
-                  onSubmit={handleSearch}
-                  className="space-y-4"
-                >
-                  <div className="flex gap-2">
-                    <Input
-                      id="search-input"
-                      name="q"
-                      type="search"
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      placeholder="Search products..."
-                      className="flex-1"
-                    />
-                    <Button id="search-button" type="submit">
-                      Search
-                    </Button>
-                  </div>
-                </form>
-                {searchResults.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="mb-2 text-sm font-medium">Results:</h4>
-                    <div className="space-y-2">
-                      {searchResults.map((result, index) => (
-                        <motion.div
-                          key={index}
-                          initial={{ opacity: 0, x: -20 }}
-                          animate={{ opacity: 1, x: 0 }}
-                          transition={{ delay: index * 0.05 }}
-                        >
-                          <Badge
-                            variant="secondary"
-                            className="w-full justify-start"
-                          >
-                            {result}
-                          </Badge>
-                        </motion.div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle>Instant Search</CardTitle>
-                <CardDescription>Real-time search as you type</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Input
-                  id="instant-search"
-                  type="search"
-                  placeholder="Type to search instantly..."
-                  value={instantQuery}
-                  onChange={(e) => handleInstantSearch(e.target.value)}
-                />
-                {instantResults.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="mb-2 text-sm font-medium">Live Results:</h4>
-                    <div className="space-y-2">
-                      {instantResults.map((result, index) => (
-                        <motion.div
-                          key={index}
-                          initial={{ opacity: 0, scale: 0.95 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          transition={{ duration: 0.2 }}
-                        >
-                          <Badge
-                            variant="outline"
-                            className="w-full justify-start"
-                          >
-                            {result}
-                          </Badge>
-                        </motion.div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                {instantQuery && instantResults.length === 0 && (
-                  <p className="text-muted-foreground mt-4 text-sm">
-                    No results found
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <ExternalLink className="h-5 w-5" />
-                  URL Parameter Search
-                </CardTitle>
-                <CardDescription>
-                  Search that updates browser URL
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form onSubmit={handleUrlSearch} className="space-y-4">
-                  <div className="flex gap-2">
-                    <Input
-                      type="search"
-                      placeholder="Search and update URL..."
-                      value={urlQuery}
-                      onChange={(e) => setUrlQuery(e.target.value)}
-                      className="flex-1"
-                    />
-                    <Button type="submit">Search with URL</Button>
-                  </div>
-                </form>
-                {/* {router.query.q && (
-                  <div className="bg-muted mt-4 rounded-lg p-3">
-                    <p className="text-sm">
-                      Current search from URL: <strong>{router.query.q}</strong>
-                    </p>
-                  </div>
-                )} */}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Clock className="h-5 w-5" />
-                  Search History
-                </CardTitle>
-                <CardDescription>Recently searched terms</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div id="search-history">
-                  {searchHistory.length > 0 ? (
-                    <div className="space-y-2">
-                      {searchHistory.map((query, index) => (
-                        <Button
-                          key={index}
-                          variant="ghost"
-                          size="sm"
-                          className="w-full justify-start"
-                          onClick={() => {
-                            setSearchQuery(query);
-                            handleInstantSearch(query);
-                          }}
-                        >
-                          <Clock className="mr-2 h-3 w-3" />
-                          {query}
-                        </Button>
-                      ))}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="w-full"
-                        onClick={clearHistory}
-                      >
-                        <X className="mr-2 h-3 w-3" />
-                        Clear History
-                      </Button>
-                    </div>
-                  ) : (
-                    <p className="text-muted-foreground text-sm">
-                      No search history
-                    </p>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <Card className="mt-6">
-            <CardHeader>
-              <CardTitle>Search Results Summary</CardTitle>
-              <CardDescription>
-                Combined results from all search types
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div id="search-results" className="text-muted-foreground">
-                {searchQuery || instantQuery ? (
-                  <p>
-                    Showing results for:{" "}
-                    <strong>{searchQuery || instantQuery}</strong>
-                  </p>
-                ) : (
-                  <p>Enter a search query to see results</p>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </motion.div>
-      </div>
-    </Layout>
-  );
-}

From 4e59600d8276d5bac22d85f2a147ac9c2f81bd15 Mon Sep 17 00:00:00 2001
From: Val Neekman <val@neekware.com>
Date: Fri, 5 Sep 2025 15:09:36 -0400
Subject: [PATCH 2/3] interactive

---
 src/pages/index.tsx  | 2 +-
 src/pages/scroll.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bfb441e..d9647f4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -266,7 +266,7 @@ export default function Home() {
           transition={{ duration: 0.5, delay: 0.4 }}
           className="my-12 flex justify-center"
         >
-          <Card className="glass w-[30%]">
+          <Card className="glass w-[90%] md:w-[35%] min-w-[400px]">
             <CardContent className="pt-6">
               <div className="flex items-start gap-4">
                 <Quote className="h-12 w-12 text-muted-foreground/50 flex-shrink-0" />
diff --git a/src/pages/scroll.tsx b/src/pages/scroll.tsx
index b24408e..769071a 100644
--- a/src/pages/scroll.tsx
+++ b/src/pages/scroll.tsx
@@ -91,7 +91,7 @@ export default function Scroll() {
               <div className="space-y-2 text-sm">
                 <div className="flex items-center justify-between">
                   <span className="font-medium">Scroll Y:</span>
-                  <Badge variant="outline">{scrollY}px</Badge>
+                  <Badge variant="outline">{scrollY.toFixed(0)}px</Badge>
                 </div>
                 <div className="flex items-center justify-between">
                   <span className="font-medium">Progress:</span>
@@ -395,7 +395,7 @@ export default function Scroll() {
                 </h3>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                   <div className="text-center">
-                    <p className="text-2xl font-bold">{scrollY}px</p>
+                    <p className="text-2xl font-bold">{scrollY.toFixed(0)}px</p>
                     <p className="text-muted-foreground text-sm">
                       Scroll Position
                     </p>

From b3dc288e01d2d0fc89f872c58db764792562b6f8 Mon Sep 17 00:00:00 2001
From: Val Neekman <val@neekware.com>
Date: Fri, 5 Sep 2025 15:19:37 -0400
Subject: [PATCH 3/3] fix: interactive dialogs now have working buttons and
 improved functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added state management to dialogs so buttons properly close them
- Fixed "success" badge variant TypeScript error by changing to "default"
- Enhanced upload functionality to show success feedback
- Modified download to create 100KB text file
- Changed "Open in New Tab" to open the about page
- Added quote card to about page above Get Started section
- Improved scroll position display with proper rounding
- Fixed dark mode styling issues across multiple components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/about.tsx             | 21 ++++++++++
 src/pages/forms.tsx             | 32 +++++++++------
 src/pages/index.tsx             | 17 +++++++-
 src/pages/interactive.tsx       | 69 ++++++++++++++++++++++++++++-----
 src/pages/navigation-search.tsx | 41 ++++++++++++++------
 src/pages/scroll.tsx            | 33 ++++++----------
 6 files changed, 158 insertions(+), 55 deletions(-)

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 4ce039d..8447e87 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -4,6 +4,7 @@ import {
   Brain,
   Code2,
   Eye,
+  Quote,
   Rocket,
   Settings,
   Sparkles,
@@ -301,6 +302,26 @@ export default function About() {
             </Card>
           </div>
 
+          <div className="mt-8 mb-8 flex justify-center">
+            <Card className="glass w-[90%] md:w-[35%] min-w-[400px]">
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-4">
+                  <Quote className="h-12 w-12 text-muted-foreground/50 flex-shrink-0" />
+                  <div>
+                    <p className="text-muted-foreground text-2xl italic">
+                      We created Betsey (bTc) not only to train our ehAye™
+                      Engine Vision & Control, but because Betsey needs to
+                      exist.
+                    </p>
+                    <p className="text-muted-foreground/80 text-sm mt-4">
+                      — Val Neekman @ Neekware Inc.
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
           <Card className="mt-8 border-2 border-green-500/20 bg-gradient-to-br from-green-50/20 to-emerald-50/20 shadow-2xl dark:from-green-950/10 dark:to-emerald-950/10">
             <CardHeader>
               <CardTitle className="flex items-center justify-center gap-3">
diff --git a/src/pages/forms.tsx b/src/pages/forms.tsx
index d763fd4..d4f26b4 100644
--- a/src/pages/forms.tsx
+++ b/src/pages/forms.tsx
@@ -305,7 +305,9 @@ export default function Forms() {
                               <span className="text-muted-foreground capitalize">
                                 {key.replace(/([A-Z])/g, " $1").trim()}:
                               </span>
-                              <span className="font-medium">{value || "N/A"}</span>
+                              <span className="font-medium">
+                                {value || "N/A"}
+                              </span>
                             </div>
                           ))}
                         </div>
@@ -369,7 +371,9 @@ export default function Forms() {
                             className={errors.username ? "border-red-500" : ""}
                           />
                           {errors.username && (
-                            <p className="text-sm text-red-500">{errors.username}</p>
+                            <p className="text-sm text-red-500">
+                              {errors.username}
+                            </p>
                           )}
                         </div>
 
@@ -388,7 +392,9 @@ export default function Forms() {
                             className={errors.email ? "border-red-500" : ""}
                           />
                           {errors.email && (
-                            <p className="text-sm text-red-500">{errors.email}</p>
+                            <p className="text-sm text-red-500">
+                              {errors.email}
+                            </p>
                           )}
                         </div>
 
@@ -407,7 +413,9 @@ export default function Forms() {
                             className={errors.password ? "border-red-500" : ""}
                           />
                           {errors.password && (
-                            <p className="text-sm text-red-500">{errors.password}</p>
+                            <p className="text-sm text-red-500">
+                              {errors.password}
+                            </p>
                           )}
                         </div>
                       </div>
@@ -452,13 +460,17 @@ export default function Forms() {
                           </SelectContent>
                         </Select>
                         {errors.country && (
-                          <p className="text-sm text-red-500">{errors.country}</p>
+                          <p className="text-sm text-red-500">
+                            {errors.country}
+                          </p>
                         )}
                       </div>
 
                       {/* Switch */}
                       <div className="flex items-center justify-between">
-                        <Label htmlFor="notifications">Email Notifications</Label>
+                        <Label htmlFor="notifications">
+                          Email Notifications
+                        </Label>
                         <Switch
                           id="notifications"
                           checked={complexForm.notifications}
@@ -497,9 +509,7 @@ export default function Forms() {
 
                       {/* Slider */}
                       <div className="space-y-2">
-                        <Label>
-                          Volume: {complexForm.volume[0]}%
-                        </Label>
+                        <Label>Volume: {complexForm.volume[0]}%</Label>
                         <Slider
                           value={complexForm.volume}
                           onValueChange={(value) =>
@@ -604,7 +614,7 @@ export default function Forms() {
                         <div className="flex items-center justify-between">
                           <span>Form Status:</span>
                           <Badge
-                            variant={complexSubmitted ? "success" : "secondary"}
+                            variant={complexSubmitted ? "default" : "secondary"}
                           >
                             {complexSubmitted ? "Submitted" : "Not Submitted"}
                           </Badge>
@@ -656,4 +666,4 @@ export default function Forms() {
       </motion.div>
     </Layout>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d9647f4..3515cc4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -187,7 +187,19 @@ export default function Home() {
           </motion.div>
           <div className="mx-auto mt-8 max-w-2xl text-center">
             <p className="text-foreground/80 mb-3 text-2xl font-medium">
-              Introducing Betsey (bTc) — <span className="dark:text-white/90 text-black/80 font-bold">B</span>etween <span className="dark:text-white/90 text-black/80 font-bold">T</span>he <span className="dark:text-white/90 text-black/80 font-bold">C</span>licks
+              Introducing Betsey (bTc) —{" "}
+              <span className="dark:text-white/90 text-black/80 font-bold">
+                B
+              </span>
+              etween{" "}
+              <span className="dark:text-white/90 text-black/80 font-bold">
+                T
+              </span>
+              he{" "}
+              <span className="dark:text-white/90 text-black/80 font-bold">
+                C
+              </span>
+              licks
             </p>
             <p className="text-muted-foreground text-xl">
               MCP Automation with Vision and Control.
@@ -272,7 +284,8 @@ export default function Home() {
                 <Quote className="h-12 w-12 text-muted-foreground/50 flex-shrink-0" />
                 <div>
                   <p className="text-muted-foreground text-2xl italic">
-                    We created Betsey (bTc) not only to train our ehAye™ Engine Vision & Control, but because Betsey needs to exist.
+                    We created Betsey (bTc) not only to train our ehAye™ Engine
+                    Vision & Control, but because Betsey needs to exist.
                   </p>
                   <p className="text-muted-foreground/80 text-sm mt-4">
                     — Val Neekman @ Neekware Inc.
diff --git a/src/pages/interactive.tsx b/src/pages/interactive.tsx
index 5c6704b..6536f30 100644
--- a/src/pages/interactive.tsx
+++ b/src/pages/interactive.tsx
@@ -61,6 +61,8 @@ export default function Interactions() {
   const [progress, setProgress] = useState(0);
   const [dialogData, setDialogData] = useState({ name: "", email: "" });
   const [copied, setCopied] = useState(false);
+  const [basicDialogOpen, setBasicDialogOpen] = useState(false);
+  const [formDialogOpen, setFormDialogOpen] = useState(false);
 
   const handleLoadingDemo = () => {
     setLoading(true);
@@ -93,7 +95,7 @@ export default function Interactions() {
   };
 
   const handleNewTab = () => {
-    window.open("https://example.com", "_blank");
+    window.open("/about", "_blank");
   };
 
   const handleFileUpload = () => {
@@ -102,10 +104,19 @@ export default function Interactions() {
     input.onchange = (e: any) => {
       const file = e.target.files[0];
       if (file) {
+        // Simulate upload process
         toast({
-          title: "File Selected",
+          title: "Uploading...",
           description: `${file.name} (${(file.size / 1024).toFixed(2)} KB)`,
         });
+
+        // Simulate successful upload after 1.5 seconds
+        setTimeout(() => {
+          toast({
+            title: "Upload Successful! ✅",
+            description: `${file.name} has been uploaded successfully.`,
+          });
+        }, 1500);
       }
     };
     input.click();
@@ -142,7 +153,10 @@ export default function Interactions() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                  <Dialog>
+                  <Dialog
+                    open={basicDialogOpen}
+                    onOpenChange={setBasicDialogOpen}
+                  >
                     <DialogTrigger asChild>
                       <Button className="w-full">Open Basic Dialog</Button>
                     </DialogTrigger>
@@ -161,12 +175,17 @@ export default function Interactions() {
                         </p>
                       </div>
                       <DialogFooter>
-                        <Button type="submit">Continue</Button>
+                        <Button onClick={() => setBasicDialogOpen(false)}>
+                          Continue
+                        </Button>
                       </DialogFooter>
                     </DialogContent>
                   </Dialog>
 
-                  <Dialog>
+                  <Dialog
+                    open={formDialogOpen}
+                    onOpenChange={setFormDialogOpen}
+                  >
                     <DialogTrigger asChild>
                       <Button variant="secondary" className="w-full">
                         Dialog with Form
@@ -216,7 +235,19 @@ export default function Interactions() {
                         </div>
                       </div>
                       <DialogFooter>
-                        <Button type="submit">Save changes</Button>
+                        <Button
+                          onClick={() => {
+                            // Here you would normally save the data
+                            toast({
+                              title: "Profile Updated",
+                              description:
+                                "Your changes have been saved successfully.",
+                            });
+                            setFormDialogOpen(false);
+                          }}
+                        >
+                          Save changes
+                        </Button>
                       </DialogFooter>
                     </DialogContent>
                   </Dialog>
@@ -495,20 +526,40 @@ export default function Interactions() {
 
                   <Button
                     onClick={() => {
-                      const data = "Hello, World!";
+                      // Create a 100KB text file
+                      const lines = [];
+                      const line =
+                        "This is a test file created by ehAye™ Test Target App (Betsey - bTc). ";
+                      const targetSize = 100 * 1024; // 100KB
+                      let currentSize = 0;
+                      let lineNumber = 1;
+
+                      while (currentSize < targetSize) {
+                        const lineContent = `Line ${lineNumber}: ${line}`;
+                        lines.push(lineContent);
+                        currentSize += lineContent.length + 1; // +1 for newline
+                        lineNumber++;
+                      }
+
+                      const data = lines.join("\n");
                       const blob = new Blob([data], { type: "text/plain" });
                       const url = URL.createObjectURL(blob);
                       const a = document.createElement("a");
                       a.href = url;
-                      a.download = "test-file.txt";
+                      a.download = "test-file-100kb.txt";
                       a.click();
                       URL.revokeObjectURL(url);
+
+                      toast({
+                        title: "Download Started",
+                        description: "Downloading test-file-100kb.txt (100KB)",
+                      });
                     }}
                     className="w-full"
                     variant="outline"
                   >
                     <Download className="mr-2 h-4 w-4" />
-                    Download File
+                    Download Test File (100KB)
                   </Button>
                 </CardContent>
               </Card>
diff --git a/src/pages/navigation-search.tsx b/src/pages/navigation-search.tsx
index 3bfa912..cad3590 100644
--- a/src/pages/navigation-search.tsx
+++ b/src/pages/navigation-search.tsx
@@ -253,9 +253,14 @@ export default function NavigationSearch() {
               </div>
 
               <div className="mt-8 space-y-8">
-                <Card id="section1" className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950">
+                <Card
+                  id="section1"
+                  className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950"
+                >
                   <CardHeader>
-                    <CardTitle className="text-blue-800 dark:text-blue-200">Section 1</CardTitle>
+                    <CardTitle className="text-blue-800 dark:text-blue-200">
+                      Section 1
+                    </CardTitle>
                   </CardHeader>
                   <CardContent>
                     <p className="text-blue-700 dark:text-blue-300">
@@ -265,9 +270,14 @@ export default function NavigationSearch() {
                   </CardContent>
                 </Card>
 
-                <Card id="section2" className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950">
+                <Card
+                  id="section2"
+                  className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950"
+                >
                   <CardHeader>
-                    <CardTitle className="text-green-800 dark:text-green-200">Section 2</CardTitle>
+                    <CardTitle className="text-green-800 dark:text-green-200">
+                      Section 2
+                    </CardTitle>
                   </CardHeader>
                   <CardContent>
                     <p className="text-green-700 dark:text-green-300">
@@ -277,14 +287,19 @@ export default function NavigationSearch() {
                   </CardContent>
                 </Card>
 
-                <Card id="section3" className="border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950">
+                <Card
+                  id="section3"
+                  className="border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950"
+                >
                   <CardHeader>
-                    <CardTitle className="text-purple-800 dark:text-purple-200">Section 3</CardTitle>
+                    <CardTitle className="text-purple-800 dark:text-purple-200">
+                      Section 3
+                    </CardTitle>
                   </CardHeader>
                   <CardContent>
                     <p className="text-purple-700 dark:text-purple-300">
-                      This is section 3 content, the final section in our navigation
-                      test page.
+                      This is section 3 content, the final section in our
+                      navigation test page.
                     </p>
                   </CardContent>
                 </Card>
@@ -352,7 +367,9 @@ export default function NavigationSearch() {
                 <Card>
                   <CardHeader>
                     <CardTitle>Instant Search</CardTitle>
-                    <CardDescription>Real-time search as you type</CardDescription>
+                    <CardDescription>
+                      Real-time search as you type
+                    </CardDescription>
                   </CardHeader>
                   <CardContent>
                     <Input
@@ -364,7 +381,9 @@ export default function NavigationSearch() {
                     />
                     {instantResults.length > 0 && (
                       <div className="mt-4">
-                        <h4 className="mb-2 text-sm font-medium">Live Results:</h4>
+                        <h4 className="mb-2 text-sm font-medium">
+                          Live Results:
+                        </h4>
                         <div className="space-y-2">
                           {instantResults.map((result, index) => (
                             <motion.div
@@ -491,4 +510,4 @@ export default function NavigationSearch() {
       </motion.div>
     </Layout>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/scroll.tsx b/src/pages/scroll.tsx
index 769071a..4300128 100644
--- a/src/pages/scroll.tsx
+++ b/src/pages/scroll.tsx
@@ -197,10 +197,7 @@ export default function Scroll() {
             </Card>
           </div>
 
-          <Card
-            id="section1"
-            className="mb-6 min-h-[600px]"
-          >
+          <Card id="section1" className="mb-6 min-h-[600px]">
             <CardHeader>
               <CardTitle className="text-red-800 dark:text-red-200">
                 Section 1: Introduction
@@ -224,10 +221,7 @@ export default function Scroll() {
             </CardContent>
           </Card>
 
-          <Card
-            id="section2"
-            className="mb-6 min-h-[600px]"
-          >
+          <Card id="section2" className="mb-6 min-h-[600px]">
             <CardHeader>
               <CardTitle className="text-blue-800 dark:text-blue-200">
                 Section 2: Features
@@ -252,10 +246,7 @@ export default function Scroll() {
             </CardContent>
           </Card>
 
-          <Card
-            id="section3"
-            className="mb-6 min-h-[600px]"
-          >
+          <Card id="section3" className="mb-6 min-h-[600px]">
             <CardHeader>
               <CardTitle className="text-green-800 dark:text-green-200">
                 Section 3: Horizontal Scroll
@@ -283,10 +274,7 @@ export default function Scroll() {
             </CardContent>
           </Card>
 
-          <Card
-            id="section4"
-            className="mb-6 min-h-[600px]"
-          >
+          <Card id="section4" className="mb-6 min-h-[600px]">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-orange-800 dark:text-orange-200">
                 <Target className="h-5 w-5" />
@@ -336,7 +324,9 @@ export default function Scroll() {
                 </Button>
               </div>
               <div className="mt-12 flex h-96 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
-                <p className="text-orange-600 dark:text-orange-400">Scroll area filler content...</p>
+                <p className="text-orange-600 dark:text-orange-400">
+                  Scroll area filler content...
+                </p>
               </div>
               <motion.div
                 id="hidden-element"
@@ -346,15 +336,14 @@ export default function Scroll() {
                 🎯 You found the hidden element!
               </motion.div>
               <div className="flex h-96 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
-                <p className="text-orange-600 dark:text-orange-400">More filler content...</p>
+                <p className="text-orange-600 dark:text-orange-400">
+                  More filler content...
+                </p>
               </div>
             </CardContent>
           </Card>
 
-          <Card
-            id="section5"
-            className="min-h-[600px]"
-          >
+          <Card id="section5" className="min-h-[600px]">
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-pink-800 dark:text-pink-200">
                 <BarChart3 className="h-5 w-5" />