feat: create reusable PageHero and SectionHeader components

- Create PageHero component for consistent page intro sections
  - Supports icon, title, description with configurable max width
  - Uses BlurReveal for consistent animation across all hero sections
  - Replaces repetitive motion.div patterns across pages

- Create SectionHeader component for consistent section titles
  - Supports title, description with configurable sizes and alignment
  - Uses BlurReveal + SectionTitle for consistent styling
  - Replaces repetitive section header patterns

- Update all pages to use new components:
  - Brand page: PageHero with Award icon
  - Product page: PageHero with Code icon
  - UX-patterns page: PageHero + SectionHeader for all sections
  - Visual-patterns page: PageHero + SectionHeader for all sections
  - Workflow-rituals page: PageHero + SectionHeader for all sections

- Benefits:
  - Consistent BlurReveal animation across all headers
  - Reduced code duplication and improved maintainability
  - Unified styling and animation timing
  - Easy to update header styles globally
  - Type-safe component interfaces

- Clean up unused imports and optimize bundle size

Author: mmaxence

src/app/brand/page.tsx

@@ -5,9 +5,9 @@ import Footer from '@/components/layout/Footer';
 import SectionNavigation from '@/components/ui/SectionNavigation';
 import SectionPlaceholder from '@/components/ui/SectionPlaceholder';
 import { AnimatedSection } from '@/components/ui/AnimatedSection';
+import { PageHero } from '@/components/ui/PageHero';
 import { Award, FileText, Download } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
