Skip to content

feat: demo favicon page #2570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: canary
Choose a base branch
from
Open

feat: demo favicon page #2570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
59b6994
feat(demo): use Tailwind v4 on all templates (#2487)
bukinoshita Oct 16, 2025
ac78e90
feat: update demo favicon page
guhrodrrigues Oct 16, 2025
6400cf7
feat: update demo favicon page
guhrodrrigues Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 69 additions & 137 deletions apps/demo/emails/magic-links/aws-verify-email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface AWSVerifyEmailProps {
verificationCode?: string;
Expand All @@ -26,150 +28,80 @@ export default function AWSVerifyEmail({
return (
<Html>
<Head />
<Body style={main}>
<Preview>AWS Email Verification</Preview>
<Container style={container}>
<Section style={coverSection}>
<Section style={imageSection}>
<Img
src={`${baseUrl}/static/aws-logo.png`}
width="75"
height="45"
alt="AWS's Logo"
/>
</Section>
<Section style={upperSection}>
<Heading style={h1}>Verify your email address</Heading>
<Text style={mainText}>
Thanks for starting the new AWS account creation process. We
want to make sure it's really you. Please enter the following
verification code when prompted. If you don&apos;t want to
create an account, you can ignore this message.
</Text>
<Section style={verificationSection}>
<Text style={verifyText}>Verification code</Text>

<Text style={codeText}>{verificationCode}</Text>
<Text style={validityText}>
(This code is valid for 10 minutes)
<Tailwind config={tailwindConfig}>
<Body className="bg-white font-aws text-[#212121]">
<Preview>AWS Email Verification</Preview>
<Container className="p-5 mx-auto bg-[#eee]">
<Section className="bg-white">
<Section className="bg-[#252f3d] flex py-5 items-center justify-center">
<Img
src={`${baseUrl}/static/aws-logo.png`}
width="75"
height="45"
alt="AWS's Logo"
/>
</Section>
<Section className="py-[25px] px-[35px]">
<Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
Verify your email address
</Heading>
<Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
Thanks for starting the new AWS account creation process. We
want to make sure it's really you. Please enter the following
verification code when prompted. If you don&apos;t want to
create an account, you can ignore this message.
</Text>
<Section className="flex items-center justify-center">
<Text className="text-[#333] m-0 font-bold text-center text-[14px]">
Verification code
</Text>

<Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
{verificationCode}
</Text>
<Text className="text-[#333] text-[14px] m-0 text-center">
(This code is valid for 10 minutes)
</Text>
</Section>
</Section>
<Hr />
<Section className="py-[25px] px-[35px]">
<Text className="text-[#333] text-[14px] m-0">
Amazon Web Services will never email you and ask you to
disclose or verify your password, credit card, or banking
account number.
</Text>
</Section>
</Section>
<Hr />
<Section style={lowerSection}>
<Text style={cautionText}>
Amazon Web Services will never email you and ask you to disclose
or verify your password, credit card, or banking account number.
</Text>
</Section>
</Section>
<Text style={footerText}>
This message was produced and distributed by Amazon Web Services,
Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
Services, Inc.. All rights reserved. AWS is a registered trademark
of{' '}
<Link href="https://amazon.com" target="_blank" style={link}>
Amazon.com
</Link>
, Inc. View our{' '}
<Link href="https://amazon.com" target="_blank" style={link}>
privacy policy
</Link>
.
</Text>
</Container>
</Body>
<Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
This message was produced and distributed by Amazon Web Services,
Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
Services, Inc.. All rights reserved. AWS is a registered trademark
of{' '}
<Link
href="https://amazon.com"
target="_blank"
className="text-[#2754C5] underline text-[14px]"
>
Amazon.com
</Link>
, Inc. View our{' '}
<Link
href="https://amazon.com"
target="_blank"
className="text-[#2754C5] underline text-[14px]"
>
privacy policy
</Link>
.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}

AWSVerifyEmail.PreviewProps = {
verificationCode: '596853',
} satisfies AWSVerifyEmailProps;

const main = {
backgroundColor: '#fff',
color: '#212121',
};

const container = {
padding: '20px',
margin: '0 auto',
backgroundColor: '#eee',
};

const h1 = {
color: '#333',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '20px',
fontWeight: 'bold',
marginBottom: '15px',
};

const link = {
color: '#2754C5',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '14px',
textDecoration: 'underline',
};

const text = {
color: '#333',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '14px',
margin: '24px 0',
};

const imageSection = {
backgroundColor: '#252f3d',
display: 'flex',
padding: '20px 0',
alignItems: 'center',
justifyContent: 'center',
};

const coverSection = { backgroundColor: '#fff' };

const upperSection = { padding: '25px 35px' };

const lowerSection = { padding: '25px 35px' };

const footerText = {
...text,
fontSize: '12px',
padding: '0 20px',
};

const verifyText = {
...text,
margin: 0,
fontWeight: 'bold',
textAlign: 'center' as const,
};

const codeText = {
...text,
fontWeight: 'bold',
fontSize: '36px',
margin: '10px 0',
textAlign: 'center' as const,
};

const validityText = {
...text,
margin: '0px',
textAlign: 'center' as const,
};

const verificationSection = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};

const mainText = { ...text, marginBottom: '14px' };

const cautionText = { ...text, margin: '0px' };
140 changes: 42 additions & 98 deletions apps/demo/emails/magic-links/linear-login-code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import {
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
import tailwindConfig from '../tailwind.config';

interface LinearLoginCodeEmailProps {
validationCode?: string;
Expand All @@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({
}: LinearLoginCodeEmailProps) => (
<Html>
<Head />
<Body style={main}>
<Preview>Your login code for Linear</Preview>
<Container style={container}>
<Img
src={`${baseUrl}/static/linear-logo.png`}
width="42"
height="42"
alt="Linear"
style={logo}
/>
<Heading style={heading}>Your login code for Linear</Heading>
<Section style={buttonContainer}>
<Button style={button} href="https://linear.app">
Login to Linear
</Button>
</Section>
<Text style={paragraph}>
This link and code will only be valid for the next 5 minutes. If the
link does not work, you can use the login verification code directly:
</Text>
<code style={code}>{validationCode}</code>
<Hr style={hr} />
<Link href="https://linear.app" style={reportLink}>
Linear
</Link>
</Container>
</Body>
<Tailwind config={tailwindConfig}>
<Body className="bg-white font-linear">
<Preview>Your login code for Linear</Preview>
<Container className="mx-auto my-0 max-w-[560px] px-0 pt-5 pb-12">
<Img
src={`${baseUrl}/static/linear-logo.png`}
width="42"
height="42"
alt="Linear"
className="rounded-3xl w-[42px] h-[42px]"
/>
<Heading className="text-[24px] tracking-[-0.5px] leading-[1.3] font-normal text-[#484848] pt-[17px] px-0 pb-0">
Your login code for Linear
</Heading>
<Section className="py-[27px] px-0">
<Button
className="bg-[#5e6ad2] rounded font-semibold text-white text-[15px] no-underline text-center block py-[11px] px-[23px]"
href="https://linear.app"
>
Login to Linear
</Button>
</Section>
<Text className="mb-[15px] mx-0 mt-0 leading-[1.4] text-[15px] text-[#3c4149]">
This link and code will only be valid for the next 5 minutes. If the
link does not work, you can use the login verification code
directly:
</Text>
<code className="font-mono font-bold px-1 py-px bg-[#dfe1e4] text-[#3c4149] text-[21px] tracking-[-0.3px] rounded">
{validationCode}
</code>
<Hr className="border-[#dfe1e4] mt-[42px] mb-[26px]" />
<Link
href="https://linear.app"
className="text-[#b4becc] text-[14px]"
>
Linear
</Link>
</Container>
</Body>
</Tailwind>
</Html>
);

Expand All @@ -61,74 +76,3 @@ LinearLoginCodeEmail.PreviewProps = {
} as LinearLoginCodeEmailProps;

export default LinearLoginCodeEmail;

const logo = {
borderRadius: 21,
width: 42,
height: 42,
};

const main = {
backgroundColor: '#ffffff',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container = {
margin: '0 auto',
padding: '20px 0 48px',
maxWidth: '560px',
};

const heading = {
fontSize: '24px',
letterSpacing: '-0.5px',
lineHeight: '1.3',
fontWeight: '400',
color: '#484848',
padding: '17px 0 0',
};

const paragraph = {
margin: '0 0 15px',
fontSize: '15px',
lineHeight: '1.4',
color: '#3c4149',
};

const buttonContainer = {
padding: '27px 0 27px',
};

const button = {
backgroundColor: '#5e6ad2',
borderRadius: '3px',
fontWeight: '600',
color: '#fff',
fontSize: '15px',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'block',
padding: '11px 23px',
};

const reportLink = {
fontSize: '14px',
color: '#b4becc',
};

const hr = {
borderColor: '#dfe1e4',
margin: '42px 0 26px',
};

const code = {
fontFamily: 'monospace',
fontWeight: '700',
padding: '1px 4px',
backgroundColor: '#dfe1e4',
letterSpacing: '-0.3px',
fontSize: '21px',
borderRadius: '4px',
color: '#3c4149',
};
Loading
Loading