style: finalize industrial design system and fix typography conflicts

- Refactor app/[locale]/[slug]/page.tsx to handle fullBleed layouts cleanly
- Fix heading styling on 'About Us' and other MDX pages
- Implement staggered Framer Motion animations across all core blocks
- Resolve InteractiveGermanyMap reference error
- Standardize typography tokens for prose and custom headings
- Consolidate support CTA placement

components/blocks/HeroSection.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
-import Reveal from '@/components/Reveal';
+import { motion } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 
@@ -14,63 +16,97 @@ export interface HeroSectionProps {
   ctaHref?: string;
 }
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } 
+  },
+};
+
 export const HeroSection: React.FC<HeroSectionProps> = (props) => {
   const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
   const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;
 
   return (
-    <Reveal>
-      <section
-        className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
-      >
-        {bgSrc && (
-          <div className="absolute inset-0 z-0">
-            <Image
-              src={bgSrc}
-              alt={title || 'Hero Background'}
-              fill
-              className="object-cover opacity-30 md:opacity-40"
-              style={{
-                objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
-              }}
-              sizes="100vw"
-              priority
-            />
-            <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
-          </div>
-        )}
-        <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-          <div className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
-            {badge && (
+    <section
+      className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+    >
+      {bgSrc && (
+        <motion.div 
+          className="absolute inset-0 z-0"
+          initial={{ scale: 1.05, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+        >
+          <Image
+            src={bgSrc}
+            alt={title || 'Hero Background'}
+            fill
+            className="object-cover opacity-30 md:opacity-40"
+            style={{
+              objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
+            }}
+            sizes="100vw"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
+        </motion.div>
+      )}
+      <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
+        <motion.div 
+          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {badge && (
+            <motion.div variants={itemVariants}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
-            )}
+            </motion.div>
+          )}
+          <motion.div variants={itemVariants}>
             <Heading level={1} className="text-white mb-4 md:mb-8">
               {title}
             </Heading>
-            {subtitle && (
+          </motion.div>
+          {subtitle && (
+            <motion.div variants={itemVariants}>
               <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">
                 {subtitle}
               </p>
-            )}
-            {ctaLabel && ctaHref && (
-              <div className="mt-8">
-                <Button
-                  href={ctaHref}
-                  variant="accent"
-                  size="lg"
-                >
-                  {ctaLabel}
-                  <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
-                    &rarr;
-                  </span>
-                </Button>
-              </div>
-            )}
-          </div>
-        </Container>
-      </section>
-    </Reveal>
+            </motion.div>
+          )}
+          {ctaLabel && ctaHref && (
+            <motion.div variants={itemVariants} className="mt-8">
+              <Button
+                href={ctaHref}
+                variant="accent"
+                size="lg"
+              >
+                {ctaLabel}
+                <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
+                  &rarr;
+                </span>
+              </Button>
+            </motion.div>
+          )}
+        </motion.div>
+      </Container>
+    </section>
   );
 };