350 lines
16 KiB
TypeScript
350 lines
16 KiB
TypeScript
import ProductSidebar from '@/components/ProductSidebar';
|
|
import ProductTabs from '@/components/ProductTabs';
|
|
import ProductTechnicalData from '@/components/ProductTechnicalData';
|
|
import RelatedProducts from '@/components/RelatedProducts';
|
|
import { Badge, Container, Section } from '@/components/ui';
|
|
import { getDatasheetPath } from '@/lib/datasheets';
|
|
import { getAllProducts, getProductBySlug } from '@/lib/mdx';
|
|
import { Metadata } from 'next';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { notFound } from 'next/navigation';
|
|
|
|
interface ProductPageProps {
|
|
params: {
|
|
locale: string;
|
|
slug: string[];
|
|
};
|
|
}
|
|
|
|
export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
|
|
const { locale, slug } = params;
|
|
const productSlug = slug[slug.length - 1];
|
|
const t = await getTranslations('Products');
|
|
|
|
// Check if it's a category page
|
|
const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
|
|
if (categories.includes(productSlug)) {
|
|
const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
const categoryTitle = t(`categories.${categoryKey}.title`);
|
|
const categoryDesc = t(`categories.${categoryKey}.description`);
|
|
|
|
return {
|
|
title: categoryTitle,
|
|
description: categoryDesc,
|
|
openGraph: {
|
|
title: categoryTitle,
|
|
description: categoryDesc,
|
|
url: `https://klz-cables.com/${locale}/products/${productSlug}`,
|
|
}
|
|
};
|
|
}
|
|
|
|
const product = await getProductBySlug(productSlug, locale);
|
|
if (!product) return {};
|
|
|
|
return {
|
|
title: product.frontmatter.title,
|
|
description: product.frontmatter.description,
|
|
openGraph: {
|
|
title: product.frontmatter.title,
|
|
description: product.frontmatter.description,
|
|
type: 'website',
|
|
url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: product.frontmatter.title,
|
|
description: product.frontmatter.description,
|
|
},
|
|
};
|
|
}
|
|
|
|
const components = {
|
|
ProductTechnicalData,
|
|
ProductTabs,
|
|
p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium" />,
|
|
h2: (props: any) => (
|
|
<div className="relative mb-16">
|
|
<h2 {...props} className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-6" />
|
|
<div className="w-20 h-1.5 bg-accent rounded-full" />
|
|
</div>
|
|
),
|
|
h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase" />,
|
|
ul: (props: any) => <ul {...props} className="list-none pl-0 mb-10" />,
|
|
section: (props: any) => <div {...props} className="block" />,
|
|
li: (props: any) => (
|
|
<li className="flex items-start gap-4 group mb-4 last:mb-0">
|
|
<div className="mt-2.5 w-2 h-2 rounded-full bg-accent flex-shrink-0 group-hover:scale-125 transition-transform" />
|
|
<span {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed font-medium" />
|
|
</li>
|
|
),
|
|
strong: (props: any) => <strong {...props} className="font-black text-primary" />,
|
|
table: (props: any) => (
|
|
<div className="overflow-x-auto my-20 rounded-[32px] border border-neutral-dark/10 shadow-xl bg-white p-1">
|
|
<table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
|
|
</div>
|
|
),
|
|
th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-[10px] font-black uppercase tracking-[0.25em] text-primary/60" />,
|
|
td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl font-medium" />,
|
|
hr: () => <hr className="my-24 border-t-2 border-neutral-dark/5" />,
|
|
blockquote: (props: any) => (
|
|
<div className="my-20 p-10 md:p-16 bg-primary-dark rounded-[40px] relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
|
|
<div className="relative z-10 italic text-2xl md:text-4xl text-white/90 leading-relaxed font-black tracking-tight" {...props} />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export default async function ProductPage({ params }: ProductPageProps) {
|
|
const { locale, slug } = params;
|
|
const productSlug = slug[slug.length - 1];
|
|
const t = await getTranslations('Products');
|
|
|
|
// Check if it's a category page
|
|
const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
|
|
if (categories.includes(productSlug)) {
|
|
const allProducts = await getAllProducts(locale);
|
|
const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
const categoryTitle = t(`categories.${categoryKey}.title`);
|
|
|
|
// Filter products for this category
|
|
const filteredProducts = allProducts.filter(p =>
|
|
p.frontmatter.categories.some(cat => cat.toLowerCase().replace(/\s+/g, '-') === productSlug)
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-white">
|
|
<section className="relative min-h-[50vh] flex items-center pt-32 pb-20 overflow-hidden bg-primary-dark">
|
|
<Container className="relative z-10">
|
|
<div className="max-w-4xl animate-slide-up">
|
|
<nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
|
|
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
|
|
<span className="mx-3 opacity-30">/</span>
|
|
<span className="text-white/90">{categoryTitle}</span>
|
|
</nav>
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
|
|
{categoryTitle}
|
|
</h1>
|
|
<div className="h-1.5 w-24 bg-accent rounded-full" />
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Section className="bg-neutral-light relative">
|
|
<Container>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredProducts.map((product) => (
|
|
<Link
|
|
key={product.slug}
|
|
href={`/${locale}/products/${productSlug}/${product.slug}`}
|
|
className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
|
|
>
|
|
<div className="aspect-[4/3] relative bg-neutral-light/30 p-12 overflow-hidden">
|
|
{product.frontmatter.images?.[0] && (
|
|
<>
|
|
<Image
|
|
src={product.frontmatter.images[0]}
|
|
alt={product.frontmatter.title}
|
|
fill
|
|
className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
|
|
/>
|
|
{/* Subtle reflection/shadow effect */}
|
|
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="p-8 md:p-10">
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{product.frontmatter.categories.map((cat, i) => (
|
|
<span key={i} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<h2 className="text-2xl md:text-3xl font-bold text-text-primary group-hover:text-primary transition-colors mb-4 leading-tight">
|
|
{product.frontmatter.title}
|
|
</h2>
|
|
<p className="text-text-secondary line-clamp-2 text-base leading-relaxed mb-8">
|
|
{product.frontmatter.description}
|
|
</p>
|
|
<div className="flex items-center text-primary font-bold group-hover:text-accent-dark transition-colors">
|
|
<span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
|
|
{t('details')}
|
|
</span>
|
|
<svg className="w-5 h-5 ml-3 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>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const product = await getProductBySlug(productSlug, locale);
|
|
|
|
if (!product) {
|
|
notFound();
|
|
}
|
|
|
|
const datasheetPath = getDatasheetPath(productSlug, locale);
|
|
const isFallback = (product.frontmatter as any).isFallback;
|
|
const categorySlug = slug[0];
|
|
const categoryKey = categorySlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
const categoryTitle = t(`categories.${categoryKey}.title`);
|
|
|
|
const sidebar = (
|
|
<ProductSidebar
|
|
productName={product.frontmatter.title}
|
|
productImage={product.frontmatter.images?.[0]}
|
|
datasheetPath={datasheetPath}
|
|
/>
|
|
);
|
|
|
|
const productComponents = {
|
|
...components,
|
|
ProductTabs: (props: any) => <ProductTabs {...props} sidebar={sidebar} />,
|
|
};
|
|
|
|
// Pre-process content to convert raw HTML tags to Markdown so they use our custom components
|
|
const processedContent = product.content
|
|
.replace(/<h2[^>]*>(.*?)<\/h2>/g, '\n## $1\n')
|
|
.replace(/<h3[^>]*>(.*?)<\/h3>/g, '\n### $1\n')
|
|
.replace(/<p[^>]*>(.*?)<\/p>/g, '\n$1\n')
|
|
.replace(/<ul[^>]*>(.*?)<\/ul>/gs, '\n$1\n')
|
|
.replace(/<li[^>]*>(.*?)<\/li>/g, '\n- $1\n')
|
|
.replace(/<strong[^>]*>(.*?)<\/strong>/g, '**$1**')
|
|
.replace(/<section[^>]*>/g, '')
|
|
.replace(/<\/section>/g, '');
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-white relative">
|
|
{/* Product Hero */}
|
|
<section className="relative pt-40 pb-24 overflow-hidden bg-primary-dark">
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/5 to-transparent pointer-events-none" />
|
|
<div className="absolute -top-24 -right-24 w-96 h-96 bg-accent/10 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
<Container className="relative z-10">
|
|
<div className="max-w-4xl animate-slide-up">
|
|
<nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
|
|
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
|
|
<span className="mx-4 opacity-20">/</span>
|
|
<Link href={`/${locale}/products/${categorySlug}`} className="hover:text-accent transition-colors">{categoryTitle}</Link>
|
|
<span className="mx-4 opacity-20">/</span>
|
|
<span className="text-white/90">{product.frontmatter.title}</span>
|
|
</nav>
|
|
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-12">
|
|
<div className="flex-1">
|
|
{isFallback && (
|
|
<div className="mb-8 inline-flex items-center px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-[10px] font-black uppercase tracking-[0.2em] backdrop-blur-md">
|
|
<span className="w-2 h-2 rounded-full bg-accent mr-3 animate-pulse" />
|
|
{t('englishVersion')}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-wrap gap-3 mb-8">
|
|
{product.frontmatter.categories.map((cat, idx) => (
|
|
<Badge key={idx} variant="accent" className="bg-white/5 text-white/80 border-white/10 backdrop-blur-md px-5 py-2 text-[10px] font-black tracking-[0.15em]">
|
|
{cat}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white mb-8 tracking-tighter leading-[0.9] uppercase">
|
|
{product.frontmatter.title}
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-white/60 max-w-2xl leading-relaxed font-medium">
|
|
{product.frontmatter.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Section className="bg-white relative">
|
|
<Container className="relative">
|
|
{/* Large Product Image Section */}
|
|
{product.frontmatter.images && product.frontmatter.images.length > 0 && (
|
|
<div className="relative -mt-32 mb-32 animate-slide-up" style={{ animationDelay: '200ms' }}>
|
|
<div className="bg-white shadow-[0_32px_64px_-12px_rgba(0,0,0,0.1)] rounded-[48px] border border-neutral-dark/5 overflow-hidden p-12 md:p-20 lg:p-24">
|
|
<div className="relative w-full aspect-[21/9]">
|
|
<Image
|
|
src={product.frontmatter.images[0]}
|
|
alt={product.frontmatter.title}
|
|
fill
|
|
className="object-contain transition-transform duration-1000 hover:scale-105"
|
|
priority
|
|
/>
|
|
{/* Subtle reflection/shadow effect */}
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-black/5 blur-3xl rounded-[100%]" />
|
|
</div>
|
|
|
|
{product.frontmatter.images.length > 1 && (
|
|
<div className="flex justify-center gap-8 mt-20">
|
|
{product.frontmatter.images.slice(0, 5).map((img, idx) => (
|
|
<div key={idx} className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/5 rounded-3xl overflow-hidden bg-neutral-light/30 hover:border-accent transition-all duration-500 cursor-pointer group p-4">
|
|
<Image src={img} alt="" fill className="object-contain p-4 transition-transform duration-700 group-hover:scale-110" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative">
|
|
<div className="w-full">
|
|
{/* Main Content Area */}
|
|
<div className="max-w-none">
|
|
<MDXRemote source={processedContent} components={productComponents} />
|
|
</div>
|
|
|
|
{/* Structured Data */}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Product',
|
|
name: product.frontmatter.title,
|
|
description: product.frontmatter.description,
|
|
sku: product.frontmatter.sku,
|
|
image: product.frontmatter.images?.[0] ? `https://klz-cables.com${product.frontmatter.images[0]}` : undefined,
|
|
brand: {
|
|
'@type': 'Brand',
|
|
name: 'KLZ Cables',
|
|
},
|
|
offers: {
|
|
'@type': 'Offer',
|
|
availability: 'https://schema.org/InStock',
|
|
priceCurrency: 'EUR',
|
|
url: `https://klz-cables.com/${locale}/products/${slug.join('/')}`,
|
|
},
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Related Products Section */}
|
|
<div className="mt-16 pt-16 border-t border-neutral-dark/5">
|
|
<RelatedProducts
|
|
currentSlug={productSlug}
|
|
categories={product.frontmatter.categories}
|
|
locale={locale}
|
|
/>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|