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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 18:07:39 +01:00
parent 1f624f3d7f
commit e8b6b13a3b
5 changed files with 120 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,17 @@
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';
import RelatedProducts from '@/components/RelatedProducts';
import ProductSidebar from '@/components/ProductSidebar';
import Link from 'next/link';
import Image from 'next/image';
import { getTranslations } from 'next-intl/server';
import { Section, Container, Badge } from '@/components/ui';
import ProductTabs from '@/components/ProductTabs';
import ProductTechnicalData from '@/components/ProductTechnicalData';
import RelatedProducts from '@/components/RelatedProducts';
import RequestQuoteForm from '@/components/RequestQuoteForm';
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: {
@@ -66,15 +66,16 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
const components = {
ProductTechnicalData,
ProductTabs,
p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium" />,
p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-6 font-medium block !mb-6" />,
h2: (props: any) => (
<div className="relative mt-24 mb-12">
<h2 {...props} className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase" />
<div className="mt-4 w-20 h-1.5 bg-accent rounded-full" />
<div className="relative mt-20 mb-10 block !mt-20 !mb-10">
<h2 {...props} className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-6 block !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 mt-16 mb-6 tracking-tight uppercase" />,
ul: (props: any) => <ul {...props} className="list-none pl-0 mb-12 space-y-4" />,
h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl font-black text-primary mt-16 mb-6 tracking-tight uppercase block !mt-16 !mb-6" />,
ul: (props: any) => <ul {...props} className="list-none pl-0 mt-4 mb-8 space-y-4 block !mt-4 !mb-8" />,
section: (props: any) => <div {...props} className="block" />,
li: (props: any) => (
<li className="flex items-start gap-4 group">
<div className="mt-2.5 w-2 h-2 rounded-full bg-accent flex-shrink-0 group-hover:scale-125 transition-transform" />
@@ -133,7 +134,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
</Container>
</section>
<Section className="bg-neutral-light relative z-20 -mt-12 rounded-t-[48px] md:rounded-t-[64px]">
<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) => (
@@ -245,7 +246,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
</Container>
</section>
<Section className="bg-white relative z-20 -mt-12 pt-0 rounded-t-[48px] md:rounded-t-[64px]">
<Section className="bg-white relative">
<Container className="relative">
{/* Large Product Image Section */}
{product.frontmatter.images && product.frontmatter.images.length > 0 && (
@@ -319,7 +320,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
<div className="w-full">
{/* Main Content Area */}
<div className="max-w-none">
<div className="max-w-none [&_h3]:mt-16 [&_h3]:mb-6 [&_p]:mb-6 [&_ul]:mt-4 [&_ul]:mb-8 [&_li]:mb-4">
<MDXRemote source={product.content} components={components} />
</div>
@@ -358,7 +359,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
</div>
{/* Related Products Section */}
<div className="mt-32 pt-32">
<div className="mt-16 pt-16 border-t border-neutral-dark/5">
<RelatedProducts
currentSlug={productSlug}
categories={product.frontmatter.categories}