96 lines
4.9 KiB
TypeScript
96 lines
4.9 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import { Section, Container, Heading, Badge } from '@/components/ui';
|
|
import { getTranslations } from 'next-intl/server';
|
|
|
|
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);
|
|
const t = await getTranslations('StandardPage');
|
|
|
|
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-20 md: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-4 md:mb-6">{t('badge')}</Badge>
|
|
<Heading level={1} className="text-3xl md:text-6xl lg:text-7xl xl:text-8xl text-white mb-0">
|
|
<span className="text-white">{pageData.frontmatter.title}</span>
|
|
</Heading>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Section className="bg-white -mt-8 md:-mt-12 relative z-20 rounded-t-[32px] md:rounded-t-[60px] shadow-2xl py-12 md:py-28">
|
|
<Container>
|
|
<div className="sticky-narrative-container">
|
|
{/* Sticky Narrative Sidebar - Mobile Optimized */}
|
|
<div className="sticky-narrative-sidebar mb-8 lg:mb-0">
|
|
<div className="lg:sticky lg:top-32 space-y-4 md:space-y-8">
|
|
{/* Mobile-only chip/stepper feel */}
|
|
<div className="flex lg:hidden overflow-x-auto pb-4 gap-3 no-scrollbar -mx-4 px-4">
|
|
<Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">{t('overview')}</Badge>
|
|
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('details')}</Badge>
|
|
<Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('support')}</Badge>
|
|
</div>
|
|
|
|
<div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm">
|
|
<h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4 flex items-center gap-2">
|
|
<span className="w-1.5 h-6 bg-accent rounded-full" />
|
|
{t('quickNavigation')}
|
|
</h3>
|
|
<nav className="space-y-3 md:space-y-4">
|
|
<p className="text-sm md:text-base text-text-secondary leading-relaxed">
|
|
{t('exploreDetails', { title: pageData.frontmatter.title })}
|
|
</p>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white shadow-xl relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 w-24 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
|
|
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">{t('needHelp')}</h3>
|
|
<p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">{t('supportTeamAvailable')}</p>
|
|
<a href={`/${locale}/contact`} className="inline-flex items-center text-accent font-bold hover:underline touch-target relative z-10 group/link">
|
|
{t('contactUs')}
|
|
<span className="ml-2 transition-transform group-hover/link:translate-x-1">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="sticky-narrative-content">
|
|
<article className="prose prose-sm md:prose-lg lg: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-2xl md:prose-img:rounded-3xl prose-img:shadow-2xl
|
|
prose-ul:list-disc prose-ul:pl-5 md:prose-ul:pl-6
|
|
prose-li:text-text-secondary
|
|
">
|
|
<MDXRemote source={pageData.content} />
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|