Update src/app/page.tsx

Merge version_8 into main

src/app/page.tsx

@@ -9,9 +9,18 @@ import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCar
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { CheckCircle, Eye, Filter, Phone, Search, Star, MapPin } from "lucide-react";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import { CheckCircle, Eye, Filter, Phone, Search, Star, MapPin, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [selectedCity, setSelectedCity] = useState<string | null>(null);
+
+  const cities = [
+    { id: "grand-city", name: "Grand City", price: "€120/naktī", top: "33%", left: "25%", description: "Lieliska viesnīca pilsētas centrā ar skatu uz parku." },
+    { id: "sunset-view", name: "Sunset View", price: "€85/naktī", top: "75%", left: "66%", description: "Mājīga vieta pie jūras ar brīnišķīgiem saulrietiem." }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -63,6 +72,52 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="search" data-section="search">
+        <ProductCatalog
+          layout="section"
+          products={[]}
+          searchPlaceholder="Meklēt pilsētu..."
+          filters={[
+            { label: "Budžets", options: ["Zems", "Vidējs", "Augsts"], selected: "Vidējs", onChange: () => {} }
+          ]}
+        />
+        <div className="flex justify-center p-8 border-t border-b bg-muted/20">
+            <div className="w-full max-w-4xl h-[500px] bg-slate-200 rounded-xl flex flex-col p-6 shadow-inner relative overflow-hidden">
+                <div className="flex items-center justify-between mb-4 bg-white p-3 rounded-lg shadow-sm border border-black/10">
+                  <div className="flex items-center gap-2">
+                    <SearchIcon className="w-5 h-5 text-muted-foreground" />
+                    <input type="text" placeholder="Meklēt atrašanās vietu..." className="outline-none" />
+                  </div>
+                  <div className="flex gap-2">
+                    <button className="p-2 hover:bg-slate-100 rounded"><ZoomIn className="w-5 h-5" /></button>
+                    <button className="p-2 hover:bg-slate-100 rounded"><ZoomOut className="w-5 h-5" /></button>
+                  </div>
+                </div>
+                <div className="flex-grow flex items-center justify-center bg-slate-300 rounded-lg relative">
+                    {cities.map((city) => (
+                        <div 
+                            key={city.id} 
+                            className="absolute cursor-pointer flex flex-col items-center group"
+                            style={{ top: city.top, left: city.left }}
+                            onClick={() => setSelectedCity(selectedCity === city.id ? null : city.id)}
+                        >
+                            <div className="bg-red-500 text-white p-2 rounded-full animate-bounce border-2 border-white shadow-lg">
+                                <MapPin className="w-5 h-5" />
+                            </div>
+                            {selectedCity === city.id && (
+                                <div className="bg-white p-4 rounded-xl shadow-2xl mt-2 w-48 animate-in fade-in zoom-in">
+                                    <h4 className="font-bold flex items-center gap-2"><Info className="w-4 h-4"/> {city.name}</h4>
+                                    <p className="text-sm text-gray-600 mt-1">{city.description}</p>
+                                    <div className="mt-2 pt-2 border-t font-bold text-blue-600">{city.price}</div>
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+      </div>
+
       <div id="destinations" data-section="destinations">
         <ProductCardOne
           title="Populārie galamērķi"
@@ -94,9 +149,9 @@ export default function LandingPage() {
           animationType="slide-up"
           useInvertedBackground={true}
           features={[
-            { id: "search", title: "1. Izmanto karti", description: "Izpēti galamērķus uz kartes un atlasiet apgabalu, kas jūs interesē.", media: { imageSrc: "http://img.b2bpic.net/free-photo/shipping-logistic-delivery-freight-cargo-concept_53876-124951.jpg?_wi=2" }, items: [{ icon: Search, text: "Interaktīvā karte" }, { icon: Filter, text: "Budžeta filtri" }], reverse: false },
-            { id: "compare", title: "2. Salīdzini", description: "Apskatīies cenas, vērtējumus un pieejamību konkrētās atrašanās vietās.", media: { imageSrc: "http://img.b2bpic.net/free-photo/gothic-church-with-spire-brick-architecture-historic-temple_169016-68118.jpg?_wi=2" }, items: [{ icon: Star, text: "Reitingi" }, { icon: Eye, text: "Attēli" }], reverse: true },
-            { id: "book", title: "3. Rezervē", description: "Izvēlies savu ideālo viesnīcu un rezervē tiešsaistē.", media: { imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-big-ben-from-bridge-london_268835-1399.jpg?_wi=2" }, items: [{ icon: CheckCircle, text: "Tiešsaistes rezervēšana" }, { icon: Phone, text: "24/7 Atbalsts" }], reverse: false }
+            { id: "f1", title: "1. Izmanto karti", description: "Izpēti galamērķus uz kartes un atlasiet apgabalu, kas jūs interesē.", media: { imageSrc: "http://img.b2bpic.net/free-photo/shipping-logistic-delivery-freight-cargo-concept_53876-124951.jpg?_wi=2" }, items: [{ icon: Search, text: "Interaktīvā karte" }, { icon: Filter, text: "Budžeta filtri" }], reverse: false },
+            { id: "f2", title: "2. Salīdzini", description: "Apskatīies cenas, vērtējumus un pieejamību konkrētās atrašanās vietās.", media: { imageSrc: "http://img.b2bpic.net/free-photo/gothic-church-with-spire-brick-architecture-historic-temple_169016-68118.jpg?_wi=2" }, items: [{ icon: Star, text: "Reitingi" }, { icon: Eye, text: "Attēli" }], reverse: true },
+            { id: "f3", title: "3. Rezervē", description: "Izvēlies savu ideālo viesnīcu un rezervē tiešsaistē.", media: { imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-big-ben-from-bridge-london_268835-1399.jpg?_wi=2" }, items: [{ icon: CheckCircle, text: "Tiešsaistes rezervēšana" }, { icon: Phone, text: "24/7 Atbalsts" }], reverse: false }
           ]}
           buttons={[
             { text: "Sākt meklēt", href: "#search" }
@@ -164,4 +219,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}