import { TravelHeroSlider, HeroSlide } from "@/components/ui/travel-slider-hero"; // Adjust path as needed
// --- Sample Data ---
// Using placeholder images from Unsplash.
// In a real app, these would come from your CMS or API.
const sliderItems: HeroSlide[] = [
{
id: "01",
location: "Switzerland Alps",
title: "Saint Antönien",
description:
"Mount marquise stands apart. Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
href: "/discover/saint-antonien",
imageUrl:
"https://cdn.21st.dev/assets/mirror/a3/a326777f85d0b14a43356732b3f828bc6fb52ea5d20c4fa91516d7a67034b5e8.jpg",
thumbnail: {
title: "Saint Antönien",
subtitle: "Switzerland Alps",
imageUrl:
"https://cdn.21st.dev/assets/mirror/59/598578f6597decdded4f6294767c047d2ab306b1e363b985b3f5d6e41bf1366c.jpg",
},
},
{
id: "02",
location: "Japan",
title: "Nagano Prefecture",
description:
"Home to the famous 'Snow Monkeys'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
href: "/discover/nagano",
imageUrl:
"https://cdn.21st.dev/assets/mirror/ee/ee3988c048c0894d75c2c441c0eaf47e55ba739368f7ee02014631de4c608c30.jpg",
thumbnail: {
title: "Nagano",
subtitle: "Japan",
imageUrl:
"https://cdn.21st.dev/assets/mirror/ee/ee3988c048c0894d75c2c441c0eaf47e55ba739368f7ee02014631de4c608c30.jpg",
},
},
{
id: "03",
location: "Sahara Desert - Morocco",
title: "Marrakech Merzouga",
description:
"Experience the vastness of the desert sands. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
href: "/discover/marrakech",
imageUrl:
"https://cdn.21st.dev/assets/mirror/be/be88fe451f10ea6ce6356fb119370b43403a6cf459950e8e2a9979728af955f1.jpg",
thumbnail: {
title: "Marrakech",
subtitle: "Morocco",
imageUrl:
"https://cdn.21st.dev/assets/mirror/be/be88fe451f10ea6ce6356fb119370b43403a6cf459950e8e2a9979728af955f1.jpg",
},
},
{
id: "04",
location: "California, United States",
title: "Yosemite Nat'l Park",
description:
"Awe-inspiring granite cliffs and waterfalls. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
href: "/discover/yosemite",
imageUrl:
"https://cdn.21st.dev/assets/mirror/1f/1fff0f4d186fc6879a953a418342e25d6f23bb5864649febccf37e022a2f9fe1.jpg",
thumbnail: {
title: "Yosemite",
subtitle: "United States",
imageUrl:
"https://cdn.21st.dev/assets/mirror/1f/1fff0f4d186fc6879a953a418342e25d6f23bb5864649febccf37e022a2f9fe1.jpg",
},
},
{
id: "05",
location: "Tarifa, Spain",
title: "Los Lances Beach",
description:
"A paradise for kitesurfing and wind sports. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.",
href: "/discover/los-lances",
imageUrl:
"https://cdn.21st.dev/assets/mirror/dc/dc692b7647eb3822777ad2f82b79cfff9eb3fe3219a99a7023e2212fd30112ee.jpg",
thumbnail: {
title: "Los Lances",
subtitle: "Spain",
imageUrl:
"https://cdn.21st.dev/assets/mirror/dc/dc692b7647eb3822777ad2f82b79cfff9eb3fe3219a99a7023e2212fd30112ee.jpg",
},
},
];
/**
* A demo page to showcase the TravelHeroSlider.
*/
export default function TravelHeroSliderDemo() {
return (
<main>
<TravelHeroSlider items={sliderItems} />
{/* You can add the rest of your page content below */}
<div className="h-screen bg-background p-12">
<h2 className="text-3xl font-bold">Page Content Starts Here</h2>
<p className="text-muted-foreground mt-4">
The hero slider above is a self-contained component.
</p>
</div>
</main>
);
}
