From 6ad338e437ea3fe271462b1bc3cd0d8791d40aec Mon Sep 17 00:00:00 2001
From: dean <babydragon9703111@gmail.com>
Date: Wed, 18 Feb 2026 01:00:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(landing-page):=20=E6=96=B0=E5=A2=9E=20i18n?=
 =?UTF-8?q?=20=E5=A4=9A=E8=AA=9E=E7=B3=BB=E3=80=81=E6=B7=BA=E8=89=B2?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A1=8C=E8=A8=AD=E8=A8=88=E3=80=81?=
 =?UTF-8?q?=E5=B8=B8=E8=A6=8B=20QA=20=E5=95=8F=E7=AD=94=E5=8D=80=E3=80=81?=
 =?UTF-8?q?=E6=9C=88=E4=BB=98/=E5=B9=B4=E4=BB=98=E5=88=87=E6=8F=9B?=
 =?UTF-8?q?=E3=80=81=E8=BC=89=E5=85=A5=E6=99=82=E7=9A=84=20loading=20?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E3=80=81Cookie=20=E5=90=8C=E6=84=8F=E5=BD=88?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                      |  20 ++
 src/components/CallToAction.jsx  |  12 +-
 src/components/CookieConsent.jsx |  30 +++
 src/components/FAQ.jsx           |  40 ++++
 src/components/Features.jsx      |  20 +-
 src/components/Footer.jsx        |  22 ++-
 src/components/Hero.jsx          |  25 ++-
 src/components/Loading.jsx       |  15 ++
 src/components/Navbar.jsx        |  29 ++-
 src/components/Pricing.jsx       |  70 ++++++-
 src/components/SocialProof.jsx   |   7 +-
 src/components/UseCases.jsx      |  23 ++-
 src/contexts/I18nContext.jsx     |  34 ++++
 src/contexts/ThemeContext.jsx    |  24 +++
 src/data/locales.js              | 326 +++++++++++++++++++++++++++++++
 src/data/pricing.js              |   3 +
 src/index.css                    | 256 ++++++++++++++++++++++++
 src/main.jsx                     |   8 +-
 18 files changed, 913 insertions(+), 51 deletions(-)
 create mode 100644 src/components/CookieConsent.jsx
 create mode 100644 src/components/FAQ.jsx
 create mode 100644 src/components/Loading.jsx
 create mode 100644 src/contexts/I18nContext.jsx
 create mode 100644 src/contexts/ThemeContext.jsx
 create mode 100644 src/data/locales.js

diff --git a/src/App.jsx b/src/App.jsx
index 3a7c65b..9446977 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,31 @@
+import React, { useState, useEffect } from 'react';
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
 import SocialProof from './components/SocialProof';
 import Features from './components/Features';
 import UseCases from './components/UseCases';
 import Pricing from './components/Pricing';
+import FAQ from './components/FAQ';
 import CallToAction from './components/CallToAction';
 import Footer from './components/Footer';
+import Loading from './components/Loading';
+import CookieConsent from './components/CookieConsent';
 
 function App() {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // Simulate loading delay
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+        }, 1500);
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (isLoading) {
+        return <Loading />;
+    }
+
     return (
         <div className="app">
             <Navbar />
@@ -17,9 +35,11 @@ function App() {
                 <Features />
                 <UseCases />
                 <Pricing />
+                <FAQ />
                 <CallToAction />
             </main>
             <Footer />
+            <CookieConsent />
         </div>
     );
 }
