Full-screen slider showcasing species with immersive photography and minimal typography. Ideal for conservation websites, awareness campaigns, or storytelling experiences.
import { HeroSlider, type HeroSlide, type NavigationItem } from "@/components/ui/hero";
const WildlifeSliderDemo = () => {
const wildlifeSlides: HeroSlide[] = [
{
title: "Amur Leopard",
subtitle: "Species",
status: "Critically Endangered",
image: "https://cdn.21st.dev/assets/mirror/b7/b72e50fe5c298943bd15e50c2632858a51e6a61d5d7bd00692021313e2992464.jpg"
},
{
title: "Asiatic Lion",
subtitle: "Species",
status: "Endangered",
image: "https://cdn.21st.dev/assets/mirror/1f/1fbfc83ba26f68d7eda60c598607bcc3474390e5070c4bef04c0e4bc46e56346.jpg"
},
{
title: "Siberian Tiger",
subtitle: "Species",
status: "Endangered",
image: "https://cdn.21st.dev/assets/mirror/98/9824d82607cb1ee5ebe66aa15dbc3f2437510ef324fd9c40a5557baad5cb7bc5.jpg"
},
{
title: "Brown Bear",
subtitle: "Species",
status: "Least Concern",
image: "https://cdn.21st.dev/assets/mirror/3e/3e0313580a111d171fa09273b1c7a4ebac5672da34444709e13a12eefce665cf.jpg"
}
];
const navigation: NavigationItem[] = [
{ label: "Species", href: "#", active: true },
{ label: "About Us", href: "#" },
{ label: "Our Work", href: "#" },
{ label: "Get Involved", href: "#" }
];
return (
<HeroSlider
slides={wildlifeSlides}
logo="W"
navigation={navigation}
ctaLink={{ label: "Donate", href: "#" }}
showCounter={true}
showPagination={true}
autoPlay={true}
autoPlayInterval={6000}
/>
);
};
export default WildlifeSliderDemo;