TemplatesSaaS Launch Email
SaaS Launch Email
ReceiptFinanceOnboarding
import {
Body,
Button,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Section,
Text,
Tailwind,
Row,
Column,
} from "@react-email/components";
import * as React from "react";
export const SaaSLaunchEmail = () => {
const previewText = "🚀 The future of workflow is here. Meet Nexus.";
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
brand: "#6366f1",
dark: "#0f172a",
card: "#1e293b",
},
},
},
}}
>
<Body className="bg-slate-50 font-sans">
<Container className="mx-auto my-10 max-w-150 overflow-hidden rounded-xl border border-solid border-slate-200 bg-white shadow-lg">
{/* --- Hero Section --- */}
<Section className="bg-dark p-10 text-center">
<Img
src="https://pngimg.com/uploads/ibm/ibm_PNG19649.png"
width="60"
// height="40"
alt="Logo"
className="mx-auto mb-6"
/>
<Heading className="m-0 text-[32px] font-bold leading-tight text-white">
Work at the speed <br /> of thought.
</Heading>
<Text className="mt-4 text-[16px] leading-6 text-slate-400">
Nexus is officially live. Automate your complex workflows with AI-driven agents that learn your business in minutes.
</Text>
<Button
className="mt-6 rounded-lg bg-brand px-8 py-4 text-[16px] font-semibold text-white no-underline"
href="https://nexus.so/launch"
>
Claim Early Access
</Button>
</Section>
{/* --- "Creative" Bento Feature Grid --- */}
{/* Note: Standard CSS Grid has limited support, so we use Row/Column for maximum email compatibility */}
<Section className="p-10">
<Text className="mb-4 text-xs font-bold uppercase tracking-widest text-brand">
Product Features
</Text>
{/* Row 1: Large Feature */}
<Row className="mb-4">
<Column className="rounded-2xl bg-slate-900 p-6 text-white">
<Heading as="h3" className="m-0 text-[20px] font-bold">
AI Content Strategy
</Heading>
<Text className="text-slate-400">
Generate 30 days of content in 30 seconds.
</Text>
<Img
src="https://cdn.dribbble.com/userupload/8817245/file/original-fe6d08b5e2b3f7fb2fad97cfbe501ac3.png?resize=1504x1128&vertical=center"
alt="dashboard"
className="mt-4 w-full rounded-lg"
/>
</Column>
</Row>
{/* Row 2: Two Small Features */}
<Row>
<Column className="pr-2 w-1/2">
<Section className="rounded-2xl border border-solid border-slate-200 bg-white p-6 h-45">
<Heading as="h4" className="m-0 text-[16px] font-bold text-dark">
Instant API
</Heading>
<Text className="text-[14px] text-slate-600">
Connect your tools in one click.
</Text>
</Section>
</Column>
<Column className="pl-2 w-1/2">
<Section className="rounded-2xl border border-solid border-slate-200 bg-slate-50 p-6 h-45">
<Heading as="h4" className="m-0 text-[16px] font-bold text-dark">
Team Sync
</Heading>
<Text className="text-[14px] text-slate-600">
Real-time collaboration for global teams.
</Text>
</Section>
</Column>
</Row>
</Section>
{/* --- Social Proof / Testimonial --- */}
<Section className="bg-slate-50 px-10 py-7.5 text-center">
<Text className="italic text-slate-600">
"Nexus has completely removed the 'busy work' from our sprint planning. It's a game changer for mid-market SaaS."
</Text>
<Row className="mt-4 inline-block">
<Column className="align-middle">
<Img
src="https://letsryl.s3.amazonaws.com/jobseekers-profile/profilePicture/myDp.jpg"
width="32"
height="32"
alt="profilePicture"
className="rounded-full"
/>
</Column>
<Column className="pl-3 text-left">
<Text className="m-0 text-sm font-bold text-dark">Alex Rivera</Text>
<Text className="m-0 text-xs text-slate-500">CTO at TechFlow</Text>
</Column>
</Row>
</Section>
{/* --- Footer --- */}
<Section className="p-10 text-center">
<Row className="mb-6 justify-center text-center">
<Column className="px-2">
<Link href="https://twitter.com" className="text-xs text-slate-400 no-underline">Twitter</Link>
</Column>
<Column className="px-2">
<Link href="https://linkedin.com" className="text-xs text-slate-400 no-underline">LinkedIn</Link>
</Column>
<Column className="px-2">
<Link href="https://github.com" className="text-xs text-slate-400 no-underline">GitHub</Link>
</Column>
</Row>
<Text className="text-[12px] text-slate-400">
© 2026 Nexus Inc. 123 Innovation Way, San Francisco, CA
</Text>
<Text className="text-[12px] text-slate-400">
You're receiving this because you signed up for our waitlist.{" "}
<Link href="#" className="text-brand underline">Unsubscribe</Link>
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export default SaaSLaunchEmail;