Marc Mintel
a5d77fc69b
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Build & Deploy / 🧪 QA (push) Failing after 1m13s
Build & Deploy / 🏗️ Build (push) Failing after 5m53s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Build & Deploy / ♿ WCAG (push) Has been skipped
Build & Deploy / 🛡️ Quality Gates (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 4s
251 lines
11 KiB
TypeScript
251 lines
11 KiB
TypeScript
import Reveal from '@/components/Reveal';
|
|
import Scribble from '@/components/Scribble';
|
|
import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
|
|
import { getTranslations, setRequestLocale } from 'next-intl/server';
|
|
import { Metadata } from 'next';
|
|
import Image from 'next/image';
|
|
import { mapFileSlugToTranslated } from '@/lib/slugs';
|
|
import { SITE_URL } from '@/lib/schema';
|
|
import TrackedLink from '@/components/analytics/TrackedLink';
|
|
|
|
interface ProductsPageProps {
|
|
params: Promise<{
|
|
locale: string;
|
|
}>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
|
|
const { locale } = await params;
|
|
const t = await getTranslations({ locale, namespace: 'Products' });
|
|
const title = t.has('meta.title')
|
|
? t('meta.title')
|
|
: t.has('breadcrumb')
|
|
? t('breadcrumb')
|
|
: 'Products';
|
|
const description = t('meta.description') || t('subtitle');
|
|
return {
|
|
title,
|
|
description,
|
|
alternates: {
|
|
canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
|
|
languages: {
|
|
de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}`,
|
|
en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
|
|
'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: `${title} | KLZ Cables`,
|
|
description,
|
|
url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: `${title} | KLZ Cables`,
|
|
description,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function ProductsPage({ params }: ProductsPageProps) {
|
|
const { locale } = await params;
|
|
setRequestLocale(locale);
|
|
const t = await getTranslations('Products');
|
|
|
|
// Get translated category slugs
|
|
const lowVoltageSlug = await mapFileSlugToTranslated('low-voltage-cables', locale);
|
|
const mediumVoltageSlug = await mapFileSlugToTranslated('medium-voltage-cables', locale);
|
|
const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
|
|
const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);
|
|
|
|
const productsSlug = await mapFileSlugToTranslated('products', locale);
|
|
|
|
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: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
|
|
},
|
|
{
|
|
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: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
|
|
},
|
|
{
|
|
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: `/${locale}/${productsSlug}/${highVoltageSlug}`,
|
|
},
|
|
{
|
|
title: t('categories.solar.title'),
|
|
desc: t('categories.solar.description'),
|
|
img: '/uploads/2024/11/solar-category.webp',
|
|
icon: '/uploads/2024/11/Solar.svg',
|
|
href: `/${locale}/${productsSlug}/${solarSlug}`,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-neutral-light">
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark">
|
|
<Container className="relative z-10">
|
|
<div className="max-w-4xl animate-slide-up">
|
|
<Badge
|
|
variant="saturated"
|
|
className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5"
|
|
>
|
|
{t('heroSubtitle')}
|
|
</Badge>
|
|
<Heading level={1} className="text-white mb-4 md:mb-8">
|
|
{t.rich('title', {
|
|
green: (chunks) => (
|
|
<span className="relative inline-block">
|
|
<span className="relative z-10 text-accent italic">{chunks}</span>
|
|
<Scribble
|
|
variant="circle"
|
|
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block"
|
|
/>
|
|
</span>
|
|
),
|
|
})}
|
|
</Heading>
|
|
<p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
|
|
{t('subtitle')}
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 md:gap-6">
|
|
<Button
|
|
href="#categories"
|
|
variant="accent"
|
|
size="lg"
|
|
className="group w-full md:w-auto"
|
|
>
|
|
{t('viewProducts')}
|
|
<span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<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) => (
|
|
<Reveal key={idx} delay={idx * 100}>
|
|
<TrackedLink
|
|
key={idx}
|
|
href={category.href}
|
|
className="group block"
|
|
eventProperties={{
|
|
category_title: category.title,
|
|
location: 'products_index',
|
|
}}
|
|
>
|
|
<Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
|
|
<div className="relative h-[200px] md:h-[400px] overflow-hidden">
|
|
<Image
|
|
src={category.img}
|
|
alt={category.title}
|
|
fill
|
|
className="object-cover transition-transform duration-1000 group-hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
<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">
|
|
<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">
|
|
<Badge
|
|
variant="accent"
|
|
className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs"
|
|
>
|
|
{t('categoryLabel')}
|
|
</Badge>
|
|
<h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
|
|
{category.title}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="p-5 md:p-10">
|
|
<p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8 line-clamp-2 md:line-clamp-none">
|
|
{category.desc}
|
|
</p>
|
|
<div className="flex items-center text-saturated font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors">
|
|
<span className="border-b-2 border-saturated/10 group-hover:border-accent-dark transition-colors pb-1">
|
|
{t('viewProducts')}
|
|
</span>
|
|
<div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
|
<svg
|
|
className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</TrackedLink>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
|
|
{/* Technical Support CTA */}
|
|
<Reveal>
|
|
<Section className="bg-white py-12 md:py-28">
|
|
<Container>
|
|
<div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
|
|
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
|
|
<div className="max-w-2xl text-center lg:text-left">
|
|
<h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">
|
|
{t('cta.title')}
|
|
</h2>
|
|
<p className="text-base md:text-xl text-white/70 leading-relaxed">
|
|
{t('cta.description')}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
href={`/${locale}/contact`}
|
|
variant="accent"
|
|
size="lg"
|
|
className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl"
|
|
>
|
|
{t('cta.button')}
|
|
<span className="ml-2 md:ml-4 transition-transform group-hover:translate-x-2">
|
|
→
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</Reveal>
|
|
</div>
|
|
);
|
|
}
|