diff --git a/src/app/properties/page.tsx b/src/app/properties/page.tsx new file mode 100644 index 0000000..d2f3118 --- /dev/null +++ b/src/app/properties/page.tsx @@ -0,0 +1,110 @@ +"use client"; + +import React, { useState } from "react"; +import ReactLenis from "lenis/react"; +import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog"; +import FooterCard from "@/components/sections/footer/FooterCard"; +import { Instagram, Facebook, Linkedin } from "lucide-react"; + +const propertiesData = [ + { + id: "1", category: "Villa", name: "Luxury Beachfront Villa", price: "$1,500/night", rating: 5, + reviewCount: "87 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp", imageAlt: "Beachfront Villa"}, + { + id: "2", category: "Chalet", name: "Swiss Mountain Chalet", price: "$1,200/night", rating: 4, + reviewCount: "62 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp", imageAlt: "Mountain Chalet"}, + { + id: "3", category: "Lodge", name: "Serengeti Safari Lodge", price: "$1,800/night", rating: 5, + reviewCount: "95 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination1.webp", imageAlt: "Safari Lodge"}, + { + id: "4", category: "Estate", name: "Amalfi Coast Estate", price: "$2,000/night", rating: 5, + reviewCount: "78 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination4.webp", imageAlt: "Amalfi Estate"}, + { + id: "5", category: "Ryokan", name: "Kyoto Traditional Ryokan", price: "$900/night", rating: 4, + reviewCount: "41 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination3.webp", imageAlt: "Kyoto Ryokan"}, + { + id: "6", category: "Lodge", name: "Patagonia Wilderness Lodge", price: "$1,100/night", rating: 4, + reviewCount: "53 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination2.webp", imageAlt: "Patagonia Lodge"}, +]; + +export default function PropertiesPage() { + const [search, setSearch] = useState(""); + const [locationFilter, setLocationFilter] = useState("All"); + const [typeFilter, setTypeFilter] = useState("All"); + const [priceFilter, setPriceFilter] = useState("All"); + + const filteredProperties = propertiesData.filter(property => { + const matchesSearch = property.name.toLowerCase().includes(search.toLowerCase()); + const matchesLocation = locationFilter === "All" || property.imageAlt?.includes(locationFilter); + const matchesType = typeFilter === "All" || property.category === typeFilter; + const matchesPrice = priceFilter === "All" || (function() { + const price = parseFloat(property.price.replace(/[^0-9.-]+/g,"")); + if (priceFilter === "$500-1000") return price >= 500 && price < 1000; + if (priceFilter === "$1000-1500") return price >= 1000 && price < 1500; + if (priceFilter === "$1500-2000") return price >= 1500 && price < 2000; + if (priceFilter === "2000+") return price >= 2000; + return true; + })(); + return matchesSearch && matchesLocation && matchesType && matchesPrice; + }); + + const filters = [ + { label: "Location", options: ["All", "Maldives", "Switzerland", "Tanzania", "Amalfi Coast", "Kyoto", "Patagonia"], selected: locationFilter, onChange: setLocationFilter }, + { label: "Property Type", options: ["All", "Villa", "Chalet", "Lodge", "Estate", "Ryokan"], selected: typeFilter, onChange: setTypeFilter }, + { label: "Price Range", options: ["All", "$500-1000", "$1000-1500", "$1500-2000", "2000+"], selected: priceFilter, onChange: setPriceFilter }, + ]; + + return ( + + + +
+ +
+ +
+
+ ); +} \ No newline at end of file