Update src/app/page.tsx

Merge version_8 into main

src/app/page.tsx

@@ -10,9 +10,17 @@ import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
-import { CheckCircle, Eye, Filter, Phone, Search, Star, MapPin, Building2, Hotel } from "lucide-react";
+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"
@@ -68,25 +76,44 @@ export default function LandingPage() {
         <ProductCatalog
           layout="section"
           products={[]}
-          searchPlaceholder="Izpēti pasauli: atlasiet valsti vai pilsētu kartē..."
+          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-[400px] bg-slate-200 rounded-xl flex flex-col items-center justify-center p-6 text-center shadow-inner relative">
-                <h3 className="text-xl font-bold mb-4">Interaktīvā Karte</h3>
-                <div className="grid grid-cols-2 gap-4 w-full">
-                  <div className="flex items-center justify-center gap-2 bg-white/50 p-4 rounded-lg shadow-sm border border-white/20">
-                    <Hotel className="w-5 h-5 text-primary" />
-                    <span className="font-semibold">Motelis: "Sunset View"</span>
+            <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 items-center justify-center gap-2 bg-white/50 p-4 rounded-lg shadow-sm border border-white/20">
-                    <Building2 className="w-5 h-5 text-primary" />
-                    <span className="font-semibold">Viesnīca: "Grand City"</span>
+                  <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>
-                <p className="text-muted-foreground mt-8">Izpēti vairāk tieši kartē</p>
+                <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>