381 lines
20 KiB
TypeScript
381 lines
20 KiB
TypeScript
|
import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
|
||
|
|
import { generateMetadata as generateSEOMetadata } from '@/lib/seo';
|
||
|
|
import Layout from '@/components/Layout';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
interface NewsPageProps {
|
||
|
|
params: {
|
||
|
|
locale: Locale;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function generateStaticParams() {
|
||
|
|
const locales = ['zh-CN', 'zh-TW', 'en'];
|
||
|
|
return locales.map((locale) => ({
|
||
|
|
locale,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function generateMetadata({ params }: NewsPageProps) {
|
||
|
|
return generateSEOMetadata(params.locale, 'news');
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function NewsPage({ params }: NewsPageProps) {
|
||
|
|
const { locale } = params;
|
||
|
|
const [common, news] = await Promise.all([
|
||
|
|
getTranslations(locale, 'common'),
|
||
|
|
getTranslations(locale, 'news'),
|
||
|
|
]);
|
||
|
|
|
||
|
|
const navigationPaths = getNavigationPaths(locale);
|
||
|
|
const navigation = [
|
||
|
|
{
|
||
|
|
name: common.navigation.home,
|
||
|
|
href: navigationPaths.find((p) => p.key === 'home')?.path || '/',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: common.navigation.products,
|
||
|
|
href: navigationPaths.find((p) => p.key === 'products')?.path || '/products',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: common.navigation.news,
|
||
|
|
href: navigationPaths.find((p) => p.key === 'news')?.path || '/news',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: common.navigation.support,
|
||
|
|
href: navigationPaths.find((p) => p.key === 'support')?.path || '/support',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: common.navigation.about,
|
||
|
|
href: navigationPaths.find((p) => p.key === 'about')?.path || '/about',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// Separate featured and regular articles
|
||
|
|
const featuredArticles = news.articles.filter((article: any) => article.featured);
|
||
|
|
const regularArticles = news.articles.filter((article: any) => !article.featured);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout locale={locale} navigation={navigation} common={common} data-oid="0vnem-m">
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section
|
||
|
|
className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-indigo-100"
|
||
|
|
data-oid="_z.k3zw"
|
||
|
|
>
|
||
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="_3g2-tz">
|
||
|
|
<h1
|
||
|
|
className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
|
||
|
|
data-oid="hwhf6yk"
|
||
|
|
>
|
||
|
|
{news.title}
|
||
|
|
</h1>
|
||
|
|
<p
|
||
|
|
className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
|
||
|
|
data-oid="475_6p4"
|
||
|
|
>
|
||
|
|
{news.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Categories Filter */}
|
||
|
|
<section className="py-8 px-4 sm:px-6 lg:px-8 bg-white border-b" data-oid=".1agyst">
|
||
|
|
<div className="max-w-6xl mx-auto" data-oid="8lpvlgm">
|
||
|
|
<div className="flex flex-wrap justify-center gap-4" data-oid="x9w74q0">
|
||
|
|
<button
|
||
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-full text-sm font-medium"
|
||
|
|
data-oid="m36b8uf"
|
||
|
|
>
|
||
|
|
{locale === 'en' ? 'All' : locale === 'zh-TW' ? '全部' : '全部'}
|
||
|
|
</button>
|
||
|
|
{news.categories.map((category: any) => (
|
||
|
|
<button
|
||
|
|
key={category.id}
|
||
|
|
className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors"
|
||
|
|
data-oid="1mk88jz"
|
||
|
|
>
|
||
|
|
{category.name}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Featured Articles */}
|
||
|
|
{featuredArticles.length > 0 && (
|
||
|
|
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="j5o7dgs">
|
||
|
|
<div className="max-w-6xl mx-auto" data-oid="-67:-eb">
|
||
|
|
<h2
|
||
|
|
className="text-3xl font-light mb-12 text-gray-900 text-center"
|
||
|
|
data-oid="f0:azse"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Featured Stories'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '精選報導'
|
||
|
|
: '精选报道'}
|
||
|
|
</h2>
|
||
|
|
<div
|
||
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
|
|
data-oid=":97aius"
|
||
|
|
>
|
||
|
|
{featuredArticles.map((article: any, index: number) => (
|
||
|
|
<article
|
||
|
|
key={article.id}
|
||
|
|
className="bg-white rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group hover:-translate-y-1"
|
||
|
|
data-oid="f:en70o"
|
||
|
|
>
|
||
|
|
{/* Article Image */}
|
||
|
|
<div
|
||
|
|
className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden"
|
||
|
|
data-oid="2t.wnic"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 bg-black/20"
|
||
|
|
data-oid="i4ukfzz"
|
||
|
|
></div>
|
||
|
|
<div className="absolute top-4 left-4" data-oid="k71eke4">
|
||
|
|
<span
|
||
|
|
className="px-3 py-1 bg-white/90 text-gray-800 text-xs rounded-full font-medium"
|
||
|
|
data-oid=".sw53_f"
|
||
|
|
>
|
||
|
|
{article.category}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="absolute bottom-4 right-4"
|
||
|
|
data-oid="-h749rl"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className="px-2 py-1 bg-red-500 text-white text-xs rounded-full font-medium"
|
||
|
|
data-oid="hncsyw7"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Featured'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '精選'
|
||
|
|
: '精选'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6" data-oid="ve46565">
|
||
|
|
<div
|
||
|
|
className="flex items-center gap-2 mb-3 text-sm text-gray-500"
|
||
|
|
data-oid=":wckr.6"
|
||
|
|
>
|
||
|
|
<span data-oid="ry:qh2b">{article.date}</span>
|
||
|
|
<span data-oid="f4btvsg">•</span>
|
||
|
|
<span data-oid="v_wu-ue">{article.readTime}</span>
|
||
|
|
</div>
|
||
|
|
<Link
|
||
|
|
href={`/${locale === 'zh-CN' ? '' : locale + '/'}news/${article.id}`}
|
||
|
|
data-oid="f2dc6fr"
|
||
|
|
>
|
||
|
|
<h3
|
||
|
|
className="text-xl font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2 cursor-pointer"
|
||
|
|
data-oid="9m9sdpe"
|
||
|
|
>
|
||
|
|
{article.title}
|
||
|
|
</h3>
|
||
|
|
</Link>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 font-light leading-relaxed mb-4 text-sm line-clamp-3"
|
||
|
|
data-oid="apln_2n"
|
||
|
|
>
|
||
|
|
{article.excerpt}
|
||
|
|
</p>
|
||
|
|
<Link
|
||
|
|
href={`/${locale}/news/${article.id}`}
|
||
|
|
className="text-blue-600 hover:text-blue-800 font-light text-sm flex items-center gap-1"
|
||
|
|
data-oid="v7lxwey"
|
||
|
|
>
|
||
|
|
{news.readMore}
|
||
|
|
<svg
|
||
|
|
className="w-4 h-4"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid="ktuqoe-"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M9 5l7 7-7 7"
|
||
|
|
data-oid="kvo-txc"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Regular Articles */}
|
||
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="v4v_qyp">
|
||
|
|
<div className="max-w-5xl mx-auto" data-oid="xw5.vf6">
|
||
|
|
<h2
|
||
|
|
className="text-3xl font-light mb-12 text-gray-900 text-center"
|
||
|
|
data-oid="nqeg.nx"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Latest News'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '最新消息'
|
||
|
|
: '最新消息'}
|
||
|
|
</h2>
|
||
|
|
<div className="space-y-8" data-oid="dvi3cq5">
|
||
|
|
{regularArticles.map((article: any, index: number) => (
|
||
|
|
<article
|
||
|
|
key={article.id}
|
||
|
|
className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-100"
|
||
|
|
data-oid="u.554nu"
|
||
|
|
>
|
||
|
|
<div className="flex flex-col lg:flex-row gap-6" data-oid="ak2f2lg">
|
||
|
|
<div className="lg:w-1/3" data-oid="8qjnsik">
|
||
|
|
<div
|
||
|
|
className="aspect-video bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg"
|
||
|
|
data-oid="a:bubtr"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<div className="lg:w-2/3" data-oid="ov47-2.">
|
||
|
|
<div
|
||
|
|
className="flex items-center gap-4 mb-3"
|
||
|
|
data-oid="5egq_qs"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full font-medium"
|
||
|
|
data-oid="tbtpcc0"
|
||
|
|
>
|
||
|
|
{article.category}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className="text-gray-500 text-sm"
|
||
|
|
data-oid="mu77._u"
|
||
|
|
>
|
||
|
|
{article.date}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className="text-gray-400 text-sm"
|
||
|
|
data-oid="tm5xbdm"
|
||
|
|
>
|
||
|
|
{article.readTime}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Link
|
||
|
|
href={`/${locale === 'zh-CN' ? '' : locale + '/'}news/${article.id}`}
|
||
|
|
data-oid="-rjf7x3"
|
||
|
|
>
|
||
|
|
<h3
|
||
|
|
className="text-2xl font-light mb-4 text-gray-900 hover:text-blue-600 transition-colors cursor-pointer"
|
||
|
|
data-oid="d.pkpb7"
|
||
|
|
>
|
||
|
|
{article.title}
|
||
|
|
</h3>
|
||
|
|
</Link>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 font-light leading-relaxed mb-4"
|
||
|
|
data-oid="vo-q4e."
|
||
|
|
>
|
||
|
|
{article.excerpt}
|
||
|
|
</p>
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-between"
|
||
|
|
data-oid="itrnko:"
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={`/${locale}/news/${article.id}`}
|
||
|
|
className="text-blue-600 hover:text-blue-800 font-light flex items-center gap-1"
|
||
|
|
data-oid=":0h-66z"
|
||
|
|
>
|
||
|
|
{news.readMore}
|
||
|
|
<svg
|
||
|
|
className="w-4 h-4"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid="ifbxhoc"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M9 5l7 7-7 7"
|
||
|
|
data-oid="5s-5dkr"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</Link>
|
||
|
|
<span
|
||
|
|
className="text-gray-400 text-sm"
|
||
|
|
data-oid="lw6i.81"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'By'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '作者：'
|
||
|
|
: '作者：'}{' '}
|
||
|
|
{article.author}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Newsletter Subscription */}
|
||
|
|
<section
|
||
|
|
className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
|
||
|
|
data-oid="i4p0fxb"
|
||
|
|
>
|
||
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="bcymkw3">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="uk:qclr">
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Stay Updated'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '保持更新'
|
||
|
|
: '保持更新'}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl font-light mb-8 opacity-90" data-oid="jyr:dy3">
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Subscribe to our newsletter for the latest industry insights and company updates.'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '訂閱我們的電子報，獲取最新的行業洞察和公司動態。'
|
||
|
|
: '订阅我们的电子报，获取最新的行业洞察和公司动态。'}
|
||
|
|
</p>
|
||
|
|
<div
|
||
|
|
className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto"
|
||
|
|
data-oid="xi2e::m"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
placeholder={
|
||
|
|
locale === 'en'
|
||
|
|
? 'Enter your email'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '輸入您的電子郵件'
|
||
|
|
: '输入您的电子邮件'
|
||
|
|
}
|
||
|
|
className="flex-1 px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
|
|
data-oid="04m.s6d"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
|
||
|
|
data-oid="li_uj-8"
|
||
|
|
>
|
||
|
|
{locale === 'en' ? 'Subscribe' : locale === 'zh-TW' ? '訂閱' : '订阅'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
}
|