Components
Loading preview...
A customizable hero section with diced image grid, gradient text, and responsive design for showcasing content. Credit: https://codepen.io/kristen17/pen/GRXgqaB https://codepen.io/t_afif/pen/LEPBYvK Credit for images is available on https://namer-ui.netlify.app/
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/diced-hero-sectionimport { DicedHeroSection } from "@/components/ui/diced-hero-section.tsx";
// LTR Demo
export function DemoLTR() {
return (
<DicedHeroSection
topText="Discover"
mainText="Freshness"
subMainText="Explore a vibrant harvest of organic, seasonal fruits and vegetables, bursting with flavors. Unveil a paramount selection of naturally delicious and nutritious premium produce sourced directly from local farms!"
buttonText="Shop Now"
slides={[
{
title: "Purple Cauliflower",
image: "https://images.unsplash.com/photo-1620053927547-cf64d4829ff4?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "Strawberry",
image: "https://images.unsplash.com/photo-1623227866882-c005c26dfe41?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "Feijoa",
image: "https://images.unsplash.com/photo-1541857754-557a44522bec?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "Fruits and Vegetables",
image: "https://images.unsplash.com/photo-1646340691161-521e588e9964?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
]}
onMainButtonClick={() => console.log("Main button clicked for LTR")}
onGridImageHover={index => console.log(`Grid image ${index} hovered for LTR`)}
onGridImageClick={index => console.log(`Grid image ${index} clicked for the LTR`)}
topTextStyle={{ color: "var(--diced-hero-section-top-text)" }}
mainTextStyle={{
fontSize: "4.5rem",
gradient: "linear-gradient(45deg, var(--diced-hero-section-main-gradient-from), var(--diced-hero-section-main-gradient-to))",
}}
subMainTextStyle={{ color: "var(--diced-hero-section-sub-text)" }}
buttonStyle={{
backgroundColor: "var(--diced-hero-section-button-bg)",
color: "var(--diced-hero-section-button-fg)",
borderRadius: "2rem",
hoverColor: "var(--diced-hero-section-button-hover-bg)",
hoverForeground: "var(--diced-hero-section-button-hover-fg)",
}}
separatorColor="var(--diced-hero-section-separator)"
mobileBreakpoint={1000}
fontFamily="Arial, sans-serif"
/>
);
}
// RTL Demo
export function DemoRTL() {
return (
<DicedHeroSection
topText="גלה"
mainText="טריות"
subMainText="חקור יבול עשיר של פירות וירקות אורגניים עונתיים, מלאי טעמים. גלה מבחר מעולה של תוצרת איכותית, טעימה וטבעית, מזינה ומגיעה ישירות מחוות מקומיות!"
buttonText="קנה עכשיו"
slides={[
{
title: "כרובית סגולה",
image: "https://images.unsplash.com/photo-1620053927547-cf64d4829ff4?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "תותים",
image: "https://images.unsplash.com/photo-1623227866882-c005c26dfe41?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "פיג'ויה",
image: "https://images.unsplash.com/photo-1541857754-557a44522bec?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "מגוון פירות וירקות",
image: "https://images.unsplash.com/photo-1646340691161-521e588e9964?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
]}
onMainButtonClick={() => console.log("Main button clicked for the RTL")}
onGridImageHover={index => console.log(`Grid image ${index} hovered for RTL`)}
onGridImageClick={index => console.log(`Grid image ${index} clicked for the RTL`)}
topTextStyle={{ color: "var(--diced-hero-section-top-text)" }}
mainTextStyle={{
fontSize: "5rem",
gradient: "linear-gradient(45deg, var(--diced-hero-section-main-gradient-from), var(--diced-hero-section-main-gradient-to))",
}}
subMainTextStyle={{ color: "var(--diced-hero-section-sub-text)" }}
buttonStyle={{
backgroundColor: "var(--diced-hero-section-button-bg)",
color: "var(--diced-hero-section-button-fg)",
borderRadius: "7px",
hoverColor: "var(--diced-hero-section-button-hover-bg)",
hoverForeground: "var(--diced-hero-section-button-hover-fg)",
}}
separatorColor="var(--diced-hero-section-separator)"
maxContentWidth="1190px"
mobileBreakpoint={910}
fontFamily="Arial, sans-serif"
isRTL={true}
/>
);
}