// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Button, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { TechFonts } from './tech-fonts'; import { techTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; const letterMaxWidthClass = 'max-w-[430px]'; type TechNewsletterTip = { title: string; body: string; ctaLabel: string; imageSrc: string; }; type TechNewsletterSpotlight = { title: string; body: string; imageSrc: string; buttonLabel: string; }; type TechNewsletterCommunity = { imageSrc: string; headline: string; body: string; ctaLabel: string; }; interface TechNewsletterEmailProps { companyName: string; url: string; } const techNewsletterLetterParagraphs = [ "We're glad you're here. This is our space for Halo ring drops, sizing tips, and the stories behind each batch—we share what we're building, what we're learning, and when limited finishes return.", "No inbox noise—just emails when restocks land, firmware improves, or there's something meaningful for members. Thanks for reading; we're happy you're along for the journey.", ]; const techNewsletterTips: TechNewsletterTip[] = [ { title: 'Pick the right ring size online', body: 'Use our printable sizer or visit a partner store so your Halo sits snug—returns are easier when the first fit is close.', ctaLabel: 'Read More \u2192', imageSrc: `${baseUrl}/static/tech/tech-image-4.png`, }, { title: 'Keep your AI assistant subtle', body: 'Toggle haptics and voice replies in the app so meetings stay quiet while you still get the nudges that matter.', ctaLabel: 'Read More \u2192', imageSrc: `${baseUrl}/static/tech/tech-image-4.png`, }, ]; const techNewsletterSpotlight: TechNewsletterSpotlight = { title: 'Your personal AI companion, wrapped around your finger.', body: 'Halo learns how you shop, move, and focus—then surfaces gentle prompts, order updates, and wellness cues without another screen.', imageSrc: `${baseUrl}/static/tech/tech-image-3.png`, buttonLabel: 'Read More \u2192', }; const techNewsletterCommunity: TechNewsletterCommunity = { imageSrc: `${baseUrl}/static/tech/tech-image-2.png`, headline: "Intelligence that doesn't demand attention.", body: "Shop your finish and size—we'll confirm inventory and ship fast.", ctaLabel: 'Shop Halo', }; /** Tech newsletter — same content blocks as Skin `newsletter.tsx`, light card layout (Figma Email-Templates family). */ export const TechNewsletterEmail = ({ companyName, url, }: TechNewsletterEmailProps) => { return ( The latest from {companyName}

Why your finger is the calmest screen {techNewsletterLetterParagraphs.map((p, i) => ( {p} ))}

{techNewsletterSpotlight.title} {techNewsletterSpotlight.body}

{techNewsletterSpotlight.buttonLabel}

From the Halo journal

{techNewsletterTips.map((tip, idx) => (

{tip.title} {tip.body}

{tip.ctaLabel}

))}

{techNewsletterCommunity.headline} {techNewsletterCommunity.body}

{companyName} is the AI ring on your finger—easy shopping, clear shipping, and real support when you need it.

123 Market Street, Floor 1
Tech City, CA, 94102 Unsubscribe {' '} from {companyName} marketing emails.

); }; TechNewsletterEmail.PreviewProps = { companyName: 'Halo', url: 'https://example.com/', } satisfies TechNewsletterEmailProps; export default TechNewsletterEmail;