Update src/app/page.tsx

Merge version_13 into main

src/app/page.tsx

@@ -64,27 +64,28 @@ 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 id="search" data-section="search" className="py-16 px-4 md:px-8 lg:px-16 bg-slate-50/50">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8">
+          <div className="lg:col-span-3 space-y-6">
+            <div className="bg-white p-6 rounded-3xl shadow-lg border border-slate-100">
+              <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 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"/>
+                  <label className="text-sm font-medium block mb-2 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"/>
                 </div>
               </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="lg:col-span-9 h-[500px] md:h-[600px] bg-white rounded-3xl flex flex-col p-4 shadow-xl border border-slate-100 relative overflow-hidden">
+            <div className="flex items-center gap-3 mb-6 bg-slate-100 p-4 rounded-2xl border border-slate-200">
+              <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" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
             </div>
+            <div className="flex-grow flex items-center justify-center bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 text-slate-400">
+                <p>Karte tiks ielādēta šeit.</p>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -130,4 +131,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}