YogeLiu/doc_ai_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refact: update ui

Browse Source
This commit is contained in:
yoge
2026-03-25 14:06:37 +08:00
parent 276160d769
commit d13cb64567
28 changed files with 2451 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/home/FeaturesSection.tsx
View File

@@ -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>
);
})}