feat: restore multi-sections structure with updated content

- Restore separate sections: Working Principles, Our Team, Our Stack
- Update 'Working Principles' with new subheader: 'How we work together to design at Buzzvil'
- Restore 'Our Team' section as it was with full functionality
- Update 'Our Stack' section with new subheader: 'The tools that power our design work'
- Remove 'Design & Development Tools' header from tools grid
- Increase font size for Mission/Vision/Philosophy subheaders (text-sm → text-base)
- Update navigation labels: 'Working Principles', 'Our Team', 'Our Stack'
- Add English and Korean translations for all updated content
- Remove unused WaysOfWorking component
- Maintain all existing functionality and responsive design

Author: mmaxence

src/app/page.tsx

@@ -5,7 +5,9 @@ import Header from '@/components/layout/Header';
 import Hero from '@/components/sections/Hero';
 import MissionVision from '@/components/sections/MissionVision';
 import { PhilosophyAnimation } from '@/components/sections/PhilosophyAnimation';
-import WaysOfWorking from '@/components/sections/WaysOfWorking';
+import Values from '@/components/sections/Values';
+import Team from '@/components/sections/Team';
+import Tools from '@/components/sections/Tools';
 import Footer from '@/components/layout/Footer';
 import InteractiveMinimap from '@/components/ui/InteractiveMinimap';
 import SectionNavigation from '@/components/ui/SectionNavigation';
