feat: refine Mission, Vision, and Philosophy content with subtitles

- Update Mission content with refined text and add 'what we do now' subtitle
- Update Vision content with refined text and add 'what future we're building' subtitle
- Update Philosophy content with refined text and add 'how we approach it' subtitle
- Add proper line break handling for multi-paragraph content
- Improve content structure and readability with subtle subheaders
- Maintain consistent styling and responsive design

Author: mmaxence

src/app/page.tsx

@@ -64,17 +64,22 @@ export default function Home() {
           <section id="philosophy" className="py-20 scroll-mt-24">
             <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">
+                <h2 className="text-5xl md:text-7xl font-bold mb-2 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
                   {t('philosophy.title')}
                 </h2>
+                <p className="text-sm text-muted-foreground/70 font-medium">
+                  {t('philosophy.subtitle')}
+                </p>
               </div>
 
               <div className="max-w-4xl mx-auto">
                 <div className="text-center p-12 bg-gradient-to-br from-background to-muted/20 rounded-2xl border border-border">
                   <PhilosophyAnimation isActive={true} />
-                  <p className="text-xl text-muted-foreground leading-relaxed">
-                    {t('philosophy.content')}
-                  </p>
+                  <div className="text-xl text-muted-foreground leading-relaxed space-y-4">
+                    {t('philosophy.content').split('\n').map((paragraph, index) => (
+                      <p key={index}>{paragraph}</p>
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>

src/components/sections/MissionVision.tsx

@@ -61,12 +61,17 @@ const MissionVision = () => {
             <div className="flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-6 mx-auto">
               <Target className="w-8 h-8 text-primary" />
             </div>
-            <h3 className="text-2xl lg:text-3xl font-bold text-white mb-6">
+            <h3 className="text-2xl lg:text-3xl font-bold text-white mb-2">
               {t('mission.mission.title')}
             </h3>
-            <p className="text-lg text-muted-foreground leading-relaxed">
-              {t('mission.mission.content')}
+            <p className="text-sm text-muted-foreground/70 mb-6 font-medium">
+              {t('mission.mission.subtitle')}
             </p>
+            <div className="text-lg text-muted-foreground leading-relaxed space-y-4">
+              {t('mission.mission.content').split('\n').map((paragraph, index) => (
+                <p key={index}>{paragraph}</p>
+              ))}
+            </div>
           </motion.div>
 
           {/* Vision */}
@@ -77,12 +82,17 @@ const MissionVision = () => {
             <div className="flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-6 mx-auto">
               <Rocket className="w-8 h-8 text-primary" />
             </div>
-            <h3 className="text-2xl lg:text-3xl font-bold text-white mb-6">
+            <h3 className="text-2xl lg:text-3xl font-bold text-white mb-2">
               {t('mission.vision.title')}
             </h3>
-            <p className="text-lg text-muted-foreground leading-relaxed">
-              {t('mission.vision.content')}
+            <p className="text-sm text-muted-foreground/70 mb-6 font-medium">
+              {t('mission.vision.subtitle')}
             </p>
+            <div className="text-lg text-muted-foreground leading-relaxed space-y-4">
+              {t('mission.vision.content').split('\n').map((paragraph, index) => (
+                <p key={index}>{paragraph}</p>
+              ))}
+            </div>
           </motion.div>
         </motion.div>
       </div>

src/contexts/LanguageContext.tsx

@@ -47,13 +47,16 @@ const translations = {
             'mission.title': 'Mission & Vision',
             'mission.subtitle': 'Our mission and vision guide everything we do at Buzzvil.',
             'mission.mission.title': 'Mission',
-            'mission.mission.content': 'We design meaningful interactions that shape how people discover, experience, and keep engaging with Buzzvil\'s ad campaigns and brand. Our work turns advertising into experiences people want to explore, moments that capture attention, spark curiosity, and drive results for advertisers.',
+            'mission.mission.subtitle': 'what we do now',
+            'mission.mission.content': 'We design meaningful interactions that shape how people discover, experience, and stay connected with Buzzvil\'s campaigns and brand.\nOur goal is to turn advertising into experiences people choose to explore—moments that capture attention, spark curiosity, and drive real results for advertisers.',
             'mission.vision.title': 'Vision',
-            'mission.vision.content': 'We set the next standard for AdTech design by transforming ad campaigns and brand experiences into engaging, repeatable interactions that connect users and advertisers. Through this new way of engagement, Buzzvil leads a future where advertising feels enjoyable, seamlessly integrated into people\'s everyday experiences.',
+            'mission.vision.subtitle': 'what future we\'re building',
+            'mission.vision.content': 'We set the next standard for AdTech design by transforming ads and brand touchpoints into engaging, repeatable experiences that connect users and advertisers.\nWe envision a future where advertising feels natural, enjoyable, and seamlessly part of everyday life.',
 
             // Philosophy
             'philosophy.title': 'Philosophy',
-            'philosophy.content': 'At Buzzvil, Design shapes how people experience advertising, not as interruptions, but as delightful moments of connection. We believe every interaction, from brand touchpoints to in-product experiences, should feel playful, engaging, and effortless. Our role is to unify how Buzzvil looks, feels, and behaves across the ecosystem, turning campaigns and platforms into one coherent, delightful experience. Guided by our principles and a One-Team spirit, we design to inspire trust, drive performance, and set new standards for what AdTech can be.',
+            'philosophy.subtitle': 'how we approach it',
+            'philosophy.content': 'At Buzzvil, design shapes how people experience advertising—not as interruptions, but as moments of connection and delight.\nWe believe every touchpoint, from brand to product, should feel playful, engaging, and effortless.\nOur role is to unify how Buzzvil looks, feels, and behaves across the ecosystem, building trust, driving performance, and inspiring what AdTech can become.',
 
     // Principles
     'principles.title': 'Principles',