81 lines
3.5 KiB
TypeScript
81 lines
3.5 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import { Section, Container, Heading, Badge } from '@/components/ui';
|
|
|
|
interface PageProps {
|
|
params: {
|
|
locale: string;
|
|
slug: string;
|
|
};
|
|
}
|
|
|
|
export default async function StandardPage({ params: { locale, slug } }: PageProps) {
|
|
const { getPageBySlug } = await import('@/lib/pages');
|
|
const pageData = await getPageBySlug(slug, locale);
|
|
|
|
if (!pageData) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<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 →</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>
|
|
);
|
|
}
|