refact: update ui

src/components/home/ContactSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Mail, Users, Send } from 'lucide-react';
+import { Mail, Users, Send, ArrowUpRight } from 'lucide-react';
 import { useLanguage } from '../../contexts/LanguageContext';
 
 export default function ContactSection() {
@@ -10,7 +10,6 @@ export default function ContactSection() {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setStatus('sending');
-    // Simulate send — replace with actual API call later
     setTimeout(() => {
       setStatus('sent');
       setTimeout(() => setStatus('idle'), 3000);
@@ -19,75 +18,77 @@ export default function ContactSection() {
   };
 
   return (
-    <section id="contact" className="py-20 bg-gray-50">
-      <div className="max-w-6xl mx-auto px-6">
+    <section id="contact" className="section-padding relative" style={{ backgroundColor: 'var(--color-bg)' }}>
+      <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">{c.title}</h2>
-          <p className="text-gray-600 text-lg">{c.subtitle}</p>
+          <h2 className="font-display text-3xl lg:text-4xl font-bold text-ink mb-4 tracking-tight">{c.title}</h2>
+          <p className="text-ink-secondary text-lg">{c.subtitle}</p>
         </div>
 
-        <div className="grid md:grid-cols-2 gap-12 max-w-4xl mx-auto">
-          {/* Contact info */}
-          <div className="space-y-6">
-            <div className="flex items-start gap-4">
-              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                <Mail size={20} className="text-blue-600" />
+        <div className="grid md:grid-cols-5 gap-10 max-w-4xl mx-auto">
+          {/* Contact info — 2 cols */}
+          <div className="md:col-span-2 space-y-5">
+            <a
+              href="mailto:yogecoder@gmail.com"
+              className="card p-5 flex items-start gap-4 group hover:border-coral-200 block"
+            >
+              <div className="w-10 h-10 bg-coral-50 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                <Mail size={18} className="text-coral-500" />
               </div>
-              <div>
-                <div className="text-sm text-gray-500 mb-1">{t.common.email}</div>
-                <a href="mailto:yogecoder@gmail.com" className="text-gray-900 font-medium hover:text-blue-600 transition-colors">
-                  yogecoder@gmail.com
-                </a>
+              <div className="flex-1 min-w-0">
+                <div className="text-xs text-ink-muted mb-1 font-medium">{t.common.email}</div>
+                <div className="text-sm font-medium text-ink truncate">yogecoder@gmail.com</div>
               </div>
-            </div>
+              <ArrowUpRight size={14} className="text-ink-muted group-hover:text-coral-500 transition-colors mt-1" />
+            </a>
 
-            <div className="flex items-start gap-4">
-              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                <Users size={20} className="text-green-600" />
+            <div className="card p-5 flex items-start gap-4">
+              <div className="w-10 h-10 bg-sage-50 rounded-xl flex items-center justify-center flex-shrink-0">
+                <Users size={18} className="text-sage-600" />
               </div>
               <div>
-                <div className="text-sm text-gray-500 mb-1">{c.qqGroup}</div>
-                <span className="text-gray-900 font-medium">1018282100</span>
+                <div className="text-xs text-ink-muted mb-1 font-medium">{c.qqGroup}</div>
+                <span className="text-sm font-medium text-ink font-mono">1018282100</span>
               </div>
             </div>
           </div>
 
-          {/* Contact form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Contact form — 3 cols */}
+          <form onSubmit={handleSubmit} className="md:col-span-3 space-y-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">{c.nameLabel}</label>
+              <label className="block text-sm font-medium text-ink mb-1.5">{c.nameLabel}</label>
               <input
                 type="text"
                 required
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow text-sm"
+                className="w-full px-4 py-2.5 bg-white border border-cream-300 rounded-xl focus:ring-2 focus:ring-coral-200 focus:border-coral-400 outline-none transition-all text-sm"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">{c.emailLabel}</label>
+              <label className="block text-sm font-medium text-ink mb-1.5">{c.emailLabel}</label>
               <input
                 type="email"
                 required
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow text-sm"
+                className="w-full px-4 py-2.5 bg-white border border-cream-300 rounded-xl focus:ring-2 focus:ring-coral-200 focus:border-coral-400 outline-none transition-all text-sm"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">{c.messageLabel}</label>
+              <label className="block text-sm font-medium text-ink mb-1.5">{c.messageLabel}</label>
               <textarea
                 required
                 rows={4}
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow text-sm resize-none"
+                className="w-full px-4 py-2.5 bg-white border border-cream-300 rounded-xl focus:ring-2 focus:ring-coral-200 focus:border-coral-400 outline-none transition-all text-sm resize-none"
               />
             </div>
             <button
               type="submit"
               disabled={status === 'sending'}
-              className={`w-full py-3 rounded-lg text-sm font-semibold flex items-center justify-center gap-2 transition-colors ${
+              className={`w-full py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition-all duration-200 ${
                 status === 'sent'
-                  ? 'bg-green-600 text-white'
-                  : 'bg-blue-600 hover:bg-blue-700 text-white'
+                  ? 'bg-sage-500 text-white'
+                  : 'btn-primary justify-center'
               } disabled:opacity-60`}
             >
-              <Send size={16} />
+              <Send size={15} />
               {status === 'sending' ? c.sending : status === 'sent' ? c.sent : c.send}
             </button>
           </form>

src/components/home/FeaturesSection.tsx

@@ -2,6 +2,14 @@ import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
 import { useLanguage } from '../../contexts/LanguageContext';
 
 const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
+const accentColors = [
+  { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
+  { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
+  { bg: 'bg-amber-50', icon: 'text-amber-600', border: 'hover:border-amber-200' },
+  { bg: 'bg-violet-50', icon: 'text-violet-500', border: 'hover:border-violet-200' },
+  { bg: 'bg-coral-50', icon: 'text-coral-500', border: 'hover:border-coral-200' },
+  { bg: 'bg-sage-50', icon: 'text-sage-600', border: 'hover:border-sage-200' },
+];
 
 export default function FeaturesSection() {
   const { t } = useLanguage();
@@ -17,23 +25,31 @@ export default function FeaturesSection() {
   ];
 
   return (
-    <section id="features" className="py-20 bg-white">
-      <div className="max-w-6xl mx-auto px-6">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">{f.title}</h2>
-          <p className="text-gray-600 text-lg">{f.subtitle}</p>
+    <section id="features" className="section-padding bg-white relative">
+      {/* Subtle top border accent */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-0.5 bg-gradient-to-r from-transparent via-coral-300 to-transparent" />
+
+      <div className="max-w-6xl mx-auto">
+        <div className="max-w-2xl mb-16">
+          <h2 className="font-display text-3xl lg:text-4xl font-bold text-ink mb-4 tracking-tight">{f.title}</h2>
+          <p className="text-ink-secondary text-lg leading-relaxed">{f.subtitle}</p>
         </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
           {items.map((item, i) => {
             const Icon = iconMap[i];
+            const color = accentColors[i];
             return (
-              <div key={i} className="p-6 rounded-xl border border-gray-100 hover:border-blue-100 hover:shadow-lg transition-all group">
-                <div className="w-12 h-12 bg-blue-50 group-hover:bg-blue-100 rounded-lg flex items-center justify-center mb-4 transition-colors">
-                  <Icon size={24} className="text-blue-600" />
+              <div
+                key={i}
+                className={`card p-6 ${color.border} group`}
+                style={{ opacity: 0, animationDelay: `${i * 80}ms` }}
+              >
+                <div className={`w-11 h-11 ${color.bg} rounded-xl flex items-center justify-center mb-4 transition-transform duration-200 group-hover:scale-110`}>
+                  <Icon size={20} className={color.icon} />
                 </div>
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
-                <p className="text-gray-600 text-sm leading-relaxed">{item.description}</p>
+                <h3 className="font-display text-base font-semibold text-ink mb-2">{item.title}</h3>
+                <p className="text-ink-secondary text-sm leading-relaxed">{item.description}</p>
               </div>
             );
           })}

src/components/home/HeroSection.tsx

@@ -1,71 +1,121 @@
 import { Link } from 'react-router-dom';
-import { ArrowRight, Upload } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import { useLanguage } from '../../contexts/LanguageContext';
 
 export default function HeroSection() {
-  const { t } = useLanguage();
+  const { t, language } = useLanguage();
 
   return (
-    <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-indigo-50 py-20 lg:py-32">
-      <div className="max-w-6xl mx-auto px-6">
-        <div className="grid lg:grid-cols-2 gap-12 items-center">
-          {/* Left: Text */}
-          <div>
-            <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-6">
+    <section className="relative overflow-hidden min-h-[90vh] flex items-center">
+      {/* Warm gradient background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-cream-100 via-cream-50 to-coral-50/30" />
+
+      {/* Decorative elements */}
+      <div className="absolute top-20 right-[15%] w-72 h-72 bg-coral-200/20 rounded-full blur-3xl" />
+      <div className="absolute bottom-20 left-[10%] w-56 h-56 bg-sage-200/20 rounded-full blur-3xl" />
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-radial from-coral-100/10 to-transparent rounded-full" />
+
+      {/* Grid pattern */}
+      <div
+        className="absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage: `linear-gradient(var(--color-ink) 1px, transparent 1px), linear-gradient(90deg, var(--color-ink) 1px, transparent 1px)`,
+          backgroundSize: '60px 60px',
+        }}
+      />
+
+      <div className="relative max-w-6xl mx-auto px-6 py-20 lg:py-28">
+        <div className="grid lg:grid-cols-12 gap-12 lg:gap-8 items-center">
+          {/* Left: Text — takes 7 cols for asymmetry */}
+          <div className="lg:col-span-7 animate-fade-up">
+            {/* Badge */}
+            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/80 backdrop-blur-sm border border-cream-300 rounded-full text-xs font-medium text-ink-secondary mb-8">
+              <span className="w-1.5 h-1.5 rounded-full bg-sage-500 animate-pulse" />
+              {language === 'zh' ? '免费使用 · 无需注册' : 'Free to use · No sign-up required'}
+            </div>
+
+            <h1 className="font-display text-4xl sm:text-5xl lg:text-[3.5rem] font-extrabold text-ink leading-[1.1] mb-6 tracking-tight">
               {t.marketing.hero.title}
             </h1>
-            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
+
+            <p className="text-lg text-ink-secondary leading-relaxed mb-10 max-w-xl">
               {t.marketing.hero.subtitle}
             </p>
+
             <div className="flex flex-wrap gap-4">
               <Link
                 to="/app"
-                className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-blue-600/25"
+                className="btn-primary px-7 py-3.5 text-base"
               >
                 {t.marketing.hero.cta}
                 <ArrowRight size={18} />
               </Link>
               <a
                 href="#features"
-                className="inline-flex items-center gap-2 px-6 py-3 bg-white hover:bg-gray-50 text-gray-700 font-semibold rounded-lg transition-colors border border-gray-200"
+                className="btn-secondary px-7 py-3.5 text-base"
               >
                 {t.marketing.hero.ctaSecondary}
               </a>
             </div>
+
+            {/* Social proof hint */}
+            <div className="mt-10 flex items-center gap-3 text-sm text-ink-muted">
+              <div className="flex -space-x-2">
+                {['bg-coral-300', 'bg-sage-300', 'bg-amber-300', 'bg-violet-300'].map((bg, i) => (
+                  <div key={i} className={`w-7 h-7 rounded-full ${bg} border-2 border-cream-50`} />
+                ))}
+              </div>
+              <span>{language === 'zh' ? '已有 1,000+ 学生在使用' : 'Used by 1,000+ students'}</span>
+            </div>
           </div>
 
-          {/* Right: Demo card */}
-          <div className="relative">
+          {/* Right: Interactive demo card — 5 cols */}
+          <div className="lg:col-span-5 animate-fade-up delay-200" style={{ opacity: 0 }}>
             <Link
               to="/app"
-              className="block bg-white rounded-2xl shadow-2xl border border-gray-200 p-8 hover:shadow-3xl transition-shadow group"
+              className="block group"
             >
-              <div className="border-2 border-dashed border-gray-300 group-hover:border-blue-400 rounded-xl p-10 flex flex-col items-center justify-center transition-colors">
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-200 transition-colors">
-                  <Upload size={28} className="text-blue-600" />
+              <div className="card p-1 hover:border-coral-200">
+                {/* Mock window chrome */}
+                <div className="flex items-center gap-1.5 px-4 py-3 border-b border-cream-300/50">
+                  <div className="w-2.5 h-2.5 rounded-full bg-coral-300" />
+                  <div className="w-2.5 h-2.5 rounded-full bg-amber-300" />
+                  <div className="w-2.5 h-2.5 rounded-full bg-sage-300" />
+                  <span className="ml-3 text-[10px] font-mono text-ink-muted">texpixel.com/app</span>
                 </div>
-                <p className="text-gray-500 text-sm text-center">
-                  {t.sidebar.uploadInstruction}
-                </p>
-              </div>
-              {/* Mock result preview */}
-              <div className="mt-6 bg-gray-50 rounded-lg p-4">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="w-2 h-2 rounded-full bg-green-500" />
-                  <span className="text-xs text-gray-500 font-mono">LaTeX Output</span>
+
+                <div className="p-6">
+                  {/* Upload zone */}
+                  <div className="border-2 border-dashed border-cream-300 group-hover:border-coral-300 rounded-xl p-8 flex flex-col items-center justify-center transition-colors duration-300 bg-cream-50/50">
+                    <div className="w-14 h-14 bg-coral-50 group-hover:bg-coral-100 rounded-2xl flex items-center justify-center mb-3 transition-all duration-300 group-hover:scale-110">
+                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-coral-500">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="17 8 12 3 7 8" />
+                        <line x1="12" y1="3" x2="12" y2="15" />
+                      </svg>
+                    </div>
+                    <p className="text-ink-muted text-xs text-center">
+                      {t.sidebar.uploadInstruction}
+                    </p>
+                  </div>
+
+                  {/* Mock result */}
+                  <div className="mt-4 rounded-lg p-4 bg-ink/[0.03]">
+                    <div className="flex items-center gap-2 mb-3">
+                      <div className="w-1.5 h-1.5 rounded-full bg-sage-500" />
+                      <span className="text-[10px] text-ink-muted font-mono tracking-wider uppercase">LaTeX Output</span>
+                    </div>
+                    <code className="text-sm text-ink font-mono block leading-relaxed">
+                      {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
+                    </code>
+                  </div>
                 </div>
-                <code className="text-sm text-gray-700 font-mono block">
-                  {'\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}'}
-                </code>
               </div>
             </Link>
           </div>
         </div>
       </div>
-
-      {/* Background decoration */}
-      <div className="absolute top-0 right-0 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
-      <div className="absolute bottom-0 left-0 w-72 h-72 bg-indigo-200/20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
     </section>
   );
 }
+

src/components/home/HowItWorksSection.tsx

@@ -2,6 +2,11 @@ import { Upload, Cpu, Download } from 'lucide-react';
 import { useLanguage } from '../../contexts/LanguageContext';
 
 const icons = [Upload, Cpu, Download];
+const stepColors = [
+  { num: 'text-coral-500', ring: 'ring-coral-100', bg: 'bg-coral-50' },
+  { num: 'text-sage-600', ring: 'ring-sage-100', bg: 'bg-sage-50' },
+  { num: 'text-amber-600', ring: 'ring-amber-100', bg: 'bg-amber-50' },
+];
 
 export default function HowItWorksSection() {
   const { t } = useLanguage();
@@ -14,23 +19,33 @@ export default function HowItWorksSection() {
   ];
 
   return (
-    <section className="py-20 bg-gray-50">
-      <div className="max-w-6xl mx-auto px-6">
+    <section className="section-padding relative" style={{ backgroundColor: 'var(--color-bg)' }}>
+      <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">{h.title}</h2>
+          <h2 className="font-display text-3xl lg:text-4xl font-bold text-ink mb-4 tracking-tight">{h.title}</h2>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
+        <div className="grid md:grid-cols-3 gap-8 lg:gap-12 relative">
+          {/* Connecting line (desktop only) */}
+          <div className="hidden md:block absolute top-12 left-[20%] right-[20%] h-px border-t-2 border-dashed border-cream-300" />
+
           {steps.map((step, i) => {
             const Icon = icons[i];
+            const color = stepColors[i];
             return (
-              <div key={i} className="text-center">
-                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-blue-600/25">
-                  <Icon size={28} />
+              <div key={i} className="relative text-center group">
+                {/* Step number badge */}
+                <div className="relative inline-flex flex-col items-center mb-6">
+                  <div className={`w-24 h-24 ${color.bg} rounded-3xl flex items-center justify-center ring-4 ${color.ring} ring-offset-4 ring-offset-[var(--color-bg)] transition-transform duration-300 group-hover:scale-105 relative z-10`}>
+                    <Icon size={32} className={color.num} strokeWidth={1.5} />
+                  </div>
+                  <span className={`absolute -top-3 -right-3 w-8 h-8 rounded-full bg-white shadow-md flex items-center justify-center font-display font-bold text-sm ${color.num} z-20`}>
+                    {String(i + 1).padStart(2, '0')}
+                  </span>
                 </div>
-                <div className="text-sm font-bold text-blue-600 mb-2">0{i + 1}</div>
-                <h3 className="text-xl font-semibold text-gray-900 mb-3">{step.title}</h3>
-                <p className="text-gray-600 text-sm leading-relaxed">{step.description}</p>
+
+                <h3 className="font-display text-xl font-semibold text-ink mb-3">{step.title}</h3>
+                <p className="text-ink-secondary text-sm leading-relaxed max-w-xs mx-auto">{step.description}</p>
               </div>
             );
           })}

src/components/home/PricingSection.tsx

@@ -16,6 +16,7 @@ export default function PricingSection() {
       href: '/app',
       disabled: false,
       popular: false,
+      accent: 'sage',
     },
     {
       name: p.pro,
@@ -26,6 +27,7 @@ export default function PricingSection() {
       href: '#',
       disabled: true,
       popular: true,
+      accent: 'coral',
     },
     {
       name: p.enterprise,
@@ -36,43 +38,44 @@ export default function PricingSection() {
       href: '#contact',
       disabled: false,
       popular: false,
+      accent: 'ink',
     },
   ];
 
   return (
-    <section id="pricing" className="py-20 bg-white">
-      <div className="max-w-6xl mx-auto px-6">
+    <section id="pricing" className="section-padding bg-white">
+      <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">{p.title}</h2>
-          <p className="text-gray-600 text-lg">{p.subtitle}</p>
+          <h2 className="font-display text-3xl lg:text-4xl font-bold text-ink mb-4 tracking-tight">{p.title}</h2>
+          <p className="text-ink-secondary text-lg">{p.subtitle}</p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+        <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
           {plans.map((plan, i) => (
             <div
               key={i}
-              className={`rounded-2xl p-8 flex flex-col ${
+              className={`relative rounded-2xl p-7 flex flex-col transition-all duration-200 ${
                 plan.popular
-                  ? 'border-2 border-blue-600 shadow-xl relative'
-                  : 'border border-gray-200'
+                  ? 'border-2 border-coral-400 shadow-xl shadow-coral-500/10 scale-[1.02]'
+                  : 'card'
               }`}
             >
               {plan.popular && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-coral-500 to-coral-400 text-white text-xs font-display font-semibold px-4 py-1 rounded-full shadow-md">
                   {p.popular}
                 </div>
               )}
 
-              <h3 className="text-xl font-bold text-gray-900 mb-2">{plan.name}</h3>
+              <h3 className="font-display text-lg font-bold text-ink mb-1">{plan.name}</h3>
               <div className="mb-6">
-                <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
-                {plan.period && <span className="text-gray-500 text-sm">{plan.period}</span>}
+                <span className="font-display text-4xl font-extrabold text-ink">{plan.price}</span>
+                {plan.period && <span className="text-ink-muted text-sm ml-1">{plan.period}</span>}
               </div>
 
               <ul className="space-y-3 mb-8 flex-1">
                 {plan.features.map((feature, j) => (
-                  <li key={j} className="flex items-start gap-2 text-sm text-gray-600">
-                    <Check size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
+                  <li key={j} className="flex items-start gap-2.5 text-sm text-ink-secondary">
+                    <Check size={15} className="text-sage-500 mt-0.5 flex-shrink-0" />
                     {feature}
                   </li>
                 ))}
@@ -81,17 +84,17 @@ export default function PricingSection() {
               {plan.disabled ? (
                 <button
                   disabled
-                  className="w-full py-3 rounded-lg text-sm font-semibold bg-gray-100 text-gray-400 cursor-not-allowed"
+                  className="w-full py-3 rounded-xl text-sm font-semibold bg-cream-200 text-ink-muted cursor-not-allowed"
                 >
                   {plan.cta}
                 </button>
               ) : plan.href.startsWith('/') ? (
                 <Link
                   to={plan.href}
-                  className={`w-full py-3 rounded-lg text-sm font-semibold text-center block transition-colors ${
+                  className={`w-full py-3 rounded-xl text-sm font-semibold text-center block transition-all duration-200 ${
                     plan.popular
-                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
-                      : 'bg-gray-900 hover:bg-gray-800 text-white'
+                      ? 'btn-primary justify-center'
+                      : 'bg-ink hover:bg-ink/90 text-white shadow-sm'
                   }`}
                 >
                   {plan.cta}
@@ -99,7 +102,7 @@ export default function PricingSection() {
               ) : (
                 <a
                   href={plan.href}
-                  className="w-full py-3 rounded-lg text-sm font-semibold text-center block bg-gray-900 hover:bg-gray-800 text-white transition-colors"
+                  className="w-full py-3 rounded-xl text-sm font-semibold text-center block bg-ink hover:bg-ink/90 text-white transition-colors shadow-sm"
                 >
                   {plan.cta}
                 </a>

src/components/layout/AppNavbar.tsx

@@ -33,48 +33,49 @@ export default function AppNavbar() {
   }, []);
 
   return (
-    <div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative">
+    <div className="h-14 bg-white border-b border-cream-300 flex items-center justify-between px-5 flex-shrink-0 z-[60] relative">
       {/* Left: Logo + Home link */}
-      <div className="flex items-center gap-4">
-        <Link to="/" className="flex items-center gap-2">
-          <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8" />
-          <span className="text-xl font-bold text-gray-900 tracking-tight">TexPixel</span>
+      <div className="flex items-center gap-3">
+        <Link to="/" className="flex items-center gap-2 group">
+          <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-7 h-7 transition-transform group-hover:scale-110 duration-200" />
+          <span className="text-lg font-display font-bold text-ink tracking-tight">TexPixel</span>
         </Link>
+        <div className="w-px h-5 bg-cream-300" />
         <Link
           to="/"
-          className="flex items-center gap-1 px-2 py-1 text-gray-500 hover:text-gray-700 text-xs transition-colors"
+          className="flex items-center gap-1.5 px-2 py-1 text-ink-muted hover:text-ink-secondary text-xs font-medium transition-colors rounded-md hover:bg-cream-200/60"
         >
-          <Home size={14} />
+          <Home size={13} />
           <span className="hidden sm:inline">{t.marketing.nav.home}</span>
         </Link>
       </div>
 
       {/* Right: Actions */}
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
         {/* Language Switcher */}
         <div className="relative" ref={langMenuRef}>
           <button
             onClick={() => setShowLangMenu(!showLangMenu)}
-            className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 hover:bg-cream-200/60 rounded-lg text-ink-secondary text-sm font-medium transition-colors"
             title="Switch Language"
           >
-            <Languages size={18} />
-            <span className="hidden sm:inline">{language === 'en' ? 'English' : '简体中文'}</span>
-            <ChevronDown size={14} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
+            <Languages size={16} />
+            <span className="hidden sm:inline text-xs">{language === 'en' ? 'EN' : '中文'}</span>
+            <ChevronDown size={12} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
           </button>
 
           {showLangMenu && (
-            <div className="absolute right-0 top-full mt-2 w-32 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+            <div className="absolute right-0 top-full mt-2 w-36 bg-white rounded-xl shadow-lg border border-cream-300 py-1.5 z-50">
               <button
                 onClick={() => { setLanguage('en'); setShowLangMenu(false); }}
-                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'en' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+                className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-cream-100 ${language === 'en' ? 'text-coral-600 font-semibold' : 'text-ink-secondary'}`}
               >
                 English
                 {language === 'en' && <Check size={14} />}
               </button>
               <button
                 onClick={() => { setLanguage('zh'); setShowLangMenu(false); }}
-                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'zh' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+                className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-cream-100 ${language === 'zh' ? 'text-coral-600 font-semibold' : 'text-ink-secondary'}`}
               >
                 简体中文
                 {language === 'zh' && <Check size={14} />}
@@ -86,52 +87,52 @@ export default function AppNavbar() {
         {/* User Guide Button */}
         <button
           id="guide-button"
-          className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+          className="flex items-center gap-1.5 px-2.5 py-1.5 hover:bg-cream-200/60 rounded-lg text-ink-secondary text-sm font-medium transition-colors"
           onClick={() => {
             window.dispatchEvent(new CustomEvent('start-user-guide'));
           }}
         >
-          <HelpCircle size={18} />
-          <span className="hidden sm:inline">{t.common.guide}</span>
+          <HelpCircle size={16} />
+          <span className="hidden sm:inline text-xs">{t.common.guide}</span>
         </button>
 
         {/* Reward Button */}
         <div className="relative">
           <button
             onClick={() => setShowReward(!showReward)}
-            className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-600 hover:to-pink-600 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md"
+            className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-coral-500 to-coral-400 hover:from-coral-600 hover:to-coral-500 rounded-lg text-white text-xs font-semibold transition-all shadow-sm hover:shadow-md"
           >
-            <Heart size={14} className="fill-white" />
+            <Heart size={13} className="fill-white" />
             <span>{t.common.reward}</span>
           </button>
 
           {showReward && (
             <div
-              className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[70] p-4"
+              className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[70] p-4"
               onClick={() => setShowReward(false)}
             >
               <div
-                className="bg-white rounded-xl shadow-xl max-w-sm w-full p-6 animate-in fade-in zoom-in-95 duration-200"
+                className="bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6"
                 onClick={e => e.stopPropagation()}
               >
                 <div className="flex items-center justify-between mb-4">
-                  <span className="text-lg font-bold text-gray-900">{t.navbar.rewardTitle}</span>
+                  <span className="text-lg font-display font-bold text-ink">{t.navbar.rewardTitle}</span>
                   <button
                     onClick={() => setShowReward(false)}
-                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                    className="p-1.5 hover:bg-cream-200 rounded-lg transition-colors"
                   >
-                    <X size={20} className="text-gray-500" />
+                    <X size={18} className="text-ink-muted" />
                   </button>
                 </div>
                 <div className="flex flex-col items-center">
                   <img
                     src="https://cdn.texpixel.com/public/rewardcode.png"
                     alt={t.navbar.rewardTitle}
-                    className="w-64 h-64 object-contain rounded-lg shadow-sm"
+                    className="w-60 h-60 object-contain rounded-xl"
                   />
-                  <p className="text-sm text-gray-500 text-center mt-4">
+                  <p className="text-sm text-ink-secondary text-center mt-4">
                     {t.navbar.rewardThanks}<br />
-                    <span className="text-xs text-gray-400 mt-1 block">{t.navbar.rewardSubtitle}</span>
+                    <span className="text-xs text-ink-muted mt-1 block">{t.navbar.rewardSubtitle}</span>
                   </p>
                 </div>
               </div>
@@ -143,46 +144,46 @@ export default function AppNavbar() {
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setShowContact(!showContact)}
-            className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+            className="flex items-center gap-1.5 px-3 py-1.5 bg-cream-200 hover:bg-cream-300 rounded-lg text-ink-secondary text-xs font-semibold transition-colors"
           >
-            <MessageCircle size={14} />
+            <MessageCircle size={13} />
             <span>{t.common.contactUs}</span>
             <ChevronDown
-              size={14}
+              size={12}
               className={`transition-transform duration-200 ${showContact ? 'rotate-180' : ''}`}
             />
           </button>
 
           {showContact && (
-            <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+            <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-xl shadow-lg border border-cream-300 py-2 z-50">
               <a
                 href="mailto:yogecoder@gmail.com"
-                className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
+                className="flex items-center gap-3 px-4 py-3 hover:bg-cream-100 transition-colors"
               >
-                <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                  <Mail size={16} className="text-blue-600" />
+                <div className="w-8 h-8 bg-coral-50 rounded-lg flex items-center justify-center">
+                  <Mail size={15} className="text-coral-600" />
                 </div>
                 <div>
-                  <div className="text-xs text-gray-500">{t.common.email}</div>
-                  <div className="text-sm font-medium text-gray-900">yogecoder@gmail.com</div>
+                  <div className="text-xs text-ink-muted">{t.common.email}</div>
+                  <div className="text-sm font-medium text-ink">yogecoder@gmail.com</div>
                 </div>
               </a>
               <div
-                className={`flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-all cursor-pointer ${copied ? 'bg-green-50' : ''}`}
+                className={`flex items-center gap-3 px-4 py-3 hover:bg-cream-100 transition-all cursor-pointer ${copied ? 'bg-sage-50' : ''}`}
                 onClick={handleCopyQQ}
               >
-                <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${copied ? 'bg-green-500' : 'bg-green-100'}`}>
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${copied ? 'bg-sage-500' : 'bg-sage-50'}`}>
                   {copied ? (
-                    <Check size={16} className="text-white" />
+                    <Check size={15} className="text-white" />
                   ) : (
-                    <Users size={16} className="text-green-600" />
+                    <Users size={15} className="text-sage-600" />
                   )}
                 </div>
                 <div>
-                  <div className={`text-xs transition-colors ${copied ? 'text-green-600 font-medium' : 'text-gray-500'}`}>
+                  <div className={`text-xs transition-colors ${copied ? 'text-sage-600 font-medium' : 'text-ink-muted'}`}>
                     {copied ? t.common.copied : t.common.qqGroup}
                   </div>
-                  <div className="text-sm font-medium text-gray-900">1018282100</div>
+                  <div className="text-sm font-medium text-ink">1018282100</div>
                 </div>
               </div>
             </div>

src/components/layout/Footer.tsx

@@ -5,42 +5,76 @@ export default function Footer() {
   const { t } = useLanguage();
 
   return (
-    <footer className="bg-gray-900 text-gray-400 py-12 px-6">
-      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <div className="flex items-center gap-2 mb-4">
-            <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-6 h-6" />
-            <span className="text-white font-bold">TexPixel</span>
-          </div>
-          <p className="text-sm">{t.marketing.footer.tagline}</p>
-        </div>
+    <footer className="relative bg-ink text-cream-300 overflow-hidden">
+      {/* Decorative top edge */}
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-coral-500/40 to-transparent" />
 
-        <div>
-          <h4 className="text-white font-semibold mb-3 text-sm">{t.marketing.footer.product}</h4>
-          <div className="flex flex-col gap-2 text-sm">
-            <Link to="/app" className="hover:text-white transition-colors">{t.marketing.nav.launchApp}</Link>
-            <a href="/#pricing" className="hover:text-white transition-colors">{t.marketing.nav.pricing}</a>
+      <div className="max-w-6xl mx-auto px-6 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
+          {/* Brand column */}
+          <div className="md:col-span-4">
+            <div className="flex items-center gap-2.5 mb-4">
+              <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-7 h-7" />
+              <span className="text-white font-display font-bold text-lg">TexPixel</span>
+            </div>
+            <p className="text-sm text-cream-300/70 leading-relaxed max-w-xs">
+              {t.marketing.footer.tagline}
+            </p>
+          </div>
+
+          {/* Product */}
+          <div className="md:col-span-2 md:col-start-6">
+            <h4 className="text-white font-display font-semibold text-sm mb-4 tracking-wide uppercase">
+              {t.marketing.footer.product}
+            </h4>
+            <div className="flex flex-col gap-2.5 text-sm">
+              <Link to="/app" className="text-cream-300/70 hover:text-white transition-colors w-fit">
+                {t.marketing.nav.launchApp}
+              </Link>
+              <a href="/#pricing" className="text-cream-300/70 hover:text-white transition-colors w-fit">
+                {t.marketing.nav.pricing}
+              </a>
+            </div>
+          </div>
+
+          {/* Resources */}
+          <div className="md:col-span-2">
+            <h4 className="text-white font-display font-semibold text-sm mb-4 tracking-wide uppercase">
+              {t.marketing.footer.resources}
+            </h4>
+            <div className="flex flex-col gap-2.5 text-sm">
+              <Link to="/docs" className="text-cream-300/70 hover:text-white transition-colors w-fit">
+                {t.marketing.nav.docs}
+              </Link>
+              <Link to="/blog" className="text-cream-300/70 hover:text-white transition-colors w-fit">
+                {t.marketing.nav.blog}
+              </Link>
+            </div>
+          </div>
+
+          {/* Contact */}
+          <div className="md:col-span-2">
+            <h4 className="text-white font-display font-semibold text-sm mb-4 tracking-wide uppercase">
+              {t.marketing.footer.contactTitle}
+            </h4>
+            <div className="flex flex-col gap-2.5 text-sm">
+              <a href="mailto:yogecoder@gmail.com" className="text-cream-300/70 hover:text-white transition-colors w-fit">
+                yogecoder@gmail.com
+              </a>
+            </div>
           </div>
         </div>
 
-        <div>
-          <h4 className="text-white font-semibold mb-3 text-sm">{t.marketing.footer.resources}</h4>
-          <div className="flex flex-col gap-2 text-sm">
-            <Link to="/docs" className="hover:text-white transition-colors">{t.marketing.nav.docs}</Link>
-            <Link to="/blog" className="hover:text-white transition-colors">{t.marketing.nav.blog}</Link>
+        <div className="mt-12 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-cream-300/50">
+            &copy; {new Date().getFullYear()} TexPixel. All rights reserved.
+          </p>
+          <div className="flex items-center gap-1 text-xs text-cream-300/40">
+            <span>Built with</span>
+            <span className="text-coral-400">care</span>
+            <span>for students & researchers</span>
           </div>
         </div>
-
-        <div>
-          <h4 className="text-white font-semibold mb-3 text-sm">{t.marketing.footer.contactTitle}</h4>
-          <div className="flex flex-col gap-2 text-sm">
-            <a href="mailto:yogecoder@gmail.com" className="hover:text-white transition-colors">yogecoder@gmail.com</a>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-6xl mx-auto mt-8 pt-8 border-t border-gray-800 text-sm text-center">
-        &copy; {new Date().getFullYear()} TexPixel. All rights reserved.
       </div>
     </footer>
   );

src/components/layout/MarketingNavbar.tsx

@@ -8,6 +8,7 @@ export default function MarketingNavbar() {
   const location = useLocation();
   const [showLangMenu, setShowLangMenu] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
   const langMenuRef = useRef<HTMLDivElement>(null);
   const isHome = location.pathname === '/';
 
@@ -34,53 +35,73 @@ export default function MarketingNavbar() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 10);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
-    <nav className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative">
-      <Link to="/" className="flex items-center gap-2">
-        <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8" />
-        <span className="text-xl font-bold text-gray-900 tracking-tight">TexPixel</span>
+    <nav
+      className={`h-16 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative transition-all duration-300 ${
+        scrolled
+          ? 'bg-white/90 backdrop-blur-md border-b border-cream-300 shadow-sm'
+          : 'bg-transparent border-b border-transparent'
+      }`}
+    >
+      <Link to="/" className="flex items-center gap-2.5 group">
+        <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8 transition-transform group-hover:scale-110 duration-200" />
+        <span className="text-xl font-display font-bold text-ink tracking-tight">TexPixel</span>
       </Link>
 
-      <div className="hidden md:flex items-center gap-6">
-        {navLinks.map((link) => (
-          <Link
-            key={link.to}
-            to={link.to}
-            className={`text-sm font-medium transition-colors ${
-              location.pathname === link.to ? 'text-blue-600' : 'text-gray-700 hover:text-gray-900'
-            }`}
-          >
-            {link.label}
-          </Link>
-        ))}
+      <div className="hidden md:flex items-center gap-1">
+        {navLinks.map((link) => {
+          const isActive = location.pathname === link.to;
+          return (
+            <Link
+              key={link.to}
+              to={link.to}
+              className={`relative px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
+                isActive
+                  ? 'text-coral-600 bg-coral-50'
+                  : 'text-ink-secondary hover:text-ink hover:bg-cream-200/60'
+              }`}
+            >
+              {link.label}
+            </Link>
+          );
+        })}
         {anchorLinks.map((link) => (
           <a
             key={link.href}
             href={link.href}
-            className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+            className="px-4 py-2 text-sm font-medium text-ink-secondary hover:text-ink hover:bg-cream-200/60 rounded-lg transition-colors duration-200"
           >
             {link.label}
           </a>
         ))}
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
+        {/* Language Switcher */}
         <div className="relative" ref={langMenuRef}>
           <button
             onClick={() => setShowLangMenu(!showLangMenu)}
-            className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+            className="flex items-center gap-1.5 px-3 py-2 hover:bg-cream-200/60 rounded-lg text-ink-secondary text-sm font-medium transition-colors"
           >
-            <Languages size={18} />
+            <Languages size={16} />
             <span className="hidden sm:inline">{language === 'en' ? 'EN' : '中文'}</span>
-            <ChevronDown size={14} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
+            <ChevronDown size={12} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
           </button>
           {showLangMenu && (
-            <div className="absolute right-0 top-full mt-2 w-32 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50">
+            <div className="absolute right-0 top-full mt-2 w-36 bg-white rounded-xl shadow-lg border border-cream-300 py-1.5 z-50">
               {(['en', 'zh'] as const).map((lang) => (
                 <button
                   key={lang}
                   onClick={() => { setLanguage(lang); setShowLangMenu(false); }}
-                  className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === lang ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+                  className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-cream-100 ${
+                    language === lang ? 'text-coral-600 font-semibold' : 'text-ink-secondary'
+                  }`}
                 >
                   {lang === 'en' ? 'English' : '简体中文'}
                   {language === lang && <Check size={14} />}
@@ -92,29 +113,46 @@ export default function MarketingNavbar() {
 
         <Link
           to="/app"
-          className="hidden sm:inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+          className="hidden sm:inline-flex items-center px-5 py-2 btn-primary text-sm rounded-lg"
         >
           {t.marketing.nav.launchApp}
         </Link>
 
-        <button className="md:hidden p-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
-          {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+        <button className="md:hidden p-2 text-ink-secondary hover:text-ink" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+          {mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
         </button>
       </div>
 
+      {/* Mobile menu */}
       {mobileMenuOpen && (
-        <div className="absolute top-16 left-0 right-0 bg-white border-b border-gray-200 shadow-lg md:hidden z-50 py-4 px-6 flex flex-col gap-3">
+        <div className="absolute top-16 left-0 right-0 bg-white/95 backdrop-blur-md border-b border-cream-300 shadow-lg md:hidden z-50 py-3 px-6 flex flex-col gap-1">
           {navLinks.map((link) => (
-            <Link key={link.to} to={link.to} className="text-sm font-medium text-gray-700 py-2" onClick={() => setMobileMenuOpen(false)}>
+            <Link
+              key={link.to}
+              to={link.to}
+              className={`text-sm font-medium py-2.5 px-3 rounded-lg transition-colors ${
+                location.pathname === link.to ? 'text-coral-600 bg-coral-50' : 'text-ink-secondary hover:bg-cream-200/60'
+              }`}
+              onClick={() => setMobileMenuOpen(false)}
+            >
               {link.label}
             </Link>
           ))}
           {anchorLinks.map((link) => (
-            <a key={link.href} href={link.href} className="text-sm font-medium text-gray-700 py-2" onClick={() => setMobileMenuOpen(false)}>
+            <a
+              key={link.href}
+              href={link.href}
+              className="text-sm font-medium text-ink-secondary py-2.5 px-3 rounded-lg hover:bg-cream-200/60"
+              onClick={() => setMobileMenuOpen(false)}
+            >
               {link.label}
             </a>
           ))}
-          <Link to="/app" className="text-sm font-medium text-blue-600 py-2" onClick={() => setMobileMenuOpen(false)}>
+          <Link
+            to="/app"
+            className="text-sm font-semibold text-coral-600 py-2.5 px-3"
+            onClick={() => setMobileMenuOpen(false)}
+          >
             {t.marketing.nav.launchApp}
           </Link>
         </div>

src/index.css

@@ -2,6 +2,112 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    /* Warm Coral + Ink palette */
+    --color-primary: #e05a33;
+    --color-primary-hover: #c94a28;
+    --color-primary-light: #fef0ec;
+    --color-primary-glow: rgba(224, 90, 51, 0.15);
+
+    --color-secondary: #2a9d8f;
+    --color-secondary-light: #eef9f7;
+
+    --color-accent: #e9c46a;
+    --color-accent-light: #fdf6e3;
+
+    --color-bg: #faf8f4;
+    --color-surface: #ffffff;
+    --color-surface-raised: #f5f3ee;
+
+    --color-ink: #1c1917;
+    --color-ink-secondary: #57534e;
+    --color-ink-muted: #a8a29e;
+    --color-border: #e7e5e4;
+    --color-border-light: #f0eeea;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: 'DM Sans', system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: var(--color-ink);
+    background-color: var(--color-bg);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  /* Distinctive button styles */
+  .btn-primary {
+    @apply inline-flex items-center gap-2 font-semibold rounded-xl transition-all duration-200;
+    background-color: var(--color-primary);
+    color: white;
+    box-shadow: 0 4px 14px var(--color-primary-glow), 0 1px 3px rgba(0,0,0,0.08);
+  }
+  .btn-primary:hover {
+    background-color: var(--color-primary-hover);
+    box-shadow: 0 6px 20px var(--color-primary-glow), 0 2px 4px rgba(0,0,0,0.1);
+    transform: translateY(-1px);
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center gap-2 font-semibold rounded-xl transition-all duration-200;
+    background-color: var(--color-surface);
+    color: var(--color-ink);
+    border: 1.5px solid var(--color-border);
+  }
+  .btn-secondary:hover {
+    border-color: var(--color-ink-muted);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    transform: translateY(-1px);
+  }
+
+  /* Card with warm shadow */
+  .card {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border-light);
+    border-radius: 1rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
+    transition: all 0.25s ease;
+  }
+  .card:hover {
+    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);
+    transform: translateY(-2px);
+  }
+
+  /* Section spacing */
+  .section-padding {
+    @apply py-24 lg:py-32 px-6;
+  }
+
+  /* Grain texture overlay */
+  .grain::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0.3;
+    pointer-events: none;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+  }
+
+  /* Prose overrides for blog/docs */
+  .prose-warm {
+    --tw-prose-body: var(--color-ink-secondary);
+    --tw-prose-headings: var(--color-ink);
+    --tw-prose-links: var(--color-primary);
+    --tw-prose-bold: var(--color-ink);
+    --tw-prose-code: var(--color-primary);
+  }
+}
+
 @layer utilities {
   .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
@@ -13,15 +119,34 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(156, 163, 175, 0.3);
+    background-color: rgba(168, 162, 158, 0.3);
     border-radius: 20px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(156, 163, 175, 0.5);
+    background-color: rgba(168, 162, 158, 0.5);
   }
-}
 
-body {
-  @apply antialiased text-gray-900 bg-gray-50;
+  /* Fade-in animation */
+  @keyframes fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fade-up {
+    animation: fade-up 0.6s ease-out forwards;
+  }
+
+  /* Stagger delays */
+  .delay-100 { animation-delay: 100ms; }
+  .delay-200 { animation-delay: 200ms; }
+  .delay-300 { animation-delay: 300ms; }
+  .delay-400 { animation-delay: 400ms; }
+  .delay-500 { animation-delay: 500ms; }
 }

src/pages/BlogDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Calendar } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadContent, type ContentItem } from '../lib/content';
@@ -19,8 +20,13 @@ export default function BlogDetailPage() {
 
   if (!content) {
     return (
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <p className="text-gray-600">{language === 'en' ? 'Loading...' : '加载中...'}</p>
+      <div className="max-w-3xl mx-auto py-20 px-6">
+        <div className="animate-pulse space-y-4">
+          <div className="h-4 bg-cream-200 rounded w-24" />
+          <div className="h-8 bg-cream-200 rounded w-3/4" />
+          <div className="h-4 bg-cream-200 rounded w-full" />
+          <div className="h-4 bg-cream-200 rounded w-5/6" />
+        </div>
       </div>
     );
   }
@@ -34,10 +40,44 @@ export default function BlogDetailPage() {
         type="article"
         publishedTime={content.meta.date}
       />
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <div className="text-sm text-gray-400 mb-4">{content.meta.date}</div>
+      <div className="max-w-3xl mx-auto py-16 lg:py-20 px-6">
+        {/* Back link */}
+        <Link
+          to="/blog"
+          className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-ink transition-colors mb-8"
+        >
+          <ArrowLeft size={14} />
+          {language === 'en' ? 'All posts' : '所有文章'}
+        </Link>
+
+        {/* Article header */}
+        <header className="mb-10">
+          <div className="flex items-center gap-2 text-sm text-ink-muted mb-4">
+            <Calendar size={14} />
+            <time>{content.meta.date}</time>
+          </div>
+          {content.meta.tags && content.meta.tags.length > 0 && (
+            <div className="flex gap-2 mb-4">
+              {content.meta.tags.map((tag: string) => (
+                <span key={tag} className="text-xs bg-coral-50 text-coral-600 px-2.5 py-1 rounded-full font-medium">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </header>
+
+        {/* Article body */}
         <article
-          className="prose prose-gray max-w-none"
+          className="prose prose-lg prose-warm max-w-none
+            prose-headings:font-display prose-headings:tracking-tight
+            prose-h1:text-3xl prose-h1:font-bold
+            prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-10
+            prose-a:text-coral-600 prose-a:no-underline hover:prose-a:underline
+            prose-code:text-coral-600 prose-code:bg-coral-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-sm
+            prose-pre:bg-ink prose-pre:text-cream-100 prose-pre:rounded-xl
+            prose-img:rounded-xl
+            prose-blockquote:border-coral-300 prose-blockquote:bg-coral-50/30 prose-blockquote:rounded-r-xl prose-blockquote:py-1"
           dangerouslySetInnerHTML={{ __html: content.html }}
         />
       </div>

src/pages/BlogListPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { ArrowRight, Calendar } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadManifest, type ContentMeta } from '../lib/content';
@@ -14,27 +15,96 @@ export default function BlogListPage() {
     });
   }, [language]);
 
+  const featured = posts[0];
+  const rest = posts.slice(1);
+
   return (
     <>
       <SEOHead title="Blog" description="TexPixel blog — updates, tutorials, and insights" path="/blog" />
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <h1 className="text-3xl font-bold text-gray-900 mb-8">{language === 'en' ? 'Blog' : '博客'}</h1>
-        <div className="space-y-6">
-          {posts.map((post) => (
-            <Link key={post.slug} to={`/blog/${post.slug}`} className="block p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
-              <div className="text-xs text-gray-400 mb-2">{post.date}</div>
-              <h2 className="text-lg font-semibold text-gray-900">{post.title}</h2>
-              <p className="text-gray-600 mt-1 text-sm">{post.description}</p>
-              {post.tags.length > 0 && (
-                <div className="flex gap-2 mt-3">
-                  {post.tags.map(tag => (
-                    <span key={tag} className="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">{tag}</span>
-                  ))}
-                </div>
-              )}
-            </Link>
-          ))}
+
+      <div className="max-w-5xl mx-auto py-16 lg:py-20 px-6">
+        {/* Header */}
+        <div className="mb-12">
+          <h1 className="font-display text-4xl lg:text-5xl font-bold text-ink tracking-tight mb-4">
+            {language === 'en' ? 'Blog' : '博客'}
+          </h1>
+          <p className="text-ink-secondary text-lg max-w-xl">
+            {language === 'en'
+              ? 'Updates, tutorials, and insights on formula recognition and LaTeX.'
+              : '关于公式识别和 LaTeX 的更新、教程和见解。'}
+          </p>
         </div>
+
+        {/* Featured post */}
+        {featured && (
+          <Link
+            to={`/blog/${featured.slug}`}
+            className="card block p-8 mb-8 group hover:border-coral-200"
+          >
+            <div className="flex items-center gap-2 text-xs text-ink-muted mb-3">
+              <Calendar size={13} />
+              <time>{featured.date}</time>
+            </div>
+            <h2 className="font-display text-2xl lg:text-3xl font-bold text-ink mb-3 group-hover:text-coral-600 transition-colors">
+              {featured.title}
+            </h2>
+            <p className="text-ink-secondary leading-relaxed mb-4 max-w-2xl">
+              {featured.description}
+            </p>
+            <div className="flex items-center justify-between">
+              <div className="flex gap-2">
+                {featured.tags.map(tag => (
+                  <span key={tag} className="text-xs bg-coral-50 text-coral-600 px-2.5 py-1 rounded-full font-medium">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+              <span className="inline-flex items-center gap-1 text-sm font-medium text-coral-500 group-hover:gap-2 transition-all">
+                {language === 'en' ? 'Read more' : '阅读全文'}
+                <ArrowRight size={14} />
+              </span>
+            </div>
+          </Link>
+        )}
+
+        {/* Rest of posts */}
+        {rest.length > 0 && (
+          <div className="grid md:grid-cols-2 gap-5">
+            {rest.map((post) => (
+              <Link
+                key={post.slug}
+                to={`/blog/${post.slug}`}
+                className="card p-6 group hover:border-coral-200"
+              >
+                <div className="text-xs text-ink-muted mb-2">
+                  <time>{post.date}</time>
+                </div>
+                <h2 className="font-display text-lg font-semibold text-ink mb-2 group-hover:text-coral-600 transition-colors">
+                  {post.title}
+                </h2>
+                <p className="text-ink-secondary text-sm leading-relaxed mb-3">{post.description}</p>
+                {post.tags.length > 0 && (
+                  <div className="flex gap-2">
+                    {post.tags.map(tag => (
+                      <span key={tag} className="text-[11px] bg-cream-200 text-ink-secondary px-2 py-0.5 rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {posts.length === 0 && (
+          <div className="card p-12 text-center">
+            <p className="text-ink-muted text-sm">
+              {language === 'en' ? 'No posts yet. Check back soon!' : '暂无文章，敬请期待！'}
+            </p>
+          </div>
+        )}
       </div>
     </>
   );

src/pages/DocDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadContent, type ContentItem } from '../lib/content';
@@ -19,8 +20,12 @@ export default function DocDetailPage() {
 
   if (!content) {
     return (
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <p className="text-gray-600">{language === 'en' ? 'Loading...' : '加载中...'}</p>
+      <div className="max-w-3xl mx-auto py-20 px-6">
+        <div className="animate-pulse space-y-4">
+          <div className="h-4 bg-cream-200 rounded w-24" />
+          <div className="h-8 bg-cream-200 rounded w-3/4" />
+          <div className="h-4 bg-cream-200 rounded w-full" />
+        </div>
       </div>
     );
   }
@@ -32,9 +37,27 @@ export default function DocDetailPage() {
         description={content.meta.description}
         path={`/docs/${slug}`}
       />
-      <div className="max-w-4xl mx-auto py-16 px-6">
+      <div className="max-w-3xl mx-auto py-16 lg:py-20 px-6">
+        {/* Back link */}
+        <Link
+          to="/docs"
+          className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-ink transition-colors mb-8"
+        >
+          <ArrowLeft size={14} />
+          {language === 'en' ? 'All docs' : '所有文档'}
+        </Link>
+
+        {/* Doc body */}
         <article
-          className="prose prose-gray max-w-none"
+          className="prose prose-lg prose-warm max-w-none
+            prose-headings:font-display prose-headings:tracking-tight
+            prose-h1:text-3xl prose-h1:font-bold
+            prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-10
+            prose-a:text-sage-700 prose-a:no-underline hover:prose-a:underline
+            prose-code:text-sage-700 prose-code:bg-sage-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-sm
+            prose-pre:bg-ink prose-pre:text-cream-100 prose-pre:rounded-xl
+            prose-img:rounded-xl
+            prose-blockquote:border-sage-300 prose-blockquote:bg-sage-50/30 prose-blockquote:rounded-r-xl prose-blockquote:py-1"
           dangerouslySetInnerHTML={{ __html: content.html }}
         />
       </div>

src/pages/DocsListPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { ArrowRight, BookOpen, FileText } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadManifest, type ContentMeta } from '../lib/content';
@@ -17,16 +18,54 @@ export default function DocsListPage() {
   return (
     <>
       <SEOHead title="Documentation" description="TexPixel documentation and guides" path="/docs" />
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <h1 className="text-3xl font-bold text-gray-900 mb-8">{language === 'en' ? 'Documentation' : '文档'}</h1>
+
+      <div className="max-w-5xl mx-auto py-16 lg:py-20 px-6">
+        {/* Header */}
+        <div className="mb-12">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-sage-50 border border-sage-100 rounded-full text-xs font-medium text-sage-700 mb-6">
+            <BookOpen size={13} />
+            {language === 'en' ? 'Documentation' : '文档中心'}
+          </div>
+          <h1 className="font-display text-4xl lg:text-5xl font-bold text-ink tracking-tight mb-4">
+            {language === 'en' ? 'Learn TexPixel' : '了解 TexPixel'}
+          </h1>
+          <p className="text-ink-secondary text-lg max-w-xl">
+            {language === 'en'
+              ? 'Everything you need to get started with formula recognition.'
+              : '公式识别入门所需的一切。'}
+          </p>
+        </div>
+
+        {/* Docs grid */}
         <div className="space-y-4">
           {docs.map((doc) => (
-            <Link key={doc.slug} to={`/docs/${doc.slug}`} className="block p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
-              <h2 className="text-lg font-semibold text-gray-900">{doc.title}</h2>
-              <p className="text-gray-600 mt-1 text-sm">{doc.description}</p>
+            <Link
+              key={doc.slug}
+              to={`/docs/${doc.slug}`}
+              className="card p-6 flex items-start gap-5 group hover:border-sage-200 block"
+            >
+              <div className="w-11 h-11 bg-sage-50 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                <FileText size={20} className="text-sage-600" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h2 className="font-display text-lg font-semibold text-ink mb-1 group-hover:text-sage-700 transition-colors">
+                  {doc.title}
+                </h2>
+                <p className="text-ink-secondary text-sm leading-relaxed">{doc.description}</p>
+              </div>
+              <ArrowRight size={16} className="text-ink-muted group-hover:text-sage-600 transition-colors mt-1 flex-shrink-0" />
             </Link>
           ))}
         </div>
+
+        {/* Empty state */}
+        {docs.length === 0 && (
+          <div className="card p-12 text-center">
+            <p className="text-ink-muted text-sm">
+              {language === 'en' ? 'Documentation coming soon.' : '文档即将发布。'}
+            </p>
+          </div>
+        )}
       </div>
     </>
   );