Optimize the code structure of the homepage
parent
948f178990
commit
4e573e6160
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +0,0 @@
|
|||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
||||
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
|
||||
/** */
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
|
|
@ -1 +0,0 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>React App</title><script defer="defer" src="bundle.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
import React from "react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Layout,
|
||||
Menu,
|
||||
Row,
|
||||
Space,
|
||||
Statistic,
|
||||
Table,
|
||||
Typography
|
||||
} from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import logoWhite from "../assets/images/redhare.png";
|
||||
import googleLogo from "../assets/images/google.png";
|
||||
import appleLogo from "../assets/images/apple.png";
|
||||
import microsoftLogo from "../assets/images/microsoft.png";
|
||||
import amazonLogo from "../assets/images/amazon.png";
|
||||
import metaLogo from "../assets/images/meta.png";
|
||||
import netflixLogo from "../assets/images/netflix.png";
|
||||
import adobeLogo from "../assets/images/adobe.png";
|
||||
import intelLogo from "../assets/images/intel.png";
|
||||
import ciscoLogo from "../assets/images/cisco.png";
|
||||
import salesforceLogo from "../assets/images/salesforce.png";
|
||||
import adsItemImage from "../assets/images/kalodata.webp";
|
||||
import "../css/home.css";
|
||||
|
||||
const { Header, Content } = Layout;
|
||||
const { Title, Paragraph, Text, Link } = Typography;
|
||||
|
||||
const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
|
||||
const stats = [
|
||||
{ value: "3亿+", label: "商品数据" },
|
||||
{ value: "3.5亿+", label: "电商达人数据" },
|
||||
{ value: "5亿+", label: "直播与短视频数据" },
|
||||
{ value: "1000天", label: "历史数据" }
|
||||
];
|
||||
const logos = [
|
||||
{ id: "google", src: googleLogo, alt: "Google" },
|
||||
{ id: "apple", src: appleLogo, alt: "Apple" },
|
||||
{ id: "microsoft", src: microsoftLogo, alt: "Microsoft" },
|
||||
{ id: "amazon", src: amazonLogo, alt: "Amazon" },
|
||||
{ id: "meta", src: metaLogo, alt: "Meta" },
|
||||
{ id: "netflix", src: netflixLogo, alt: "Netflix" },
|
||||
{ id: "adobe", src: adobeLogo, alt: "Adobe" },
|
||||
{ id: "salesforce", src: salesforceLogo, alt: "Salesforce" },
|
||||
{ id: "cisco", src: ciscoLogo, alt: "Cisco" },
|
||||
{ id: "intel", src: intelLogo, alt: "Intel" }
|
||||
];
|
||||
|
||||
const langItems = [
|
||||
{ key: "zh", label: "中文(简体)" },
|
||||
{ key: "en", label: "English(US)" }
|
||||
];
|
||||
|
||||
const tableColumns = [
|
||||
{ title: "排名", dataIndex: "rank", key: "rank" },
|
||||
{
|
||||
title: "商品",
|
||||
dataIndex: "product",
|
||||
key: "product",
|
||||
render: () => <span className="home-section-product" />
|
||||
},
|
||||
{ title: "价格", dataIndex: "price", key: "price" },
|
||||
{ title: "销量", dataIndex: "sales", key: "sales" },
|
||||
{
|
||||
title: "趋势",
|
||||
dataIndex: "trend",
|
||||
key: "trend",
|
||||
render: () => <span className="home-section-chart" />
|
||||
}
|
||||
];
|
||||
|
||||
const tableData = [1, 2, 3].map((item) => ({
|
||||
key: item,
|
||||
rank: `Top${item}`,
|
||||
price: "¥99.20",
|
||||
sales: "9276"
|
||||
}));
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: "Hoyidata是什么？使用Hoyidata有什么好处？",
|
||||
a:
|
||||
"Hoyidata 是行业用户规模最大、市场占有率第一的 TikTok 电商数据分析工具，已服务全球 300 万+品牌、卖家、达人与机构。作为行业首家同时覆盖 TikTok 全球 15 站点、Amazon 与 Shopee 的一站式跨平台数据分析工具，Hoyidata 利用 AI 与大数据赋能，帮助你高效完成爆品挖掘、竞品分析、达人筛选与内容优化，以精准数据驱动决策，全面提升跨境电商运营效率！"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata的数据是怎么获得的？准确度如何？",
|
||||
a:
|
||||
"TikTok 电商数据由我们的技术团队通过采集公开渠道的数据，再结合先进的 AI 算法模型和数据处理技术加工得出。部分数据（如成交金额、广告消耗）会与真实数据存在一定误差。随着模型每天训练与升级，数据准确度也在不断提升。我们的核心宗旨是帮助用户更深入了解、学习并借鉴商品、店铺与内容，用于形成更科学的经营策略。请勿将该数据用于合作分佣结算、绩效考核等高精度要求场景。"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata团队的背景？",
|
||||
a:
|
||||
"我们的团队拥有丰富的行业经验与数据分析能力，能够快速识别并分析数据中的关键洞察。我们不仅提供基础的数据统计，还能进行深度的数据挖掘与趋势预测，帮助用户更好地理解市场与用户需求，制定更有效的选品与营销策略。"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata的费用是多少？",
|
||||
a: (
|
||||
<>
|
||||
您可以在我们的付费页面查看更多和详细了解套餐价格和功能：
|
||||
<Link href="https://www.hoyidata.com/pricing" target="_blank">
|
||||
https://www.Hoyidata.com/pricing
|
||||
</Link>
|
||||
。
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
q: "如果向他人推介Hoyidata，可以得到佣金吗？",
|
||||
a: "是的，我们有代理合作计划，请您联系官方客服。"
|
||||
}
|
||||
];
|
||||
|
||||
const friendLinks = [
|
||||
[
|
||||
"Hoyidata",
|
||||
"toby",
|
||||
"41",
|
||||
"yannyang",
|
||||
"rh-shop",
|
||||
"leileiwang"
|
||||
],
|
||||
[
|
||||
"Hoyidata",
|
||||
"toby",
|
||||
"41",
|
||||
"yannyang",
|
||||
"rh-shop",
|
||||
"leileiwang"
|
||||
],
|
||||
[
|
||||
"Hoyidata",
|
||||
"toby",
|
||||
"41",
|
||||
"yannyang",
|
||||
"rh-shop",
|
||||
"leileiwang"
|
||||
],
|
||||
[
|
||||
"Hoyidata",
|
||||
"toby",
|
||||
"41",
|
||||
"yannyang",
|
||||
"rh-shop",
|
||||
"leileiwang"
|
||||
],
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Layout className="home">
|
||||
<Header className="home-header">
|
||||
<div className="home-brand">
|
||||
<span className="home-logo-wrap">
|
||||
<img className="home-logo" src={logoWhite} alt="Hoyidata" />
|
||||
</span>
|
||||
</div>
|
||||
<Menu
|
||||
className="home-nav-menu"
|
||||
mode="horizontal"
|
||||
items={navItems.map((item) => ({
|
||||
key: item,
|
||||
label: item
|
||||
}))}
|
||||
selectable={false}
|
||||
/>
|
||||
<div className="home-actions">
|
||||
<Dropdown
|
||||
menu={{ items: langItems }}
|
||||
trigger={["hover"]}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button className="home-lang-trigger" type="text">
|
||||
<Space size={6}>
|
||||
中文(简体)
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Divider type="vertical" className="home-divider" />
|
||||
<Text className="home-user">Spark</Text>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
<Content>
|
||||
<div className="home-hero">
|
||||
<div className="home-hero-content">
|
||||
<Title level={1} className="home-hero-title">
|
||||
深耕<span>TikTok</span>电商
|
||||
<br />
|
||||
全球用户<span>优选</span>
|
||||
<br />
|
||||
数据洞察平台
|
||||
</Title>
|
||||
<div className="home-hero-stats">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="home-hero-stat">
|
||||
<Statistic value={stat.value} title={stat.label} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Paragraph className="home-hero-desc">
|
||||
爆品挖掘、达人建联、视频创意、直播设计、广告优化、竞对分析
|
||||
<br />
|
||||
我们助您抓住TikTok的每一次机会！
|
||||
</Paragraph>
|
||||
<Button className="home-cta" type="primary" size="large">
|
||||
7天免费试用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="home-logos">
|
||||
<div className="home-logos-track">
|
||||
{[...logos, ...logos].map((logo, index) => (
|
||||
<div key={`${logo.id}-${index}`} className="home-logo-item">
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">01</span>
|
||||
<span>爆品追踪</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="ads item preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">02</span>
|
||||
<span>达人建联</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">03</span>
|
||||
<span>广告优化</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">04</span>
|
||||
<span>竞对洞察</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-faqs">
|
||||
<div className="home-faqs-inner">
|
||||
<Title level={2} className="home-faqs-title">
|
||||
FAQs
|
||||
</Title>
|
||||
<Card className="home-faqs-card" bordered={false}>
|
||||
<div className="home-faq-pin" aria-hidden="true" />
|
||||
{faqs.map((item) => (
|
||||
<div key={item.q} className="home-faq-item">
|
||||
<Title level={4} className="home-faq-question">
|
||||
{item.q}
|
||||
</Title>
|
||||
<Paragraph className="home-faq-answer">{item.a}</Paragraph>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-links">
|
||||
<div className="home-links-inner">
|
||||
<div className="home-links-title">
|
||||
友情链接
|
||||
</div>
|
||||
<Row gutter={[40, 16]} className="home-links-grid">
|
||||
{friendLinks.map((column, colIndex) => (
|
||||
<Col key={`link-col-${colIndex}`} xs={12} md={6}>
|
||||
<Space direction="vertical" size={10} className="home-links-col">
|
||||
{column.map((item) => (
|
||||
<Text key={item} className="home-links-item">
|
||||
{item}
|
||||
</Text>
|
||||
))}
|
||||
</Space>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
<footer className="home-footer">
|
||||
<div className="home-footer-inner">
|
||||
<div className="home-footer-links">
|
||||
<Text className="home-footer-link">联系我们</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">隐私政策</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">使用须知</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">网站地图</Text>
|
||||
</div>
|
||||
<div className="home-footer-meta">
|
||||
<Text>版权所有：深圳火蚁木木科技有限公司</Text>
|
||||
<Text>备案号：（注册中...）</Text>
|
||||
</div>
|
||||
<div className="home-footer-meta">
|
||||
<div className="home-footer-icp">
|
||||
<span className="home-footer-icp-icon" aria-hidden="true" />
|
||||
<Text>安备号：（注册中...）</Text>
|
||||
</div>
|
||||
<Text>联系方式：redhare@redhare.cc</Text>
|
||||
<Text>办公地址：深圳市南山区粤海街道海滨二路99号</Text>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
import React from "react";
|
||||
import { Button, Card, Col, Row, Space, Statistic, Typography } from "antd";
|
||||
import googleLogo from "../../assets/images/google.png";
|
||||
import appleLogo from "../../assets/images/apple.png";
|
||||
import microsoftLogo from "../../assets/images/microsoft.png";
|
||||
import amazonLogo from "../../assets/images/amazon.png";
|
||||
import metaLogo from "../../assets/images/meta.png";
|
||||
import netflixLogo from "../../assets/images/netflix.png";
|
||||
import adobeLogo from "../../assets/images/adobe.png";
|
||||
import intelLogo from "../../assets/images/intel.png";
|
||||
import ciscoLogo from "../../assets/images/cisco.png";
|
||||
import salesforceLogo from "../../assets/images/salesforce.png";
|
||||
import adsItemImage from "../../assets/images/kalodata.webp";
|
||||
|
||||
const { Title, Paragraph, Text, Link } = Typography;
|
||||
|
||||
const stats = [
|
||||
{ value: "3亿+", label: "商品数据" },
|
||||
{ value: "3.5亿+", label: "电商达人数据" },
|
||||
{ value: "5亿+", label: "直播与短视频数据" },
|
||||
{ value: "1000天", label: "历史数据" }
|
||||
];
|
||||
|
||||
const logos = [
|
||||
{ id: "google", src: googleLogo, alt: "Google" },
|
||||
{ id: "apple", src: appleLogo, alt: "Apple" },
|
||||
{ id: "microsoft", src: microsoftLogo, alt: "Microsoft" },
|
||||
{ id: "amazon", src: amazonLogo, alt: "Amazon" },
|
||||
{ id: "meta", src: metaLogo, alt: "Meta" },
|
||||
{ id: "netflix", src: netflixLogo, alt: "Netflix" },
|
||||
{ id: "adobe", src: adobeLogo, alt: "Adobe" },
|
||||
{ id: "salesforce", src: salesforceLogo, alt: "Salesforce" },
|
||||
{ id: "cisco", src: ciscoLogo, alt: "Cisco" },
|
||||
{ id: "intel", src: intelLogo, alt: "Intel" }
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: "Hoyidata是什么？使用Hoyidata有什么好处？",
|
||||
a:
|
||||
"Hoyidata 是行业用户规模最大、市场占有率第一的 TikTok 电商数据分析工具，已服务全球 300 万+品牌、卖家、达人与机构。作为行业首家同时覆盖 TikTok 全球 15 站点、Amazon 与 Shopee 的一站式跨平台数据分析工具，Hoyidata 利用 AI 与大数据赋能，帮助你高效完成爆品挖掘、竞品分析、达人筛选与内容优化，以精准数据驱动决策，全面提升跨境电商运营效率！"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata的数据是怎么获得的？准确度如何？",
|
||||
a:
|
||||
"TikTok 电商数据由我们的技术团队通过采集公开渠道的数据，再结合先进的 AI 算法模型和数据处理技术加工得出。部分数据（如成交金额、广告消耗）会与真实数据存在一定误差。随着模型每天训练与升级，数据准确度也在不断提升。我们的核心宗旨是帮助用户更深入了解、学习并借鉴商品、店铺与内容，用于形成更科学的经营策略。请勿将该数据用于合作分佣结算、绩效考核等高精度要求场景。"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata团队的背景？",
|
||||
a:
|
||||
"我们的团队拥有丰富的行业经验与数据分析能力，能够快速识别并分析数据中的关键洞察。我们不仅提供基础的数据统计，还能进行深度的数据挖掘与趋势预测，帮助用户更好地理解市场与用户需求，制定更有效的选品与营销策略。"
|
||||
},
|
||||
{
|
||||
q: "Hoyidata的费用是多少？",
|
||||
a: (
|
||||
<>
|
||||
您可以在我们的付费页面查看更多和详细了解套餐价格和功能：
|
||||
<Link href="https://www.hoyidata.com/pricing" target="_blank">
|
||||
https://www.Hoyidata.com/pricing
|
||||
</Link>
|
||||
。
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
q: "如果向他人推介Hoyidata，可以得到佣金吗？",
|
||||
a: "是的，我们有代理合作计划，请您联系官方客服。"
|
||||
}
|
||||
];
|
||||
|
||||
const friendLinks = [
|
||||
["Hoyidata", "toby", "41", "yannyang", "rh-shop", "leileiwang"],
|
||||
["Hoyidata", "toby", "41", "yannyang", "rh-shop", "leileiwang"],
|
||||
["Hoyidata", "toby", "41", "yannyang", "rh-shop", "leileiwang"],
|
||||
["Hoyidata", "toby", "41", "yannyang", "rh-shop", "leileiwang"]
|
||||
];
|
||||
|
||||
export default function HomeContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="home-hero">
|
||||
<div className="home-hero-content">
|
||||
<Title level={1} className="home-hero-title">
|
||||
深耕<span>TikTok</span>电商
|
||||
<br />
|
||||
全球用户<span>优选</span>
|
||||
<br />
|
||||
数据洞察平台
|
||||
</Title>
|
||||
<div className="home-hero-stats">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="home-hero-stat">
|
||||
<Statistic value={stat.value} title={stat.label} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Paragraph className="home-hero-desc">
|
||||
爆品挖掘、达人建联、视频创意、直播设计、广告优化、竞对分析
|
||||
<br />
|
||||
我们助您抓住TikTok的每一次机会！
|
||||
</Paragraph>
|
||||
<Button className="home-cta" type="primary" size="large">
|
||||
7天免费试用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="home-logos">
|
||||
<div className="home-logos-track">
|
||||
{[...logos, ...logos].map((logo, index) => (
|
||||
<div key={`${logo.id}-${index}`} className="home-logo-item">
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">01</span>
|
||||
<span>爆品追踪</span>
|
||||
</div>
|
||||
<img className="home-section-header-image" src={adsItemImage} alt="ads item preview" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">02</span>
|
||||
<span>达人建联</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">03</span>
|
||||
<span>广告优化</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-section">
|
||||
<div className="home-section-inner">
|
||||
<div className="home-section-header">
|
||||
<span className="home-section-number">04</span>
|
||||
<span>竞对洞察</span>
|
||||
</div>
|
||||
<img
|
||||
className="home-section-header-image"
|
||||
src={adsItemImage}
|
||||
alt="creator connect preview"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-faqs">
|
||||
<div className="home-faqs-inner">
|
||||
<Title level={2} className="home-faqs-title">
|
||||
FAQs
|
||||
</Title>
|
||||
<Card className="home-faqs-card" bordered={false}>
|
||||
<div className="home-faq-pin" aria-hidden="true" />
|
||||
{faqs.map((item) => (
|
||||
<div key={item.q} className="home-faq-item">
|
||||
<Title level={4} className="home-faq-question">
|
||||
{item.q}
|
||||
</Title>
|
||||
<Paragraph className="home-faq-answer">{item.a}</Paragraph>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-links">
|
||||
<div className="home-links-inner">
|
||||
<div className="home-links-title">友情链接</div>
|
||||
<Row gutter={[40, 16]} className="home-links-grid">
|
||||
{friendLinks.map((column, colIndex) => (
|
||||
<Col key={`link-col-${colIndex}`} xs={12} md={6}>
|
||||
<Space direction="vertical" size={10} className="home-links-col">
|
||||
{column.map((item) => (
|
||||
<Text key={item} className="home-links-item">
|
||||
{item}
|
||||
</Text>
|
||||
))}
|
||||
</Space>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import { Typography } from "antd";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export default function HomeFooter() {
|
||||
return (
|
||||
<footer className="home-footer">
|
||||
<div className="home-footer-inner">
|
||||
<div className="home-footer-links">
|
||||
<Text className="home-footer-link">联系我们</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">隐私政策</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">使用须知</Text>
|
||||
<span className="home-footer-sep">|</span>
|
||||
<Text className="home-footer-link">网站地图</Text>
|
||||
</div>
|
||||
<div className="home-footer-meta">
|
||||
<Text>版权所有：深圳火蚁木木科技有限公司</Text>
|
||||
<Text>备案号：（注册中...）</Text>
|
||||
</div>
|
||||
<div className="home-footer-meta">
|
||||
<div className="home-footer-icp">
|
||||
<span className="home-footer-icp-icon" aria-hidden="true" />
|
||||
<Text>安备号：（注册中...）</Text>
|
||||
</div>
|
||||
<Text>联系方式：redhare@redhare.cc</Text>
|
||||
<Text>办公地址：深圳市南山区粤海街道海滨二路99号</Text>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from "react";
|
||||
import { Button, Divider, Dropdown, Menu, Space, Typography } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import logoWhite from "../../assets/images/redhare.png";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
|
||||
const langItems = [
|
||||
{ key: "zh", label: "中文(简体)" },
|
||||
{ key: "en", label: "English(US)" }
|
||||
];
|
||||
|
||||
export default function HomeHeader() {
|
||||
return (
|
||||
<>
|
||||
<div className="home-brand">
|
||||
<span className="home-logo-wrap">
|
||||
<img className="home-logo" src={logoWhite} alt="Hoyidata" />
|
||||
</span>
|
||||
</div>
|
||||
<Menu
|
||||
className="home-nav-menu"
|
||||
mode="horizontal"
|
||||
items={navItems.map((item) => ({
|
||||
key: item,
|
||||
label: item
|
||||
}))}
|
||||
selectable={false}
|
||||
/>
|
||||
<div className="home-actions">
|
||||
<Dropdown menu={{ items: langItems }} trigger={["hover"]} placement="bottomRight">
|
||||
<Button className="home-lang-trigger" type="text">
|
||||
<Space size={6}>
|
||||
中文(简体)
|
||||
<DownOutlined />
|
||||
</Space>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Divider type="vertical" className="home-divider" />
|
||||
<Text className="home-user">Iriszo</Text>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from "react";
|
||||
import { Layout } from "antd";
|
||||
import HomeHeader from "./header";
|
||||
import HomeContent from "./content";
|
||||
import HomeFooter from "./footer";
|
||||
import "../../css/homecss/index.css";
|
||||
|
||||
const { Header, Content } = Layout;
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Layout className="home">
|
||||
<Header className="home-header">
|
||||
<HomeHeader />
|
||||
</Header>
|
||||
<Content>
|
||||
<HomeContent />
|
||||
</Content>
|
||||
<HomeFooter />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
body {
|
||||
background: #f5f7fb;
|
||||
color: #1f2a37;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TencentW7";
|
||||
src: url("../../assets/fonts/tencent-W7.407ed34a.otf") format("opentype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.home {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -1,83 +1,3 @@
|
|||
body {
|
||||
background: #f5f7fb;
|
||||
color: #1f2a37;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TencentW7";
|
||||
src: url("../assets/fonts/tencent-W7.407ed34a.otf") format("opentype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.home {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 24px;
|
||||
height: 56px;
|
||||
gap: 24px;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.home-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-logo-wrap {
|
||||
height: 56px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
height: auto;
|
||||
width: 108px;
|
||||
display: block;
|
||||
transform: scale(1.4);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.home-nav-menu {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.home-nav-menu .ant-menu-item {
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-lang-trigger {
|
||||
font-size: 12px;
|
||||
color: #1f2a37;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.home-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #d0d7e2;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
background-color: rgb(243, 247, 252);
|
||||
display: flex;
|
||||
|
|
@ -249,6 +169,7 @@ body {
|
|||
object-fit: cover;
|
||||
object-position: center -100px;
|
||||
border-radius: 24px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.home-section-number {
|
||||
|
|
@ -316,39 +237,6 @@ body {
|
|||
background: linear-gradient(135deg, #f2f6ff, #dfe9ff);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.home-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-hero-stats {
|
||||
margin-top: 74px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-logos {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.home-header {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.home-logos,
|
||||
.home-section {
|
||||
padding: 16px 24px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-faqs {
|
||||
width: 100%;
|
||||
background: #f5f7fb;
|
||||
|
|
@ -428,57 +316,3 @@ body {
|
|||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-footer {
|
||||
width: 100%;
|
||||
background: #f5f7fb;
|
||||
border-top: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.home-footer-inner {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 18px 0 28px;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.home-footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
color: #1f2a37;
|
||||
}
|
||||
|
||||
.home-footer-link {
|
||||
color: #1f2a37;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home-footer-sep {
|
||||
color: #c7ced9;
|
||||
}
|
||||
|
||||
.home-footer-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.home-footer-icp {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.home-footer-icp-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: url("https://d149xzut2sq6e3.cloudfront.net/upload/a98075c1.png")
|
||||
center/contain no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.home-footer {
|
||||
width: 100%;
|
||||
background: #f5f7fb;
|
||||
border-top: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.home-footer-inner {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 18px 0 28px;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.home-footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
color: #1f2a37;
|
||||
}
|
||||
|
||||
.home-footer-link {
|
||||
color: #1f2a37;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home-footer-sep {
|
||||
color: #c7ced9;
|
||||
}
|
||||
|
||||
.home-footer-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.home-footer-icp {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.home-footer-icp-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: url("https://d149xzut2sq6e3.cloudfront.net/upload/a98075c1.png")
|
||||
center/contain no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 24px;
|
||||
height: 56px;
|
||||
gap: 24px;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.home-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-logo-wrap {
|
||||
height: 56px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
height: auto;
|
||||
width: 108px;
|
||||
display: block;
|
||||
transform: scale(1.4);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.home-nav-menu {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.home-nav-menu .ant-menu-item {
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-lang-trigger {
|
||||
font-size: 12px;
|
||||
color: #1f2a37;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.home-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #d0d7e2;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "./base.css";
|
||||
@import "./header.css";
|
||||
@import "./content.css";
|
||||
@import "./footer.css";
|
||||
@import "./responsive.css";
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@media (max-width: 1080px) {
|
||||
.home-hero-stats {
|
||||
margin-top: 74px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-logos {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.home-header {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.home-logos,
|
||||
.home-section {
|
||||
padding: 16px 24px 32px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue