Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState, useCallback } from "react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
@@ -11,8 +12,31 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import Input from '@/components/form/Input';
+import { AlertCircle, Loader2 } from "lucide-react";
 
 export default function LandingPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState([]);
+  const [error, setError] = useState(null);
+
+  const handleSearch = useCallback(async () => {
+    if (!searchQuery.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
+      if (!response.ok) throw new Error('Search failed');
+      const data = await response.json();
+      setResults(data.items || []);
+    } catch (err) {
+      setError('Unable to fetch results. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }, [searchQuery]);
+
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -30,22 +54,9 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "How it works",
-          id: "#features",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "Agents",
-          id: "#metrics",
-        },
-        {
-          name: "Blog",
-          id: "#blog",
-        },
+        { name: "How it works", id: "#features" },
+        { name: "Agents", id: "#metrics" },
+        { name: "FAQ", id: "#faq" },
       ]}
       brandName="No-Site Search"
     />
@@ -53,20 +64,36 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="Find local businesses without websites"
       description="Find local businesses without websites and deploy AI agents to fill your pipeline — automatically."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#pricing",
-        },
-      ]}
+      buttons={[{ text: "Get Started", href: "#contact" }]}
       imageSrc="http://img.b2bpic.net/free-photo/employee-uses-phone-app-with-greenscreen_482257-81843.jpg"
       imageAlt="Dashboard showing business leads"
     />
+    <div className="px-6 py-12 flex flex-col items-center gap-4 w-full max-w-4xl mx-auto">
+       <div className="flex w-full max-w-md gap-2 p-2 bg-white/50 dark:bg-black/20 backdrop-blur rounded-lg border border-white/20 shadow-xl">
+          <Input 
+            value={searchQuery} 
+            onChange={setSearchQuery} 
+            placeholder="Search for leads (e.g. 'plumbers in NY')..." 
+            className="flex-1 bg-transparent border-none focus:ring-0"
+          />
+          <button 
+            onClick={handleSearch} 
+            className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-md hover:opacity-90 transition-all disabled:opacity-50"
+            disabled={loading}
+          >
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Search"}
+          </button>
+       </div>
+       {error && (
+         <div className="flex items-center gap-2 text-red-500 bg-red-50 px-4 py-2 rounded-md animate-in fade-in">
+            <AlertCircle className="w-4 h-4" />
+            <span className="text-sm">{error}</span>
+         </div>
+       )}
+    </div>
   </div>
 
   <div id="features" data-section="features">
@@ -74,23 +101,9 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      negativeCard={{
-        items: [
-          "Manual searching",
-          "Outdated databases",
-          "Cold outreach spam",
-          "Low conversion waste",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Real-time data",
-          "Outreach ready leads",
-          "Automatic AI agents",
-          "High response rates",
-        ],
-      }}
-      title="Turn high-intent leads into revenue"
+      negativeCard={{ items: ["Manual searching", "Outdated databases", "Cold outreach spam", "Low conversion waste"] }}
+      positiveCard={{ items: ["Real-time data", "Outreach ready leads", "Automatic AI agents", "High response rates"] }}
+      title="Stop wasting time on outdated databases"
       description="Businesses without websites are often easier to approach and higher intent for digital services."
     />
   </div>
@@ -101,33 +114,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "10M+",
-          title: "Scraped Records",
-          items: [
-            "Deep web indexing",
-            "Real-time updates",
-          ],
-        },
-        {
-          id: "m2",
-          value: "95%",
-          title: "Lead Accuracy",
-          items: [
-            "Verified phone numbers",
-            "Direct local contact",
-          ],
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "AI Agent Tracking",
-          items: [
-            "Continuous prospecting",
-            "Automated pipeline",
-          ],
-        },
+        { id: "m1", value: "10M+", title: "Scraped Records", items: ["Deep web indexing", "Real-time updates"] },
+        { id: "m2", value: "95%", title: "Lead Accuracy", items: ["Verified phone numbers", "Direct local contact"] },
+        { id: "m3", value: "24/7", title: "AI Agent Tracking", items: ["Continuous prospecting", "Automated pipeline"] },
       ]}
       title="Data backed results"
       description="Our platform constantly scrapes millions of records to find your next best client."
@@ -138,15 +127,7 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={true}
-      names={[
-        "TechCorp",
-        "GrowthCo",
-        "ScaleLab",
-        "AgencyX",
-        "Leadify",
-        "Pipeline",
-        "Nextgen",
-      ]}
+      names={["TechCorp", "GrowthCo", "ScaleLab", "AgencyX", "Leadify", "Pipeline", "Nextgen"]}
       title="Trusted by leading agencies"
       description="Empowering lead generation teams globally."
     />
@@ -156,31 +137,9 @@ export default function LandingPage() {
       <TestimonialCardTwelve
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Johnson",
-          imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-using-tablet-table_23-2148095762.jpg",
-        },
-        {
-          id: "t2",
-          name: "Michael Chen",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily Rodriguez",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Kim",
-          imageSrc: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jessica Lee",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-20123.jpg",
-        },
+        { id: "t1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-using-tablet-table_23-2148095762.jpg" },
+        { id: "t2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg" },
+        { id: "t3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-with-eyeglasses-smiling-office_329181-14553.jpg" },
       ]}
       cardTitle="Loved by founders"
       cardTag="Testimonials"
@@ -193,21 +152,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "How does it work?",
-          content: "Our system monitors web databases to identify businesses lacking an online presence.",
-        },
-        {
-          id: "f2",
-          title: "Are the leads verified?",
-          content: "Yes, all phone numbers and locations are verified against current records.",
-        },
-        {
-          id: "f3",
-          title: "Can I integrate my CRM?",
-          content: "We support API exports to most major CRM platforms.",
-        },
+        { id: "f1", title: "How does it work?", content: "Our system monitors web databases to identify businesses lacking an online presence." },
+        { id: "f2", title: "Are the leads verified?", content: "Yes, all phone numbers and locations are verified against current records." },
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about finding high-intent leads."
@@ -218,9 +164,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Contact"
       title="Start your pipeline today"
       description="Fill your pipeline with verified leads and deploy AI agents."
@@ -231,41 +175,8 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="No-Site Search"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "How it works",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Blog",
-              href: "#blog",
-            },
-            {
-              label: "AI Agents",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Metrics", href: "#metrics" }] },
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
       ]}
       copyrightText="Copyright © 2026 No-Site Search. All rights reserved."
     />
@@ -273,4 +184,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}