215 lines
12 KiB
TypeScript
215 lines
12 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import santoImage from "@/assets/santo-domingo.jpg";
|
|
import puntaImage from "@/assets/punta-cana.jpg";
|
|
import sanJuanImage from "@/assets/san-juan.jpg";
|
|
|
|
const ExploreSection = () => {
|
|
const destinations = [
|
|
{
|
|
image: santoImage,
|
|
city: "Santo Domingo",
|
|
area: "Zona Colonial",
|
|
listings: "89+ listings",
|
|
link: "/explore/santo-domingo"
|
|
},
|
|
{
|
|
image: puntaImage,
|
|
city: "Punta Cana",
|
|
area: "Resort Area",
|
|
listings: "124+ listings",
|
|
link: "/explore/punta-cana"
|
|
},
|
|
{
|
|
image: sanJuanImage,
|
|
city: "San Juan",
|
|
area: "Old San Juan",
|
|
listings: "67+ listings",
|
|
link: "/explore/san-juan"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<p className="text-primary font-medium mb-4">Top Regions</p>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
Explore Cities
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Discover exciting categories. Find what you're looking for.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Carousel Container */}
|
|
<div className="owl-carousel-container relative">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-x-auto pb-4">
|
|
{/* Region Card 1 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://images.visitarepublicadominicana.org/Punta-Cana-Republica-Dominicana.jpg"
|
|
alt="Punta Cana"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">La Romana</h4>
|
|
<h3 className="text-3xl font-bold mb-2">Punta Cana</h3>
|
|
<span className="text-white/90">100+ listings</span>
|
|
</div>
|
|
<a href="/offer/punta-cana" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region Card 2 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://static-resources-elementor.mirai.com/wp-content/uploads/sites/345/Playa-Bavaro-Punta-Cana-Garden-Hotels.jpg"
|
|
alt="Bavaro Beach"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">La Romana</h4>
|
|
<h3 className="text-3xl font-bold mb-2">Bavaro Beach</h3>
|
|
<span className="text-white/90">59+ listings</span>
|
|
</div>
|
|
<a href="/offer/bavaro-beach" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region Card 3 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://www.soycaribepremium.es/wp-content/uploads/2018/06/Plaza-Espana_3-e1659698866331.jpg"
|
|
alt="Zona Colonial"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">Santo Domingo</h4>
|
|
<h3 className="text-3xl font-bold mb-2">Zona Colonial</h3>
|
|
<span className="text-white/90">89+ listings</span>
|
|
</div>
|
|
<a href="/offer/zona-colonial" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region Card 4 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://assets.simpleviewinc.com/simpleview/image/upload/c_fill,f_jpg,h_749,q_65,w_639/v1/clients/dominicanrepublic/laromana_home_slide_2_1_b31a4780-1959-469d-93f1-ebd659183098.jpg"
|
|
alt="Santiago"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">Santiago</h4>
|
|
<h3 className="text-3xl font-bold mb-2">Santiago</h3>
|
|
<span className="text-white/90">65+ listings</span>
|
|
</div>
|
|
<a href="/offer/santiago" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region Card 5 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://images.visitarepublicadominicana.org/catedral-de-san-pedro-de-macoris.jpg"
|
|
alt="San Pedro"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">Region Norte</h4>
|
|
<h3 className="text-3xl font-bold mb-2">San Pedro</h3>
|
|
<span className="text-white/90">65+ listings</span>
|
|
</div>
|
|
<a href="/offer/san-pedro" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region Card 6 */}
|
|
<div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
|
|
<div className="region-card-image h-full">
|
|
<img
|
|
src="https://encrypted-tbn2.gstatic.com/licensed-image?q=tbn:ANd9GcRizxrFtCGsxUo0DCHu0y-n1aw4G_2xddLVaxUQr-W8jF1EPCyhZTntrTlifAjmSXcVDdpECkPfge6LA0rqy7ope0tOSv5ZMA4QmNZpwQ"
|
|
alt="Barahona"
|
|
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
|
|
<div></div>
|
|
<div className="region-card-info">
|
|
<h4 className="font-caveat text-xl mb-0">Region Sur</h4>
|
|
<h3 className="text-3xl font-bold mb-2">Barahona</h3>
|
|
<span className="text-white/90">65+ listings</span>
|
|
</div>
|
|
<a href="/offer/barahona" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
|
|
<div className="text-xs uppercase font-semibold">Explore more</div>
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ExploreSection; |