nick_zhiyun/AWSCLOUD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上线

Browse Source
This commit is contained in:
Zopt 2025-09-16 15:35:44 +08:00
parent e96ae50b34
commit 15f7a83dc1
11 changed files with 1067 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
README.md
View File

@ -1,25 +1,124 @@
# Onlook Starter Template
<p align="center">
<img src="app/favicon.ico" />
</p>
This is an [Onlook](https://onlook.com/) project set up with
[Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and
[ShadCN](https://ui.shadcn.com).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) in Onlook to see the result.
# Seven - 多语言官网（Next.js 15）
<p align="center">
<img src="app/favicon.ico" />
</p>
基于 Next.js 15、Tailwind CSS 和 shadcn/ui 搭建的多语言企业官网模板，内置中/英/日/韩/繁体语言路由，统一页头/页尾布局与 SEO 元数据管理。
## 技术栈
- Next.js 15（App Router）
- React 18
- Tailwind CSS
- shadcn/ui
## 目录结构（关键项）
```
app/
[lang]/
layout.tsx # 按语言生成 Metadata（需 await params）
page.tsx # 首页入口（需 await params）
products/page.tsx # 产品页（Client 组件）
solutions/page.tsx # 解决方案页（Client 组件）
contact/page.tsx # 联系我们（使用 PageLayout，表单仅在客户端渲染）
components/
PageLayout.tsx # 统一 TDK、Navbar、Footer 与内容容器
Navbar.tsx
Footer.tsx
TDK.tsx # 页面标题/描述/关键词
data/
content.ts # 站点通用文案（多语言）
pageContent.ts # 各页面文案（多语言）
```
## 快速开始（Windows PowerShell）
```powershell
# 安装依赖
npm install
# 本地开发（默认 http://localhost:3000）
npm run dev
# 生产构建
npm run build
# 本地预览生产构建
npm run start
```
## 环境要求
- Node.js ≥ 18.17（推荐 LTS）
- npm ≥ 9（或使用 pnpm/bun 亦可）
## 多语言与路由
- 路由格式：`/[lang]/...`，其中 `lang ∈ { en, zh-CN, zh-TW, ko, ja }`
- 入口页静态参数：`app/[lang]/page.tsx` 中的 `generateStaticParams()`
- 元数据生成：`app/[lang]/layout.tsx` 中的 `generateMetadata()` 会根据语言返回对应 TDK
注意：Next.js 15 起，动态段的 `params` 在服务端为 Promise，必须 `await` 后再使用，例如：
```ts
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params;
// ...
}
```
## SEO 与 TDK
- 统一在 `PageLayout` 内通过 `TDK` 组件注入 `title/description/keywords`
- `app/[lang]/layout.tsx` 中维护各语言默认元数据与 `alternates.languages`
## SSR/CSR 与 Hydration 注意事项
- 避免在 SSR 阶段使用不稳定输出（如 `Date.now()`、`Math.random()`）
- 对于仅在客户端可用的交互（如带自动填充的表单），采用“客户端渲染占位”策略：
- `contact/page.tsx` 中使用 `isClient` 状态在挂载后再渲染表单，避免浏览器扩展（如 LastPass）注入导致水合不一致
- 若你引入新的服务端函数，确保在使用 `params` 前执行 `await`
## 常见问题（FAQ）
- Hydration failed：
- 检查是否使用了未固定输出的变量；
- 检查是否有浏览器扩展注入 DOM（如密码管理器）；
- 对仅客户端渲染的复杂表单使用 `isClient` 保护渲染；
- 移除不必要的 `suppressHydrationWarning`，定位并修复根因。
- Route used `params.lang`. `params` should be awaited：
- Next.js 15 的动态 API 是异步的，请调整类型为 `Promise<...>` 并 `await`。
## 开发脚本
```powershell
# 代码检查（如已配置）
npm run lint
# Tailwind 即时开发（随 dev 一起运行）
npm run dev
```
## 部署
- 推荐部署到 Vercel：
- Framework: Next.js
- Build Command: `npm run build`
- Output: `.next`
- Node Version: 使用项目/平台默认 LTS
- 也可自托管：
- 运行 `npm run build && npm run start`
## 贡献与代码风格
- 变量/函数命名清晰完整，避免缩写
- 避免深层嵌套，使用早返回
- TypeScript 明确标注导出 API 的类型
- 不捕获且吞掉错误；错误需被有意义处理
## 许可证
本仓库以 MIT 协议开源。根据业务需要可自由修改与商用。

409
app/[lang]/contact/page.tsx Normal file
View File

@ -0,0 +1,409 @@
'use client';
import { useParams, useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import PageLayout from '../../../components/PageLayout';
import Icon from '../../../components/Icon';
import { content } from '../../../data/content';
import { contactContent } from '../../../data/pageContent';
export default function ContactPage() {
const router = useRouter();
const params = useParams();
const currentLang = typeof params.lang === 'string' ? params.lang : 'en';
// Form state
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
company: '',
subject: '',
message: '',
});
const [formSubmitted, setFormSubmitted] = useState(false);
const [isClient, setIsClient] = useState(false);
// Set client-side flag
useEffect(() => {
setIsClient(true);
}, []);
// Validate language and redirect if invalid
useEffect(() => {
const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
if (!supportedLangs.includes(currentLang)) {
router.push('/en/contact');
}
}, [currentLang, router]);
const currentContent = content[currentLang as keyof typeof content] || content.en;
const pageContent =
contactContent[currentLang as keyof typeof contactContent] || contactContent.en;
const handleLanguageChange = (lang: string) => {
router.push(`/${lang}/contact`);
};
const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Here you would typically send the form data to your backend
console.log('Form submitted:', formData);
setFormSubmitted(true);
// Reset form after submission
setTimeout(() => {
setFormData({
name: '',
email: '',
phone: '',
company: '',
subject: '',
message: '',
});
setFormSubmitted(false);
}, 5000);
};
return (
<PageLayout
title={pageContent.title}
description={pageContent.description}
keywords={pageContent.keywords}
currentLang={currentLang}
currentContent={currentContent}
handleLanguageChange={handleLanguageChange}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
{/* Page Header */}
<div className="text-center mb-16">
<h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
{pageContent.subheading}
</p>
</div>
<div className="grid md:grid-cols-2 gap-12">
{/* Contact Information */}
<div className="bg-white rounded-lg shadow-lg p-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6">
{currentLang === 'en'
? 'Contact Information'
: currentLang === 'zh-CN'
? '联系信息'
: currentLang === 'zh-TW'
? '聯繫信息'
: currentLang === 'ko'
? '연락처 정보'
: '連絡先情報'}
</h2>
<div className="space-y-6">
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<Icon name="map-pin" className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<h3 className="font-semibold text-gray-900">
{currentLang === 'en'
? 'Address'
: currentLang === 'zh-CN'
? '地址'
: currentLang === 'zh-TW'
? '地址'
: currentLang === 'ko'
? '주소'
: '住所'}
</h3>
<p className="text-gray-600">
{pageContent.contactInfo.address}
</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<Icon name="phone" className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<h3 className="font-semibold text-gray-900">
{currentLang === 'en'
? 'Phone'
: currentLang === 'zh-CN'
? '电话'
: currentLang === 'zh-TW'
? '電話'
: currentLang === 'ko'
? '전화'
: '電話'}
</h3>
<p className="text-gray-600">{pageContent.contactInfo.phone}</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<Icon name="mail" className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<h3 className="font-semibold text-gray-900">
{currentLang === 'en'
? 'Email'
: currentLang === 'zh-CN'
? '电子邮箱'
: currentLang === 'zh-TW'
? '電子郵箱'
: currentLang === 'ko'
? '이메일'
: 'メール'}
</h3>
<p className="text-gray-600">{pageContent.contactInfo.email}</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<Icon name="clock" className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<h3 className="font-semibold text-gray-900">
{currentLang === 'en'
? 'Business Hours'
: currentLang === 'zh-CN'
? '营业时间'
: currentLang === 'zh-TW'
? '營業時間'
: currentLang === 'ko'
? '영업 시간'
: '営業時間'}
</h3>
<p className="text-gray-600">{pageContent.contactInfo.hours}</p>
</div>
</div>
</div>
{/* Map Placeholder */}
<div className="mt-8 bg-gray-200 rounded-lg h-64 flex items-center justify-center">
<p className="text-gray-500">
{currentLang === 'en'
? 'Map will be displayed here'
: currentLang === 'zh-CN'
? '地图将显示在这里'
: currentLang === 'zh-TW'
? '地圖將顯示在這裡'
: currentLang === 'ko'
? '지도가 여기에 표시됩니다'
: '地図がここに表示されます'}
</p>
</div>
</div>
{/* Contact Form */}
<div className="bg-white rounded-lg shadow-lg p-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6">
{pageContent.formTitle}
</h2>
{!isClient ? (
<div className="space-y-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<div className="block text-sm font-medium text-gray-700 mb-1">
{pageContent.formFields.name.label}
</div>
<div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
{pageContent.formFields.name.placeholder}
</div>
</div>
<div>
<div className="block text-sm font-medium text-gray-700 mb-1">
{pageContent.formFields.email.label}
</div>
<div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
{pageContent.formFields.email.placeholder}
</div>
</div>
</div>
<div className="text-center py-8">
<div className="text-gray-500">Loading form...</div>
</div>
</div>
) : formSubmitted ? (
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6">
<strong className="font-bold">
{currentLang === 'en'
? 'Thank you!'
: currentLang === 'zh-CN'
? '谢谢！'
: currentLang === 'zh-TW'
? '謝謝！'
: currentLang === 'ko'
? '감사합니다!'
: 'ありがとうございます！'}
</strong>
<span className="block sm:inline">
{' '}
{currentLang === 'en'
? 'Your message has been sent. We will contact you soon.'
: currentLang === 'zh-CN'
? '您的消息已发送。我们将尽快与您联系。'
: currentLang === 'zh-TW'
? '您的訊息已發送。我們將盡快與您聯繫。'
: currentLang === 'ko'
? '메시지가 전송되었습니다. 곧 연락 드리겠습니다.'
: 'メッセージが送信されました。すぐにご連絡いたします。'}
</span>
</div>
) : (
<form
onSubmit={handleSubmit}
className="space-y-6"
>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.name.label}
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder={pageContent.formFields.name.placeholder}
required
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.email.label}
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder={pageContent.formFields.email.placeholder}
required
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.phone.label}
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder={pageContent.formFields.phone.placeholder}
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label
htmlFor="company"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.company.label}
</label>
<input
type="text"
id="company"
name="company"
value={formData.company}
onChange={handleInputChange}
placeholder={pageContent.formFields.company.placeholder}
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div>
<label
htmlFor="subject"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.subject.label}
</label>
<select
id="subject"
name="subject"
value={formData.subject}
onChange={handleInputChange}
required
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="" disabled>
{pageContent.formFields.subject.placeholder}
</option>
{pageContent.formFields.subject.options.map(
(option, index) => (
<option key={index} value={option}>
{option}
</option>
),
)}
</select>
</div>
<div>
<label
htmlFor="message"
className="block text-sm font-medium text-gray-700 mb-1"
>
{pageContent.formFields.message.label}
</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleInputChange}
placeholder={pageContent.formFields.message.placeholder}
required
rows={5}
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
></textarea>
</div>
<div>
<button
type="submit"
className="w-full bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
>
{pageContent.formFields.submit}
</button>
</div>
</form>
)}
</div>
</div>
</div>
</PageLayout>
);
}

