feat: add intro screens to Brand and Product pages

- Add animated intro screens with Menu icon and catchphrases
- Brand: 'Shaping how Buzzvil looks, feels, and behaves across every touchpoint.'
- Product: 'Designing delightful experiences that users love to engage with.'
- Include motion animations with staggered entrance effects
- Add comprehensive English and Korean translations
- Maintain existing section structure (Principles, Guidelines, Resources)
- Consistent styling with homepage intro patterns

Author: mmaxence

src/app/design/brand/page.tsx

@@ -4,8 +4,9 @@ import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import SectionNavigation from '@/components/SectionNavigation';
 import SectionPlaceholder from '@/components/SectionPlaceholder';
-import { Award, FileText, Download } from 'lucide-react';
+import { Award, FileText, Download, Menu } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { motion } from 'framer-motion';
 
 export default function BrandPage() {
   const { t } = useLanguage();
@@ -22,6 +23,38 @@ 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"
+          >
+            <Menu 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>
+      
       <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
         <SectionPlaceholder
           title={t('brand.principles.title')}

src/app/design/product/page.tsx

@@ -5,8 +5,9 @@ import Footer from '@/components/Footer';
 import SectionNavigation from '@/components/SectionNavigation';
 import ProductPrinciples from '@/components/ProductPrinciples';
 import SectionPlaceholder from '@/components/SectionPlaceholder';
-import { FileText, Download } from 'lucide-react';
+import { FileText, Download, Menu } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
+import { motion } from 'framer-motion';
 
 export default function ProductPage() {
   const { t } = useLanguage();
@@ -22,6 +23,39 @@ export default function ProductPage() {
       <Header />
 
       <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"
+          >
+            <Menu 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>
+      
       <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
         <ProductPrinciples />
       </div>

src/contexts/LanguageContext.tsx

@@ -142,6 +142,7 @@ const translations = {
             'brand.sections.principles': 'Principles',
             'brand.sections.guidelines': 'Guidelines',
             'brand.sections.resources': 'Resources',
+            'brand.intro.catchphrase': 'Shaping how Buzzvil looks, feels, and behaves across every touchpoint.',
             'brand.principles.title': 'Brand Principles',
             'brand.principles.description': 'Our core brand principles that guide every decision, interaction, and experience we create. These fundamental values ensure consistency and authenticity across all touchpoints.',
             'brand.guidelines.title': 'Brand Guidelines',
@@ -153,6 +154,7 @@ const translations = {
             'product.sections.principles': 'Principles',
             'product.sections.guidelines': 'Guidelines',
             'product.sections.resources': 'Resources',
+            'product.intro.catchphrase': 'Designing delightful experiences that users love to engage with.',
             'product.guidelines.title': 'Product Guidelines',
             'product.guidelines.description': 'Comprehensive guidelines for designing consistent product experiences. From user interface patterns to interaction design, accessibility standards, and development workflows.',
             'product.resources.title': 'Product Resources',
@@ -307,6 +309,7 @@ const translations = {
             'brand.sections.principles': '원칙',
             'brand.sections.guidelines': '가이드라인',
             'brand.sections.resources': '리소스',
+            'brand.intro.catchphrase': '모든 접점에서 버즈빌이 어떻게 보이고, 느껴지고, 행동하는지를 형성합니다.',
             'brand.principles.title': '브랜드 원칙',
             'brand.principles.description': '모든 결정, 상호작용, 우리가 만드는 경험을 이끄는 핵심 브랜드 원칙들. 이러한 근본적인 가치들은 모든 접점에서 일관성과 진정성을 보장합니다.',
             'brand.guidelines.title': '브랜드 가이드라인',
@@ -318,6 +321,7 @@ const translations = {
             'product.sections.principles': '원칙',
             'product.sections.guidelines': '가이드라인',
             'product.sections.resources': '리소스',
+            'product.intro.catchphrase': '사용자가 참여하고 싶어하는 즐거운 경험을 디자인합니다.',
             'product.guidelines.title': '제품 가이드라인',
             'product.guidelines.description': '일관된 제품 경험을 디자인하기 위한 포괄적인 가이드라인. 사용자 인터페이스 패턴부터 상호작용 디자인, 접근성 표준, 개발 워크플로우까지.',
             'product.resources.title': '제품 리소스',