113 lines
4.6 KiB
React
113 lines
4.6 KiB
React
|
import React from "react";
|
|||
|
|
|
|||
|
|
export default function Info() {
|
|||
|
|
return (
|
|||
|
|
<section className="flex flex-1 flex-col justify-center container">
|
|||
|
|
<div className="flex flex-row justify-center items-center p-4 gap-8">
|
|||
|
|
<div className="mockup-phone m-0">
|
|||
|
|
<div className="camera"></div>
|
|||
|
|
<div className="display">
|
|||
|
|
<div className="carousel w-64">
|
|||
|
|
<div id="slide1" className="carousel-item relative w-full">
|
|||
|
|
<img
|
|||
|
|
src="./images/info_dongtai.png"
|
|||
|
|
className="w-full object-contain"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|||
|
|
<a href="#slide4" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❮
|
|||
|
|
</a>
|
|||
|
|
<a href="#slide2" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❯
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="slide2" className="carousel-item relative w-full">
|
|||
|
|
<img
|
|||
|
|
src="./images/info_faxian.png"
|
|||
|
|
className="w-full object-contain"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|||
|
|
<a href="#slide1" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❮
|
|||
|
|
</a>
|
|||
|
|
<a href="#slide3" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❯
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="slide3" className="carousel-item relative w-full">
|
|||
|
|
<img
|
|||
|
|
src="./images/info_xiangqin.png"
|
|||
|
|
className="w-full object-contain"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|||
|
|
<a href="#slide2" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❮
|
|||
|
|
</a>
|
|||
|
|
<a href="#slide4" className="btn btn-circle bg-[#FFFFFF1A]">
|
|||
|
|
❯
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-col">
|
|||
|
|
<img className="w-80" src="./images/slogan.png" priority alt="" />
|
|||
|
|
<div className="flex flex-col mt-12">
|
|||
|
|
<p className="text-base text-primary font-medium">
|
|||
|
|
欢迎使用铁粉空间，您的画师信息检索利器！
|
|||
|
|
</p>
|
|||
|
|
<p className="text-base text-white font-medium mt-2">亮点功能：</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
1、搜索作品：
|
|||
|
|
<span className="text-secondary">发现您喜欢的画师及其作品。</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
2、微信添加：
|
|||
|
|
<span className="text-secondary">
|
|||
|
|
轻松关注画师，了解创作背后的故事。
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
3、个性化推荐：
|
|||
|
|
<span className="text-secondary">
|
|||
|
|
智能推荐符合您口味的画师和作品。
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-base text-white font-medium mt-4">
|
|||
|
|
为何选择我们？
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
1、全面覆盖：
|
|||
|
|
<span className="text-secondary">
|
|||
|
|
汇聚多领域优秀画师，满足您的多样需求。
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
2、简单易用：
|
|||
|
|
<span className="text-secondary">直观设计，让您轻松畅享。</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
3、隐私安全：
|
|||
|
|
<span className="text-secondary">
|
|||
|
|
严格保护用户隐私，使用放心。
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-secondary mt-1">
|
|||
|
|
4、持续更新：
|
|||
|
|
<span className="text-secondary">
|
|||
|
|
新功能不断推出，让您的体验更上一层楼。
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="text-base text-primary font-medium mt-4">
|
|||
|
|
下载铁粉空间APP，发现更多艺术之美！
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|