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

Merge version_11 into main #23

Merged
bender merged 1 commits from version_11 into main 2026-04-17 09:24:45 +00:00
Conversation 0 Commits 1 Files Changed 1 +43 -35
1 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/page.tsx
View File

@@ -6,22 +6,27 @@ import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { CheckCircle, Eye, Filter, Phone, Search, Star, MapPin, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
import { CheckCircle, Filter, MapPin, Search, Star, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
import { useState, useMemo } from "react";
export default function LandingPage() {
const [selectedCity, setSelectedCity] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState("");
const [priceRange, setPriceRange] = useState(200);
const [minRating, setMinRating] = useState(0);
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." }
const allHotels = [
{ id: "grand-city", name: "Grand City", price: 120, rating: 5, top: "33%", left: "25%", description: "Lieliska viesnīca pilsētas centrā ar skatu uz parku.", amenities: ["Wifi", "Pool"] },
{ id: "sunset-view", name: "Sunset View", price: 85, rating: 4, top: "75%", left: "66%", description: "Mājīga vieta pie jūras ar brīnišķīgiem saulrietiem.", amenities: ["Wifi", "Beach Access"] }
];
const filteredCities = useMemo(() => {
if (!searchQuery) return cities;
return cities.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
}, [searchQuery]);
const filteredHotels = useMemo(() => {
return allHotels.filter(h =>
h.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
h.price <= priceRange &&
h.rating >= minRating
);
}, [searchQuery, priceRange, minRating]);
return (
<ThemeProvider
@@ -74,50 +79,53 @@ export default function LandingPage() {
/>
</div>
<div id="search" data-section="search">
<div className="flex flex-col lg:flex-row gap-8 p-8 max-w-7xl mx-auto">
<div className="lg:w-1/4 space-y-4">
<h3 className="font-bold text-lg">Galamērķi</h3>
<div className="space-y-2">
{cities.map((city) => (
<button
key={city.id}
onClick={() => setSelectedCity(city.id)}
className={`w-full text-left p-3 rounded-lg border transition-all ${selectedCity === city.id ? "bg-primary text-white border-primary" : "hover:bg-slate-100 border-slate-200"}`}>
{city.name}
</button>
<div id="search" data-section="search" className="py-12 px-6">
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
<div className="lg:w-80 space-y-6">
<div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
<h3 className="font-bold mb-4 flex items-center gap-2"><Filter className="w-4 h-4"/> Filtri</h3>
<div className="space-y-4">
<div>
<label className="text-sm block mb-1">Budžets: €{priceRange}</label>
<input type="range" min="50" max="300" value={priceRange} onChange={(e) => setPriceRange(Number(e.target.value))} className="w-full"/>
</div>
<div>
<label className="text-sm block mb-1">Min. vērtējums</label>
<select className="w-full p-2 border rounded" onChange={(e) => setMinRating(Number(e.target.value))}>
<option value="0">Visi</option>
<option value="4">4+</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 space-y-2 h-96 overflow-y-auto">
<h4 className="font-bold">Redzamās viesnīcas:</h4>
{filteredHotels.map(h => (
<div key={h.id} className="p-3 text-sm bg-slate-50 rounded-lg hover:bg-slate-100 transition">
{h.name} - €{h.price}
</div>
))}
</div>
</div>
<div className="flex-grow h-[500px] bg-slate-100 rounded-xl flex flex-col p-6 shadow-inner relative overflow-hidden">
<div className="flex-grow h-[600px] bg-slate-100 rounded-2xl 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 pilsētu..." className="outline-none" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
</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">
{filteredCities.map((city) => (
<div className="flex-grow flex items-center justify-center bg-slate-200 rounded-lg relative">
{filteredHotels.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={`p-2 rounded-full border-2 border-white shadow-lg transition-colors ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500 animate-bounce"}`}>
<div className={`p-2 rounded-full border-2 border-white shadow-lg ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500"}`}>
<MapPin className="w-5 h-5 text-white" />
</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>