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-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/[locale]/[slug]/page.tsx
View File

@@ -1,6 +1,6 @@
import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getPostBySlug } from '@/lib/blog';
import { Section, Container, Heading, Badge } from '@/components/ui';
interface PageProps {
params: {
@@ -10,14 +10,6 @@ interface PageProps {
}
export default async function StandardPage({ params: { locale, slug } }: PageProps) {
const page = await getPostBySlug(slug, locale); // Reusing blog logic for now as structure is same
// If not found in blog, try pages directory (we need to implement getPageBySlug)
// Actually, let's implement getPageBySlug in lib/mdx.ts or similar
// For now, let's assume we use a unified loader or separate.
// Let's use a separate loader for pages.
const { getPageBySlug } = await import('@/lib/pages');
const pageData = await getPageBySlug(slug, locale);
@@ -26,11 +18,63 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
}
return (
<div className="container mx-auto px-4 py-12 max-w-4xl">
<h1 className="text-4xl font-bold text-primary mb-8">{pageData.frontmatter.title}</h1>
<div className="prose prose-lg max-w-none">
<MDXRemote source={pageData.content} />
</div>
<div className="flex flex-col min-h-screen bg-neutral-light">
{/* Hero Section */}
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
</div>
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<Badge variant="accent" className="mb-6">Information</Badge>
<Heading level={1} className="text-white mb-0">
<span className="text-white">{pageData.frontmatter.title}</span>
</Heading>
</div>
</Container>
</section>
<Section className="bg-white -mt-12 relative z-20 rounded-t-[60px] shadow-2xl">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
{/* Sticky Narrative Sidebar */}
<div className="lg:col-span-4">
<div className="sticky top-32 space-y-8">
<div className="p-8 bg-neutral-light rounded-3xl border border-neutral-medium">
<h3 className="text-xl font-bold text-primary mb-4">Quick Navigation</h3>
<nav className="space-y-4">
<div className="h-1 w-12 bg-accent rounded-full" />
<p className="text-text-secondary leading-relaxed">
Explore the details of {pageData.frontmatter.title}. KLZ provides comprehensive information on all our services and corporate policies.
</p>
</nav>
</div>
<div className="p-8 bg-primary-dark rounded-3xl text-white">
<h3 className="text-xl font-bold mb-4">Need Help?</h3>
<p className="text-white/70 mb-6">Our support team is available for any questions regarding this topic.</p>
<a href={`/${locale}/contact`} className="text-accent font-bold hover:underline">Contact Us &rarr;</a>
</div>
</div>
</div>
{/* Main Content */}
<div className="lg:col-span-8">
<article className="prose prose-xl prose-primary max-w-none
prose-headings:text-primary prose-headings:font-bold prose-headings:tracking-tight
prose-p:text-text-secondary prose-p:leading-relaxed
prose-strong:text-primary prose-strong:font-extrabold
prose-a:text-primary prose-a:font-bold prose-a:no-underline hover:prose-a:underline
prose-img:rounded-3xl prose-img:shadow-2xl
prose-ul:list-disc prose-ul:pl-6
prose-li:text-text-secondary
">
<MDXRemote source={pageData.content} />
</article>
</div>
</div>
</Container>
</Section>
</div>
);
}