129 lines
6.8 KiB
TypeScript
129 lines
6.8 KiB
TypeScript
'use client';
|
||
|
||
import Navigation from '../../../components/Navigation';
|
||
import Footer from '../../../components/Footer';
|
||
import { useLanguage } from '../../../hooks/useLanguage';
|
||
|
||
interface SolutionsPageProps {
|
||
params: {
|
||
lang: string;
|
||
};
|
||
}
|
||
|
||
export default function SolutionsPage({ params }: SolutionsPageProps) {
|
||
const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
|
||
params.lang,
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white">
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
setCurrentLang={setCurrentLang}
|
||
content={currentContent}
|
||
createLocalizedPath={createLocalizedPath}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
{currentContent.solutions.title}
|
||
</h1>
|
||
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
||
{currentContent.solutions.subtitle}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Solutions Grid */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
{currentContent.solutions.items.map((solution, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 group"
|
||
>
|
||
<div className="flex items-start space-x-4">
|
||
<div className="w-12 h-12 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
|
||
<span className="text-white font-bold text-lg">
|
||
{index + 1}
|
||
</span>
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="text-2xl font-bold mb-4 text-cyan-400">
|
||
{solution.title}
|
||
</h3>
|
||
<p className="text-gray-300 mb-6 leading-relaxed">
|
||
{solution.description}
|
||
</p>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{solution.benefits.map((benefit, benefitIndex) => (
|
||
<div
|
||
key={benefitIndex}
|
||
className="flex items-center text-gray-400"
|
||
>
|
||
<svg
|
||
className="w-4 h-4 text-cyan-400 mr-2 flex-shrink-0"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
<span className="text-sm">{benefit}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Process Section */}
|
||
<section className="relative z-10 px-6 py-20 bg-gray-800/30">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
实施流程
|
||
</h2>
|
||
<p className="text-xl text-gray-300">专业的实施流程，确保项目成功交付</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-4 gap-8">
|
||
{[
|
||
{ title: '需求分析', description: '深入了解客户需求和现状' },
|
||
{ title: '方案设计', description: '制定详细的技术实施方案' },
|
||
{ title: '项目实施', description: '按计划执行迁移和部署' },
|
||
{ title: '运维支持', description: '提供持续的运维和优化' },
|
||
].map((step: { title: string; description: string }, index: number) => (
|
||
<div key={index} className="text-center">
|
||
<div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-white font-bold text-xl">
|
||
{index + 1}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-2 text-cyan-400">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-gray-400">{step.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
||
</div>
|
||
);
|
||
}
|