From 81a0ca83b671cd7e905af9ea4660bcfd0dd20c93 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 17 Apr 2026 09:16:05 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 536ccdc..1c5fb90 100644
--- a/src/app/page.tsx
+++ b/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, ZoomIn, ZoomOut, Search as SearchIcon } 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"
@@ -86,14 +94,25 @@ export default function LandingPage() {
                   </div>
                 </div>
                 <div className="flex-grow flex items-center justify-center bg-slate-300 rounded-lg relative">
-                    <div className="absolute top-1/3 left-1/4 flex flex-col items-center">
-                        <div className="bg-red-500 text-white p-2 rounded-full cursor-pointer animate-bounce border-2 border-white shadow-lg">📍</div>
-                        <div className="bg-white p-2 rounded shadow-md mt-1 font-bold text-sm text-center">Grand City<br/><span className="font-normal">€120/naktī</span></div>
-                    </div>
-                    <div className="absolute bottom-1/4 right-1/3 flex flex-col items-center">
-                        <div className="bg-blue-500 text-white p-2 rounded-full cursor-pointer border-2 border-white shadow-lg">📍</div>
-                        <div className="bg-white p-2 rounded shadow-md mt-1 font-bold text-sm text-center">Sunset View<br/><span className="font-normal">€85/naktī</span></div>
-                    </div>
+                    {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>
@@ -200,4 +219,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file