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 {
|
.home-hero {
|
||||||
background-color: rgb(243, 247, 252);
|
background-color: rgb(243, 247, 252);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -249,6 +169,7 @@ body {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center -100px;
|
object-position: center -100px;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-section-number {
|
.home-section-number {
|
||||||
|
|
@ -316,39 +237,6 @@ body {
|
||||||
background: linear-gradient(135deg, #f2f6ff, #dfe9ff);
|
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 {
|
.home-faqs {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #f5f7fb;
|
background: #f5f7fb;
|
||||||
|
|
@ -428,57 +316,3 @@ body {
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
font-size: 13px;
|
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