import {
Container,
Section,
Text,
Link,
Img,
Row,
Column,
Hr,
Tailwind,
Head,
Font,
} from "@react-email/components";
import * as React from "react";
export const EmailFooter01 = () => {
return (
<Tailwind>
<Head>
{/* Loading a high-quality font for supporting clients */}
<Font
fontFamily="Inter"
fallbackFontFamily="Helvetica"
webFont={{
url: "https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_fjbvMwCp504jAa0ZL7SUc.woff2",
format: "woff2",
}}
fontWeight={400}
fontStyle="normal"
/>
</Head>
<Section className="bg-[#ffffff] py-12 px-4">
<Container className="max-w-[600px] mx-auto">
{/* Top Divider with a bit of flair */}
<Hr className="border-gray-100 mb-8" />
<Row className="mb-10">
<Column>
<Text className="text-[14px] font-semibold text-gray-900 m-0 tracking-tight">
YourBrand.
</Text>
<Text className="text-[12px] text-gray-500 m-0 mt-1">
Building the future of design.
</Text>
</Column>
<Column align="right" className="vertical-align-bottom">
<Link href="#" className="inline-block ml-4">
<Img src="https://your-cdn.com/x-black.png" width="18" height="18" alt="X" />
</Link>
<Link href="#" className="inline-block ml-4">
<Img src="https://your-cdn.com/li-black.png" width="18" height="18" alt="LinkedIn" />
</Link>
</Column>
</Row>
{/* Simple Link Grid */}
<Row className="mb-8">
<Column>
<Link href="#" className="text-[13px] text-gray-600 no-underline mr-6 hover:text-black">
Journal
</Link>
<Link href="#" className="text-[13px] text-gray-600 no-underline mr-6 hover:text-black">
Support
</Link>
<Link href="#" className="text-[13px] text-gray-600 no-underline mr-6 hover:text-black">
Terms
</Link>
</Column>
</Row>
{/* Utility Info Box */}
<Section className="bg-gray-50 rounded-lg p-6 text-left">
<Text className="text-[12px] leading-[20px] text-gray-500 m-0">
You are receiving this because you opted in via our website.
If you’d rather not receive these emails, you can{" "}
<Link href="#" className="text-gray-900 font-medium underline">
unsubscribe here
</Link>.
</Text>
<Text className="text-[12px] leading-[20px] text-gray-400 m-0 mt-4">
© 2026 YourBrand Inc. <br />
2261 Market Street #4667, San Francisco, CA 94114
</Text>
</Section>
</Container>
</Section>
</Tailwind>
);
};
export default EmailFooter01
