953 lines
49 KiB
TypeScript
953 lines
49 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import SEOHead from '../../../components/SEOHead';
|
||
|
|
|
||
|
|
// Category icons mapping
|
||
|
|
const categoryIcons = {
|
||
|
|
company: (
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="p4p20db"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 8a1 1 0 011-1h4a1 1 0 011 1v4H7v-4z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="-8xu.ng"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
|
||
|
|
industry: (
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="yf6yye-"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
|
||
|
|
data-oid=".jd6gm:"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
|
||
|
|
technology: (
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="hp9tb30"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="dfobcve"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
|
||
|
|
product: (
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="2gfajl6"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M10 2L3 7v11a1 1 0 001 1h12a1 1 0 001-1V7l-7-5zM6 9.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="x9ogiqk"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
// Helper function to convert article keys to slugs
|
||
|
|
const getSlugFromKey = (key: string) => {
|
||
|
|
// If key is already a slug format, return as is
|
||
|
|
if (key.includes('-')) {
|
||
|
|
return key;
|
||
|
|
}
|
||
|
|
|
||
|
|
const slugMap: { [key: string]: string } = {
|
||
|
|
article1: 'cloudtech-new-platform',
|
||
|
|
article2: 'cloud-trends-2024',
|
||
|
|
article3: 'optimize-cloud-server',
|
||
|
|
article4: 'rds-new-features',
|
||
|
|
article5: 'cloud-security-practices',
|
||
|
|
article6: 'iso-27001-certification',
|
||
|
|
};
|
||
|
|
return slugMap[key] || key;
|
||
|
|
};
|
||
|
|
|
||
|
|
interface NewsPageProps {
|
||
|
|
params: { locale: string };
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function NewsPage({ params }: NewsPageProps) {
|
||
|
|
const currentLang = params.locale || 'zh-CN';
|
||
|
|
const [translations, setTranslations] = useState<any>({});
|
||
|
|
const [commonTranslations, setCommonTranslations] = useState<any>({});
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
||
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
||
|
|
const [sortBy, setSortBy] = useState('date');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadTranslations = async () => {
|
||
|
|
try {
|
||
|
|
const [newsRes, commonRes] = await Promise.all([
|
||
|
|
fetch(`/locales/${currentLang}/news.json`),
|
||
|
|
fetch(`/locales/${currentLang}/common.json`),
|
||
|
|
]);
|
||
|
|
|
||
|
|
const [newsData, commonData] = await Promise.all([
|
||
|
|
newsRes.json(),
|
||
|
|
commonRes.json(),
|
||
|
|
]);
|
||
|
|
|
||
|
|
// Load markdown articles and extract frontmatter
|
||
|
|
// 动态获取实际存在的文章列表
|
||
|
|
const articlesApiRes = await fetch(`/api/articles/${currentLang}`);
|
||
|
|
const articlesApiData = await articlesApiRes.json();
|
||
|
|
const articleSlugs = articlesApiData.articles || [];
|
||
|
|
|
||
|
|
const articlesData: any = {};
|
||
|
|
for (const slug of articleSlugs) {
|
||
|
|
try {
|
||
|
|
const markdownRes = await fetch(`/docs/${currentLang}/news/${slug}.md`);
|
||
|
|
if (markdownRes.ok) {
|
||
|
|
const markdownContent = await markdownRes.text();
|
||
|
|
const { frontmatter } = parseMarkdown(markdownContent);
|
||
|
|
if (frontmatter.title) {
|
||
|
|
articlesData[slug] = frontmatter;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.warn(`Failed to load article ${slug}:`, error);
|
||
|
|
// Fallback to JSON data if markdown is not available
|
||
|
|
const jsonKey = getJsonKeyFromSlug(slug);
|
||
|
|
if (newsData.articles && newsData.articles[jsonKey]) {
|
||
|
|
articlesData[slug] = newsData.articles[jsonKey];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Merge markdown data with JSON translations
|
||
|
|
const mergedNewsData = {
|
||
|
|
...newsData,
|
||
|
|
articles: articlesData,
|
||
|
|
};
|
||
|
|
setTranslations(mergedNewsData);
|
||
|
|
setCommonTranslations(commonData);
|
||
|
|
setLoading(false);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load translations:', error);
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadTranslations();
|
||
|
|
}, [currentLang]);
|
||
|
|
|
||
|
|
// Helper function to parse markdown frontmatter
|
||
|
|
const parseMarkdown = (markdown: string) => {
|
||
|
|
// 更强健的正则表达式，处理各种换行符情况
|
||
|
|
const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/;
|
||
|
|
const match = markdown.match(frontmatterRegex);
|
||
|
|
|
||
|
|
if (!match) {
|
||
|
|
return {
|
||
|
|
frontmatter: {},
|
||
|
|
content: markdown,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const frontmatterText = match[1];
|
||
|
|
const content = match[2];
|
||
|
|
|
||
|
|
// Enhanced YAML parser for frontmatter
|
||
|
|
const frontmatter: any = {};
|
||
|
|
frontmatterText.split('\n').forEach((line) => {
|
||
|
|
const colonIndex = line.indexOf(':');
|
||
|
|
if (colonIndex === -1) return;
|
||
|
|
|
||
|
|
const key = line.substring(0, colonIndex).trim();
|
||
|
|
const value = line.substring(colonIndex + 1).trim();
|
||
|
|
|
||
|
|
if (key && value) {
|
||
|
|
if (key === 'tags') {
|
||
|
|
// Handle array format: [tag1, tag2, tag3]
|
||
|
|
if (value.startsWith('[') && value.endsWith(']')) {
|
||
|
|
frontmatter[key] = value
|
||
|
|
.slice(1, -1) // Remove brackets
|
||
|
|
.split(',')
|
||
|
|
.map((tag) => tag.trim().replace(/['"]/g, ''))
|
||
|
|
.filter((tag) => tag.length > 0);
|
||
|
|
} else {
|
||
|
|
frontmatter[key] = [value.replace(/['"]/g, '')];
|
||
|
|
}
|
||
|
|
} else if (key === 'featured') {
|
||
|
|
// Handle boolean values
|
||
|
|
frontmatter[key] = value.toLowerCase() === 'true';
|
||
|
|
} else {
|
||
|
|
// Handle string values
|
||
|
|
frontmatter[key] = value.replace(/^['"]|['"]$/g, '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return { frontmatter, content };
|
||
|
|
};
|
||
|
|
|
||
|
|
// Helper function to map slugs to JSON keys for fallback
|
||
|
|
const getJsonKeyFromSlug = (slug: string) => {
|
||
|
|
const slugMap: { [key: string]: string } = {
|
||
|
|
'cloudtech-new-platform': 'article1',
|
||
|
|
'cloud-trends-2024': 'article2',
|
||
|
|
'optimize-cloud-server': 'article3',
|
||
|
|
'rds-new-features': 'article4',
|
||
|
|
'cloud-security-practices': 'article5',
|
||
|
|
'iso-27001-certification': 'article6',
|
||
|
|
};
|
||
|
|
return slugMap[slug] || slug;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
|
||
|
|
data-oid="0dj0nbi"
|
||
|
|
>
|
||
|
|
<div className="text-center" data-oid="to:0fmd">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 border-4 border-green-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||
|
|
data-oid="pu56bq0"
|
||
|
|
></div>
|
||
|
|
<p className="text-gray-600" data-oid=".0lk70f">
|
||
|
|
Loading news...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const t = translations;
|
||
|
|
const common = commonTranslations;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Filter and sort articles
|
||
|
|
let filteredArticles = Object.entries(t.articles || {});
|
||
|
|
|
||
|
|
// Filter by category
|
||
|
|
if (selectedCategory !== 'all') {
|
||
|
|
filteredArticles = filteredArticles.filter(
|
||
|
|
([_, article]: [string, any]) => article.category === selectedCategory,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Filter by search term
|
||
|
|
if (searchTerm) {
|
||
|
|
filteredArticles = filteredArticles.filter(
|
||
|
|
([_, article]: [string, any]) =>
|
||
|
|
article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
article.summary.toLowerCase().includes(searchTerm.toLowerCase()),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Sort articles
|
||
|
|
filteredArticles.sort(([_, a]: [string, any], [__, b]: [string, any]) => {
|
||
|
|
if (sortBy === 'date') {
|
||
|
|
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
||
|
|
}
|
||
|
|
return a.title.localeCompare(b.title);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Get featured article (latest)
|
||
|
|
const featuredArticle = Object.entries(t.articles || {})[0] as [string, any] | undefined;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SEOHead
|
||
|
|
page="news"
|
||
|
|
locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
|
||
|
|
canonicalUrl="/news"
|
||
|
|
data-oid="qrex_t_"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
|
||
|
|
data-oid="zcgakzm"
|
||
|
|
>
|
||
|
|
{/* Navigation */}
|
||
|
|
<nav
|
||
|
|
className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
|
||
|
|
data-oid="1.rpndt"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="aqnqe:.">
|
||
|
|
<div className="flex justify-between items-center h-16" data-oid="-h51-3y">
|
||
|
|
{/* Logo */}
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}`}
|
||
|
|
className="flex items-center space-x-2"
|
||
|
|
data-oid="28eg86w"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
||
|
|
data-oid="2u8rbej"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="bpni1aj"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||
|
|
data-oid="iu3zy6-"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
||
|
|
data-oid="46-6k2a"
|
||
|
|
>
|
||
|
|
CloudTech
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
{/* Desktop Navigation */}
|
||
|
|
<div
|
||
|
|
className="hidden md:flex items-center space-x-8"
|
||
|
|
data-oid="90x5dtg"
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="2.br0ec"
|
||
|
|
>
|
||
|
|
{common.nav?.home}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/products`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="7:bz0:8"
|
||
|
|
>
|
||
|
|
{common.nav?.products}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/news`}
|
||
|
|
className="text-blue-600 font-medium"
|
||
|
|
data-oid="daeeyhx"
|
||
|
|
>
|
||
|
|
{common.nav?.news}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/support`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="55yp61:"
|
||
|
|
>
|
||
|
|
{common.nav?.support}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/about`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid=".zs-b-e"
|
||
|
|
>
|
||
|
|
{common.nav?.about}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Language Switcher & Mobile Menu */}
|
||
|
|
<div className="flex items-center space-x-4" data-oid="fe8f-ig">
|
||
|
|
<select
|
||
|
|
value={currentLang}
|
||
|
|
onChange={(e) => {
|
||
|
|
const newLocale = e.target.value;
|
||
|
|
const currentPath = window.location.pathname;
|
||
|
|
const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
|
||
|
|
window.location.href = `/${newLocale}${pathWithoutLocale}`;
|
||
|
|
}}
|
||
|
|
className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
|
|
data-oid="31egcq5"
|
||
|
|
>
|
||
|
|
<option value="zh-CN" data-oid="0a4o1pe">
|
||
|
|
简体中文
|
||
|
|
</option>
|
||
|
|
<option value="zh-TW" data-oid="jl9_:ds">
|
||
|
|
繁體中文
|
||
|
|
</option>
|
||
|
|
<option value="en" data-oid="ysb2u9a">
|
||
|
|
English
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
{/* Mobile menu button */}
|
||
|
|
<button
|
||
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||
|
|
className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
|
||
|
|
data-oid="ssvh5fw"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid="casc.-j"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
||
|
|
data-oid="laclma9"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Navigation */}
|
||
|
|
{isMenuOpen && (
|
||
|
|
<div
|
||
|
|
className="md:hidden py-4 border-t border-white/20"
|
||
|
|
data-oid="nnu3:j3"
|
||
|
|
>
|
||
|
|
<div className="flex flex-col space-y-2" data-oid="zmtv2wn">
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}`}
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="7_wv5wn"
|
||
|
|
>
|
||
|
|
{common.nav?.home}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/products`}
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="hhqy3vo"
|
||
|
|
>
|
||
|
|
{common.nav?.products}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/news`}
|
||
|
|
className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
|
||
|
|
data-oid="d093gl0"
|
||
|
|
>
|
||
|
|
{common.nav?.news}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/support`}
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="enm36xg"
|
||
|
|
>
|
||
|
|
{common.nav?.support}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/about`}
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="vwsedn7"
|
||
|
|
>
|
||
|
|
{common.nav?.about}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Hero Section with Enhanced Design */}
|
||
|
|
<div
|
||
|
|
className="relative bg-gradient-to-r from-green-500 to-blue-600 text-white py-24 overflow-hidden"
|
||
|
|
data-oid="3:71avh"
|
||
|
|
>
|
||
|
|
{/* Background decorative elements */}
|
||
|
|
<div className="absolute inset-0 opacity-10" data-oid="8809o6-">
|
||
|
|
<div
|
||
|
|
className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
|
||
|
|
data-oid="atlrb_c"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
|
||
|
|
data-oid="q7-3krb"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
|
||
|
|
data-oid="_ar2rio"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
|
||
|
|
data-oid="7iea5k_"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
||
|
|
data-oid="..ybu5p"
|
||
|
|
>
|
||
|
|
<h1
|
||
|
|
className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
|
||
|
|
data-oid="a9v93ha"
|
||
|
|
>
|
||
|
|
{t.title}
|
||
|
|
</h1>
|
||
|
|
<p
|
||
|
|
className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
|
||
|
|
data-oid="2hmzqi1"
|
||
|
|
>
|
||
|
|
{t.subtitle}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Search Bar */}
|
||
|
|
<div className="max-w-2xl mx-auto" data-oid="lsbj0tl">
|
||
|
|
<div className="relative" data-oid="zkm4dg2">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder={
|
||
|
|
currentLang === 'en' ? 'Search news...' : '搜索新闻...'
|
||
|
|
}
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
className="w-full px-6 py-4 pl-12 bg-white/20 backdrop-blur-sm border border-white/30 rounded-2xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
|
|
data-oid="0y8rl1i"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<svg
|
||
|
|
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/70"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid=".mzfxl2"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||
|
|
data-oid="t1siteh"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Featured Article */}
|
||
|
|
{featuredArticle && (
|
||
|
|
<div
|
||
|
|
className="py-16 bg-gradient-to-b from-white/50 to-transparent"
|
||
|
|
data-oid="mp_l9kp"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="fmt.kky">
|
||
|
|
<div className="text-center mb-12" data-oid="wx685-3">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
||
|
|
data-oid="orcr6.x"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Featured News' : '精选新闻'}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
|
||
|
|
data-oid="ut4mrm2"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
|
||
|
|
data-oid="5hww2m1"
|
||
|
|
>
|
||
|
|
<div data-oid=".5byt:0">
|
||
|
|
<div
|
||
|
|
className="flex items-center space-x-4 mb-4"
|
||
|
|
data-oid="5rk9si."
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className="px-4 py-2 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-full text-sm font-medium"
|
||
|
|
data-oid="b-fi4rp"
|
||
|
|
>
|
||
|
|
{t.categories?.[(featuredArticle[1] as any).category]}
|
||
|
|
</span>
|
||
|
|
<span className="text-gray-500" data-oid="8g5qf21">
|
||
|
|
{(featuredArticle[1] as any).date}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="text-3xl font-bold text-gray-900 mb-4"
|
||
|
|
data-oid="e6v1vdp"
|
||
|
|
>
|
||
|
|
{(featuredArticle[1] as any).title}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 text-lg leading-relaxed mb-6"
|
||
|
|
data-oid="8ly_rst"
|
||
|
|
>
|
||
|
|
{(featuredArticle[1] as any).summary}
|
||
|
|
</p>
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-between"
|
||
|
|
data-oid="8g8tt6r"
|
||
|
|
>
|
||
|
|
<span className="text-gray-500" data-oid="3i5szcl">
|
||
|
|
{(featuredArticle[1] as any).author}
|
||
|
|
</span>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/news/${getSlugFromKey(featuredArticle[0])}`}
|
||
|
|
className="px-6 py-3 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
||
|
|
data-oid="rn-sfgm"
|
||
|
|
>
|
||
|
|
{common.hero?.learn || 'Read More'}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative" data-oid=":m5bc.5">
|
||
|
|
<div
|
||
|
|
className="w-full h-64 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl flex items-center justify-center"
|
||
|
|
data-oid="6a-tum9"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-24 h-24 text-white/50"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="g7-snxu"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="ines3qn"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Filter and Sort Controls */}
|
||
|
|
<div className="py-8 bg-white/50" data-oid="_c0:eq2">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="j2ng6g0">
|
||
|
|
<div
|
||
|
|
className="flex flex-col lg:flex-row justify-between items-center gap-6"
|
||
|
|
data-oid="j0mckh9"
|
||
|
|
>
|
||
|
|
{/* Category Filter */}
|
||
|
|
<div className="flex flex-wrap justify-center gap-3" data-oid="at2z3hl">
|
||
|
|
<button
|
||
|
|
onClick={() => setSelectedCategory('all')}
|
||
|
|
className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
|
||
|
|
selectedCategory === 'all'
|
||
|
|
? 'bg-green-500 text-white shadow-lg scale-105'
|
||
|
|
: 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
|
||
|
|
}`}
|
||
|
|
data-oid="uf3rt6:"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'All News' : '全部新闻'}
|
||
|
|
</button>
|
||
|
|
{Object.entries(t.categories || {}).map(([key, category]: [string, any]) => (
|
||
|
|
<button
|
||
|
|
key={key}
|
||
|
|
onClick={() => setSelectedCategory(key)}
|
||
|
|
className={`flex items-center space-x-2 px-6 py-3 rounded-full font-medium transition-all duration-200 ${
|
||
|
|
selectedCategory === key
|
||
|
|
? 'bg-green-500 text-white shadow-lg scale-105'
|
||
|
|
: 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
|
||
|
|
}`}
|
||
|
|
data-oid="h.hwlix"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||
|
|
selectedCategory === key
|
||
|
|
? 'bg-white/20'
|
||
|
|
: 'bg-green-100'
|
||
|
|
}`}
|
||
|
|
data-oid="6kyq:1e"
|
||
|
|
>
|
||
|
|
{categoryIcons[key as keyof typeof categoryIcons]}
|
||
|
|
</div>
|
||
|
|
<span data-oid="lwejiem">{category}</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Sort Control */}
|
||
|
|
<div className="flex items-center space-x-4" data-oid="_due.g6">
|
||
|
|
<span className="text-gray-600 font-medium" data-oid=":kukyxk">
|
||
|
|
{currentLang === 'en' ? 'Sort by:' : '排序：'}
|
||
|
|
</span>
|
||
|
|
<select
|
||
|
|
value={sortBy}
|
||
|
|
onChange={(e) => setSortBy(e.target.value)}
|
||
|
|
className="bg-white/80 border border-white/30 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
|
||
|
|
data-oid="2ip8u3w"
|
||
|
|
>
|
||
|
|
<option value="date" data-oid="-ab5uxp">
|
||
|
|
{currentLang === 'en' ? 'Latest' : '最新'}
|
||
|
|
</option>
|
||
|
|
<option value="title" data-oid="r7lp-0g">
|
||
|
|
{currentLang === 'en' ? 'Title' : '标题'}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Articles Grid */}
|
||
|
|
<div className="py-20" data-oid="usmvglh">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="5jm_dte">
|
||
|
|
{filteredArticles.length === 0 ? (
|
||
|
|
<div className="text-center py-16" data-oid="9iol0_9">
|
||
|
|
<svg
|
||
|
|
className="w-24 h-24 text-gray-300 mx-auto mb-4"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid=":w12prj"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1}
|
||
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||
|
|
data-oid="15f_srz"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<h3
|
||
|
|
className="text-xl font-semibold text-gray-600 mb-2"
|
||
|
|
data-oid="qt7ybn3"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'No articles found' : '未找到相关文章'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-500" data-oid="b4vho3q">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Try adjusting your search or filter criteria'
|
||
|
|
: '请尝试调整搜索或筛选条件'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="text-center mb-12" data-oid="rtz3pg_">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
||
|
|
data-oid="_ttoq0t"
|
||
|
|
>
|
||
|
|
{selectedCategory === 'all'
|
||
|
|
? currentLang === 'en'
|
||
|
|
? 'Latest News'
|
||
|
|
: '最新资讯'
|
||
|
|
: t.categories?.[selectedCategory]}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600" data-oid="_j0-ua0">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? `Found ${filteredArticles.length} articles`
|
||
|
|
: `找到 ${filteredArticles.length} 篇文章`}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
|
|
data-oid="gy0brp-"
|
||
|
|
>
|
||
|
|
{filteredArticles.map(
|
||
|
|
([key, article]: [string, any], index) => (
|
||
|
|
<article
|
||
|
|
key={key}
|
||
|
|
className="group bg-white/80 backdrop-blur-sm rounded-3xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
|
||
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
||
|
|
data-oid="k039gtk"
|
||
|
|
>
|
||
|
|
{/* Article Image Placeholder */}
|
||
|
|
<div
|
||
|
|
className="w-full h-48 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300"
|
||
|
|
data-oid="9nniwy7"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center"
|
||
|
|
data-oid="qzw_tnf"
|
||
|
|
>
|
||
|
|
{
|
||
|
|
categoryIcons[
|
||
|
|
article.category as keyof typeof categoryIcons
|
||
|
|
]
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-between mb-4"
|
||
|
|
data-oid="_iyfqhu"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm font-medium"
|
||
|
|
data-oid="szd.:ly"
|
||
|
|
>
|
||
|
|
{t.categories?.[article.category]}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className="text-gray-500 text-sm"
|
||
|
|
data-oid=":jt7u.k"
|
||
|
|
>
|
||
|
|
{article.date}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3
|
||
|
|
className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-green-600 transition-colors"
|
||
|
|
data-oid="neb8oxq"
|
||
|
|
>
|
||
|
|
{article.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p
|
||
|
|
className="text-gray-600 mb-6 line-clamp-3 leading-relaxed"
|
||
|
|
data-oid="p9q.m_z"
|
||
|
|
>
|
||
|
|
{article.summary}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-between"
|
||
|
|
data-oid="gn9fqm-"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="flex items-center space-x-2"
|
||
|
|
data-oid="3inb2j3"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center"
|
||
|
|
data-oid="pb145b:"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-4 h-4 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid=".--g4vf"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="9epd4kb"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
className="text-sm text-gray-500 font-medium"
|
||
|
|
data-oid="q2.p4nu"
|
||
|
|
>
|
||
|
|
{article.author}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/news/${getSlugFromKey(key)}`}
|
||
|
|
className="px-4 py-2 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-lg font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
||
|
|
data-oid="x3qwm0n"
|
||
|
|
>
|
||
|
|
{common.hero?.learn || 'Read More'}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Newsletter Subscription */}
|
||
|
|
<div
|
||
|
|
className="py-20 bg-gradient-to-r from-green-500 to-blue-600"
|
||
|
|
data-oid="lfym:.s"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
||
|
|
data-oid="oncwycs"
|
||
|
|
>
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-white mb-6"
|
||
|
|
data-oid="5hnayt_"
|
||
|
|
>
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Stay Updated with Our Latest News'
|
||
|
|
: '订阅我们的最新资讯'}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
|
||
|
|
data-oid="aswdbad"
|
||
|
|
>
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Get the latest cloud computing insights, industry trends, and product updates delivered to your inbox.'
|
||
|
|
: '获取最新的云计算洞察、行业趋势和产品更新，直接发送到您的邮箱。'}
|
||
|
|
</p>
|
||
|
|
<div className="max-w-md mx-auto flex gap-4" data-oid="i8wsldj">
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
placeholder={
|
||
|
|
currentLang === 'en' ? 'Enter your email' : '输入您的邮箱'
|
||
|
|
}
|
||
|
|
className="flex-1 px-6 py-4 bg-white/20 backdrop-blur-sm border border-white/30 rounded-2xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
|
|
data-oid="ci0gw-g"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="px-8 py-4 bg-white text-green-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
||
|
|
data-oid="61h5zqz"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Subscribe' : '订阅'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<footer className="bg-gray-900 text-white py-12" data-oid="y56hb0f">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="6wal37m">
|
||
|
|
<div className="text-center" data-oid="0kn:47t">
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-center space-x-2 mb-4"
|
||
|
|
data-oid="g0dewel"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
||
|
|
data-oid="v53cdrb"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="zxgk_gd"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||
|
|
data-oid="_th28vo"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span className="text-xl font-bold" data-oid="xiiixke">
|
||
|
|
CloudTech
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="30y.qqe">
|
||
|
|
{common.footer?.company_desc}
|
||
|
|
</p>
|
||
|
|
<p className="text-gray-400" data-oid="1b74te3">
|
||
|
|
{common.footer?.copyright}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|