Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
@@ -11,9 +12,11 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { MapPin, MessageSquare, User } from "lucide-react";
+import { MapPin, MessageSquare, User, Search } from "lucide-react";
 
 export default function LandingPage() {
+  const [search, setSearch] = useState("");
+
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -57,22 +60,45 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="search" data-section="search" className="flex justify-center p-8 bg-card">
+    <div className="flex items-center gap-4 border rounded-full px-6 py-3 w-full max-w-lg">
+        <Search className="text-muted" />
+        <input 
+            type="text" 
+            placeholder="Search for your favorite food..." 
+            value={search} 
+            onChange={(e) => setSearch(e.target.value)} 
+            className="bg-transparent outline-none flex-1 text-foreground placeholder:text-muted"
+        />
+    </div>
+  </div>
+
   <div id="features" data-section="features">
       <FeatureBento
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Track Orders",          description: "Know exactly when your food arrives with our real-time status updates.",          bentoComponent: "reveal-icon",          icon: MapPin,
+        { 
+          title: "Track Orders", 
+          description: "Know exactly when your food arrives with our real-time status updates.", 
+          bentoComponent: "reveal-icon", 
+          icon: MapPin, 
+        },
+        { 
+          title: "Direct Chat", 
+          description: "Talk directly to your vendor to customize your order or add special instructions.", 
+          bentoComponent: "chat", 
+          aiIcon: MessageSquare, 
+          userIcon: User, 
+          exchanges: [{ userMessage: "Extra sauce please?", aiResponse: "Sure thing, adding extra sauce now!" }], 
+          placeholder: "Message vendor..." 
+        },
+        { 
+          title: "Our Network", 
+          description: "Global coverage.", 
+          bentoComponent: "map" 
         },
-        {
-          title: "Direct Chat",          description: "Talk directly to your vendor to customize your order or add special instructions.",          bentoComponent: "chat",          aiIcon: MessageSquare,
-          userIcon: User,
-          exchanges: [{ userMessage: "Extra sauce please?", aiResponse: "Sure thing, adding extra sauce now!" }],
-          placeholder: "Message vendor..."},
-        {
-          title: "Our Network",          description: "Global coverage.",          bentoComponent: "map"},
       ]}
       title="Why Order With Us?"
       description="Our marketplace is designed to make food ordering faster, safer, and more collaborative than ever before."
@@ -172,4 +198,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}