150 lines
4.7 KiB
JavaScript
150 lines
4.7 KiB
JavaScript
import { Input, Button, Tag } from 'antd';
|
||
import {
|
||
SearchOutlined,
|
||
CameraOutlined,
|
||
ArrowRightOutlined,
|
||
ThunderboltOutlined,
|
||
SafetyCertificateOutlined,
|
||
ClockCircleOutlined,
|
||
} from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import './Hero.css';
|
||
|
||
const recommendTags = ['活动', '医美', '科技', '包装', '直播', '邀请函'];
|
||
const heroStats = [
|
||
{ value: '24h', label: '持续更新' },
|
||
{ value: '原图', label: '即时交付' },
|
||
{ value: '在线', label: '支付下载' },
|
||
];
|
||
const stageHighlights = [
|
||
{
|
||
icon: <ThunderboltOutlined />,
|
||
title: '热门原图',
|
||
description: '按场景、风格和行业快速找图，减少反复沟通。',
|
||
},
|
||
{
|
||
icon: <SafetyCertificateOutlined />,
|
||
title: '支付后交付',
|
||
description: '下单、支付、下载一条链路走通，用户体验更顺。',
|
||
},
|
||
{
|
||
icon: <ClockCircleOutlined />,
|
||
title: '最新上传',
|
||
description: '设计师持续上新，支持详情页预览和作品编号追踪。',
|
||
},
|
||
];
|
||
|
||
const Hero = () => {
|
||
const navigate = useNavigate();
|
||
|
||
const scrollToHotWorks = () => {
|
||
document.getElementById('home-hot-works')?.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start',
|
||
});
|
||
};
|
||
|
||
return (
|
||
<section className="hero">
|
||
<div className="hero-shell">
|
||
<div className="hero-copy">
|
||
<span className="hero-eyebrow">图汇精选素材库</span>
|
||
<h1 className="hero-title">
|
||
把灵感整理成
|
||
<span>可直接下载的设计资产</span>
|
||
</h1>
|
||
<p className="hero-description">
|
||
原图、背景、电商图、活动物料统一归档，预览、支付、下载三步走通，
|
||
让客户从找图到拿到成品更省心。
|
||
</p>
|
||
|
||
<div className="hero-search-panel">
|
||
<div className="hero-search-box">
|
||
<Input
|
||
size="large"
|
||
placeholder="搜索作品标题、作品编号或场景关键词"
|
||
className="hero-search-input"
|
||
prefix={<SearchOutlined className="hero-search-prefix" />}
|
||
suffix={<CameraOutlined className="hero-search-camera" />}
|
||
/>
|
||
</div>
|
||
<div className="hero-action-row">
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
className="hero-primary-btn"
|
||
icon={<ArrowRightOutlined />}
|
||
onClick={scrollToHotWorks}
|
||
>
|
||
浏览热门作品
|
||
</Button>
|
||
<Button
|
||
size="large"
|
||
className="hero-secondary-btn"
|
||
onClick={() => navigate('/upload-guide')}
|
||
>
|
||
上传指南
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-tags">
|
||
<span className="hero-tags-label">推荐分类</span>
|
||
{recommendTags.map((tag) => (
|
||
<Tag
|
||
key={tag}
|
||
className="hero-tag"
|
||
onClick={() => navigate(`/category/${tag}`)}
|
||
>
|
||
{tag}
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
|
||
<div className="hero-stats">
|
||
{heroStats.map((item) => (
|
||
<div key={item.label} className="hero-stat">
|
||
<strong>{item.value}</strong>
|
||
<span>{item.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-stage">
|
||
<div className="hero-stage-card hero-stage-main">
|
||
<div className="hero-stage-topline">
|
||
<span className="hero-stage-label">本周趋势</span>
|
||
<span className="hero-stage-badge">精选专题</span>
|
||
</div>
|
||
<h2>更像一个能直接成交的素材站，而不是简单图库</h2>
|
||
<p>
|
||
首页负责承接搜索意图，详情页负责转化下载动作，让用户一眼知道
|
||
“这里能找、能买、能下”。
|
||
</p>
|
||
<div className="hero-stage-pills">
|
||
<span>高清原图</span>
|
||
<span>在线支付</span>
|
||
<span>作品详情页</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-stage-stack">
|
||
{stageHighlights.map((item) => (
|
||
<div key={item.title} className="hero-stage-card hero-stage-mini">
|
||
<div className="hero-stage-icon">{item.icon}</div>
|
||
<div>
|
||
<h3>{item.title}</h3>
|
||
<p>{item.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Hero;
|