-import { motion } from 'framer-motion';
 
 export default function BrandPage() {
   const { t } = useLanguage();
@@ -25,36 +25,12 @@ export default function BrandPage() {
       <SectionNavigation sections={sections} />
 
       {/* Intro Screen */}
-      <section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div className="max-w-4xl mx-auto text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: 'easeOut' }}
-            className="mb-8"
-          >
-            <Award className="w-16 h-16 text-white mx-auto mb-6" />
-          </motion.div>
-          
-          <motion.h1
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
-            className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
-          >
-            {t('nav.brand')}
-          </motion.h1>
-          
-          <motion.p
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
-            className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
-          >
-            {t('brand.intro.catchphrase')}
-          </motion.p>
-        </div>
-      </section>
+      <PageHero
+        icon={Award}
+        title={t('nav.brand')}
+        description={t('brand.intro.catchphrase')}
+        maxWidth="4xl"
+      />
 
       <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
         <AnimatedSection delay={0.1}>

src/app/product/UX-patterns/page.tsx

@@ -7,9 +7,8 @@ import { useRouter } from 'next/navigation';
 import Header from '@/components/layout/Header';
 import Footer from '@/components/layout/Footer';
 import SectionNavigation from '@/components/ui/SectionNavigation';
-import { SectionTitle } from '@/components/ui/SectionTitle';
-import { BlurReveal } from '@/components/ui/BlurReveal';
-import { AnimatedSection } from '@/components/ui/AnimatedSection';
+import { PageHero } from '@/components/ui/PageHero';
+import { SectionHeader } from '@/components/ui/SectionHeader';
 import PatternAccordion from '@/components/ui/PatternAccordion';
 import { interactionPatterns } from '@/data/interactionPatterns';
 
@@ -45,52 +44,20 @@ const UXPatternsPage = () => {
       </div>
 
       {/* Intro Screen */}
-      <section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: 'easeOut' }}
-            className="mb-8"
-          >
-            <MousePointer className="w-16 h-16 text-white mx-auto mb-6" />
-          </motion.div>
-          
-          <motion.h1
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
-            className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
-          >
-            UX Patterns
-          </motion.h1>
-          
-          <motion.p
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
-            className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
-          >
-            {t('product.guidelines.uxPatterns.description')}
-          </motion.p>
-        </div>
-      </section>
+      <PageHero
+        icon={MousePointer}
+        title="UX Patterns"
+        description={t('product.guidelines.uxPatterns.description')}
+        maxWidth="7xl"
+      />
 
       <div id="interaction-patterns" className="scroll-mt-24">
         <section className="py-20 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
-            <AnimatedSection className="text-center mb-16" delay={0.1}>
-              <BlurReveal>
-                <SectionTitle>
-                  <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-                    Interaction Patterns
-                  </h2>
-                  <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                    {t('product.guidelines.uxPatterns.description')}
-                  </p>
-                </SectionTitle>
-              </BlurReveal>
-            </AnimatedSection>
+            <SectionHeader
+              title="Interaction Patterns"
+              description={t('product.guidelines.uxPatterns.description')}
+            />
 
             {/* Best Practices & Dark Patterns */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
@@ -149,18 +116,10 @@ const UXPatternsPage = () => {
       <div id="ui-kit" className="scroll-mt-24">
         <section className="py-20 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
-            <AnimatedSection className="text-center mb-16" delay={0.1}>
-              <BlurReveal>
-                <SectionTitle>
-                  <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-                    UI Kit
-                  </h2>
-                  <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                    From atoms to modules to views - our comprehensive design system components.
-                  </p>
-                </SectionTitle>
-              </BlurReveal>
-            </AnimatedSection>
+            <SectionHeader
+              title="UI Kit"
+              description="From atoms to modules to views - our comprehensive design system components."
+            />
 
             {/* UI Kit Structure */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -192,18 +151,10 @@ const UXPatternsPage = () => {
       <div id="micro-interactions" className="scroll-mt-24">
         <section className="py-20 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
-            <AnimatedSection className="text-center mb-16" delay={0.1}>
-              <BlurReveal>
-                <SectionTitle>
-                  <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-                    Micro-interactions
-                  </h2>
-                  <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                    Delightful details that bring our interfaces to life.
-                  </p>
-                </SectionTitle>
-              </BlurReveal>
-            </AnimatedSection>
+            <SectionHeader
+              title="Micro-interactions"
+              description="Delightful details that bring our interfaces to life."
+            />
 
             {/* Micro-interactions Examples */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

src/app/product/page.tsx

@@ -7,9 +7,9 @@ import ProductPrinciples from '@/components/product/ProductPrinciples';
 import ProductGuidelines from '@/components/product/ProductGuidelines';
 import SectionPlaceholder from '@/components/ui/SectionPlaceholder';
 import { AnimatedSection } from '@/components/ui/AnimatedSection';
+import { PageHero } from '@/components/ui/PageHero';
 import { Download, Code } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
-import { motion } from 'framer-motion';
 
 export default function ProductPage() {
   const { t } = useLanguage();
@@ -27,36 +27,12 @@ export default function ProductPage() {
       <SectionNavigation sections={sections} />
 
       {/* Intro Screen */}
-      <section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: 'easeOut' }}
-            className="mb-8"
-          >
-            <Code className="w-16 h-16 text-white mx-auto mb-6" />
-          </motion.div>
-          
-          <motion.h1
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
-            className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
-          >
-            {t('nav.product')}
-          </motion.h1>
-          
-          <motion.p
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
-            className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
-          >
-            {t('product.intro.catchphrase')}
-          </motion.p>
-        </div>
-      </section>
+      <PageHero
+        icon={Code}
+        title={t('nav.product')}
+        description={t('product.intro.catchphrase')}
+        maxWidth="7xl"
+      />
 
       <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
         <AnimatedSection delay={0.1}>

src/app/product/visual-patterns/page.tsx

@@ -7,9 +7,8 @@ import { useRouter } from 'next/navigation';
 import Header from '@/components/layout/Header';
 import Footer from '@/components/layout/Footer';
 import SectionNavigation from '@/components/ui/SectionNavigation';
-import { SectionTitle } from '@/components/ui/SectionTitle';
-import { BlurReveal } from '@/components/ui/BlurReveal';
-import { AnimatedSection } from '@/components/ui/AnimatedSection';
+import { PageHero } from '@/components/ui/PageHero';
+import { SectionHeader } from '@/components/ui/SectionHeader';
 
 const VisualPatternsPage = () => {
   const { t } = useLanguage();
@@ -49,58 +48,20 @@ const VisualPatternsPage = () => {
       </div>
 
       {/* Intro Screen */}
-      <section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, ease: 'easeOut' }}
-            className="mb-8"
-          >
-            <Eye className="w-16 h-16 text-white mx-auto mb-6" />
-          </motion.div>
-          
-          <motion.h1
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
-            className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
-          >
-            Visual Patterns
-          </motion.h1>
-          
-          <motion.p
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
-            className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
-          >
-            {t('product.guidelines.visualPatterns.description')}
-          </motion.p>
-        </div>
-      </section>
+      <PageHero
+        icon={Eye}
+        title="Visual Patterns"
+        description={t('product.guidelines.visualPatterns.description')}
+        maxWidth="7xl"
+      />
 
       <div id="principles" className="scroll-mt-24">
         <section className="py-20 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              viewport={{ once: true }}
-              className="text-center mb-16"
-            >
-              <BlurReveal>
-                <SectionTitle>
-                  <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-                    Design Principles
-                  </h2>
-                  <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                    {t('product.guidelines.visualPatterns.subtitle')}
-                  </p>
-                </SectionTitle>
-              </BlurReveal>
-            </motion.div>
+            <SectionHeader
+              title="Design Principles"
+              description={t('product.guidelines.visualPatterns.subtitle')}
+            />
 
             {/* Principles Grid */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -131,26 +92,10 @@ const VisualPatternsPage = () => {
       <div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
         <section className="py-20 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto text-center">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              viewport={{ once: true }}
-              className="mb-8"
-            >
-              <Eye className="w-16 h-16 text-white mx-auto mb-6" />
-            </motion.div>
-            
-            <BlurReveal>
-              <SectionTitle>
-                <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
-                  Visual Guidelines
-                </h2>
-                <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-                  Comprehensive visual standards and brand integration guidelines.
-                </p>
-              </SectionTitle>
-            </BlurReveal>
+            <SectionHeader
+              title="Visual Guidelines"
+              description="Comprehensive visual standards and brand integration guidelines."
+            />
           </div>
         </section>
       </div>