@@ -37,7 +39,9 @@ export default function Home() {
   const sections = [
     { id: 'mission-vision', label: 'The Mission' },
     { id: 'philosophy', label: 'Our Mindset' },
-    { id: 'ways-of-working', label: 'Ways of Working' },
+    { id: 'values', label: 'Working Principles' },
+    { id: 'team', label: 'Our Team' },
+    { id: 'tools', label: 'Our Stack' },
   ];
 
   return (
@@ -63,7 +67,7 @@ export default function Home() {
                 <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">
+                <p className="text-base text-muted-foreground/70 font-medium">
                   {t('philosophy.subtitle')}
                 </p>
               </div>
@@ -83,8 +87,20 @@ export default function Home() {
         </ParallaxSection>
 
         <ParallaxSection speed={0.5} offset={150}>
-          <div id="ways-of-working" className="scroll-mt-24">
-            <WaysOfWorking />
+          <div id="values" className="scroll-mt-24">
+            <Values />
+          </div>
+        </ParallaxSection>
+        
+        <ParallaxSection speed={0.6} offset={200}>
+          <div id="team" className="scroll-mt-24">
+            <Team />
+          </div>
+        </ParallaxSection>
+        
+        <ParallaxSection speed={0.7} offset={250}>
+          <div id="tools" className="scroll-mt-24">
+            <Tools />
           </div>
         </ParallaxSection>
 

src/components/sections/MissionVision.tsx

@@ -64,7 +64,7 @@ const MissionVision = () => {
             <h3 className="text-2xl lg:text-3xl font-bold text-white mb-2">
               {t('mission.mission.title')}
             </h3>
-            <p className="text-sm text-muted-foreground/70 mb-6 font-medium">
+            <p className="text-base 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">
@@ -85,7 +85,7 @@ const MissionVision = () => {
             <h3 className="text-2xl lg:text-3xl font-bold text-white mb-2">
               {t('mission.vision.title')}
             </h3>
-            <p className="text-sm text-muted-foreground/70 mb-6 font-medium">
+            <p className="text-base 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">

src/components/sections/Team.tsx

@@ -5,6 +5,8 @@ import { useLanguage } from '@/contexts/LanguageContext';
 import Avatar from '../ui/Avatar';
 import { loadTeamMembers, TeamMember } from '@/utils/teamParser';
 import { useState, useEffect } from 'react';
+import { BlurReveal } from '../ui/BlurReveal';
+import { SectionTitle } from '../ui/SectionTitle';
 
 const Team = () => {
   const { t } = useLanguage();
@@ -45,7 +47,27 @@ const Team = () => {
   };
 
   return (
-    <div>
+    <section id="team" className="py-32 bg-muted/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <SectionTitle className="mb-6">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold">
+              {t('team.title')}
+            </h2>
+          </SectionTitle>
+          <BlurReveal>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {t('team.subtitle')}
+            </p>
+          </BlurReveal>
+        </motion.div>
 
 
         {/* Team Members */}
@@ -130,7 +152,9 @@ const Team = () => {
             </div>
           )}
         </motion.div>
-    </div>
+
+      </div>
+    </section>
   );
 };
 

src/components/sections/Tools.tsx

@@ -4,6 +4,8 @@ import { motion } from 'framer-motion';
 import { ExternalLink, Palette } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import Image from 'next/image';
+import { BlurReveal } from '../ui/BlurReveal';
+import { SectionTitle } from '../ui/SectionTitle';
 
 const Tools = () => {
   const { t } = useLanguage();
@@ -71,7 +73,27 @@ const Tools = () => {
   };
 
   return (
-    <div>
+    <section id="tools" className="py-32">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <SectionTitle className="mb-6">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold">
+              {t('tools.title')}
+            </h2>
+          </SectionTitle>
+          <BlurReveal>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              {t('tools.subtitle')}
+            </p>
+          </BlurReveal>
+        </motion.div>
 
         {/* Tools Grid */}
         <motion.div
@@ -87,13 +109,6 @@ const Tools = () => {
               variants={itemVariants}
               className="space-y-6"
             >
-              {/* Category Header */}
-              <div className="flex items-center space-x-3">
-                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
-                  <category.icon className="w-5 h-5 text-white" />
-                </div>
-                <h3 className="text-2xl font-bold">{category.category}</h3>
-              </div>
 
               {/* Tools Grid */}
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -166,7 +181,8 @@ const Tools = () => {
           ))}
         </motion.div>
 
-    </div>
+      </div>
+    </section>
   );
 };
 

src/components/sections/Values.tsx

@@ -215,7 +215,16 @@ const Values = () => {
   }, [isValuesInView, translatedValues.length]);
 
   return (
-    <div ref={valuesSectionRef}>
+    <section className="py-20 px-4 sm:px-6 lg:px-8" ref={valuesSectionRef}>
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <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('values.title')}
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+            {t('values.subtitle')}
+          </p>
+        </div>
 
         {/* Value Navigation */}
         <div className="flex justify-center mb-12 px-4">
@@ -329,7 +338,8 @@ const Values = () => {
             </div>
           </div>
         </div>
-    </div>
+      </div>
+    </section>
   );
 };
 

src/components/sections/WaysOfWorking.tsx

@@ -96,8 +96,8 @@ const translations = {
     'principles.scalable.characteristics.3': 'Decision Veto Power',
 
     // Values
-            'values.title': 'The way we work',
-    'values.subtitle': 'The core values that drive everything we do at Buzzvil.',
+            'values.title': 'Working Principles',
+    'values.subtitle': 'How we work together to design at Buzzvil.',
             'values.build.title': 'Build in the Open',
             'values.build.shortTitle': 'Build in the Open',
     'values.build.content': 'We start rough, share early, and iterate fast. Every designer has access to AI tools that accelerate exploration. Feedback and quick loops help us refine ideas into solid, production-ready solutions.',
@@ -153,8 +153,8 @@ const translations = {
     'team.subtitle': 'A diverse group of creative minds working together to create exceptional user experiences and drive design excellence.',
 
     // Tools
-    'tools.title': 'Design Tools',
-    'tools.subtitle': 'The tools and platforms we use to create, collaborate, and deliver exceptional design experiences. Stay updated with our tech stack.',
+    'tools.title': 'Our Stack',
+    'tools.subtitle': 'The tools that power our design work.',
     'tools.visit': 'Visit Tool',
     'tools.category.design-development': 'Design & Development Tools',
 
@@ -280,8 +280,8 @@ const translations = {
     'principles.scalable.characteristics.3': '결정 거부 권한',
 
     // Values
-    'values.title': '우리가 일하는 방식',
-    'values.subtitle': '버즈빌에서 우리가 하는 모든 일을 이끄는 핵심 가치들.',
+    'values.title': '작업 원칙',
+    'values.subtitle': '버즈빌에서 디자인하기 위해 함께 작업하는 방식.',
     'values.build.title': '열린 공간에서 구축',
     'values.build.shortTitle': '열린 공간에서 구축',
     'values.build.content': '우리는 거칠게 시작하고, 일찍 공유하며, 빠르게 반복합니다. 모든 디자이너는 탐색을 가속화하는 AI 도구에 접근할 수 있습니다. 피드백과 빠른 루프는 아이디어를 견고하고 프로덕션 준비된 솔루션으로 정제하는 데 도움이 됩니다.',
@@ -337,8 +337,8 @@ const translations = {
     'team.subtitle': '탁월한 사용자 경험을 만들고 디자인 우수성을 추진하기 위해 함께 일하는 다양한 창의적 마음의 그룹.',
 
     // Tools
-    'tools.title': '디자인 도구',
-    'tools.subtitle': '탁월한 디자인 경험을 만들고, 협업하고, 전달하기 위해 사용하는 도구와 플랫폼. 우리의 기술 스택을 최신 상태로 유지하세요.',
+    'tools.title': '우리의 스택',
+    'tools.subtitle': '우리의 디자인 작업을 지원하는 도구들.',
     'tools.visit': '도구 방문',
     'tools.category.design-development': '디자인 & 개발 도구',