|
|
|
@ -15,7 +15,7 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
locale === 'en' ? en : locale === 'hk' ? hk : zh; |
|
|
|
|
|
|
|
return ( |
|
|
|
<footer className="bg-[#0E0E0E] border-t border-[rgba(255,255,255,0.1)]"> |
|
|
|
<footer className="bg-[var(--brand-black)] border-t border-[color-mix(in_oklch,var(--brand-white)_10%,transparent)]"> |
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16"> |
|
|
|
{/* Main Footer Grid */} |
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 mb-10 md:mb-14"> |
|
|
|
@ -27,25 +27,25 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
alt="BaskBuddy" |
|
|
|
className="w-12 h-12 object-contain rounded-xl bg-white" |
|
|
|
/> |
|
|
|
<span className="font-semibold text-body text-[#EBEAF6]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
<span className="font-semibold text-body text-[var(--brand)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
{brandName} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<p className="text-body leading-relaxed mb-4 text-[rgba(255,255,255,0.6)]"> |
|
|
|
<p className="text-body leading-relaxed mb-4 text-[color-mix(in_oklch,var(--brand-white)_60%,transparent)]"> |
|
|
|
{zhText( |
|
|
|
'以温暖科技，连接美好生活。五大赛道全面覆盖数字生活服务生态。', |
|
|
|
'以溫暖科技，連接美好生活。五大賽道全面覆蓋數位生活服務生態。', |
|
|
|
'Connecting beautiful life with warm tech. Five tracks covering the digital life service ecosystem.', |
|
|
|
)} |
|
|
|
</p> |
|
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-micro font-semibold tracking-[0.06em] uppercase bg-[rgba(235,234,246,0.12)] text-[rgba(235,234,246,0.92)] border border-[rgba(235,234,246,0.22)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-micro font-semibold tracking-[0.06em] uppercase bg-[color-mix(in_oklch,var(--brand)_12%,transparent)] text-[color-mix(in_oklch,var(--brand)_92%,transparent)] border border-[color-mix(in_oklch,var(--brand)_22%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
I·C·I·D·P |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Column 2: Quick Links */} |
|
|
|
<div> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
{zhText('快速导航', '快速導航', 'QUICK LINKS')} |
|
|
|
</h4> |
|
|
|
<div className="flex flex-col gap-3.5 leading-relaxed"> |
|
|
|
@ -53,7 +53,7 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
<a |
|
|
|
key={key} |
|
|
|
href={getLocalizedPath(`/${key === 'home' ? '' : key}`, locale)} |
|
|
|
className="inline-flex items-center text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]" |
|
|
|
className="inline-flex items-center text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]" |
|
|
|
> |
|
|
|
{label} |
|
|
|
</a> |
|
|
|
@ -63,12 +63,12 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
|
|
|
|
{/* Column 3: Tracks */} |
|
|
|
<div> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
{zhText('业务赛道', '業務賽道', 'BUSINESS TRACKS')} |
|
|
|
</h4> |
|
|
|
<div className="flex flex-col gap-3.5 leading-relaxed"> |
|
|
|
{Object.entries(t.home.tracks).map(([key, track]) => ( |
|
|
|
<a key={key} href="/business" className="inline-flex items-center gap-2 text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]"> |
|
|
|
<a key={key} href="/business" className="inline-flex items-center gap-2 text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]"> |
|
|
|
<Icon name={trackIcons[key]} className="w-4 h-4" /> |
|
|
|
{track.name} |
|
|
|
</a> |
|
|
|
@ -78,19 +78,19 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
|
|
|
|
{/* Column 4: Contact */} |
|
|
|
<div> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
<h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}> |
|
|
|
{zhText('联系我们', '聯繫我們', 'CONTACT')} |
|
|
|
</h4> |
|
|
|
<div className="flex flex-col gap-3.5 leading-relaxed"> |
|
|
|
<a href="/contact" className="text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]"> |
|
|
|
<a href="/contact" className="text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]"> |
|
|
|
{zhText('求职咨询', '求職諮詢', 'Job Inquiry')} |
|
|
|
</a> |
|
|
|
<a href="/contact" className="text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]"> |
|
|
|
<a href="/contact" className="text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]"> |
|
|
|
{zhText('商务合作', '商務合作', 'Business Cooperation')} |
|
|
|
</a> |
|
|
|
<a |
|
|
|
href="mailto:baskbuddy@163.com" |
|
|
|
className="text-body font-medium transition-all duration-200 hover:underline underline-offset-2 text-[#EBEAF6] hover:text-[#FFFFFF]" |
|
|
|
className="text-body font-medium transition-all duration-200 hover:underline underline-offset-2 text-[var(--brand)] hover:text-[var(--brand-white)]" |
|
|
|
style={{ fontFamily: 'var(--font-body)' }} |
|
|
|
title={zhText('点击发送邮件 (求职)', '點擊發送郵件 (求職)', 'Click to send email (Jobs)')} |
|
|
|
> |
|
|
|
@ -98,13 +98,13 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
</a> |
|
|
|
<a |
|
|
|
href="mailto:baskbuddy@163.com" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[rgba(255,255,255,0.85)]" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[color-mix(in_oklch,var(--brand-white)_85%,transparent)]" |
|
|
|
style={{ fontFamily: 'var(--font-body)' }} |
|
|
|
title={zhText('点击发送邮件 (商务)', '點擊發送郵件 (商務)', 'Click to send email (Business)')} |
|
|
|
> |
|
|
|
baskbuddy@163.com |
|
|
|
</a> |
|
|
|
<p className="flex items-start gap-1 text-micro text-[rgba(255,255,255,0.5)]" title={zhText('巴适伙伴（上海）科技有限公司 办公地址', '巴適夥伴（上海）科技有限公司 辦公地址', 'BaskBuddy (Shanghai) Office')}> |
|
|
|
<p className="flex items-start gap-1 text-micro text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" title={zhText('巴适伙伴（上海）科技有限公司 办公地址', '巴適夥伴（上海）科技有限公司 辦公地址', 'BaskBuddy (Shanghai) Office')}> |
|
|
|
<Icon name="mapPin" className="w-3.5 h-3.5 shrink-0 mt-0.5" /> |
|
|
|
<span>{zhText('中国 · 上海市静安区康宁路288弄2号410室', '中國 · 上海市靜安區康寧路288弄2號410室', "Room 410, No.2, Lane 288, Kangning Rd, Jing'an District, Shanghai, China")}</span> |
|
|
|
</p> |
|
|
|
@ -113,9 +113,9 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Bottom Bar */} |
|
|
|
<div className="border-t border-[rgba(255,255,255,0.1)] pt-6 flex flex-col md:flex-row items-center justify-between gap-5"> |
|
|
|
<div className="border-t border-[color-mix(in_oklch,var(--brand-white)_10%,transparent)] pt-6 flex flex-col md:flex-row items-center justify-between gap-5"> |
|
|
|
<div className="flex flex-col md:flex-row items-center gap-3 md:gap-4 text-center md:text-left"> |
|
|
|
<p className="text-micro text-[rgba(255,255,255,0.5)]"> |
|
|
|
<p className="text-micro text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]"> |
|
|
|
{zhText( |
|
|
|
`© 2026 巴适伙伴（上海）科技有限公司. 保留所有权利`, |
|
|
|
`© 2026 巴適夥伴（上海）科技有限公司. 保留所有權利`, |
|
|
|
@ -126,7 +126,7 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
href="https://beian.miit.gov.cn/" |
|
|
|
target="_blank" |
|
|
|
rel="noopener noreferrer" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6]" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)]" |
|
|
|
title={zhText('工信部ICP/IP地址/域名信息备案管理系统', '工信部ICP/IP地址/域名信息備案管理系統', 'MIIT ICP Filing Query (China)')} |
|
|
|
> |
|
|
|
{icpNumber} |
|
|
|
@ -135,7 +135,7 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
href="https://beian.mps.gov.cn/" |
|
|
|
target="_blank" |
|
|
|
rel="noopener noreferrer" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6] inline-flex items-center gap-1" |
|
|
|
className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)] inline-flex items-center gap-1" |
|
|
|
title={zhText('全国互联网安全管理服务平台 — 公安备案', '全國互聯網安全管理服務平台 — 公安備案', 'MPS Public Security Internet Filing (China)')} |
|
|
|
> |
|
|
|
<Icon name="shieldCheck" className="w-3.5 h-3.5" /> |
|
|
|
@ -145,11 +145,11 @@ export default function Footer({ locale }: { locale: Locale }) { |
|
|
|
`PSB Filing Code ${psbFilingCode}`, |
|
|
|
)} |
|
|
|
</a> |
|
|
|
<a href="/privacy" className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6]"> |
|
|
|
<a href="/privacy" className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)]"> |
|
|
|
{zhText('隐私政策', '隱私政策', 'Privacy')} |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<p className="text-micro font-semibold tracking-wide text-[rgba(255,255,255,0.45)]" style={{ fontFamily: 'var(--font-body)' }} aria-hidden="true"> |
|
|
|
<p className="text-micro font-semibold tracking-wide text-[color-mix(in_oklch,var(--brand-white)_45%,transparent)]" style={{ fontFamily: 'var(--font-body)' }} aria-hidden="true"> |
|
|
|
Integrity · Courage · Innovation · Devotion · Passion |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
doublex001
3 months ago