wip

app/[locale]/products/[...slug]/page.tsx

@@ -112,7 +112,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
     
     // Filter products for this category
     const filteredProducts = allProducts.filter(p => 
-      p.frontmatter.categories.some(cat => cat.toLowerCase().replace(/\s+/g, '-') === productSlug)
+      p.frontmatter.categories.some(cat => 
+        cat.toLowerCase().replace(/\s+/g, '-') === productSlug || 
+        cat === categoryTitle
+      )
     );
 
     return (

app/[locale]/products/page.tsx

@@ -1,9 +1,9 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-import { Section, Container, Card, Badge, Button } from '@/components/ui';
-import Scribble from '@/components/Scribble';
 import Reveal from '@/components/Reveal';
+import Scribble from '@/components/Scribble';
+import { Badge, Button, Card, Container, Section } from '@/components/ui';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import Link from 'next/link';
 
 interface ProductsPageProps {
   params: {
@@ -77,7 +77,7 @@ export default function ProductsPage({ params }: ProductsPageProps) {
         </Container>
       </section>
 
-      <Section id="categories" className="bg-neutral-light relative z-20 -mt-8 md:-mt-16 rounded-t-[32px] md:rounded-t-[64px] pt-12 md:pt-24">
+      <Section id="categories" className="bg-neutral-light relative">
         <Container>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
             {categories.map((category, idx) => (

components/RelatedProducts.tsx

@@ -37,7 +37,14 @@ export default async function RelatedProducts({ currentSlug, categories, locale
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {related.map((product) => {
           // Find the category slug for the link
-          const catSlug = product.frontmatter.categories[0].toLowerCase().replace(/\s+/g, '-');
+          const categorySlugs = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
+          const catSlug = categorySlugs.find(slug => {
+            const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+            const title = t(`categories.${key}.title`);
+            return product.frontmatter.categories.some(cat => 
+              cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
+            );
+          }) || 'low-voltage-cables';
           
           return (
             <Link 

lib/mdx.ts

@@ -73,6 +73,13 @@ export async function getAllProductSlugs(locale: string): Promise<string[]> {
 
 export async function getAllProducts(locale: string): Promise<ProductMdx[]> {
   const slugs = await getAllProductSlugs(locale);
-  const products = await Promise.all(slugs.map(slug => getProductBySlug(slug, locale)));
+  let allSlugs = slugs;
+
+  if (locale !== 'en') {
+    const enSlugs = await getAllProductSlugs('en');
+    allSlugs = Array.from(new Set([...slugs, ...enSlugs]));
+  }
+
+  const products = await Promise.all(allSlugs.map(slug => getProductBySlug(slug, locale)));
   return products.filter((p): p is ProductMdx => p !== null);
 }