// 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,
Heading,
Html,
Img,
Link,
Preview,
Row,
Section,
Tailwind,
Text,
} from 'react-email';
import { barebonesBoxedTailwindConfig } from './theme';
import { BarebonesFonts } from './theme-fonts';
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: '';
interface ProductUpdateEmailProps {
companyName: string;
url: string;
}
export const ProductUpdateEmail = ({
companyName,
url,
}: ProductUpdateEmailProps) => (
Product update: what's new at {companyName}{companyName}
Product update
Here's what's new with {companyName}
We shipped a new release with improvements to help you move
faster and stay in sync. Open the dashboard to explore the
full changelog.
Starting is easy
Some new things
Quality-of-life fixes
Expect faster load times, clearer status, and fewer clicks
for everyday tasks. We also tightened the spots where
teams tend to get stuck.
Under the hood
Expect faster load times, clearer status, and fewer clicks
for everyday tasks. We also tightened the spots where
teams tend to get stuck.
Some new things
Workflow improvements
Built for teams who need reliability at scale: clearer
behavior, better defaults, and less back-and-forth to
get work done.
Learn about Pro
Reporting & visibility
Built for teams who need reliability at scale: clearer
behavior, better defaults, and less back-and-forth to
get work done.
Learn about Pro
API & integrations
Built for teams who need reliability at scale: clearer
behavior, better defaults, and less back-and-forth to
get work done.
Learn about Pro
Some new things
Get the app.
The fastest, easiest way to use {companyName}.
{/* Footer */}
{companyName} is the catchy slogan that perfectly
encapsulates the vision of our company.
123 Market Street, Floor 1
Tech City, CA, 94102
Unsubscribe
{' '}
from {companyName} marketing emails.
);
function NumberedStep({
n,
title,
body,
last,
}: {
n: string;
title: string;
body: string;
last?: boolean;
}) {
return (
{n}
{title}
{body}
);
}
function BulletCell({ isLast }: { isLast?: boolean }) {
return (
These updates roll out gradually. Check your workspace to see
what's available to you today.
);
}
ProductUpdateEmail.PreviewProps = {
companyName: 'Barebones',
url: 'https://example.com/',
} satisfies ProductUpdateEmailProps;
export default ProductUpdateEmail;
