admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Full website

Browse Source
This commit is contained in:
Your Name committed 2026-06-17 07:42:59 -04:00
1 parent 807c43ece5
commit ea9f33f60e
40 files changed
+4503 -1202
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/Footer.tsx
+24 -23
View File
@@ -2,6 +2,7 @@
import Link from 'next/link'
import type { Category } from '@homaroma/types'
import { useTranslation } from 'react-i18next'
import { resolveLocalized } from '../lib/localization'
interface FooterProps {
categories?: Category[]
@@ -10,18 +11,18 @@ interface FooterProps {
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">
<footer className="border-t border-gray-200 bg-white px-6 py-20 text-pop-black">
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
<div className="space-y-6">
<div className="text-2xl font-bold tracking-widest">
HomAroma <span className="text-cyan-glow text-sm font-light italic">Essential</span>
HomAroma <span className="text-sm font-semibold italic text-pop-pink">Essential</span>
</div>
<p className="text-slate-500 text-sm leading-relaxed">
<p className="text-sm leading-relaxed text-gray-600">
{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">
<a key={s} href="#" className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white">
{s}
</a>
))}
@@ -29,42 +30,42 @@ export default function Footer({ categories = [] }: FooterProps) {
</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 href="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
<Link href="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
<Link href="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
<Link href="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
<Link href="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
<Link href="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600">
<Link href="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link>
<Link href="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link>
<Link href="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link>
<Link href="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link>
<Link href="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link>
<Link href="/faq" className="transition-colors hover:text-pop-pink">{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">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600">
{categories.map((c) => (
<Link key={c.id} href={`/category/${c.id}`} className="hover:text-white transition-colors">
{typeof c.name === 'string' ? c.name : (c.name as any)?.th || (c.name as any)?.en || ''}
<Link key={c.id} href={`/category/${c.id}`} className="transition-colors hover:text-pop-pink">
{resolveLocalized(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">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">Newsletter</h4>
<p className="text-xs text-gray-500">Subscribe for exclusive releases and sensory wisdom.</p>
<div className="flex rounded-xl border border-gray-200 bg-pop-bg p-1">
<input
type="email"
placeholder="Your email"
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
className="w-full border-none bg-transparent p-2 text-sm text-pop-black outline-none placeholder:text-gray-400"
/>
<button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
<button className="shrink-0 rounded-lg bg-pop-black px-4 py-2 text-xs font-bold uppercase text-white transition-colors hover:bg-pop-pink">
Join
</button>
</div>
<p className="text-[10px] text-slate-600 uppercase tracking-widest">
<p className="text-[10px] uppercase tracking-widest text-gray-500">
© {new Date().getFullYear()} HomAroma. {t('footer.rights')}
</p>
</div>