85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { useTranslations } from 'next-intl';
|
||
import { Section, Container } from '@/components/ui';
|
||
|
||
export default function ProductsPage() {
|
||
const t = useTranslations('Navigation');
|
||
|
||
const categories = [
|
||
{
|
||
title: 'Low Voltage Cables',
|
||
desc: 'Powering everyday essentials with reliability and safety.',
|
||
img: '/uploads/2024/12/low-voltage-scaled.webp',
|
||
icon: '/uploads/2024/11/Low-Voltage.svg',
|
||
href: '/products/low-voltage-cables'
|
||
},
|
||
{
|
||
title: 'Medium Voltage Cables',
|
||
desc: 'The perfect balance between power and performance for industrial and urban grids.',
|
||
img: '/uploads/2024/12/medium-voltage-scaled.webp',
|
||
icon: '/uploads/2024/11/Medium-Voltage.svg',
|
||
href: '/products/medium-voltage-cables'
|
||
},
|
||
{
|
||
title: 'High Voltage Cables',
|
||
desc: 'Delivering maximum power over long distances—without compromise.',
|
||
img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
|
||
icon: '/uploads/2024/11/High-Voltage.svg',
|
||
href: '/products/high-voltage-cables'
|
||
},
|
||
{
|
||
title: 'Solar Cables',
|
||
desc: 'Connecting the sun’s energy to your sustainable future.',
|
||
img: '/uploads/2025/04/3.webp',
|
||
icon: '/uploads/2024/11/Solar.svg',
|
||
href: '/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">Our Products</h1>
|
||
<p className="text-xl text-text-secondary">
|
||
Explore our comprehensive range of high-quality cables designed for every application.
|
||
</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">
|
||
View Products →
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|