fix: standardize ProductPrinciples header styling

- Import motion, BlurReveal, and SectionTitle components
- Replace custom header with consistent SectionTitle component
- Add motion animations for header, navigation, and content sections
- Match styling with other sections (MissionVision, etc.)
- Ensure consistent visual hierarchy across all sections
- Maintain existing functionality while improving visual consistency

Author: mmaxence

src/components/ProductPrinciples.tsx

@@ -2,10 +2,13 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { Clock, Sparkles, TrendingUp } from 'lucide-react';
+import { motion } from 'framer-motion';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { RewardCounter } from './RewardCounter';
 import { DelightInteraction } from './DelightInteraction';
 import { ScalableGrowth } from './ScalableGrowth';
+import { BlurReveal } from './BlurReveal';
+import { SectionTitle } from './SectionTitle';
 
 const BUZZVIL_PRINCIPLES = [
   {
@@ -135,20 +138,48 @@ const ProductPrinciples = () => {
     }
   }, [selectedPrinciple]);
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0 },
+  };
+
   return (
-    <section ref={principlesSectionRef} className="py-20">
-      <div className="max-w-7xl mx-auto px-8">
-        <div className="text-center mb-16">
-          <h2 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('principles.title')}
-          </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-            {t('principles.subtitle')}
-          </p>
-        </div>
+    <section ref={principlesSectionRef} className="py-20 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          className="text-center mb-16"
+        >
+          <BlurReveal>
+            <SectionTitle>
+              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+                {t('principles.title')}
+              </h2>
+              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+                {t('principles.subtitle')}
+              </p>
+            </SectionTitle>
+          </BlurReveal>
+        </motion.div>
 
         {/* Principle Navigation */}
-        <div className="flex justify-center mb-12 px-4">
+        <motion.div 
+          variants={itemVariants}
+          className="flex justify-center mb-12 px-4"
+        >
           <div className="overflow-x-auto scrollbar-hide bg-muted/30 p-2 rounded-xl max-w-full">
             <div 
               ref={principlesNavRef}
@@ -171,10 +202,13 @@ const ProductPrinciples = () => {
               ))}
             </div>
           </div>
-        </div>
+        </motion.div>
 
         {/* Principle Content with Enhanced 3D Transitions */}
-        <div className="max-w-4xl mx-auto">
+        <motion.div 
+          variants={itemVariants}
+          className="max-w-4xl mx-auto"
+        >
           <div 
             className="relative overflow-hidden perspective-1000"
             onMouseEnter={() => setIsHovered(true)}
@@ -241,7 +275,7 @@ const ProductPrinciples = () => {
               })}
             </div>
           </div>
-        </div>
+        </motion.div>
       </div>
     </section>
   );