408 lines
18 KiB
TypeScript
408 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import Navigation from '../../../components/Navigation';
|
|
import Footer from '../../../components/Footer';
|
|
import BackgroundElements from '../../../components/BackgroundElements';
|
|
import { useTDK } from '../../../lib/useTDK';
|
|
import { supportedLocales, pages } from '../../../lib/sitemap';
|
|
|
|
interface PageProps {
|
|
params: { locale: string };
|
|
}
|
|
|
|
export default function SitemapPage({ params }: PageProps) {
|
|
const [currentLang, setCurrentLang] = useState(params.locale);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// Update TDK when language changes
|
|
useTDK(currentLang, 'sitemap');
|
|
|
|
const translations = {
|
|
'zh-CN': {
|
|
nav: {
|
|
home: '首页',
|
|
products: '产品',
|
|
pricing: '价格',
|
|
support: '支持',
|
|
contact: '联系我们',
|
|
},
|
|
sitemap: {
|
|
title: '网站地图',
|
|
subtitle: '浏览我们的所有页面',
|
|
description: '查找您需要的页面和内容',
|
|
languages: '语言版本',
|
|
pages: '页面',
|
|
pageNames: {
|
|
'': '首页',
|
|
'/products': '产品',
|
|
'/pricing': '价格',
|
|
'/support': '支持',
|
|
'/contact': '联系我们',
|
|
},
|
|
languageNames: {
|
|
'zh-CN': '简体中文',
|
|
'zh-TW': '繁体中文',
|
|
en: 'English',
|
|
ko: '한국어',
|
|
ja: '日本語',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
nav: {
|
|
home: '首頁',
|
|
products: '產品',
|
|
pricing: '價格',
|
|
support: '支援',
|
|
contact: '聯絡我們',
|
|
},
|
|
sitemap: {
|
|
title: '網站地圖',
|
|
subtitle: '瀏覽我們的所有頁面',
|
|
description: '查找您需要的頁面和內容',
|
|
languages: '語言版本',
|
|
pages: '頁面',
|
|
pageNames: {
|
|
'': '首頁',
|
|
'/products': '產品',
|
|
'/pricing': '價格',
|
|
'/support': '支援',
|
|
'/contact': '聯絡我們',
|
|
},
|
|
languageNames: {
|
|
'zh-CN': '簡體中文',
|
|
'zh-TW': '繁體中文',
|
|
en: 'English',
|
|
ko: '한국어',
|
|
ja: '日本語',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
|
|
},
|
|
},
|
|
en: {
|
|
nav: {
|
|
home: 'Home',
|
|
products: 'Products',
|
|
pricing: 'Pricing',
|
|
support: 'Support',
|
|
contact: 'Contact',
|
|
},
|
|
sitemap: {
|
|
title: 'Sitemap',
|
|
subtitle: 'Browse all our pages',
|
|
description: 'Find the pages and content you need',
|
|
languages: 'Language Versions',
|
|
pages: 'Pages',
|
|
pageNames: {
|
|
'': 'Home',
|
|
'/products': 'Products',
|
|
'/pricing': 'Pricing',
|
|
'/support': 'Support',
|
|
'/contact': 'Contact',
|
|
},
|
|
languageNames: {
|
|
'zh-CN': '简体中文',
|
|
'zh-TW': '繁体中文',
|
|
en: 'English',
|
|
ko: '한국어',
|
|
ja: '日本語',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
|
|
},
|
|
},
|
|
ko: {
|
|
nav: {
|
|
home: '홈',
|
|
products: '제품',
|
|
pricing: '가격',
|
|
support: '지원',
|
|
contact: '연락처',
|
|
},
|
|
sitemap: {
|
|
title: '사이트맵',
|
|
subtitle: '모든 페이지 둘러보기',
|
|
description: '필요한 페이지와 콘텐츠를 찾아보세요',
|
|
languages: '언어 버전',
|
|
pages: '페이지',
|
|
pageNames: {
|
|
'': '홈',
|
|
'/products': '제품',
|
|
'/pricing': '가격',
|
|
'/support': '지원',
|
|
'/contact': '연락처',
|
|
},
|
|
languageNames: {
|
|
'zh-CN': '简体中文',
|
|
'zh-TW': '繁体中文',
|
|
en: 'English',
|
|
ko: '한국어',
|
|
ja: '日本語',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
|
|
},
|
|
},
|
|
ja: {
|
|
nav: {
|
|
home: 'ホーム',
|
|
products: '製品',
|
|
pricing: '価格',
|
|
support: 'サポート',
|
|
contact: 'お問い合わせ',
|
|
},
|
|
sitemap: {
|
|
title: 'サイトマップ',
|
|
subtitle: 'すべてのページを閲覧',
|
|
description: '必要なページとコンテンツを見つけてください',
|
|
languages: '言語バージョン',
|
|
pages: 'ページ',
|
|
pageNames: {
|
|
'': 'ホーム',
|
|
'/products': '製品',
|
|
'/pricing': '価格',
|
|
'/support': 'サポート',
|
|
'/contact': 'お問い合わせ',
|
|
},
|
|
languageNames: {
|
|
'zh-CN': '简体中文',
|
|
'zh-TW': '繁体中文',
|
|
en: 'English',
|
|
ko: '한국어',
|
|
ja: '日本語',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 全著作権所有.`,
|
|
},
|
|
},
|
|
};
|
|
|
|
const t = translations[currentLang as keyof typeof translations] || translations['zh-CN'];
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
setCurrentLang(params.locale);
|
|
}, [params.locale]);
|
|
|
|
const handleLanguageChange = (newLang: string) => {
|
|
const currentPath = pathname.replace(`/${currentLang}`, '');
|
|
router.push(`/${newLang}${currentPath}`);
|
|
};
|
|
|
|
const handlePageClick = (locale: string, pagePath: string) => {
|
|
router.push(`/${locale}${pagePath}`);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="a.lcmc3">
|
|
<BackgroundElements data-oid="orc-cj_" />
|
|
|
|
<Navigation
|
|
t={t}
|
|
currentLang={currentLang}
|
|
onLanguageChange={handleLanguageChange}
|
|
isLoaded={isLoaded}
|
|
data-oid="ul640ok"
|
|
/>
|
|
|
|
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="_0tgzbo">
|
|
{/* Header */}
|
|
<div
|
|
className={`text-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
|
|
data-oid="th62ren"
|
|
>
|
|
<h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="l.i7r.a">
|
|
<span
|
|
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
|
data-oid=".xr1i:d"
|
|
>
|
|
{t.sitemap.title}
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-purple-300 mb-4" data-oid="9fandtd">
|
|
{t.sitemap.subtitle}
|
|
</p>
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="8m9ojt2">
|
|
{t.sitemap.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="8sqe_3-">
|
|
{/* Languages Section */}
|
|
<div
|
|
className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
|
|
data-oid="359xp6z"
|
|
>
|
|
<h2
|
|
className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
|
|
data-oid="x_kr.46"
|
|
>
|
|
{t.sitemap.languages}
|
|
</h2>
|
|
<div className="space-y-4" data-oid="1six984">
|
|
{supportedLocales.map((locale) => (
|
|
<div
|
|
key={locale}
|
|
className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
|
|
data-oid="s:4-qfm"
|
|
>
|
|
<h3
|
|
className="text-xl font-semibold text-white mb-4"
|
|
data-oid=":a7wk7o"
|
|
>
|
|
{
|
|
t.sitemap.languageNames[
|
|
locale as keyof typeof t.sitemap.languageNames
|
|
]
|
|
}
|
|
</h3>
|
|
<div
|
|
className="grid grid-cols-1 sm:grid-cols-2 gap-2"
|
|
data-oid="3241nn5"
|
|
>
|
|
{pages.map((page) => (
|
|
<button
|
|
key={page.path}
|
|
onClick={() => handlePageClick(locale, page.path)}
|
|
className="text-left px-3 py-2 text-purple-300 hover:text-purple-200 hover:bg-purple-500/10 rounded-lg transition-all duration-300"
|
|
data-oid="v6h3.a:"
|
|
>
|
|
{
|
|
t.sitemap.pageNames[
|
|
page.path as keyof typeof t.sitemap.pageNames
|
|
]
|
|
}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pages Section */}
|
|
<div
|
|
className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
|
|
data-oid="vehe863"
|
|
>
|
|
<h2
|
|
className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
|
|
data-oid="e645px7"
|
|
>
|
|
{t.sitemap.pages}
|
|
</h2>
|
|
<div className="space-y-6" data-oid="a38x.z.">
|
|
{pages.map((page, index) => (
|
|
<div
|
|
key={page.path}
|
|
className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
|
|
data-oid="mf25gqd"
|
|
>
|
|
<div
|
|
className="flex items-center justify-between mb-4"
|
|
data-oid=":nzjob."
|
|
>
|
|
<h3
|
|
className="text-xl font-semibold text-white"
|
|
data-oid="l.vrl4:"
|
|
>
|
|
{
|
|
t.sitemap.pageNames[
|
|
page.path as keyof typeof t.sitemap.pageNames
|
|
]
|
|
}
|
|
</h3>
|
|
<div
|
|
className="flex items-center space-x-2"
|
|
data-oid="fdpd2ne"
|
|
>
|
|
<span
|
|
className="text-sm text-gray-400"
|
|
data-oid="81dw.:-"
|
|
>
|
|
Priority: {page.priority}
|
|
</span>
|
|
<span
|
|
className="text-sm text-gray-400"
|
|
data-oid="x53mejt"
|
|
>
|
|
Update: {page.changeFrequency}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2" data-oid="qdkw6v:">
|
|
{supportedLocales.map((locale) => (
|
|
<button
|
|
key={locale}
|
|
onClick={() => handlePageClick(locale, page.path)}
|
|
className="px-3 py-1 bg-purple-600/20 text-purple-300 rounded-full text-sm hover:bg-purple-600/30 hover:text-purple-200 transition-all duration-300"
|
|
data-oid="x93-7sl"
|
|
>
|
|
{locale}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* XML Sitemap Link */}
|
|
<div
|
|
className="mt-8 p-6 bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-700"
|
|
data-oid="v1w-7.4"
|
|
>
|
|
<h3
|
|
className="text-lg font-semibold text-white mb-3"
|
|
data-oid="vzu0nd_"
|
|
>
|
|
XML Sitemap
|
|
</h3>
|
|
<p className="text-gray-300 mb-4" data-oid="4yv8:.2">
|
|
For search engines and automated tools
|
|
</p>
|
|
<a
|
|
href="/sitemap.xml"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105"
|
|
data-oid="z-8s91z"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 mr-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="sajy9i2"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
|
data-oid="dl7wcn-"
|
|
/>
|
|
</svg>
|
|
View XML Sitemap
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer t={t} data-oid="xk7slfo" />
|
|
</div>
|
|
);
|
|
}
|