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/
import { 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://cdn.21st.dev/assets/mirror/15/159a229c8c5d1cae2948cea5a0f9592f99858bcb1eb7da12cc895a3bdb0ba585.jpg",
},
{
title: "Strawberry",
image: "https://cdn.21st.dev/assets/mirror/6c/6c2c1b1543ca1ea1cd0ae7ec85acb0b2df08d0bdaa611579e95e741cff8ee3c4.jpg",
},
{
title: "Feijoa",
image: "https://cdn.21st.dev/assets/mirror/a7/a7c2ef7c27e4af66d57a2eaf2ea95a12c36d464c5184f8248f4c5ad49c68518d.jpg",
},
{
title: "Fruits and Vegetables",
image: "https://cdn.21st.dev/assets/mirror/7e/7e9fb9c2818ae998d53086f9736c68a61f8fdfd083e8a925d20990e19fb88609.jpg",
},
]}
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://cdn.21st.dev/assets/mirror/15/159a229c8c5d1cae2948cea5a0f9592f99858bcb1eb7da12cc895a3bdb0ba585.jpg",
},
{
title: "תותים",
image: "https://cdn.21st.dev/assets/mirror/6c/6c2c1b1543ca1ea1cd0ae7ec85acb0b2df08d0bdaa611579e95e741cff8ee3c4.jpg",
},
{
title: "פיג'ויה",
image: "https://cdn.21st.dev/assets/mirror/a7/a7c2ef7c27e4af66d57a2eaf2ea95a12c36d464c5184f8248f4c5ad49c68518d.jpg",
},
{
title: "מגוון פירות וירקות",
image: "https://cdn.21st.dev/assets/mirror/7e/7e9fb9c2818ae998d53086f9736c68a61f8fdfd083e8a925d20990e19fb88609.jpg",
},
]}
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}
/>
);
}