4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2d92,import { Body, Button, Container, Head as EmailHead, Html, Img, Preview, Section, Text, Heading, Link, } from "jsx-email"; import { DefaultFonts } from "@/components/email/font-default"; import { EmailTailwind } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { emailAsset } from "@/components/email/email-assets"; import { defaultTheme } from "@/components/email/theme-default"; type ImageGridHero_HeroWithImageGridVariant = | "images-bottom" | "images-top" | "offset-images-bottom" | "offset-images-top"; interface ImageGridHero_HeroWithImageGridImage { alt: string; src: string; } interface ImageGridHero_HeroWithImageGridProps { theme?: EmailTheme; eyebrow?: string; heading?: string; subheading?: string; description?: string; ctaLabel?: string; ctaHref?: string; images?: ImageGridHero_HeroWithImageGridImage[]; logoSrc?: string; logoAlt?: string; logoHref?: string; pageBackgroundColor?: string; backgroundColor?: string; buttonBackgroundColor?: string; buttonTextColor?: string; variant?: ImageGridHero_HeroWithImageGridVariant; } const ImageGridHero_fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const ImageGridHero_responsiveStyles = ` @media only screen and (max-width: 599px) { .hero-image-grid-container { width: 100% !important; } .hero-image-grid-heading { font-size: 36px !important; line-height: 40px !important; } .hero-image-grid-image { margin: 0 12px 24px !important; max-width: 96px !important; } .hero-image-grid-gap { display: none !important; } } `; const ImageGridHero_regularImages: ImageGridHero_HeroWithImageGridImage[] = Array.from({ length: 7 }, (_, index) => ({ alt: `Image ${index + 1}`, src: emailAsset(`hero/mosaic-${index + 1}.jpg`), })); const ImageGridHero_offsetImageNumbers = [1, 2, 7, 10, 4, 6, 8, 9, 5, 11]; const ImageGridHero_offsetImages: ImageGridHero_HeroWithImageGridImage[] = ImageGridHero_offsetImageNumbers.map((imageNumber, index) => ({ alt: `Image ${index + 1}`, src: emailAsset(`hero/mosaic-${imageNumber}.jpg`), })); const ImageGridHero_Spacer = ({ height }: { height: number }) => (

‍

); const ImageGridHero_ImageGallery = ({ images, offset, }: { images: ImageGridHero_HeroWithImageGridImage[]; offset: boolean; }) => { const defaults = offset ? ImageGridHero_offsetImages : ImageGridHero_regularImages; const resolvedImages = defaults.map((fallback, index) => images[index] ? { ...fallback, ...images[index] } : fallback ); const imageWidth = offset ? 91 : 120; const wrapAfter = offset ? 4 : 3; return (

{resolvedImages.map((image, index) => ( {image.alt}

{index < resolvedImages.length - 1 && index !== wrapAfter ? ( ) : null} ))}

); }; type ImageGridHero_SectionProps = Required< Omit > & { variant: ImageGridHero_HeroWithImageGridVariant; }; const ImageGridHero_HeroWithImageGridSection = ({ backgroundColor, buttonBackgroundColor, buttonTextColor, ctaHref, ctaLabel, description, eyebrow, heading, images, logoAlt, logoHref, logoSrc, subheading, variant, }: ImageGridHero_SectionProps) => { const imagesFirst = variant.endsWith("-top"); const offset = variant.startsWith("offset-"); const gallery = ( ); const content = (

{eyebrow} {heading} {subheading} {description}

); return (

{imagesFirst ? ( <> {gallery} {content} ) : ( <> {content} {gallery} )}

{ctaLabel && ctaHref ? ( ) : null}

); }; const ImageGridHero_HeroWithImageGrid = ({ backgroundColor = "#fffffe", buttonBackgroundColor = "#4f46e5", buttonTextColor = "#fffffe", ctaHref = "https://example.com", ctaLabel = "Discover now", description = "A curated look at design, culture, and creativity in motion. From classics reborn to boundary-pushing silhouettes — see what's shaping the streets today.", eyebrow = "NEW ARRIVALS", heading = "Step into the hype", images = [], logoAlt = "emailcn", logoHref = "https://example.com", logoSrc = emailAsset("emailcn-logo.png"), pageBackgroundColor = "#f1f5f9", subheading = "The evolution of the sneaker", theme = defaultTheme, variant = "images-bottom", }: ImageGridHero_HeroWithImageGridProps) => (