93 lines
4.2 KiB
TypeScript
93 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
import { FOOTER_LINKS } from '../constants';
|
|
|
|
const Footer: React.FC = () => {
|
|
return (
|
|
<footer className="bg-primary dark:bg-black text-white pt-32 pb-12 px-6 md:px-12 border-t border-stone-800">
|
|
<div className="max-w-[1920px] mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 mb-32">
|
|
{/* Brand & Mission */}
|
|
<div className="lg:col-span-5 flex flex-col justify-between h-full">
|
|
<div>
|
|
<h2 className="font-display text-6xl md:text-8xl leading-none tracking-tighter mb-8 bg-gradient-to-br from-white to-stone-400 bg-clip-text text-transparent">
|
|
HOTCHPOTSH
|
|
</h2>
|
|
<p className="font-body text-lg font-light text-stone-400 leading-relaxed max-w-md">
|
|
Handcrafted ceramics for the modern home. Created with intention, fired with patience, and delivered with care.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-16 lg:mt-0">
|
|
<h4 className="text-sm font-bold uppercase tracking-widest mb-6">Join our newsletter</h4>
|
|
<form className="flex flex-col sm:flex-row gap-4 max-w-md" onSubmit={(e) => e.preventDefault()}>
|
|
<input
|
|
className="bg-white/5 border border-white/10 text-white placeholder-stone-500 focus:outline-none focus:border-white/30 text-sm px-6 py-4 w-full transition-colors"
|
|
placeholder="Enter your email"
|
|
type="email"
|
|
/>
|
|
<button
|
|
className="bg-white text-black px-8 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
|
|
type="submit"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Links Columns */}
|
|
<div className="lg:col-span-7 grid grid-cols-2 md:grid-cols-3 gap-12 pt-4">
|
|
<div>
|
|
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[0].title}</h4>
|
|
<ul className="space-y-6">
|
|
{FOOTER_LINKS[0].links.map((link) => (
|
|
<li key={link.label}>
|
|
<a className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" href={link.href}>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[1].title}</h4>
|
|
<ul className="space-y-6">
|
|
{FOOTER_LINKS[1].links.map((link) => (
|
|
<li key={link.label}>
|
|
<a className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" href={link.href}>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[2].title}</h4>
|
|
<ul className="space-y-6">
|
|
{FOOTER_LINKS[2].links.map((link) => (
|
|
<li key={link.label}>
|
|
<a className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" href={link.href}>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="border-t border-white/10 pt-12 flex flex-col md:flex-row justify-between items-center text-xs text-stone-500 tracking-widest uppercase font-light">
|
|
<p>© 2024 HOTCHPOTSH Ceramics. All rights reserved.</p>
|
|
<div className="flex space-x-8 mt-6 md:mt-0">
|
|
<a className="hover:text-white transition-colors" href="#">Privacy</a>
|
|
<a className="hover:text-white transition-colors" href="#">Terms</a>
|
|
<a className="hover:text-white transition-colors" href="#">Cookies</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer; |