wip

2026-01-16 21:56:11 +01:00
parent ce1a73f2bc
commit 0b23e70fc9
6 changed files with 259 additions and 48 deletions
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -0,0 +1,84 @@
+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: 'https://klz-cables.com/wp-content/uploads/2024/12/low-voltage-scaled.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2024/12/medium-voltage-scaled.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2025/06/na2xsfl2y-rendered.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2025/04/3.webp',
+      icon: 'https://klz-cables.com/wp-content/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 &rarr;
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </Container>
+      </Section>
+    </div>
+  );
+}