bender/6029f2a0-07cc-4835-a014-c09b0db1575b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-17 09:16:05 +00:00
parent 84d3c0e24d
commit 81a0ca83b6
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/page.tsx
View File

@@ -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>
);
}
}