120 lines
6.0 KiB
TypeScript
120 lines
6.0 KiB
TypeScript
'use client';
|
|
|
|
import Navigation from '../../../components/Navigation';
|
|
import Footer from '../../../components/Footer';
|
|
import { useLanguage } from '../../../hooks/useLanguage';
|
|
|
|
interface ServicesPageProps {
|
|
params: {
|
|
lang: string;
|
|
};
|
|
}
|
|
|
|
export default function ServicesPage({ params }: ServicesPageProps) {
|
|
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.services.title}
|
|
</h1>
|
|
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
|
{currentContent.services.subtitle}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Grid */}
|
|
<section className="relative z-10 px-6 py-20">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{currentContent.services.items.map((service, 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="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-cyan-400">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-300 mb-6 leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
<ul className="space-y-2">
|
|
{service.features.map((feature, featureIndex) => (
|
|
<li
|
|
key={featureIndex}
|
|
className="flex items-center text-gray-400"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-cyan-400 mr-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative z-10 px-6 py-20">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<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">
|
|
{currentContent.hero.cta}
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-8">{currentContent.hero.description}</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105">
|
|
{currentContent.hero.cta}
|
|
</button>
|
|
<button className="px-8 py-4 border border-cyan-500 rounded-lg font-semibold hover:bg-cyan-500/10 transition-all duration-300">
|
|
{currentContent.hero.learn}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
|
</div>
|
|
);
|
|
}
|