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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 02:19:11 +01:00
parent 4f6264f2e2
commit 79016fbe97
17 changed files with 134 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/[locale]/products/[slug]/page.tsx
View File

@@ -1,6 +1,7 @@
import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getProductBySlug, getAllProducts } from '@/lib/mdx';
import { getDatasheetPath } from '@/lib/datasheets';
import ProductTechnicalData from '@/components/ProductTechnicalData';
import ProductTabs from '@/components/ProductTabs';
import RequestQuoteForm from '@/components/RequestQuoteForm';
@@ -110,7 +111,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
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">
<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>
@@ -186,6 +187,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
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());
@@ -195,7 +197,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
<div className="flex flex-col min-h-screen bg-neutral-light">
{/* Product Hero */}
<section className="relative pt-40 pb-32 overflow-hidden bg-primary-dark">
<Container className="relative z-10">
<Container className="relative z-10">
<div className="max-w-5xl 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>
@@ -326,6 +328,34 @@ export default async function ProductPage({ params }: ProductPageProps) {
<RequestQuoteForm productName={product.frontmatter.title} />
</div>
</div>
{/* Datasheet Download */}
{datasheetPath && (
<div className="mt-8 bg-white rounded-3xl shadow-xl border border-neutral-dark/5 overflow-hidden group hover:shadow-2xl transition-all duration-500">
<div className="p-6 md:p-8 flex items-center gap-6">
<div className="w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center flex-shrink-0 group-hover:bg-accent group-hover:text-white transition-colors duration-500 text-accent">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div className="flex-1">
<h3 className="text-lg font-bold text-primary mb-1">{t('downloadDatasheet')}</h3>
<p className="text-text-secondary text-sm mb-4">{t('downloadDatasheetDesc')}</p>
<a
href={datasheetPath}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-accent font-bold hover:text-accent-dark transition-colors"
>
<span>{t('downloadDatasheet')}</span>
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</a>
</div>
</div>
</div>
)}
</div>
</div>
</div>