mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

slug i18n

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 23:43:01 +01:00
parent f62485a67d
commit abf283c9ab
9 changed files with 267 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/[locale]/products/page.tsx
View File

@@ -1,11 +1,11 @@
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 { getTranslations } from 'next-intl/server';
import { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { mapFileSlugToTranslated } from '@/lib/slugs';
interface ProductsPageProps {
params: {
@@ -39,37 +39,43 @@ export async function generateMetadata({ params: { locale } }: ProductsPageProps
};
}
export default function ProductsPage({ params }: ProductsPageProps) {
const t = useTranslations('Products');
export default async function ProductsPage({ params }: ProductsPageProps) {
const t = await getTranslations('Products');
// Get translated category slugs
const lowVoltageSlug = await mapFileSlugToTranslated('low-voltage-cables', params.locale);
const mediumVoltageSlug = await mapFileSlugToTranslated('medium-voltage-cables', params.locale);
const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', params.locale);
const solarSlug = await mapFileSlugToTranslated('solar-cables', params.locale);
const categories = [
{
title: t('categories.lowVoltage.title'),
{
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`
href: `/${params.locale}/products/${lowVoltageSlug}`
},
{
title: t('categories.mediumVoltage.title'),
{
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`
href: `/${params.locale}/products/${mediumVoltageSlug}`
},
{
title: t('categories.highVoltage.title'),
{
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`
href: `/${params.locale}/products/${highVoltageSlug}`
},
{
title: t('categories.solar.title'),
{
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`
href: `/${params.locale}/products/${solarSlug}`
}
];
@@ -124,7 +130,7 @@ export default function ProductsPage({ params }: ProductsPageProps) {
<div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
<div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
<img src={category.icon} alt="" className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
<Image src={category.icon} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
</div>
<div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">