113 lines
4.6 KiB
JavaScript
113 lines
4.6 KiB
JavaScript
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>
|
||
);
|
||
}
|