Update src/app/page.tsx

Merge version_17 into main

src/app/page.tsx

@@ -7,7 +7,7 @@ import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import { CheckCircle, Filter, MapPin, Search, Star, Search as SearchIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, Suspense } from "react";
 
 export default function LandingPage() {
   const [searchQuery, setSearchQuery] = useState("");
@@ -64,29 +64,38 @@ export default function LandingPage() {
         />
       </div>
 
-      <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>
-            </div>
+      <section id="search" data-section="search" className="py-24 px-4 md:px-8 lg:px-16 bg-white">
+        <div className="max-w-7xl mx-auto">
+          <div className="mb-12 text-center">
+            <h2 className="text-4xl font-bold text-slate-900 mb-4">Atrodi savu galamērķi</h2>
+            <p className="text-slate-600">Izmanto izvērstos filtrus, lai atrastu tieši to, ko meklē.</p>
           </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 className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+            <aside className="lg:col-span-3 space-y-6">
+              <div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 shadow-sm">
+                <h3 className="font-bold mb-6 flex items-center gap-2 text-lg"><Filter className="w-5 h-5 text-indigo-500"/> Filtri</h3>
+                <div className="space-y-6">
+                  <div>
+                    <label className="text-sm font-medium block mb-3 text-slate-600">Budžets: <span className="font-bold text-indigo-600">€{priceRange}</span></label>
+                    <input type="range" min="50" max="300" value={priceRange} onChange={(e) => setPriceRange(Number(e.target.value))} className="w-full accent-indigo-500 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer hover:accent-indigo-600 transition-all"/>
                   </div>
                 </div>
+              </div>
+            </aside>
+            <div className="lg:col-span-9 h-[500px] md:h-[600px] bg-white rounded-3xl flex flex-col p-4 shadow-lg border border-slate-200 relative overflow-hidden">
+              <div className="flex items-center gap-3 mb-6 bg-slate-50 p-4 rounded-2xl border border-slate-100 focus-within:ring-2 focus-within:ring-indigo-100 transition-all">
+                <SearchIcon className="w-5 h-5 text-slate-400" />
+                <input type="text" placeholder="Meklēt pilsētu, valsti vai viesnīcu nosaukumu..." className="flex-grow outline-none bg-transparent text-slate-800 placeholder:text-slate-400 font-medium" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
+              </div>
+              <Suspense fallback={<div className="flex-grow flex items-center justify-center bg-slate-50 rounded-2xl animate-pulse text-slate-400">Ielādē karti...</div>}>
+                <div className="flex-grow flex items-center justify-center bg-slate-100/50 rounded-2xl border border-dashed border-slate-200 text-slate-400">
+                    <p className="font-medium">Interaktīvā karte tiks ielādēta dinamiskajā režīmā.</p>
+                </div>
+              </Suspense>
             </div>
+          </div>
         </div>
-      </div>
+      </section>
 
       <div id="destinations" data-section="destinations">
         <ProductCardOne