91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Section, Container } from '@/components/ui';
|
|
|
|
interface ProductsPageProps {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
}
|
|
|
|
export default function ProductsPage({ params }: ProductsPageProps) {
|
|
const t = useTranslations('Products');
|
|
|
|
const categories = [
|
|
{
|
|
title: t('categories.lowVoltage.title'),
|
|
desc: t('categories.lowVoltage.description'),
|
|
img: '/uploads/2024/11/low-voltage-category.webp',
|
|
icon: '/uploads/2024/11/Low-Voltage.svg',
|
|
href: `/${params.locale}/products/low-voltage-cables`
|
|
},
|
|
{
|
|
title: t('categories.mediumVoltage.title'),
|
|
desc: t('categories.mediumVoltage.description'),
|
|
img: '/uploads/2024/11/medium-voltage-category.webp',
|
|
icon: '/uploads/2024/11/Medium-Voltage.svg',
|
|
href: `/${params.locale}/products/medium-voltage-cables`
|
|
},
|
|
{
|
|
title: t('categories.highVoltage.title'),
|
|
desc: t('categories.highVoltage.description'),
|
|
img: '/uploads/2024/11/high-voltage-category.webp',
|
|
icon: '/uploads/2024/11/High-Voltage.svg',
|
|
href: `/${params.locale}/products/high-voltage-cables`
|
|
},
|
|
{
|
|
title: t('categories.solar.title'),
|
|
desc: t('categories.solar.description'),
|
|
img: '/uploads/2024/11/solar-category.webp',
|
|
icon: '/uploads/2024/11/Solar.svg',
|
|
href: `/${params.locale}/products/solar-cables`
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Section className="bg-neutral-light">
|
|
<Container>
|
|
<div className="max-w-3xl mx-auto text-center mb-16">
|
|
<h1 className="text-4xl font-bold mb-6">{t('title')}</h1>
|
|
<p className="text-xl text-text-secondary">
|
|
{t('subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{categories.map((category, idx) => (
|
|
<Link key={idx} href={category.href} className="group block bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark hover:shadow-md transition-all">
|
|
<div className="relative h-64 overflow-hidden">
|
|
<Image
|
|
src={category.img}
|
|
alt={category.title}
|
|
fill
|
|
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
|
|
</div>
|
|
<div className="p-8">
|
|
<div className="flex items-center mb-4">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
|
|
<img src={category.icon} alt="" className="w-8 h-8" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-text-primary group-hover:text-primary transition-colors">{category.title}</h2>
|
|
</div>
|
|
<p className="text-text-secondary text-lg mb-6">
|
|
{category.desc}
|
|
</p>
|
|
<span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
|
|
{t('viewProducts')} →
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|