fixes

app/[locale]/[slug]/page.tsx

@@ -1,8 +1,10 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { Section, Container, Heading, Badge } from '@/components/ui';
+import { Container, Badge } from '@/components/ui';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
+import { getPageBySlug } from '@/lib/pages';
+import { mdxComponents } from '@/components/blog/MDXComponents';
 
 interface PageProps {
   params: {
@@ -12,7 +14,6 @@ interface PageProps {
 }
 
 export async function generateMetadata({ params: { locale, slug } }: PageProps): Promise<Metadata> {
-  const { getPageBySlug } = await import('@/lib/pages');
   const pageData = await getPageBySlug(slug, locale);
   
   if (!pageData) return {};
@@ -42,7 +43,6 @@ export async function generateMetadata({ params: { locale, slug } }: PageProps):
 }
 
 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');
 
@@ -51,7 +51,7 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-light">
+    <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
       <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
         <div className="absolute inset-0 opacity-20">
@@ -60,67 +60,44 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
         <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-5xl lg:text-6xl text-white mb-0">
-              <span className="text-white">{pageData.frontmatter.title}</span>
-            </Heading>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-0 leading-tight">
+              {pageData.frontmatter.title}
+            </h1>
           </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">&rarr;</span>
-                  </a>
-                </div>
-              </div>
+      {/* Main Content Area */}
+      <div className="container mx-auto px-4 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          {/* Excerpt/Lead paragraph if available */}
+          {pageData.frontmatter.excerpt && (
+            <div className="mb-16 animate-slight-fade-in-from-bottom">
+              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
+                {pageData.frontmatter.excerpt}
+              </p>
             </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>
+          {/* Main content with shared blog components */}
+          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom">
+            <MDXRemote source={pageData.content} components={mdxComponents} />
+          </div>
+
+          {/* Support Section */}
+          <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
+            <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+            <div className="relative z-10 max-w-2xl">
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
+              <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
+              <a href={`/${locale}/contact`} className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link">
+                {t('contactUs')} 
+                <span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
+              </a>
             </div>
           </div>
-        </Container>
-      </Section>
+        </div>
+      </div>
     </div>
   );
 }