import {
Container,
Section,
Text,
Link,
Img,
Row,
Column,
Hr,
Tailwind,
Head,
Font,
} from "@react-email/components";
import * as React from "react";
export const DynamicLogoFooter = () => {
return (
<Tailwind>
<Head>
<Font
fontFamily="Geist"
fallbackFontFamily="Helvetica"
webFont={{
url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/files/geist-sans-latin-400-normal.woff2",
format: "woff2",
}}
fontWeight={400}
fontStyle="normal"
/>
</Head>
<Section className="bg-white py-16 px-4">
<Container className="max-w-[600px] mx-auto">
{/* Logo Section - The GIF */}
<Section className="text-center mb-10">
<Img
src="https://i.pinimg.com/originals/7f/ae/97/7fae97b0d62464f833f75a7cce0a9902.gif"
width="64"
height="64"
alt="Animated Brand Logo"
className="mx-auto"
/>
<Text className="text-black text-sm font-bold tracking-[4px] uppercase mt-4">
AESTHETIC LABS
</Text>
</Section>
<Hr className="border-black border-[1.5px] mb-10" />
{/* Main Footer Grid */}
<Row className="mb-10">
<Column className="w-1/2">
<Text className="text-black text-[13px] font-bold uppercase mb-4">
Navigation
</Text>
<Link href="#" className="block text-gray-500 text-[13px] mb-2 no-underline hover:text-black">
Latest Drops
</Link>
<Link href="#" className="block text-gray-500 text-[13px] mb-2 no-underline hover:text-black">
Archive
</Link>
<Link href="#" className="block text-gray-500 text-[13px] no-underline hover:text-black">
Collaborations
</Link>
</Column>
<Column className="w-1/2" align="right">
<Text className="text-black text-[13px] font-bold uppercase mb-4">
Social
</Text>
<Link href="#" className="block text-gray-500 text-[13px] mb-2 no-underline hover:text-black">
Instagram
</Link>
<Link href="#" className="block text-gray-500 text-[13px] mb-2 no-underline hover:text-black">
Discord
</Link>
<Link href="#" className="block text-gray-500 text-[13px] no-underline hover:text-black">
X / Twitter
</Link>
</Column>
</Row>
{/* Bottom Utility Bar */}
<Section className="bg-gray-50 p-6 rounded-sm border border-gray-100">
<Row>
<Column>
<Text className="text-[11px] text-gray-400 m-0 leading-relaxed">
Sent with intent from Aesthetic Labs HQ.<br />
101 Digital Plaza, Neo-Tokyo, 100-0001
</Text>
</Column>
<Column align="right">
<Link href="#" className="text-black text-[11px] font-bold underline">
UNSUBSCRIBE
</Link>
</Column>
</Row>
</Section>
<Text className="text-[10px] text-gray-300 text-center mt-8 tracking-widest uppercase">
Built on the Edge © 2026
</Text>
</Container>
</Section>
</Tailwind>
);
};
export default DynamicLogoFooter