66
app/[lang]/layout.tsx Normal file
View File

@ -0,0 +1,66 @@
import type { Metadata } from 'next';
interface LanguageLayoutProps {
children: React.ReactNode;
params: { lang: string };
}
export async function generateMetadata({
params,
}: {
params: Promise<{ lang: string }>;
}): Promise<Metadata> {
// Map of language-specific metadata
const metadataByLang: Record<string, Metadata> = {
en: {
title: 'AWS Cloud Services Partner - Professional Cloud Computing Solutions',
description:
'Providing comprehensive AWS cloud services including EC2, RDS, S3, AI/ML and more',
keywords: 'AWS, cloud computing, EC2, RDS, S3, cloud services, AI, machine learning',
},
'zh-CN': {
title: 'AWS云服务合作伙伴 - 专业云计算解决方案',
description: '提供AWS云服务器、数据库、存储、AI/ML等全方位云计算服务',
keywords: 'AWS,云服务器,云计算,数据库,存储,AI,机器学习',
},
'zh-TW': {
title: 'AWS雲端服務合作夥伴 - 專業雲端運算解決方案',
description: '提供AWS雲端伺服器、資料庫、儲存、AI/ML等全方位雲端運算服務',
keywords: 'AWS,雲端伺服器,雲端運算,資料庫,儲存,AI,機器學習',
},
ko: {
title: 'AWS 클라우드 서비스 파트너 - 전문 클라우드 컴퓨팅 솔루션',
description: 'EC2, RDS, S3, AI/ML 등 포괄적인 AWS 클라우드 서비스 제공',
keywords: 'AWS,클라우드 컴퓨팅,EC2,RDS,S3,클라우드 서비스,AI,머신러닝',
},
ja: {
title: 'AWSクラウドサービスパートナー - プロフェッショナルクラウドコンピューティングソリューション',
description: 'EC2、RDS、S3、AI/MLなど包括的なAWSクラウドサービスを提供',
keywords: 'AWS,クラウドコンピューティング,EC2,RDS,S3,クラウドサービス,AI,機械学習',
},
};
// Await params before using its properties
const { lang } = await params;
// Get metadata for the current language or fall back to English
const metadata = metadataByLang[lang] || metadataByLang.en;
return {
...metadata,
alternates: {
languages: {
en: '/en',
'zh-CN': '/zh-CN',
'zh-TW': '/zh-TW',
ko: '/ko',
ja: '/ja',
'x-default': '/en',
},
},
};
}
export default function LanguageLayout({ children, params }: LanguageLayoutProps) {
return <>{children}</>;
}

