You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
12 KiB
203 lines
12 KiB
import { getLocalizedPath, getTranslation, type Locale } from '../i18n/utils';
|
|
import { cssVars } from './css';
|
|
import { Icon, philosophyIcons, selfDevIcons } from '../icons';
|
|
import EcosystemMap from './EcosystemMap';
|
|
|
|
// 每条赛道的诗意句（与 tracks 顺序一致：内容社交/职场服务/数字支付/人工智能/生活服务）
|
|
const trackTaglines = [
|
|
{ zh: '连接志同道合的人，让每一次相遇都真诚而温暖', hk: '連接志同道合的人，讓每一次相遇都真誠而溫暖', en: 'Connect like-minded people — making every encounter sincere and warm' },
|
|
{ zh: '智能匹配机会，让每一步成长都清晰可见', hk: '智能匹配機會，讓每一步成長都清晰可見', en: 'Smart matching of opportunities — making every step of growth clear' },
|
|
{ zh: '安全便捷的场景化支付，让每笔交易都有温度', hk: '安全便捷的場景化支付，讓每筆交易都有溫度', en: 'Secure, convenient scenario-based payment — warmth in every transaction' },
|
|
{ zh: '多模态感知理解，让 AI 成为温暖的生活伙伴', hk: '多模態感知理解，讓 AI 成為溫暖的生活夥伴', en: 'Multi-modal understanding — making AI a warm life companion' },
|
|
{ zh: '以真实心愿为核心，搭建暖心桥梁，助力年轻人梦想落地', hk: '以真實心願為核心，搭建暖心橋樑，助力年輕人夢想落地', en: 'Build warm bridges around real wishes, helping young dreams land' },
|
|
];
|
|
|
|
export default function Business({ locale }: { locale: Locale }) {
|
|
const t = getTranslation(locale);
|
|
const b = t.business;
|
|
const inv = t.innovation;
|
|
const isZh = locale !== 'en';
|
|
const tr = (zh: string, hk: string, en: string) => (locale === 'en' ? en : locale === 'hk' ? hk : zh);
|
|
|
|
return (
|
|
<>
|
|
{/* ===== Page Header — 图文并排 ===== */}
|
|
<section className="band">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-[var(--space-9)]">
|
|
<div className="grid md:grid-cols-2 gap-10 md:gap-14 items-center">
|
|
<div className="scroll-reveal">
|
|
<span className="section-eyebrow">WHAT WE CREATE</span>
|
|
<h1 className="section-title mt-3">{b.title}</h1>
|
|
<p className="section-lead">{b.subtitle}</p>
|
|
<div className="mt-7 flex flex-wrap gap-2.5">
|
|
{b.tracks.slice(0, 5).map((track) => (
|
|
<span key={track.name} className="inline-flex items-center gap-2 text-body font-medium text-[var(--brand-black)] bg-[var(--bg-primary)] border border-[var(--border-light)] rounded-full px-3.5 py-1.5">
|
|
<Icon name={track.icon} className="w-4 h-4 text-[var(--brand-accent)]" />
|
|
{track.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="feature-media scroll-reveal-right h-[300px] md:h-[420px]">
|
|
<img
|
|
src="/innovation-hero.jpg"
|
|
alt={locale === 'en' ? 'BaskBuddy Business Ecosystem' : '巴适伙伴业务生态'}
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== 生态全景图 · 首页3受众 × 业务页4赛道 的桥 ===== */}
|
|
<section id="ecosystem" className="band scroll-mt-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-[var(--space-8)]">
|
|
<div className="text-center scroll-reveal mb-2">
|
|
<span className="section-eyebrow">ECOSYSTEM</span>
|
|
<h2 className="section-title mt-3">{isZh ? '数字生活生态全景图' : 'Digital Life Ecosystem Map'}</h2>
|
|
<p className="section-lead max-w-2xl mx-auto">
|
|
{isZh
|
|
? '同一组产品，两种视角——按赛道看我们造什么，按受众看我们为谁。'
|
|
: 'One product family, two lenses — by track for what we build, by audience for who we serve.'}
|
|
</p>
|
|
</div>
|
|
<div className="scroll-reveal">
|
|
<EcosystemMap locale={locale} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== 五大赛道 → 编辑式方向块 ===== */}
|
|
<div id="biz-tracks" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-10)] space-y-6 scroll-mt-24">
|
|
{b.tracks.map((track, idx) => (
|
|
<section key={track.name} className="scroll-reveal track-card p-8 md:p-10" style={cssVars({ '--track-color': 'var(--accent)' })}>
|
|
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3 mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<span className="icon-tile w-12 h-12 shrink-0">
|
|
<Icon name={track.icon} className="w-6 h-6" />
|
|
</span>
|
|
<h2 className="text-h1 font-bold font-[var(--font-display)] text-[var(--brand-black)] leading-tight">{track.name}</h2>
|
|
</div>
|
|
<span className="font-mono text-body tracking-[0.15em] text-[var(--text-muted)]">{String(idx + 1).padStart(2, '0')} / {String(b.tracks.length).padStart(2, '0')}</span>
|
|
</div>
|
|
<p className="text-body font-medium font-[var(--font-display)] text-[var(--brand-accent)] leading-relaxed mb-8 max-w-3xl">
|
|
{trackTaglines[idx][locale]}
|
|
</p>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
|
|
{track.products.map((p) => {
|
|
return (
|
|
<div
|
|
key={p.name}
|
|
className="flip-card scroll-reveal"
|
|
tabIndex={0}
|
|
role="button"
|
|
aria-expanded="false"
|
|
aria-label={`${p.name} · ${p.slogan}`}
|
|
>
|
|
<div className="flip-card-inner w-full">
|
|
{/* 正面：品牌名 + slogan 高亮 */}
|
|
<div className="flip-card-front rounded-2xl card-surface p-5 flex flex-col">
|
|
<span className="icon-tile w-9 h-9 shrink-0">
|
|
{p.icon && <Icon name={p.icon} className="w-[18px] h-[18px]" />}
|
|
</span>
|
|
<h3 className="mt-3 text-body font-semibold text-[var(--brand-black)] leading-tight">{p.name}</h3>
|
|
<p className="mt-1 text-body italic text-[var(--brand-accent-deep)] leading-snug flex-1">「{p.slogan}」</p>
|
|
<span className="mt-2 text-body font-mono text-[var(--text-muted)] inline-flex items-center gap-1 self-start">
|
|
{tr('翻转看定位', '翻轉看定位', 'Flip for profile')}
|
|
<span aria-hidden="true">↻</span>
|
|
</span>
|
|
</div>
|
|
{/* 翻面：定位 / 人群 / 生态 / 价值 四行 */}
|
|
<div
|
|
className="flip-card-back rounded-2xl border p-5 flex flex-col"
|
|
style={cssVars({
|
|
borderColor: 'color-mix(in oklch, var(--brand-accent) 35%, transparent)',
|
|
background: 'color-mix(in oklch, var(--brand-accent) 7%, var(--bg-primary))',
|
|
})}
|
|
>
|
|
<div className="flex items-baseline gap-2 mb-3">
|
|
<span className="text-body font-semibold text-[var(--brand-accent-deep)]">{p.name}</span>
|
|
<span className="text-body font-mono text-[var(--text-muted)]">{tr('产品定位卡', '產品定位卡', 'Product profile')}</span>
|
|
</div>
|
|
<dl className="grid" style={{ gridTemplateColumns: '3.5rem 1fr', columnGap: '0.625rem', rowGap: '0.5rem' }}>
|
|
<dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('定位', '定位', 'Role')}</dt>
|
|
<dd className="text-body font-medium text-[var(--brand-black)] leading-snug">{p.role}</dd>
|
|
<dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('人群', '人群', 'Users')}</dt>
|
|
<dd className="text-body text-[var(--text-secondary)] leading-snug">{p.audience}</dd>
|
|
<dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('生态', '生態', 'Eco')}</dt>
|
|
<dd className="text-body font-medium text-[var(--brand-accent-deep)] leading-snug">{p.ecosystem}</dd>
|
|
<dt className="text-body uppercase tracking-wider text-[var(--text-muted)] leading-snug" style={{ fontFamily: 'var(--font-body)' }}>{tr('价值', '價值', 'Value')}</dt>
|
|
<dd className="text-body text-[var(--text-secondary)] leading-snug">{p.desc}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
{/* ===== ICIDP 研发哲学（吸收入口 · 原 Innovation 页内容）===== */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-[var(--space-8)]">
|
|
<div className="section-head text-center scroll-reveal">
|
|
<span className="section-eyebrow">R&D PHILOSOPHY</span>
|
|
<h2 className="section-title">{inv.philosophy.title}</h2>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
|
{inv.philosophy.items.map((item, idx) => (
|
|
<div key={item.title} className="scroll-reveal rounded-2xl card-surface p-6 hover:-translate-y-1 hover:shadow-md transition-all duration-300">
|
|
<span className="icon-tile w-9 h-9 mb-4" style={cssVars({ '--track-color': 'var(--brand-accent)' })}>
|
|
<Icon name={philosophyIcons[idx]} className="w-5 h-5" />
|
|
</span>
|
|
<h3 className="text-body font-semibold text-[var(--brand-black)]">{item.title}</h3>
|
|
<p className="text-body font-mono tracking-wide mt-0.5 text-[var(--brand-accent)]">{item.subtitle}</p>
|
|
<p className="mt-3 text-body leading-relaxed text-[var(--text-secondary)]">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== 自研技术布局 ===== */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-10)]">
|
|
<div className="section-head text-center scroll-reveal">
|
|
<span className="section-eyebrow">SELF-DEVELOPED</span>
|
|
<h2 className="section-title">{inv.selfDeveloped.title}</h2>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{inv.selfDeveloped.items.map((item, i) => (
|
|
<div key={item.name} className="scroll-reveal flex items-start gap-4 rounded-2xl card-surface p-5 hover:shadow-sm transition-all duration-300">
|
|
<span className="icon-tile w-9 h-9" style={cssVars({ '--track-color': 'var(--brand-accent)' })}>
|
|
<Icon name={selfDevIcons[i]} className="w-5 h-5" />
|
|
</span>
|
|
<div>
|
|
<h3 className="text-body font-semibold text-[var(--brand-black)]">{item.name}</h3>
|
|
<p className="text-body font-mono tracking-wide text-[var(--text-muted)] mt-0.5">{item.en}</p>
|
|
<p className="mt-2 text-body leading-relaxed text-[var(--text-secondary)]">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== CTA Band ===== */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-10)]">
|
|
<div className="cta-band scroll-reveal px-8 py-14 text-center">
|
|
<h2 className="relative z-10 text-h1 font-bold font-[var(--font-display)] text-white">
|
|
{locale === 'en' ? 'Build the digital life ecosystem with BaskBuddy' : '与巴适伙伴，共建数字生活生态'}
|
|
</h2>
|
|
<div className="relative z-10 mt-7 flex flex-col sm:flex-row items-center justify-center gap-3.5">
|
|
<a href={getLocalizedPath('/contact', locale)} className="btn btn-light btn-lg">
|
|
{locale === 'en' ? 'Business Cooperation' : '商务合作'}
|
|
</a>
|
|
<a href={getLocalizedPath('/about', locale)} className="btn btn-outline-light btn-lg">
|
|
{locale === 'en' ? 'About Us' : '了解我们'}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|