Merge version_12 into main

Merge version_12 into main

src/app/hotel-contact/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function HotelContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="TravelBook"
+          navItems={[
+            { name: "Meklēt", id: "/" },
+            { name: "Galamērķi", id: "/#destinations" },
+            { name: "Atsauksmes", id: "/#features" },
+            { name: "Kontakti", id: "/hotel-contact" },
+            { name: "Rezervācijas & Kontakti", id: "/hotel-contact" }
+          ]}
+        />
+      </div>
+
+      <div id="reviews" data-section="reviews">
+        <TestimonialCardSixteen
+          title="Viesnīcu atsauksmes"
+          description="Pārskati citu ceļotāju vērtējumus un dalies savā pieredzē."
+          tag="⭐ Atsauksmes"
+          textboxLayout="split"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          kpiItems={[
+            { value: "4.8", label: "Vidējais reitings" },
+            { value: "15K+", label: "Atsauksmes" },
+            { value: "98%", label: "Ieteikumi" }
+          ]}
+          testimonials={[
+            { id: "1", name: "Anna B.", role: "Ceļotāja", company: "Viesnīca Rīga", rating: 5 },
+            { id: "2", name: "Jānis K.", role: "Biznesa ceļotājs", company: "Grand City", rating: 4 }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          title="Sazinieties ar mums"
+          description="Vai jums ir jautājumi par viesnīcu rezervāciju? Mūsu komanda ir gatava palīdzēt 24/7."
+          tag="📞 Atbalsts"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[{ text: "Nosūtīt pieprasījumu", href: "#" }]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="TravelBook"
+          leftLink={{ text: "Privātuma politika", href: "#" }}
+          rightLink={{ text: "Noteikumi un nosacījumi", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -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, Search as SearchIcon } 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%" },
+    { id: "sunset-view", name: "Sunset View", price: 85, rating: 4, top: "75%", left: "66%" }
   ];
 
-  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
@@ -43,7 +48,8 @@ export default function LandingPage() {
             { name: "Meklēt", id: "search" },
             { name: "Galamērķi", id: "destinations" },
             { name: "Atsauksmes", id: "features" },
-            { name: "Kontakti", id: "footer" }
+            { name: "Kontakti", id: "footer" },
+            { name: "Rezervācijas & Kontakti", id: "/hotel-contact" }
           ]}
         />
       </div>
@@ -74,52 +80,33 @@ 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>
-          <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 
-                            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"}`}>
-                                <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>
             </div>
         </div>
@@ -167,4 +154,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}