feat: unified container widths and added magnetic mouse pull to corporate background arcs

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

@@ -131,7 +131,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
             <Badge variant="accent" className="mb-4 md:mb-6">
               {t('badge')}
             </Badge>
-            <Heading level={1} className="text-white mb-0">
+            <Heading level={1} variant="white" className="mb-0">
               {pageData.frontmatter.title}
             </Heading>
           </div>
@@ -139,7 +139,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
       </section>
 
       {/* Main Content Area */}
-      <div className="container mx-auto px-4 py-16 md:py-24">
+      <Container className="py-16 md:py-24">
         <div className="max-w-4xl mx-auto">
           {/* Excerpt/Lead paragraph if available */}
           {pageData.frontmatter.excerpt && (
@@ -180,7 +180,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
             </div>
           </div>
         </div>
-      </div>
+      </Container>
     </div>
   );
 }