13
app/[lang]/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import HomeClient from '../../components/HomeClient';
export async function generateStaticParams() {
const supportedLangs = ['en', 'zh-CN', 'zh-TW', 'ko', 'ja'];
return supportedLangs.map((lang) => ({
lang: lang,
}));
}
export default async function Page({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params;
return <HomeClient lang={lang} />;
}

109
app/[lang]/products/page.tsx Normal file
View File

@ -0,0 +1,109 @@
'use client';
import { useParams, useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import PageLayout from '../../../components/PageLayout';
import Icon from '../../../components/Icon';
import { content } from '../../../data/content';
import { productsContent } from '../../../data/pageContent';
export default function ProductsPage() {
const router = useRouter();
const params = useParams();
const currentLang = typeof params.lang === 'string' ? params.lang : 'en';
// Validate language and redirect if invalid
useEffect(() => {
const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
if (!supportedLangs.includes(currentLang)) {
router.push('/en/products');
}
}, [currentLang, router]);
const currentContent = content[currentLang as keyof typeof content] || content.en;
const pageContent =
productsContent[currentLang as keyof typeof productsContent] || productsContent.en;
const handleLanguageChange = (lang: string) => {
router.push(`/${lang}/products`);
};
return (
<PageLayout
title={pageContent.title}
description={pageContent.description}
keywords={pageContent.keywords}
currentLang={currentLang}
currentContent={currentContent}
handleLanguageChange={handleLanguageChange}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Page Header */}
<div className="text-center mb-16">
<h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
{pageContent.subheading}
</p>
</div>
{/* Product Categories */}
<div className="space-y-16">
{pageContent.categories.map((category, index) => (
<div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
<div className="bg-blue-600 text-white px-6 py-4">
<h2 className="text-2xl font-bold">{category.title}</h2>
<p className="mt-1">{category.description}</p>
</div>
<div className="grid md:grid-cols-3 gap-6 p-6">
{category.products.map((product, productIndex) => (
<div
key={productIndex}
className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
>
<div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
<Icon name={product.icon} />
</div>
<h3 className="text-xl font-semibold mb-2">
{product.name}
</h3>
<p className="text-gray-600">{product.description}</p>
</div>
))}
</div>
</div>
))}
</div>
{/* CTA Section */}
<div className="mt-16 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-xl text-white p-8 text-center">
<h2 className="text-3xl font-bold mb-4">{currentContent.hero.cta}</h2>
<p className="text-lg mb-6 max-w-2xl mx-auto">
{currentLang === 'en'
? 'Contact our AWS experts to discuss your specific cloud computing needs and requirements.'
: currentLang === 'zh-CN'
? '联系我们的AWS专家，讨论您的特定云计算需求和要求。'
: currentLang === 'zh-TW'
? '聯繫我們的AWS專家，討論您的特定雲計算需求和要求。'
: currentLang === 'ko'
? 'AWS 전문가에게 문의하여 특정 클라우드 컴퓨팅 요구 사항에 대해 논의하세요.'
: '特定のクラウドコンピューティングのニーズと要件について、AWS専門家にお問い合わせください。'}
</p>
<button
onClick={() => router.push(`/${currentLang}/contact`)}
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors"
>
{currentLang === 'en'
? 'Contact Us'
: currentLang === 'zh-CN'
? '联系我们'
: currentLang === 'zh-TW'
? '聯繫我們'
: currentLang === 'ko'
? '문의하기'
: 'お問い合わせ'}
</button>
</div>
</div>
</PageLayout>
);
}

135
app/[lang]/solutions/page.tsx Normal file
View File

@ -0,0 +1,135 @@
'use client';
import { useParams, useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import PageLayout from '../../../components/PageLayout';
import Icon from '../../../components/Icon';
import { content } from '../../../data/content';
import { solutionsContent } from '../../../data/pageContent';
export default function SolutionsPage() {
const router = useRouter();
const params = useParams();
const currentLang = typeof params.lang === 'string' ? params.lang : 'en';
// Validate language and redirect if invalid
useEffect(() => {
const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
if (!supportedLangs.includes(currentLang)) {
router.push('/en/solutions');
}
}, [currentLang, router]);
const currentContent = content[currentLang as keyof typeof content] || content.en;
const pageContent =
solutionsContent[currentLang as keyof typeof solutionsContent] || solutionsContent.en;
const handleLanguageChange = (lang: string) => {
router.push(`/${lang}/solutions`);
};
return (
<PageLayout
title={pageContent.title}
description={pageContent.description}
keywords={pageContent.keywords}
currentLang={currentLang}
currentContent={currentContent}
handleLanguageChange={handleLanguageChange}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Page Header */}
<div className="text-center mb-16">
<h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
{pageContent.subheading}
</p>
</div>
{/* Industries Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{pageContent.industries.map((industry, index) => (
<div
key={index}
className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
>
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
<div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4">
<Icon name={industry.icon} className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-bold">{industry.name}</h3>
</div>
<div className="p-6">
<p className="text-gray-600 mb-6">{industry.description}</p>
<div className="space-y-2">
<h4 className="font-semibold text-gray-900">
{currentLang === 'en'
? 'Key Benefits:'
: currentLang === 'zh-CN'
? '主要优势：'
: currentLang === 'zh-TW'
? '主要優勢：'
: currentLang === 'ko'
? '주요 이점:'
: '主な利点：'}
</h4>
{industry.benefits.map((benefit, benefitIndex) => (
<div key={benefitIndex} className="flex items-start">
<div className="flex-shrink-0 mt-1">
<Icon
name="check"
className="w-5 h-5 text-green-500"
/>
</div>
<p className="ml-2 text-gray-600">{benefit}</p>
</div>
))}
</div>
</div>
</div>
))}
</div>
{/* CTA Section */}
<div className="mt-16 bg-gray-100 rounded-lg p-8 text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
{currentLang === 'en'
? 'Need a customized solution for your industry?'
: currentLang === 'zh-CN'
? '需要为您的行业定制解决方案？'
: currentLang === 'zh-TW'
? '需要為您的行業定制解決方案？'
: currentLang === 'ko'
? '귀하의 산업에 맞는 맞춤형 솔루션이 필요하신가요?'
: 'あなたの業界向けのカスタマイズされたソリューションが必要ですか？'}
</h2>
<p className="text-gray-600 mb-6 max-w-2xl mx-auto">
{currentLang === 'en'
? 'Our AWS experts can help you design and implement a cloud solution tailored to your specific industry requirements.'
: currentLang === 'zh-CN'
? '我们的AWS专家可以帮助您设计和实施针对特定行业需求的云解决方案。'
: currentLang === 'zh-TW'
? '我們的AWS專家可以幫助您設計和實施針對特定行業需求的雲解決方案。'
: currentLang === 'ko'
? '당사의 AWS 전문가가 귀하의 특정 산업 요구 사항에 맞게 설계된 클라우드 솔루션을 설계하고 구현하는 데 도움을 드릴 수 있습니다.'
: '当社のAWS専門家は、特定の業界要件に合わせたクラウドソリューションの設計と実装をお手伝いします。'}
</p>
<button
onClick={() => router.push(`/${currentLang}/contact`)}
className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
>
{currentLang === 'en'
? 'Get in Touch'
: currentLang === 'zh-CN'
? '联系我们'
: currentLang === 'zh-TW'
? '聯繫我們'
: currentLang === 'ko'
? '연락하기'
: 'お問い合わせ'}
</button>
</div>
</div>
</PageLayout>
);
}

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

88
app/globals.css Normal file
View File

@ -0,0 +1,88 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

91
app/layout.tsx Normal file
View File

@ -0,0 +1,91 @@
import type { Metadata } from 'next';
import './globals.css';
export async function generateMetadata({
params,
}: {
params: { lang: string };
}): Promise<Metadata> {
const domain = 'https://your-domain.com';
// Map of language-specific metadata
const metadataByLang: Record<string, Metadata> = {
en: {
title: 'AWS Cloud Services Partner - Professional Cloud Computing Solutions',
description:
'Providing comprehensive AWS cloud services including EC2, RDS, S3, AI/ML and more',
keywords: 'AWS, cloud computing, EC2, RDS, S3, cloud services, AI, machine learning',
},
'zh-CN': {
title: 'AWS云服务合作伙伴 - 专业云计算解决方案',
description: '提供AWS云服务器、数据库、存储、AI/ML等全方位云计算服务',
keywords: 'AWS,云服务器,云计算,数据库,存储,AI,机器学习',
},
'zh-TW': {
title: 'AWS雲端服務合作夥伴 - 專業雲端運算解決方案',
description: '提供AWS雲端伺服器、資料庫、儲存、AI/ML等全方位雲端運算服務',
keywords: 'AWS,雲端伺服器,雲端運算,資料庫,儲存,AI,機器學習',
},
ko: {
title: 'AWS 클라우드 서비스 파트너 - 전문 클라우드 컴퓨팅 솔루션',
description: 'EC2, RDS, S3, AI/ML 등 포괄적인 AWS 클라우드 서비스 제공',
keywords: 'AWS,클라우드 컴퓨팅,EC2,RDS,S3,클라우드 서비스,AI,머신러닝',
},
ja: {
title: 'AWSクラウドサービスパートナー - プロフェッショナルクラウドコンピューティングソリューション',
description: 'EC2、RDS、S3、AI/MLなど包括的なAWSクラウドサービスを提供',
keywords: 'AWS,クラウドコンピューティング,EC2,RDS,S3,クラウドサービス,AI,機械学習',
},
};
// Get metadata for the current language or fall back to English
const metadata = metadataByLang[params.lang] || metadataByLang.en;
return {
metadataBase: new URL(domain),
...metadata,
alternates: {
languages: {
en: '/en',
'zh-CN': '/zh-CN',
'zh-TW': '/zh-TW',
ko: '/ko',
ja: '/ja',
'x-default': '/en',
},
},
openGraph: {
title: metadata.title || undefined,
description: metadata.description || undefined,
url: `${domain}/${params.lang}`,
siteName: 'AWS Cloud Services Partner',
images: [
{
url: '/og-image.png', // Must be an absolute URL
width: 1200,
height: 630,
},
],
locale: params.lang,
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: metadata.title || undefined,
description: metadata.description || undefined,
images: ['/og-image.png'], // Must be an absolute URL
},
};
}
export default function RootLayout({
children,
params,
}: Readonly<{ children: React.ReactNode; params: { lang: string } }>) {
return (
<html lang={params.lang}>
<body>
{children}
</body>
</html>
);
}

14
app/robots.ts Normal file
View File

@ -0,0 +1,14 @@
import { MetadataRoute } from 'next';
const domain = 'https://your-domain.com';
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: '/api/',
},
sitemap: `${domain}/sitemap.xml`,
};
}

18
app/sitemap.ts Normal file
View File

@ -0,0 +1,18 @@
import { MetadataRoute } from 'next';
const defaultLang = 'en';
const domain = 'https://your-domain.com';
const supportedLangs = ['en', 'zh-CN', 'zh-TW', 'ko', 'ja'];
export default function sitemap(): MetadataRoute.Sitemap {
const routes = ['', '/products', '/solutions', '/contact'];
const sitemapEntries = supportedLangs.flatMap((lang) => {
return routes.map((route) => ({
url: `${domain}/${lang}${route}`,
lastModified: new Date(),
}));
});
return sitemapEntries;
}