Overlay

import { OverlayHero } from "@/components/email/overlay-hero";
import { defaultTheme } from "@/components/email/theme-default";

export function OverlayHeroDemo() {
  return (
    <OverlayHero
      treatment="block"
      position="center-left"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentAlignedVariantContentLeftExampleDemo() {
  return <OverlayHero treatment="aligned" variant="content-left" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentAlignedVariantContentLeftReversedExampleDemo() {
  return <OverlayHero treatment="aligned" variant="content-left-reversed" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentAlignedVariantContentRightExampleDemo() {
  return <OverlayHero treatment="aligned" variant="content-right" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentAlignedVariantContentRightReversedExampleDemo() {
  return <OverlayHero treatment="aligned" variant="content-right-reversed" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockPositionCenterLeftExampleDemo() {
  return <OverlayHero treatment="block" position="center-left" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantLeftTopExampleDemo() {
  return <OverlayHero treatment="block" bleed={false} variant="left-top" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantLeftBottomExampleDemo() {
  return <OverlayHero treatment="block" bleed={false} variant="left-bottom" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantLeftFlushVerticalExampleDemo() {
  return (
    <OverlayHero
      treatment="block"
      bleed={false}
      variant="left-flush-vertical"
    />
  );
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantRightCenteredExampleDemo() {
  return (
    <OverlayHero treatment="block" bleed={false} variant="right-centered" />
  );
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantRightTopExampleDemo() {
  return <OverlayHero treatment="block" bleed={false} variant="right-top" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantRightBottomExampleDemo() {
  return <OverlayHero treatment="block" bleed={false} variant="right-bottom" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedFalseVariantRightFlushVerticalExampleDemo() {
  return (
    <OverlayHero
      treatment="block"
      bleed={false}
      variant="right-flush-vertical"
    />
  );
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantLeftCenteredExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="left-centered" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantLeftTopExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="left-top" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantLeftBottomExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="left-bottom" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantLeftFlushVerticalExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="left-flush-vertical" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantRightCenteredExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="right-centered" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantRightTopExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="right-top" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantRightBottomExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="right-bottom" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentBlockBleedVariantRightFlushVerticalExampleDemo() {
  return <OverlayHero treatment="block" bleed variant="right-flush-vertical" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentGradientVariantSplitNoLogoExampleDemo() {
  return <OverlayHero treatment="gradient" variant="split-no-logo" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentGradientVariantSplitWithLogoExampleDemo() {
  return <OverlayHero treatment="gradient" variant="split-with-logo" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentGradientVariantUnifiedNoLogoExampleDemo() {
  return <OverlayHero treatment="gradient" variant="unified-no-logo" />;
}

import { OverlayHero } from "@/components/email/overlay-hero";

export function OverlayHeroTreatmentGradientVariantUnifiedWithLogoExampleDemo() {
  return <OverlayHero treatment="gradient" variant="unified-with-logo" />;
}