src/app/page.tsx

@@ -11,16 +11,22 @@ 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, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 
 export default function LandingPage() {
   const [selectedCity, setSelectedCity] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
 
   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 filteredCities = useMemo(() => {
+    if (!searchQuery) return cities;
+    return cities.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, [searchQuery]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -73,20 +79,25 @@ export default function LandingPage() {
       </div>
 
       <div id="search" data-section="search">
-        <ProductCatalog
-          layout="section"
-          products={[]}
-          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-[500px] bg-slate-200 rounded-xl flex flex-col p-6 shadow-inner relative overflow-hidden">
+        <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>
+          </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 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" />
+                    <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>
@@ -94,15 +105,15 @@ export default function LandingPage() {
                   </div>
                 </div>
                 <div className="flex-grow flex items-center justify-center bg-slate-300 rounded-lg relative">
-                    {cities.map((city) => (
+                    {filteredCities.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 className={`p-2 rounded-full border-2 border-white shadow-lg transition-colors ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500 animate-bounce"}`}>
+                                <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">
@@ -121,9 +132,8 @@ export default function LandingPage() {
       <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"
@@ -133,9 +143,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>
 
@@ -144,69 +151,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 }
+            { 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 },
+            { 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 },
+            { 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>