From 274342aab6b797aebfee14647327cbc0eea9010f Mon Sep 17 00:00:00 2001
From: yoge <yogecoder@gmail.com>
Date: Wed, 25 Mar 2026 13:18:40 +0800
Subject: [PATCH] feat: add Home page with Hero, Features, HowItWorks, Pricing,
 Contact sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/home/ContactSection.tsx    |  98 +++++++++++++++++++
 src/components/home/FeaturesSection.tsx   |  44 +++++++++
 src/components/home/HeroSection.tsx       |  71 ++++++++++++++
 src/components/home/HowItWorksSection.tsx |  41 ++++++++
 src/components/home/PricingSection.tsx    | 113 ++++++++++++++++++++++
 src/pages/HomePage.tsx                    |  26 +++++
 6 files changed, 393 insertions(+)
 create mode 100644 src/components/home/ContactSection.tsx
 create mode 100644 src/components/home/FeaturesSection.tsx
 create mode 100644 src/components/home/HeroSection.tsx
 create mode 100644 src/components/home/HowItWorksSection.tsx
 create mode 100644 src/components/home/PricingSection.tsx
 create mode 100644 src/pages/HomePage.tsx

diff --git a/src/components/home/ContactSection.tsx b/src/components/home/ContactSection.tsx
new file mode 100644
index 0000000..720b533
--- /dev/null
+++ b/src/components/home/ContactSection.tsx
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Mail, Users, Send } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function ContactSection() {
+  const { t } = useLanguage();
+  const c = t.marketing.contact;
+  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
+
+  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);
+      (e.target as HTMLFormElement).reset();
+    }, 1000);
+  };
+
+  return (
+    <section id="contact" className="py-20 bg-gray-50">
+      <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">{c.title}</h2>
+          <p className="text-gray-600 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>
+              <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>
+            </div>
+
+            <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>
+              <div>
+                <div className="text-sm text-gray-500 mb-1">{c.qqGroup}</div>
+                <span className="text-gray-900 font-medium">1018282100</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Contact form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">{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"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">{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"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">{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"
+              />
+            </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 ${
+                status === 'sent'
+                  ? 'bg-green-600 text-white'
+                  : 'bg-blue-600 hover:bg-blue-700 text-white'
+              } disabled:opacity-60`}
+            >
+              <Send size={16} />
+              {status === 'sending' ? c.sending : status === 'sent' ? c.sent : c.send}
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
new file mode 100644
index 0000000..7522c96
--- /dev/null
+++ b/src/components/home/FeaturesSection.tsx
@@ -0,0 +1,44 @@
+import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
+
+export default function FeaturesSection() {
+  const { t } = useLanguage();
+  const f = t.marketing.features;
+
+  const items = [
+    { title: f.handwriting, description: f.handwritingDesc },
+    { title: f.multiFormat, description: f.multiFormatDesc },
+    { title: f.pdf, description: f.pdfDesc },
+    { title: f.batch, description: f.batchDesc },
+    { title: f.accuracy, description: f.accuracyDesc },
+    { title: f.free, description: f.freeDesc },
+  ];
+
+  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>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {items.map((item, i) => {
+            const Icon = iconMap[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>
+                <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>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
new file mode 100644
index 0000000..8fc0fd0
--- /dev/null
+++ b/src/components/home/HeroSection.tsx
@@ -0,0 +1,71 @@
+import { Link } from 'react-router-dom';
+import { ArrowRight, Upload } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function HeroSection() {
+  const { t } = 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">
+              {t.marketing.hero.title}
+            </h1>
+            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
+              {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"
+              >
+                {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"
+              >
+                {t.marketing.hero.ctaSecondary}
+              </a>
+            </div>
+          </div>
+
+          {/* Right: Demo card */}
+          <div className="relative">
+            <Link
+              to="/app"
+              className="block bg-white rounded-2xl shadow-2xl border border-gray-200 p-8 hover:shadow-3xl transition-shadow 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>
+                <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>
+                <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>
+  );
+}
diff --git a/src/components/home/HowItWorksSection.tsx b/src/components/home/HowItWorksSection.tsx
new file mode 100644
index 0000000..b0247a5
--- /dev/null
+++ b/src/components/home/HowItWorksSection.tsx
@@ -0,0 +1,41 @@
+import { Upload, Cpu, Download } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const icons = [Upload, Cpu, Download];
+
+export default function HowItWorksSection() {
+  const { t } = useLanguage();
+  const h = t.marketing.howItWorks;
+
+  const steps = [
+    { title: h.step1, description: h.step1Desc },
+    { title: h.step2, description: h.step2Desc },
+    { title: h.step3, description: h.step3Desc },
+  ];
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <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">{h.title}</h2>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {steps.map((step, i) => {
+            const Icon = icons[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>
+                <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>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/PricingSection.tsx b/src/components/home/PricingSection.tsx
new file mode 100644
index 0000000..2bf92dd
--- /dev/null
+++ b/src/components/home/PricingSection.tsx
@@ -0,0 +1,113 @@
+import { Link } from 'react-router-dom';
+import { Check } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function PricingSection() {
+  const { t } = useLanguage();
+  const p = t.marketing.pricing;
+
+  const plans = [
+    {
+      name: p.free,
+      price: '$0',
+      period: p.monthly,
+      features: p.freeFeatures,
+      cta: p.getStarted,
+      href: '/app',
+      disabled: false,
+      popular: false,
+    },
+    {
+      name: p.pro,
+      price: '$9.9',
+      period: p.monthly,
+      features: p.proFeatures,
+      cta: p.comingSoon,
+      href: '#',
+      disabled: true,
+      popular: true,
+    },
+    {
+      name: p.enterprise,
+      price: p.custom,
+      period: '',
+      features: p.enterpriseFeatures,
+      cta: p.contactUs,
+      href: '#contact',
+      disabled: false,
+      popular: false,
+    },
+  ];
+
+  return (
+    <section id="pricing" 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">{p.title}</h2>
+          <p className="text-gray-600 text-lg">{p.subtitle}</p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          {plans.map((plan, i) => (
+            <div
+              key={i}
+              className={`rounded-2xl p-8 flex flex-col ${
+                plan.popular
+                  ? 'border-2 border-blue-600 shadow-xl relative'
+                  : 'border border-gray-200'
+              }`}
+            >
+              {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">
+                  {p.popular}
+                </div>
+              )}
+
+              <h3 className="text-xl font-bold text-gray-900 mb-2">{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>}
+              </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" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+
+              {plan.disabled ? (
+                <button
+                  disabled
+                  className="w-full py-3 rounded-lg text-sm font-semibold bg-gray-100 text-gray-400 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 ${
+                    plan.popular
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-gray-900 hover:bg-gray-800 text-white'
+                  }`}
+                >
+                  {plan.cta}
+                </Link>
+              ) : (
+                <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"
+                >
+                  {plan.cta}
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..6197900
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,26 @@
+import SEOHead from '../components/seo/SEOHead';
+import HeroSection from '../components/home/HeroSection';
+import FeaturesSection from '../components/home/FeaturesSection';
+import HowItWorksSection from '../components/home/HowItWorksSection';
+import PricingSection from '../components/home/PricingSection';
+import ContactSection from '../components/home/ContactSection';
+import { useLanguage } from '../contexts/LanguageContext';
+
+export default function HomePage() {
+  const { t } = useLanguage();
+
+  return (
+    <>
+      <SEOHead
+        title="TexPixel - AI Math Formula Recognition | LaTeX, MathML OCR Tool"
+        description={t.marketing.hero.subtitle}
+        path="/"
+      />
+      <HeroSection />
+      <FeaturesSection />
+      <HowItWorksSection />
+      <PricingSection />
+      <ContactSection />
+    </>
+  );
+}