Initial commit for homaroma

apps/website/src/components/Footer.tsx

@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom'
+import type { Category } from '../types'
+import { useTranslation } from 'react-i18next'
+
+interface FooterProps {
+  categories?: Category[]
+}
+
+export default function Footer({ categories = [] }: FooterProps) {
+  const { t } = useTranslation()
+  return (
+    <footer className="bg-black py-20 px-6 border-t border-white/5">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
+        <div className="space-y-6">
+          <div className="text-2xl font-bold tracking-widest">
+            iRelax <span className="text-cyan-glow text-sm font-light italic">Essential</span>
+          </div>
+          <p className="text-slate-500 text-sm leading-relaxed">
+            {t('footer.catchphrase')}
+          </p>
+          <div className="flex gap-4">
+            {['IG', 'FB', 'TW', 'YT'].map((s) => (
+              <a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
+                {s}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.explore')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-slate-400">
+            <Link to="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
+            <Link to="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
+            <Link to="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
+            <Link to="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
+            <Link to="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
+            <Link to="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('nav.collections')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-slate-400">
+            {categories.map((c) => (
+              <Link key={c.id} to={`/category/${c.id}`} className="hover:text-white transition-colors">
+                {c.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">Newsletter</h4>
+          <p className="text-xs text-slate-500">Subscribe for exclusive releases and sensory wisdom.</p>
+          <div className="flex bg-white/5 border border-white/10 p-1 rounded-sm">
+            <input
+              type="email"
+              placeholder="Your email"
+              className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
+            />
+            <button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
+              Join
+            </button>
+          </div>
+          <p className="text-[10px] text-slate-600 uppercase tracking-widest">
+            © {new Date().getFullYear()} iRelax Essential. {t('footer.rights')}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}