Marco
d44db8165d
- Testimonials: scattered absolute-positioned cards with rotations over a giant background "Testimonials" text (desktop), stacked on mobile - News: bg-[#f3f3f3], rotated vertical heading, 3 article cards with vertical dividers, middle card offset 120px down - Footer: black bg, CTA + socials, hr, giant clipped H.Studio wordmark, "[ Coded By Claude ]" rotated label, legal links Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
export function Footer() {
|
|
return (
|
|
<footer className="bg-black px-4 md:px-8 pt-12 flex flex-col gap-[120px]">
|
|
{/* Top bar: CTA | social (center) | social (right) */}
|
|
<div className="flex flex-col md:flex-row items-start md:items-start justify-between gap-8">
|
|
{/* CTA */}
|
|
<div className="flex flex-col gap-3">
|
|
<p className="font-light italic text-white text-2xl tracking-[-0.04em] uppercase leading-[1.1]">
|
|
Have a{" "}
|
|
<strong className="font-black not-italic">project</strong>{" "}
|
|
in mind?
|
|
</p>
|
|
<button className="self-start border border-white text-white text-sm font-medium tracking-[-0.04em] px-4 py-3 rounded-3xl">
|
|
Let's talk
|
|
</button>
|
|
</div>
|
|
|
|
{/* Center social */}
|
|
<div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-center">
|
|
<p>Facebook</p>
|
|
<p>Instagram</p>
|
|
</div>
|
|
|
|
{/* Right social */}
|
|
<div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-right">
|
|
<p>x.com</p>
|
|
<p>Linkedin</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<hr className="border-t border-white/30 -mt-[96px]" />
|
|
|
|
{/* Bottom: big H.Studio + legal links */}
|
|
<div className="flex items-end justify-between pb-8">
|
|
{/* H.Studio overflowing text + "[ Coded By Claude ]" */}
|
|
<div className="relative overflow-hidden h-[219px] flex-1 max-w-[1093px]">
|
|
{/* "[ Coded By Claude ]" rotated vertical */}
|
|
<div className="absolute left-0 top-1/2 -translate-y-1/2 flex items-center justify-center w-4 h-[160px]">
|
|
<div className="-rotate-90 flex-none">
|
|
<span className="font-mono text-white text-sm uppercase whitespace-nowrap">
|
|
[ Coded By Claude ]
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Giant H.Studio — clipped by overflow-hidden */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<p className="font-semibold text-white capitalize whitespace-nowrap leading-[0.8] tracking-[-0.06em] text-[clamp(120px,20vw,290px)]">
|
|
H.Studio
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legal links */}
|
|
<div className="flex gap-8 pb-8 shrink-0">
|
|
<a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
|
|
licences
|
|
</a>
|
|
<a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
|
|
Privacy policy
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|