diff --git a/src/components/CallToAction.jsx b/src/components/CallToAction.jsx
index 28d1516..8636fee 100644
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -1,20 +1,24 @@
+import { useI18n } from '../contexts/I18nContext';
+
 function CallToAction() {
+    const { t } = useI18n();
+
     return (
         <section className="cta-banner" id="demo" aria-labelledby="cta-title">
             <div className="cta-banner__bg" aria-hidden="true" />
             <div className="container cta-banner__inner">
                 <h2 id="cta-title" className="cta-banner__title">
-                    準備好提升你的業務效率了嗎？
+                    {t('cta.title')}
                 </h2>
                 <p className="cta-banner__desc">
-                    加入超過 500 家企業的行列，用 SalesPilot 讓你的銷售團隊如虎添翼。14 天免費試用，不需信用卡。
+                    {t('cta.desc')}
                 </p>
                 <div className="cta-banner__actions">
                     <a href="#demo" className="btn btn--white btn--lg">
-                        立即預約 Demo
+                        {t('cta.btn_primary')}
                     </a>
                     <a href="#pricing" className="btn btn--outline-white btn--lg">
-                        查看方案比較
+                        {t('cta.btn_secondary')}
                     </a>
                 </div>
             </div>
diff --git a/src/components/CookieConsent.jsx b/src/components/CookieConsent.jsx
new file mode 100644
index 0000000..7983676
--- /dev/null
+++ b/src/components/CookieConsent.jsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { useI18n } from '../contexts/I18nContext';
+
+const CookieConsent = () => {
+    const { t } = useI18n();
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const consent = localStorage.getItem('cookieConsent');
+        if (!consent) {
+            setIsVisible(true);
+        }
+    }, []);
+
+    const handleAccept = () => {
+        localStorage.setItem('cookieConsent', 'true');
+        setIsVisible(false);
+    };
+
+    if (!isVisible) return null;
+
+    return (
+        <div className="cookie-consent">
+            <p>{t('cookie.message')}</p>
+            <button onClick={handleAccept}>{t('cookie.accept')}</button>
+        </div>
+    );
+};
+
+export default CookieConsent;
diff --git a/src/components/FAQ.jsx b/src/components/FAQ.jsx
new file mode 100644
index 0000000..7b96c0e
--- /dev/null
+++ b/src/components/FAQ.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { useI18n } from '../contexts/I18nContext';
+
+const FAQItem = ({ question, answer }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className={`faq-item ${isOpen ? 'open' : ''}`} onClick={() => setIsOpen(!isOpen)}>
+            <div className="faq-question">
+                {question}
+                <span className="faq-toggle">{isOpen ? '-' : '+'}</span>
+            </div>
+            {isOpen && <div className="faq-answer">{answer}</div>}
+        </div>
+    );
+};
+
+const FAQ = () => {
+    const { t } = useI18n();
+    const questions = [
+        { q: t('faq.q1'), a: t('faq.a1') },
+        { q: t('faq.q2'), a: t('faq.a2') },
+        { q: t('faq.q3'), a: t('faq.a3') },
+    ];
+
+    return (
+        <section className="faq-section">
+            <div className="container">
+                <h2>{t('faq.title')}</h2>
+                <div className="faq-list">
+                    {questions.map((item, index) => (
+                        <FAQItem key={index} question={item.q} answer={item.a} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FAQ;
diff --git a/src/components/Features.jsx b/src/components/Features.jsx
index 0247fda..f922157 100644
--- a/src/components/Features.jsx
+++ b/src/components/Features.jsx
@@ -1,21 +1,31 @@
 import { FEATURES } from '../data/features';
+import { useI18n } from '../contexts/I18nContext';
 
 function Features() {
+    const { t } = useI18n();
+    const featuresList = t('features.list');
+
+    // Merge static icons with localized text
+    const features = Array.isArray(featuresList) ? featuresList.map((f, i) => ({
+        ...f,
+        icon: FEATURES[i]?.icon // Fallback to icon from data if order matches
+    })) : [];
+
     return (
         <section className="features" id="features" aria-labelledby="features-title">
             <div className="container">
                 <div className="section-header">
-                    <span className="section-header__badge">核心功能</span>
+                    <span className="section-header__badge">{t('nav.features')}</span>
                     <h2 id="features-title" className="section-header__title">
-                        一個平台，解決所有銷售挑戰
+                        {t('features.title')}
                     </h2>
                     <p className="section-header__desc">
-                        從管線管理到數據分析，SalesPilot 涵蓋業務團隊日常所需的每一項功能。
+                        {t('features.desc')}
                     </p>
                 </div>
 
                 <div className="features__grid" role="list">
-                    {FEATURES.map((feature) => (
+                    {features.map((feature) => (
                         <article
                             key={feature.id}
                             className="features__card"
@@ -25,7 +35,7 @@ function Features() {
                                 {feature.icon}
                             </div>
                             <h3 className="features__title">{feature.title}</h3>
-                            <p className="features__desc">{feature.description}</p>
+                            <p className="features__desc">{feature.desc}</p>
                         </article>
                     ))}
                 </div>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 06c741f..87056b6 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,4 +1,5 @@
 import { FOOTER_DATA } from '../data/footer';
+import { useI18n } from '../contexts/I18nContext';
 
 const SOCIAL_ICONS = {
     fb: (
@@ -24,7 +25,10 @@ const SOCIAL_ICONS = {
 };
 
 function Footer() {
-    const { brand, columns, social, copyright } = FOOTER_DATA;
+    const { t } = useI18n();
+    const { brand, social } = FOOTER_DATA;
+    const footerData = t('footer');
+    const columns = footerData.cols || [];
 
     return (
         <footer className="footer" role="contentinfo">
@@ -35,7 +39,7 @@ function Footer() {
                             <span className="footer__logo-icon" aria-hidden="true">◆</span>
                             {brand.name}
                         </a>
-                        <p className="footer__brand-desc">{brand.description}</p>
+                        <p className="footer__brand-desc">{footerData.brandDesc}</p>
                         <div className="footer__social" role="list" aria-label="社群媒體連結">
                             {social.map((s) => (
                                 <a
@@ -52,14 +56,14 @@ function Footer() {
                     </div>
 
                     <div className="footer__columns">
-                        {columns.map((col) => (
-                            <div key={col.title} className="footer__column">
+                        {columns.map((col, i) => (
+                            <div key={i} className="footer__column">
                                 <h3 className="footer__column-title">{col.title}</h3>
                                 <ul className="footer__column-list">
-                                    {col.links.map((link) => (
-                                        <li key={link.label}>
-                                            <a href={link.href} className="footer__column-link">
-                                                {link.label}
+                                    {col.links.map((link, j) => (
+                                        <li key={j}>
+                                            <a href="#" className="footer__column-link">
+                                                {link}
                                             </a>
                                         </li>
                                     ))}
@@ -70,7 +74,7 @@ function Footer() {
                 </div>
 
                 <div className="footer__bottom">
-                    <p className="footer__copyright">{copyright}</p>
+                    <p className="footer__copyright">{footerData.copyright}</p>
                 </div>
             </div>
         </footer>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index d90731a..a452051 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,7 +1,12 @@
 import { HERO_CONTENT } from '../data/hero';
+import { useI18n } from '../contexts/I18nContext';
 
 function Hero() {
-    const { title, subtitle, stats, primaryCta, secondaryCta } = HERO_CONTENT;
+    const { t, locale } = useI18n();
+    const { primaryCta, secondaryCta } = HERO_CONTENT; // Keep hrefs from data file if needed, or move them too.
+
+    // Get structured data from locales
+    const stats = t('hero.stats');
 
     return (
         <section className="hero" aria-labelledby="hero-title">
@@ -13,26 +18,26 @@ function Hero() {
             <div className="hero__inner container">
                 <div className="hero__content">
                     <h1 id="hero-title" className="hero__title">
-                        {title.split('\n').map((line, i) => (
+                        {t('hero.title').split('\n').map((line, i) => (
                             <span key={i}>
                                 {line}
                                 {i === 0 && <br />}
                             </span>
                         ))}
                     </h1>
-                    <p className="hero__subtitle">{subtitle}</p>
+                    <p className="hero__subtitle">{t('hero.subtitle')}</p>
 
                     <div className="hero__actions">
                         <a href={primaryCta.href} className="btn btn--primary btn--lg">
-                            {primaryCta.label}
+                            {t('hero.cta')}
                         </a>
                         <a href={secondaryCta.href} className="btn btn--outline btn--lg">
-                            {secondaryCta.label}
+                            {t('hero.secondaryCta')}
                         </a>
                     </div>
 
                     <div className="hero__stats" role="list" aria-label="關鍵成效數據">
-                        {stats.map((stat) => (
+                        {Array.isArray(stats) && stats.map((stat) => (
                             <div key={stat.label} className="hero__stat" role="listitem">
                                 <span className="hero__stat-value">{stat.value}</span>
                                 <span className="hero__stat-label">{stat.label}</span>
@@ -58,22 +63,22 @@ function Hero() {
                             <div className="hero__mockup-content">
                                 <div className="hero__mockup-pipeline">
                                     <div className="hero__mockup-col">
-                                        <div className="hero__mockup-col-header">初步接觸</div>
+                                        <div className="hero__mockup-col-header">{t('hero.mockup.col1')}</div>
                                         <div className="hero__mockup-card hero__mockup-card--blue" />
                                         <div className="hero__mockup-card hero__mockup-card--blue" />
                                     </div>
                                     <div className="hero__mockup-col">
-                                        <div className="hero__mockup-col-header">需求確認</div>
+                                        <div className="hero__mockup-col-header">{t('hero.mockup.col2')}</div>
                                         <div className="hero__mockup-card hero__mockup-card--purple" />
                                     </div>
                                     <div className="hero__mockup-col">
-                                        <div className="hero__mockup-col-header">報價中</div>
+                                        <div className="hero__mockup-col-header">{t('hero.mockup.col3')}</div>
                                         <div className="hero__mockup-card hero__mockup-card--amber" />
                                         <div className="hero__mockup-card hero__mockup-card--amber" />
                                         <div className="hero__mockup-card hero__mockup-card--amber" />
                                     </div>
                                     <div className="hero__mockup-col">
-                                        <div className="hero__mockup-col-header">成交 🎉</div>
+                                        <div className="hero__mockup-col-header">{t('hero.mockup.col4')}</div>
                                         <div className="hero__mockup-card hero__mockup-card--green" />
                                     </div>
                                 </div>
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
new file mode 100644
index 0000000..3ac0101
--- /dev/null
+++ b/src/components/Loading.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useI18n } from '../contexts/I18nContext';
+
+const Loading = () => {
+    const { t } = useI18n();
+
+    return (
+        <div className="loading-container">
+            <div className="spinner"></div>
+            <p>{t('loading.text')}</p>
+        </div>
+    );
+};
+
+export default Loading;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 5e205a8..5e1ef87 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,8 +1,21 @@
 import { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { useI18n } from '../contexts/I18nContext';
 import { NAV_LINKS, BRAND } from '../data/navigation';
 
 function Navbar() {
     const [menuOpen, setMenuOpen] = useState(false);
+    const { theme, toggleTheme } = useTheme();
+    const { locale, toggleLocale, t } = useI18n();
+
+    // Map href to translation key suffix
+    const getLabel = (href) => {
+        if (href.includes('features')) return t('nav.features');
+        if (href.includes('pricing')) return t('nav.pricing');
+        if (href.includes('use-cases')) return t('nav.useCases');
+        if (href.includes('social-proof')) return t('nav.socialProof');
+        return '';
+    };
 
     return (
         <header className="navbar" role="banner">
@@ -34,14 +47,22 @@ function Navbar() {
                         {NAV_LINKS.map((link) => (
                             <li key={link.href} className="navbar__item">
                                 <a href={link.href} className="navbar__link" onClick={() => setMenuOpen(false)}>
-                                    {link.label}
+                                    {getLabel(link.href)}
                                 </a>
                             </li>
                         ))}
                     </ul>
-                    <a href="#demo" className="btn btn--primary btn--sm navbar__cta">
-                        預約 Demo
-                    </a>
+                    <div className="navbar__actions">
+                        <button className="btn-icon" onClick={toggleTheme} aria-label="Toggle Theme">
+                            {theme === 'light' ? '🌙' : '☀️'}
+                        </button>
+                        <button className="btn-icon" onClick={toggleLocale} aria-label="Toggle Language">
+                            {locale === 'zh' ? 'EN' : '中'}
+                        </button>
+                        <a href="#demo" className="btn btn--primary btn--sm navbar__cta">
+                            {t('nav.getStarted')}
+                        </a>
+                    </div>
                 </nav>
             </div>
         </header>
diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx
index c4ae2f9..77c5596 100644
--- a/src/components/Pricing.jsx
+++ b/src/components/Pricing.jsx
@@ -1,21 +1,71 @@
+import { useState } from 'react';
 import { PRICING_PLANS } from '../data/pricing';
+import { useI18n } from '../contexts/I18nContext';
 
 function Pricing() {
+    const { t } = useI18n();
+    const [billingCycle, setBillingCycle] = useState('monthly'); // 'monthly' | 'yearly'
+    const plansData = t('pricing.plans');
+
+    // Merge static data (IDs, price values for calc) with localized data
+    const plans = Array.isArray(plansData) ? plansData.map((p, i) => ({
+        ...p,
+        id: PRICING_PLANS[i]?.id,
+        priceValue: PRICING_PLANS[i]?.priceValue,
+        featured: PRICING_PLANS[i]?.featured,
+        ctaHref: PRICING_PLANS[i]?.cta.href
+    })) : [];
+
+    const calculatePrice = (plan) => {
+        if (plan.priceValue === null) return plan.price; // "Contact Us" or localized string from plan object? 
+        // plan.price from locales.js might be "Contact Us". 
+        // But for numeric plans, we need to format.
+        // Let's rely on priceValue.
+
+        let price = plan.priceValue;
+        if (billingCycle === 'yearly') {
+            price = Math.round(price * 0.8 * 12); // 20% off, annual
+            return `NT$ ${price.toLocaleString()}`;
+        }
+        return `NT$ ${price.toLocaleString()}`;
+    };
+
+    const getPeriod = (plan) => {
+        if (plan.priceValue === null) return '';
+        return billingCycle === 'yearly' ? t('pricing.per_year') : t('pricing.per_month');
+    };
+
     return (
         <section className="pricing" id="pricing" aria-labelledby="pricing-title">
             <div className="container">
                 <div className="section-header">
-                    <span className="section-header__badge">方案價格</span>
+                    <span className="section-header__badge">{t('nav.pricing')}</span>
                     <h2 id="pricing-title" className="section-header__title">
-                        簡單透明的定價，無隱藏費用
+                        {t('pricing.title')}
                     </h2>
                     <p className="section-header__desc">
-                        所有方案均含 14 天免費試用，不需信用卡。
+                        {t('faq.a1')}
                     </p>
                 </div>
 
+                <div className="pricing__toggle-container">
+                    <span className={`pricing__toggle-label ${billingCycle === 'monthly' ? 'active' : ''}`}>
+                        {t('pricing.monthly')}
+                    </span>
+                    <button
+                        className={`pricing__toggle-btn ${billingCycle === 'yearly' ? 'active' : ''}`}
+                        onClick={() => setBillingCycle(billingCycle === 'monthly' ? 'yearly' : 'monthly')}
+                        aria-label="Toggle billing cycle"
+                    >
+                        <div className="pricing__toggle-thumb" />
+                    </button>
+                    <span className={`pricing__toggle-label ${billingCycle === 'yearly' ? 'active' : ''}`}>
+                        {t('pricing.yearly')} <span className="highlight">({t('pricing.save')})</span>
+                    </span>
+                </div>
+
                 <div className="pricing__grid" role="list">
-                    {PRICING_PLANS.map((plan) => (
+                    {plans.map((plan) => (
                         <article
                             key={plan.id}
                             className={`pricing__card ${plan.featured ? 'pricing__card--featured' : ''}`}
@@ -25,19 +75,19 @@ function Pricing() {
                                 <span className="pricing__badge">{plan.badge}</span>
                             )}
                             <h3 className="pricing__plan-name">{plan.name}</h3>
-                            <p className="pricing__plan-desc">{plan.description}</p>
+                            <p className="pricing__plan-desc">{plan.desc}</p>
                             <div className="pricing__price">
-                                <span className="pricing__amount">{plan.price}</span>
-                                {plan.period && <span className="pricing__period">{plan.period}</span>}
+                                <span className="pricing__amount">{calculatePrice(plan)}</span>
+                                {plan.priceValue !== null && <span className="pricing__period">{getPeriod(plan)}</span>}
                             </div>
                             <a
-                                href={plan.cta.href}
+                                href={plan.ctaHref}
                                 className={`btn btn--lg btn--full ${plan.featured ? 'btn--primary' : 'btn--outline'}`}
                             >
-                                {plan.cta.label}
+                                {plan.cta}
                             </a>
                             <ul className="pricing__features" role="list">
-                                {plan.features.map((f) => (
+                                {plan.features && plan.features.map((f) => (
                                     <li key={f} className="pricing__feature" role="listitem">
                                         <span className="pricing__check" aria-hidden="true">✓</span>
                                         {f}
diff --git a/src/components/SocialProof.jsx b/src/components/SocialProof.jsx
index ed319b6..658c093 100644
--- a/src/components/SocialProof.jsx
+++ b/src/components/SocialProof.jsx
@@ -1,13 +1,16 @@
 import { SOCIAL_PROOF } from '../data/socialProof';
+import { useI18n } from '../contexts/I18nContext';
 
 function SocialProof() {
-    const { heading, logos, testimonial } = SOCIAL_PROOF;
+    const { t } = useI18n();
+    const { logos } = SOCIAL_PROOF; // Keep logos from data file
+    const testimonial = t('socialProof.testimonial');
 
     return (
         <section className="social-proof" id="social-proof" aria-labelledby="social-proof-title">
             <div className="container">
                 <p id="social-proof-title" className="social-proof__heading">
-                    {heading}
+                    {t('socialProof.heading')}
                 </p>
 
                 <div className="social-proof__logos" role="list" aria-label="客戶企業列表">
diff --git a/src/components/UseCases.jsx b/src/components/UseCases.jsx
index 4a0c7db..a80a8dd 100644
--- a/src/components/UseCases.jsx
+++ b/src/components/UseCases.jsx
@@ -1,20 +1,31 @@
 import { USE_CASES } from '../data/useCases';
+import { useI18n } from '../contexts/I18nContext';
 
 function UseCases() {
+    const { t } = useI18n();
+    const useCasesList = t('useCases.list');
+
+    // Merge static icons/ids with localized text
+    const useCases = Array.isArray(useCasesList) ? useCasesList.map((uc, i) => ({
+        ...uc,
+        id: USE_CASES[i]?.id,
+        icon: USE_CASES[i]?.icon
+    })) : [];
+
     return (
         <section className="use-cases" id="use-cases" aria-labelledby="use-cases-title">
             <div className="container">
                 <div className="section-header">
-                    <span className="section-header__badge">應用場景</span>
+                    <span className="section-header__badge">{t('nav.useCases')}</span>
                     <h2 id="use-cases-title" className="section-header__title">
-                        無論你的角色，SalesPilot 都能助你一臂之力
+                        {t('useCases.title')}
                     </h2>
                 </div>
 
                 <div className="use-cases__list">
-                    {USE_CASES.map((uc, index) => (
+                    {useCases.map((uc, index) => (
                         <article
-                            key={uc.id}
+                            key={uc.id || index}
                             className={`use-cases__item ${index % 2 === 1 ? 'use-cases__item--reverse' : ''}`}
                         >
                             <div className="use-cases__content">
@@ -22,9 +33,9 @@ function UseCases() {
                                     <span aria-hidden="true">{uc.icon}</span> {uc.role}
                                 </div>
                                 <h3 className="use-cases__title">{uc.title}</h3>
-                                <p className="use-cases__desc">{uc.description}</p>
+                                <p className="use-cases__desc">{uc.desc}</p>
                                 <ul className="use-cases__highlights" role="list">
-                                    {uc.highlights.map((h) => (
+                                    {uc.highlights && uc.highlights.map((h) => (
                                         <li key={h} className="use-cases__highlight" role="listitem">
                                             <span className="use-cases__check" aria-hidden="true">✓</span>
                                             {h}
diff --git a/src/contexts/I18nContext.jsx b/src/contexts/I18nContext.jsx
new file mode 100644
index 0000000..0d72b6e
--- /dev/null
+++ b/src/contexts/I18nContext.jsx
@@ -0,0 +1,34 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import { locales } from '../data/locales';
+
+const I18nContext = createContext();
+
+export const I18nProvider = ({ children }) => {
+    const [locale, setLocale] = useState(localStorage.getItem('locale') || 'zh');
+
+    useEffect(() => {
+        localStorage.setItem('locale', locale);
+    }, [locale]);
+
+    const t = (key) => {
+        const keys = key.split('.');
+        let value = locales[locale];
+        for (const k of keys) {
+            value = value?.[k];
+            if (!value) return key;
+        }
+        return value;
+    };
+
+    const toggleLocale = () => {
+        setLocale((prev) => (prev === 'zh' ? 'en' : 'zh'));
+    };
+
+    return (
+        <I18nContext.Provider value={{ locale, setLocale, toggleLocale, t }}>
+            {children}
+        </I18nContext.Provider>
+    );
+};
+
+export const useI18n = () => useContext(I18nContext);
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..b287a97
--- /dev/null
+++ b/src/contexts/ThemeContext.jsx
@@ -0,0 +1,24 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
+
+    useEffect(() => {
+        localStorage.setItem('theme', theme);
+        document.documentElement.setAttribute('data-theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/src/data/locales.js b/src/data/locales.js
new file mode 100644
index 0000000..69be918
--- /dev/null
+++ b/src/data/locales.js
@@ -0,0 +1,326 @@
+export const locales = {
+    en: {
+        nav: {
+            features: 'Features',
+            pricing: 'Pricing',
+            useCases: 'Use Cases',
+            socialProof: 'Testimonials',
+            login: 'Login',
+            getStarted: 'Get Started',
+        },
+        hero: {
+            title: 'Boost Your Sales Performance\nMake Every Deal Clear',
+            subtitle: 'Integrate customer tracking, smart alerts, and automated workflows to help your sales team focus on closing, not chores.',
+            cta: 'Start Free Trial',
+            secondaryCta: 'View Pricing',
+            stats: [
+                { value: '37%', label: 'Increase in closing rate' },
+                { value: '2.4x', label: 'Sales efficiency boost' },
+                { value: '60%', label: 'Reduction in missed follow-ups' },
+            ],
+            mockup: {
+                col1: 'Initial Contact',
+                col2: 'Needs Analysis',
+                col3: 'Quoting',
+                col4: 'Closed Won 🎉',
+            }
+        },
+        features: {
+            title: 'One Platform, All Sales Challenges Solved',
+            desc: 'From pipeline management to data analytics, SalesPilot covers every function your sales team needs daily.',
+            list: [
+                { id: 'pipeline', title: 'Visual Pipeline', desc: 'Manage every deal progress with drag-and-drop. Clear visibility from contact to close.' },
+                { id: 'automation', title: 'Smart Automation', desc: 'Auto-assignment, follow-up reminders, and stage movement notifications.' },
+                { id: 'analytics', title: 'Real-time Analytics', desc: 'Data-driven decisions from conversion rates to revenue forecasts.' },
+                { id: 'contacts', title: '360° Customer View', desc: 'Centralized interaction history, call notes, and emails.' },
+                { id: 'integrations', title: 'Seamless Integration', desc: 'Deep integration with Gmail, Outlook, LINE, Slack, and Google Calendar.' },
+                { id: 'mobile', title: 'Mobile Sync', desc: 'Update visit records, GPS check-ins, and photo uploads on the go.' },
+            ]
+        },
+        socialProof: {
+            heading: 'Trusted by over 500 companies',
+            testimonial: {
+                quote: "After implementing SalesPilot, our sales team never misses a follow-up. Our closing rate increased by 40%.",
+                author: "Lin Zhi-Yuan",
+                role: "VP of Sales",
+                company: "Bostar Tech"
+            }
+        },
+        useCases: {
+            title: 'No Matter Your Role, SalesPilot Helps You Win',
+            list: [
+                {
+                    role: 'Field Sales',
+                    title: 'Never Miss a Lead on the Road',
+                    desc: 'Update visit records via mobile app. Smart routing helps you visit 3 more clients daily.',
+                    highlights: ['Mobile Sync', 'Smart Routing', 'GPS Check-in', 'Offline Mode']
+                },
+                {
+                    role: 'Inside Sales',
+                    title: 'Prepared for Every Call',
+                    desc: 'Incoming calls show history and last quote. Smart dialing and templates double your reach.',
+                    highlights: ['Instant Info', 'Smart Dialing', 'Email Templates', 'Call Recording']
+                },
+                {
+                    role: 'Sales Manager',
+                    title: 'Team Performance at a Glance',
+                    desc: 'Real-time dashboard for pipeline health and revenue forecasts. Make decisions without waiting for monthly reports.',
+                    highlights: ['Performance Dashboard', 'Revenue Forecast', 'Pipeline Health', 'KPI Tracking']
+                }
+            ]
+        },
+        pricing: {
+            title: 'Simple, Transparent Pricing',
+            monthly: 'Monthly',
+            yearly: 'Yearly',
+            save: 'Save 20%',
+            plan_starter: 'Starter',
+            plan_pro: 'Professional',
+            plan_enterprise: 'Enterprise',
+            per_month: '/month',
+            per_year: '/year',
+            select: 'Choose Plan',
+            plans: [
+                {
+                    name: 'Starter',
+                    desc: 'Perfect for small teams just getting started',
+                    cta: 'Start Free Trial',
+                    features: [
+                        'Up to 3 users',
+                        'Basic Pipeline',
+                        'Contact Management (1,000 limit)',
+                        'Email Integration',
+                        'Basic Reporting',
+                        'Community Support'
+                    ]
+                },
+                {
+                    name: 'Pro',
+                    desc: 'Best for growing teams',
+                    badge: 'Most Popular',
+                    cta: 'Start Free Trial',
+                    features: [
+                        'Unlimited users',
+                        'Advanced Pipeline & Automation',
+                        'Unlimited Contact Management',
+                        'Email + LINE + Slack Integration',
+                        'Advanced Reporting & Dashboards',
+                        'Revenue Forecasting',
+                        'API Access',
+                        'Priority Support'
+                    ]
+                },
+                {
+                    name: 'Enterprise',
+                    desc: 'Tailored for large organizations',
+                    price: 'Contact Us',
+                    cta: 'Contact Sales',
+                    features: [
+                        'All Pro features',
+                        'Dedicated Customer Success Manager',
+                        'Custom Integration Development',
+                        'SSO / SAML Authentication',
+                        '99.9% Uptime SLA',
+                        'Advanced Security & Audit Logs',
+                        'On-site Training',
+                        'Custom Contracts'
+                    ]
+                }
+            ]
+        },
+        cta: {
+            title: 'Ready to Boost Your Sales Efficiency?',
+            desc: 'Join over 500 companies using SalesPilot to supercharge their sales teams. 14-day free trial, no credit card required.',
+            btn_primary: 'Schedule Demo',
+            btn_secondary: 'View Pricing',
+        },
+        faq: {
+            title: 'Frequently Asked Questions',
+            q1: 'Is there a free trial?',
+            a1: 'Yes, we offer a 14-day free trial for all plans.',
+            q2: 'Can I change plans anytime?',
+            a2: 'Absolutely, you can upgrade or downgrade whenever you like.',
+            q3: 'Do you offer support?',
+            a3: 'Yes, 24/7 support is included in all paid plans.',
+        },
+        footer: {
+            brandDesc: 'Your sales growth engine. Master your pipeline, boost closing rates.',
+            copyright: `© ${new Date().getFullYear()} SalesPilot. All rights reserved.`,
+            cols: [
+                { title: 'Product', links: ['Features', 'Pricing', 'Changelog', 'API Docs', 'System Status'] },
+                { title: 'Resources', links: ['Tutorials', 'Blog', 'Case Studies', 'Webinars', 'Help Center'] },
+                { title: 'Company', links: ['About Us', 'Join Us', 'Contact', 'Partners', 'Newsroom'] },
+                { title: 'Legal', links: ['Privacy Policy', 'Terms of Service', 'DPA', 'Cookie Policy'] },
+            ]
+        },
+        cookie: {
+            message: 'We use cookies to improve your experience.',
+            accept: 'Accept',
+        },
+        loading: {
+            text: 'Loading...',
+        },
+    },
+    zh: {
+        nav: {
+            features: '功能特色',
+            pricing: '價格方案',
+            useCases: '應用場景',
+            socialProof: '客戶見證',
+            login: '登入',
+            getStarted: '免費開始',
+        },
+        hero: {
+            title: '讓每一條銷售線\n都清晰可見',
+            subtitle: '整合客戶追蹤、智慧提醒與自動化流程，幫助你的業務團隊專注在成交，而非瑣事。',
+            cta: '免費開始',
+            secondaryCta: '查看方案',
+            stats: [
+                { value: '37%', label: '平均成交率提升' },
+                { value: '2.4x', label: '業務效率倍增' },
+                { value: '60%', label: '跟進遺漏減少' },
+            ],
+            mockup: {
+                col1: '初步接觸',
+                col2: '需求確認',
+                col3: '報價中',
+                col4: '成交 🎉',
+            }
+        },
+        features: {
+            title: '一個平台，解決所有銷售挑戰',
+            desc: '從管線管理到數據分析，SalesPilot 涵蓋業務團隊日常所需的每一項功能。',
+            list: [
+                { id: 'pipeline', title: '視覺化銷售管線', desc: '用拖拉的方式管理每一筆交易進度，從初次接觸到成交一目瞭然。' },
+                { id: 'automation', title: '智慧自動化流程', desc: '自動指派、跟進提醒、階段推進通知，把重複性工作交給系統。' },
+                { id: 'analytics', title: '即時數據分析', desc: '從轉換率、平均成交天數到營收預測，用數據驅動決策。' },
+                { id: 'contacts', title: '360° 客戶檢視', desc: '集中管理客戶互動紀錄、通話備註、郵件往來，讓每一次接觸都有脈絡。' },
+                { id: 'integrations', title: '無縫整合生態系', desc: '與 Gmail、Outlook、LINE、Slack、Google Calendar 深度整合。' },
+                { id: 'mobile', title: '行動端即時同步', desc: '外勤拜訪也能即時更新進度、拍照上傳。離線模式下仍可操作。' },
+            ]
+        },
+        socialProof: {
+            heading: '超過 500 家企業信賴 SalesPilot',
+            testimonial: {
+                quote: "導入 SalesPilot 後，我們的業務團隊不再遺漏任何跟進時機，成交率整整提升了 40%。",
+                author: "林志遠",
+                role: "業務副總",
+                company: "博星科技"
+            }
+        },
+        useCases: {
+            title: '無論你的角色，SalesPilot 都能助你一臂之力',
+            list: [
+                {
+                    role: '外勤業務',
+                    title: '在路上也不錯過任何商機',
+                    desc: '透過行動 App 即時更新拜訪紀錄。系統自動計算最佳拜訪路線，讓你每天多跑 3 家客戶。',
+                    highlights: ['行動 App 即時同步', '智慧路線規劃', 'GPS 拜訪打卡', '離線模式支援']
+                },
+                {
+                    role: 'Inside Sales',
+                    title: '每通電話都有備而來',
+                    desc: '來電自動帶出客戶歷史互動、上次報價。搭配智慧撥號與郵件模板，讓你的觸及效率翻倍。',
+                    highlights: ['來電客戶資訊速查', '智慧撥號排程', '郵件模板自動化', '通話錄音與備註']
+                },
+                {
+                    role: 'Sales Manager',
+                    title: '團隊戰力一眼掌握',
+                    desc: '即時儀表板呈現團隊管線健康度、個人績效排名。不用等月會報告，隨時做出精準決策。',
+                    highlights: ['團隊績效儀表板', '營收預測模型', '管線健康度分析', '自訂 KPI 追蹤']
+                }
+            ]
+        },
+        pricing: {
+            title: '簡單透明的價格',
+            monthly: '月付',
+            yearly: '年付',
+            save: '省 20%',
+            plan_starter: '入門版',
+            plan_pro: '專業版',
+            plan_enterprise: '企業版',
+            per_month: '/月',
+            per_year: '/年',
+            select: '選擇方案',
+            plans: [
+                {
+                    name: 'Starter',
+                    desc: '適合剛起步的小型團隊',
+                    cta: '免費試用 14 天',
+                    features: [
+                        '最多 3 位使用者',
+                        '基礎銷售管線',
+                        '聯絡人管理（上限 1,000 筆）',
+                        'Email 整合',
+                        '基礎報表',
+                        '社群支援',
+                    ]
+                },
+                {
+                    name: 'Pro',
+                    desc: '成長中團隊的首選方案',
+                    badge: '最受歡迎',
+                    cta: '免費試用 14 天',
+                    features: [
+                        '無限使用者',
+                        '進階銷售管線 & 自動化',
+                        '聯絡人管理（無上限）',
+                        'Email + LINE + Slack 整合',
+                        '進階報表 & 儀表板',
+                        '營收預測',
+                        'API 存取',
+                        '優先客服支援',
+                    ]
+                },
+                {
+                    name: 'Enterprise',
+                    desc: '為大型組織量身打造',
+                    price: '聯繫我們',
+                    cta: '聯繫業務團隊',
+                    features: [
+                        '所有 Pro 功能',
+                        '專屬客戶成功經理',
+                        '自訂整合開發',
+                        'SSO / SAML 身份驗證',
+                        'SLA 保證 99.9% 可用性',
+                        '進階資安與稽核日誌',
+                        '到府教育訓練',
+                        '合約客製化',
+                    ]
+                }
+            ]
+        },
+        cta: {
+            title: '準備好提升你的業務效率了嗎？',
+            desc: '加入超過 500 家企業的行列，用 SalesPilot 讓你的銷售團隊如虎添翼。14 天免費試用，不需信用卡。',
+            btn_primary: '立即預約 Demo',
+            btn_secondary: '查看方案比較',
+        },
+        faq: {
+            title: '常見問題',
+            q1: '有免費試用嗎？',
+            a1: '是的，我們所有方案都提供 14 天免費試用。',
+            q2: '隨時可以更換方案嗎？',
+            a2: '沒問題，您可以隨時升級或降級您的方案。',
+            q3: '有提供客服支援嗎？',
+            a3: '是的，所有付費方案都包含 24/7 全天候支援。',
+        },
+        footer: {
+            brandDesc: '你的業務成長引擎。助你掌控銷售管線，提升成交率。',
+            copyright: `© ${new Date().getFullYear()} SalesPilot. All rights reserved.`,
+            cols: [
+                { title: '產品', links: ['功能總覽', '方案價格', '產品更新日誌', 'API 文件', '系統狀態'] },
+                { title: '資源', links: ['使用教學', '部落格', '客戶案例', '網路研討會', '幫助中心'] },
+                { title: '公司', links: ['關於我們', '加入團隊', '聯絡我們', '合作夥伴', '新聞室'] },
+                { title: '法務', links: ['隱私權政策', '服務條款', '資料處理協議', 'Cookie 政策'] },
+            ]
+        },
+        cookie: {
+            message: '我們使用 Cookie 來改善您的體驗。',
+            accept: '接受',
+        },
+        loading: {
+            text: '載入中...',
+        },
+    },
+};
diff --git a/src/data/pricing.js b/src/data/pricing.js
index f9113fa..b0aab1d 100644
--- a/src/data/pricing.js
+++ b/src/data/pricing.js
@@ -4,6 +4,7 @@ export const PRICING_PLANS = [
         name: 'Starter',
         description: '適合剛起步的小型團隊',
         price: 'NT$ 490',
+        priceValue: 490,
         period: '/ 人 / 月',
         featured: false,
         cta: { label: '免費試用 14 天', href: '#demo' },
@@ -21,6 +22,7 @@ export const PRICING_PLANS = [
         name: 'Pro',
         description: '成長中團隊的首選方案',
         price: 'NT$ 990',
+        priceValue: 990,
         period: '/ 人 / 月',
         featured: true,
         badge: '最受歡迎',
@@ -41,6 +43,7 @@ export const PRICING_PLANS = [
         name: 'Enterprise',
         description: '為大型組織量身打造',
         price: '聯繫我們',
+        priceValue: null,
         period: '',
         featured: false,
         cta: { label: '聯繫業務團隊', href: '#demo' },
diff --git a/src/index.css b/src/index.css
index 507bc0c..3b93387 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1243,3 +1243,259 @@ button {
     grid-template-columns: 1fr;
   }
 }
+
+/* ========================================
+   THEMING & NEW FEATURES
+   ======================================== */
+
+/* Dark Mode (Default) / Light Mode Overrides */
+[data-theme='light'] {
+  --color-bg: #f8fafc;
+  --color-bg-elevated: #ffffff;
+  --color-bg-card: #ffffff;
+  --color-bg-card-hover: #f1f5f9;
+  --color-surface: #e2e8f0;
+
+  --color-text: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #64748b;
+  --color-text-inverse: #f1f5f9;
+
+  --color-border: #e2e8f0;
+  --color-border-hover: #cbd5e1;
+  
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+/* Navbar Actions */
+.navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.btn-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-lg);
+  transition: background var(--transition-fast);
+}
+
+.btn-icon:hover {
+  background: var(--color-surface);
+}
+
+/* Pricing Toggle */
+.pricing__toggle-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  margin-bottom: var(--space-10);
+}
+
+.pricing__toggle-label {
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  transition: color var(--transition-base);
+}
+
+.pricing__toggle-label.active {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.pricing__toggle-label .highlight {
+  color: var(--color-primary);
+  font-size: var(--text-sm);
+  margin-left: var(--space-1);
+}
+
+.pricing__toggle-btn {
+  width: 52px;
+  height: 28px;
+  background: var(--color-surface);
+  border-radius: var(--radius-full);
+  padding: 2px;
+  position: relative;
+  transition: background var(--transition-base);
+}
+
+.pricing__toggle-btn.active {
+  background: var(--color-primary);
+}
+
+.pricing__toggle-thumb {
+  width: 24px;
+  height: 24px;
+  background: white;
+  border-radius: 50%;
+  transition: transform var(--transition-base);
+  box-shadow: var(--shadow-sm);
+}
+
+.pricing__toggle-btn.active .pricing__toggle-thumb {
+  transform: translateX(24px);
+}
+
+/* FAQ Section */
+.faq-section {
+  padding: var(--space-24) 0;
+  background: var(--color-bg);
+}
+
+.faq-list {
+  max-width: 800px;
+  margin: var(--space-12) auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.faq-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-card);
+  overflow: hidden;
+  transition: all var(--transition-base);
+}
+
+.faq-item:hover {
+  border-color: var(--color-border-hover);
+}
+
+.faq-question {
+  padding: var(--space-5) var(--space-6);
+  font-size: var(--text-lg);
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.faq-toggle {
+  font-size: var(--text-xl);
+  color: var(--color-primary);
+  font-weight: 400;
+}
+
+.faq-answer {
+  padding: 0 var(--space-6) var(--space-6);
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  border-top: 1px solid transparent;
+}
+
+.faq-item.open .faq-answer {
+  border-top-color: var(--color-border);
+  padding-top: var(--space-4);
+}
+
+/* Loading */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: var(--space-4);
+  background: var(--color-bg);
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--color-surface);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Cookie Consent */
+.cookie-consent {
+  position: fixed;
+  bottom: var(--space-6);
+  left: var(--space-6);
+  right: var(--space-6);
+  max-width: 400px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  padding: var(--space-6);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.cookie-consent p {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+
+.cookie-consent button {
+  background: var(--color-primary);
+  color: white;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  align-self: flex-end;
+  transition: background var(--transition-fast);
+}
+
+.cookie-consent button:hover {
+  background: var(--color-primary-dark);
+}
+
+/* Navbar Fix for Mobile */
+@media (max-width: 768px) {
+  .cookie-consent {
+    left: var(--space-4);
+    right: var(--space-4);
+    bottom: var(--space-4);
+  }
+}
+
+/* ========================================
+   Navbar Light Mode Fixes
+   ======================================== */
+[data-theme='light'] .navbar {
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme='light'] .navbar__logo {
+  color: var(--color-primary);
+}
+
+[data-theme='light'] .navbar__link {
+  color: var(--color-text-secondary);
+}
+
+[data-theme='light'] .navbar__link:hover {
+  color: var(--color-primary);
+}
diff --git a/src/main.jsx b/src/main.jsx
index 644bee6..268be3b 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,9 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { I18nProvider } from './contexts/I18nContext';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
-        <App />
+        <ThemeProvider>
+            <I18nProvider>
+                <App />
+            </I18nProvider>
+        </ThemeProvider>
     </React.StrictMode>,
 );