Update src/app/page.tsx

Merge version_10 into main

src/app/page.tsx

@@ -5,14 +5,29 @@ import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-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 } 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 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 filteredHotels = useMemo(() => {
+    return allHotels.filter(h => 
+      h.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+      h.price <= priceRange &&
+      h.rating >= minRating
+    );
+  }, [searchQuery, priceRange, minRating]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -32,8 +47,8 @@ export default function LandingPage() {
           navItems={[
             { name: "Meklēt", id: "search" },
             { name: "Galamērķi", id: "destinations" },
-            { name: "Atsauksmes", id: "reviews" },
-            { name: "Kontakti", id: "contact" }
+            { name: "Atsauksmes", id: "features" },
+            { name: "Kontakti", id: "footer" }
           ]}
         />
       </div>
@@ -64,29 +79,65 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="search" data-section="search">
-        <ProductCatalog
-          layout="section"
-          products={[]}
-          searchPlaceholder="Meklēt viesnīcas pēc atrašanās vietas..."
-          filters={[
-            { label: "Budžets", options: ["Zems", "Vidējs", "Augsts"], selected: "Vidējs", onChange: () => {} }
-          ]}
-          toolbarClassName="cursor-pointer hover:opacity-80 transition-opacity"
-          className="group"
-          searchClassName="[&>button]:cursor-pointer"
-          onSearchChange={() => {
-            window.location.href = "/interactive-map";
-          }}
-        />
+      <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-[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>
+                <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 ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500"}`}>
+                                <MapPin className="w-5 h-5 text-white" />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
       </div>
 
       <div id="destinations" data-section="destinations">
         <ProductCardOne
           title="Populārie galamērķi"
-          description="Pēdējā mēneša visvairāk meklētās viesnīcas un pilsētas. Sāc ar šiem populārajiem galamērķiem vai pēc savas izvēles."
+          description="Pēdējā mēneša visvairāk meklētās viesnīcas un pilsētas."
           tag="🌍 Galamērķi"
-          tagAnimation="slide-up"
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
@@ -96,9 +147,6 @@ export default function LandingPage() {
             { id: "london", name: "Londona", price: "Sākot no €65/naktī", imageSrc: "http://img.b2bpic.net/free-photo/big-ben-house-parliament-night-london-united-kingdom_268835-1396.jpg?id=10589989" },
             { id: "paris", name: "Parīze", price: "Sākot no €75/naktī", imageSrc: "http://img.b2bpic.net/premium-photo/aerial-panoramic-view-paris-skyline-france-sunset_255553-1110.jpg?id=17777445" }
           ]}
-          buttons={[
-            { text: "Skatīt vairāk", href: "#search" }
-          ]}
         />
       </div>
 
@@ -107,69 +155,14 @@ export default function LandingPage() {
           title="Kā tas darbojas"
           description="Trīs vienkārši soļi, lai atrastu un rezervētu ideālo viesnīcu."
           tag="📋 Process"
-          tagAnimation="slide-up"
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={true}
           features={[
-            { 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 }
+            { id: "step1", title: "1. Izmanto karti", description: "Izpēti galamērķus uz kartes.", 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" }], reverse: false },
+            { id: "step2", title: "2. Salīdzini", description: "Apskatīies cenas un vērtējumus.", 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" }], reverse: true },
+            { id: "step3", title: "3. Rezervē", description: "Izvēlies savu ideālo viesnīcu.", 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" }], reverse: false }
           ]}
-          buttons={[
-            { text: "Sākt meklēt", href: "#search" }
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="Ko saka mūsu ceļotāji"
-          description="Skaudi ar to, ko teic mūsu apmierināti klienti par savu braukšanas iespēju."
-          tag="⭐ Atsauksmes"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="scale-rotate"
-          useInvertedBackground={false}
-          testimonials={[
-            { id: "1", name: "Māra Liepiņa", role: "Ceļotāja", testimonial: "Vienkāršs un ātrs meklēšanas process. Atradu perfektu viesnīcu Parīzē dažos minūtēs. Brīnišķigs serviss!", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-brunette-woman-has-cheerful-facial-expression-leads-active-lifestyle-dressed-windbreaker-wears-stereo-headphones-poses-outside-against-blurred-background-sport-concept_273609-62278.jpg?id=28598149" },
-            { id: "2", name: "Jānis Ozols", role: "Ceļotājs", testimonial: "Lielisks atbalsts. Zvanīju uz viņiem jautājumiem par viesnīcu un viņi nekavējoties palīdzēja.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-mixed-race-male-with-positive-smile-shows-white-teeth-keeps-hands-stomach-being-high-spirit-wears-white-shirt-rejoices-positive-moments-life-people-emotions-concept_273609-15527.jpg?id=10420306" }
-          ]}
-          buttons={[
-            { text: "Pievienoties tūkstošiem apmierinātiem ceļotājiem", href: "#search" }
-          ]}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Biežāk uzdotie jautājumi"
-          sideDescription="Atbildes uz jautājumiem, ko visbiežāk jautā mūsu ceļotāji."
-          faqsAnimation="slide-up"
-          textPosition="left"
-          useInvertedBackground={true}
-          showCard={true}
-          faqs={[
-            { id: "1", title: "Kā lietot karti?", content: "Vienkārši pārvietojiet to un izmantojiet filtrus, lai redzētu piedāvājumus konkrētajā reģionā." },
-            { id: "2", title: "Kā filtrēt pēc budžeta?", content: "Izmantojiet mūsu cenu slīdni, kas pieejams virs kartes, lai parādītu tikai jūsu budžetam atbilstošas viesnīcas." }
-          ]}
-          buttons={[
-            { text: "Sazinieties ar mums", href: "#contact" }
-          ]}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="📞 Sazinies ar mums"
-          title="Vai jums ir jautājumi? Mēs esam šeit"
-          description="Iesniedziet savu e-pastu un mēs sazināsimies ar jums ļoti drīz. Vai zvaniet tūlīt - mūsu komanda ir gatava palīdzēt."
-          tagAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={true}
-          mediaAnimation="blur-reveal"
-          mediaPosition="right"
-          imageSrc="http://img.b2bpic.net/free-photo/shipping-logistic-delivery-freight-cargo-concept_53876-124951.jpg?_wi=3"
         />
       </div>