A customizable hero section with sliding showcase options, image transitions, and responsive design.
Full version with gsap is available on https://namer-ui.netlify.app
// SliderHeroSectionDemo.tsx
import React from "react";
import { SliderHeroSection } from '@/components/ui/slider-hero-section';
const SliderHeroSectionDemo = () => (
<section>
<div>
<SliderHeroSection
title="Discover cutting-edge tech and top brands at NamerStore – your one-stop destination for brand new, refurbished, and pre-owned electronics"
showcaseOptions={[
{
text: 'Brand New Electronics',
imageUrl:
'https://cdn.21st.dev/assets/mirror/8f/8f14a10dac63c5baf922ac95206dc2f68fbabb02b07a76b5c8ef0b4417c50103.jpg',
},
{
text: 'Refurbished iPhones',
imageUrl:
'https://cdn.21st.dev/assets/mirror/74/74c05ae8d564ee88eafb4c19fbfd9cc1e7e488e70adc551a97e4c546f4eb899e.jpg',
},
{
text: 'Pre-owned Samsung Flagships',
imageUrl:
'https://cdn.21st.dev/assets/mirror/f3/f36ea9e5db80ea127bc6920d9a73d98b51b99b3e6eef1200599c0569094cb925.jpg',
},
]}
onOptionClick={option => console.log(`Clicked item: ${option.text}`)}
onOptionHover={option => console.log(`Hovered item: ${option.text}`)}
/>
</div>
</section>
);
export { SliderHeroSectionDemo };