feat: replace all marketing home components with reference landing design
- Extract landing.css (scoped under .marketing-page) from texpixel-landing.html - Add Lora + JetBrains Mono fonts to index.html - Update MarketingLayout with .marketing-page wrapper and glow blobs - Replace MarketingNavbar with reference design (auth-aware user menu) - Replace HeroSection with mock window + cycling LaTeX typing effect - Replace FeaturesSection, PricingSection, Footer with reference designs - Add ProductSuiteSection, ShowcaseSection, TestimonialsSection (carousel), DocsSeoSection - Add useScrollReveal hook for intersection-based fade-in animations - Update HomePage to wire all sections in correct order - Remove obsolete HowItWorksSection and ContactSection - Remove dead contact key from marketing.nav translations Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,58 +1,60 @@
|
||||
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();
|
||||
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 },
|
||||
];
|
||||
const { language } = useLanguage();
|
||||
|
||||
return (
|
||||
<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>
|
||||
<section className="core-features">
|
||||
<div className="container">
|
||||
<div className="section-header reveal">
|
||||
<div className="eyebrow">Core Features</div>
|
||||
<h2 className="section-title">
|
||||
{language === 'zh'
|
||||
? '学生留下来的三个理由'
|
||||
: 'Three reasons students stay with TexPixel'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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={`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="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>
|
||||
);
|
||||
})}
|
||||
<div className="cards-3">
|
||||
<div className="feature-card reveal reveal-delay-1">
|
||||
<div className="feature-mini">
|
||||
<span className="feature-speed">⚡ t < 1s</span>
|
||||
</div>
|
||||
<div className="card-title">{language === 'zh' ? '极速识别' : 'Sub-second Recognition'}</div>
|
||||
<div className="card-desc">
|
||||
{language === 'zh'
|
||||
? '上传截图，LaTeX 随即出现。拍下笔记，无需等待，直接复制。'
|
||||
: 'Upload a screenshot, LaTeX appears instantly. Take a photo of your notes and copy right away.'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="feature-card reveal reveal-delay-2">
|
||||
<div className="feature-mini" style={{ fontSize: '13px', color: 'var(--text-body)' }}>
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--primary)' }}>
|
||||
\int_0^1 x^2 dx
|
||||
</span>
|
||||
</div>
|
||||
<div className="card-title">{language === 'zh' ? '复杂公式支持' : 'Complex Formula Support'}</div>
|
||||
<div className="card-desc">
|
||||
{language === 'zh'
|
||||
? '矩阵、积分、求和、化学式全部支持。多行公式对齐、角标嵌套一次识别。'
|
||||
: 'Matrices, integrals, summations, chemical formulas — all supported. Multi-line alignment and nested scripts in one pass.'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="feature-card reveal reveal-delay-3">
|
||||
<div className="feature-mini">
|
||||
<span style={{ fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-body)', fontSize: '13px' }}>
|
||||
\mathbf{'{A}'}<sup style={{ fontSize: '9px', color: 'var(--teal)' }}>−1</sup>b
|
||||
</span>
|
||||
</div>
|
||||
<div className="card-title">{language === 'zh' ? '高准确度' : 'High Accuracy'}</div>
|
||||
<div className="card-desc">
|
||||
{language === 'zh'
|
||||
? '论文级别识别准确率。在 arXiv 截图测试集上准确率超过 95%，持续迭代提升中。'
|
||||
: 'Publication-grade accuracy. Over 95% on arXiv screenshot benchmarks, continuously improving.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user