4b: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"] 4c: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"] 4d:T7a46,import { Body, Container, Head as EmailHead, Html, Preview, Section, Row, Column, Text, Heading, Link, Img, } from "jsx-email"; import { Fragment } from "react"; import type { CSSProperties } from "react"; 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 OverlapContentHero_HeroWithOverlappedContentVariant = | "basic" | "reversed" | "basic-with-gradient" | "reversed-with-gradient"; interface OverlapContentHero_HeroWithOverlappedContentProps { theme?: EmailTheme; eyebrow?: string; heading?: string; subheading?: string; description?: string; ctaLabel?: string; ctaHref?: string; backgroundImageSrc?: string; imageAlt?: string; logoSrc?: string; logoAlt?: string; logoHref?: string; pageBackgroundColor?: string; contentBackgroundColor?: string; textColor?: string; buttonBackgroundColor?: string; buttonTextColor?: string; variant?: OverlapContentHero_HeroWithOverlappedContentVariant; } interface OverlapContentHero_VariantPreset { backgroundImageSrc: string; backgroundPosition: "bottom" | "top"; backgroundSize: string; contentBackgroundColor: string; description: string; eyebrow: string; heading: string; imageAlt: string; reversedSpacer: number; subheading: string; textColor: string; } const OverlapContentHero_fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const OverlapContentHero_variantPresets: Record< OverlapContentHero_HeroWithOverlappedContentVariant, OverlapContentHero_VariantPreset > = { basic: { backgroundImageSrc: emailAsset(`hero/overlapped-content-bg-1.jpg`), backgroundPosition: "top", backgroundSize: "600px 630px", contentBackgroundColor: "#fffffe", description: "Every vein tells a story of adaptation and survival. Explore the microscopic architecture of leaves — where biology, design, and evolution converge in perfect symmetry.", eyebrow: "NATURE COLLECTION", heading: "Geometry of life", imageAlt: "Microscopic geometry of a leaf", reversedSpacer: 0, subheading: "Edition No.5", textColor: "#030712", }, "basic-with-gradient": { backgroundImageSrc: emailAsset(`hero/overlapped-content-bg-3.jpg`), backgroundPosition: "top", backgroundSize: "600px 630px", contentBackgroundColor: "linear-gradient(to top, #fffffe 50%, rgba(255, 255, 255, 0))", description: "Vast golden sands meet rugged mountain peaks — where silence speaks louder than words. Explore landscapes shaped by time, and uncover the raw beauty of the desert wilderness waiting to be found.", eyebrow: "Morocco", heading: "Into the dunes", imageAlt: "Golden dunes and mountain peaks in Morocco", reversedSpacer: 0, subheading: "Edition No.5", textColor: "#030712", }, reversed: { backgroundImageSrc: emailAsset(`hero/overlapped-content-bg-2.jpg`), backgroundPosition: "bottom", backgroundSize: "600px 687px", contentBackgroundColor: "#fffffe", description: "Delve into the intricate world of fungi — the unseen architects of ecosystems. Explore how mycelial networks sustain life, recycle nutrients, and reveal the complexity of Earth’s natural systems.", eyebrow: "Microbiology in Motion", heading: "Nature’s hidden networks", imageAlt: "Fungal network in a forest", reversedSpacer: 200, subheading: "Edition No.5", textColor: "#030712", }, "reversed-with-gradient": { backgroundImageSrc: emailAsset(`hero/overlapped-content-bg-4.jpg`), backgroundPosition: "bottom", backgroundSize: "600px 687px", contentBackgroundColor: "linear-gradient(to bottom, #030712 32%, rgba(3, 7, 18, 0))", description: "Step into a world of untouched beauty and icy grandeur. From towering glaciers to vast, silent expanses, explore the last great wilderness on Earth. Begin your Antarctic adventure today.", eyebrow: "Journey to the edge of the earth", heading: "Antarctica", imageAlt: "Glacial wilderness in Antarctica", reversedSpacer: 288, subheading: "Edition No.5", textColor: "#f9fafb", }, }; const OverlapContentHero_responsiveStyles = ` @media only screen and (max-width: 599px) { .hero-overlapped-content-side { width: 28px !important; } } .hero-overlapped-content-cta:hover { background-color: #4338ca !important; } `; type OverlapContentHero_SectionProps = Omit< OverlapContentHero_HeroWithOverlappedContentProps, "theme" >; const OverlapContentHero_HeroWithOverlappedContentSection = ( props: OverlapContentHero_SectionProps ) => { const { backgroundImageSrc, buttonBackgroundColor, buttonTextColor, contentBackgroundColor, ctaHref, ctaLabel, description, eyebrow, heading, imageAlt, logoAlt, logoHref, logoSrc, pageBackgroundColor, subheading, textColor, variant, } = { buttonBackgroundColor: "#4f46e5", buttonTextColor: "#fffffe", ctaHref: "https://example.com", ctaLabel: "Discover now", logoAlt: "emailcn", logoHref: "https://example.com", logoSrc: emailAsset(`emailcn-logo-light.png`), pageBackgroundColor: "#f1f5f9", variant: "basic" as OverlapContentHero_HeroWithOverlappedContentVariant, ...props, }; const preset = OverlapContentHero_variantPresets[variant]; const isReversed = variant.startsWith("reversed"); const hasGradient = variant.endsWith("with-gradient"); const resolvedContentBackground = contentBackgroundColor ?? preset.contentBackgroundColor; const resolvedTextColor = textColor ?? preset.textColor; const content = (

{eyebrow ?? preset.eyebrow} {heading ?? preset.heading} {subheading ?? preset.subheading}

‍

{description ?? preset.description}

‍

{ctaLabel && ctaHref ? ( {ctaLabel}

) : null}

); const logo = (

); return (

‍ {isReversed ? null : (

‍

)}

‍ {isReversed ? ( <> {content}

‍

{logo}

‍

) : ( <> {logo}

‍

{content}

‍

)} ‍

‍

); }; const OverlapContentHero_HeroWithOverlappedContent = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "basic", ...props }: OverlapContentHero_HeroWithOverlappedContentProps) => { const preset = OverlapContentHero_variantPresets[variant]; return (