---
import Layout from "../layouts/Layout.astro";
import { Image } from "astro:assets";
---

<Layout>
	<!--count -->
	<section class="ft-drk bg-shape-after sec-pad-lg text-center light">
		<div class="sec-pad-sm"></div>
		<div class="container">
			<div class="row">
				<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
					<h4>为什么选择我们</h4>
				</div>
				<div class="row ft-dark grad-orange pt-0">
					<div class="col-md-10 col-md-offset-1">
						<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
							<div class="item">
								<div class="icon">
									<img alt="" src="image/icon-4.png">
								</div>
								<h5 class="heading">4.5 分</h5>
								<p>平均评分</p>
							</div>
						</div>
						<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
							<div class="item">
								<div class="icon">
									<img alt="" src="image/icon-5.png">
								</div>
								<h4 class="heading">100000+</h4>
								<p>应用商店总下载量</p>
							</div>
						</div>
						<div class="col-sm-4 wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
							<div class="item">
								<div class="icon">
									<img alt="" src="image/icon-6.png">
								</div>
								<h4 class="heading">10000+</h4>
								<p>用户总数</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End -->
	<!-- Tools -->
	<section class="tools bg-grad-shad sec-pad-lg">
		<div class="sec-pad-lg pb-0">
			<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
				<h4>我们的合作商</h4>
				<div class="spce"></div>
				<p class="large fx-wdth">支持各大手机厂商及主流软件。您可在各大应用商店下载。</p>
			</div>
			<div class="owl-carousel pb-0 tools-carousel wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
				<div class="tools-item">
					<!-- <Image src='huawei.svg' alt={`huawei`} width={100} /> -->
					<img alt="" src="huawei.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="meizu.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="vivo.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="oppo.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="xiaomi.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="weibo.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="baijiahao.svg">
				</div>
				<div class="tools-item">
					<img alt="" src="douyin.svg">
				</div>
			</div>
		</div>
	</section>
	<!-- Overview -->
	<section class="about-section" id="overview">
		<div class="container">
			<div class="row sec-pad pb-0">
				<div class="col-md-10 col-md-offset-1">
					<div class="flx-container res-center-sm align-flx-center flx-off-xs row">
						<div class="col-sm-8 col-md-7 res-margin-sm">
							<div class="overview-img wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
								<img alt="" src="image/img-10.jpg">
							</div>
						</div>
						<div class="col-sm-4 col-md-5">
							<div class="overview-text wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
								<div class="text">
									<h4>名师讲书</h4>
									<div class="spce"></div>
									<p>名师带您走进书的世界，大咖引领您探索智慧的边界，一场不可错过的视听盛宴即将开启。</p>
									<div class="spce sm"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row sec-pad pt-0">
				<div class="col-md-10 col-md-offset-1">
					<div class="flx-container res-center-sm align-flx-center flx-off-xs row">
						<div class="col-sm-4 col-md-5 res-margin-sm">
							<div class="overview-text wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
								<div class="text">
									<h4>授课专业，每周上新</h4>
									<div class="spce"></div>
									<p>精品直播呈现，权威师资授课，每周准时更新，为你持续输送优质内容。</p>
									<div class="spce"></div>
									<!-- <a href="#" class="btn grdnt-orange">Get It Now</a> -->
								</div>
							</div>
						</div>
						<div class="col-sm-8 col-md-7 res-margin-sm">
							<div class="overview-img fr wow animated fadeInUp" data-wow-duration="1.2s" data-wow-delay=".2s">
								<img alt="" src="image/img-11.png">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- // -->
	<!-- FAQS-->
	<section class="sec-pad-lg bg-dark light">
		<div class="container">
			<div class="row">
				<div class="row">
					<div class="col-md-10 col-md-offset-1">
						<div class="faq-wrapper row">
							<div class="text-center section-text wow animated fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
								<h4>常见问题</h4>
								<div class="spce"></div>
								<p class="large fx-wdth">为您整理了览屿app的常见问题，让您可以快速找到答案。</p>
							</div>
							<div class="row">
								<div class="faq-items right-dir-col col-md-8">
									<div class="col-sm-6 res-margin-sm wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>如何下载安装?</h5>
											<p>您可以在各大手机的应用商店进行下载安装。</p>
										</div>
									</div>
									<div class="col-sm-6 wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>软件免费吗?</h5>
											<p>软件内有免费的课程供您学习，您也可以升级成会员解锁更多功能。</p>
										</div>
									</div>
									<div class="spce lg"></div>
									<div class="col-sm-6 res-margin-sm wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>能否下载后无网络收听?</h5>
											<p>软件支持下载后离线浏览。</p>
										</div>
									</div>
									<div class="col-sm-6 wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>关于会员</h5>
											<p>关于会员的问题可以联系客服热线:400-180-1950。我们会有专门人员对您一对一解答。</p>
										</div>
									</div>
									<div class="spce lg"></div>
									<div class="col-sm-6 wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>如何联系客服人员?</h5>
											<p>您可以拨打我们的7 * 24小时客服热线:400-180-1950。</p>
										</div>
									</div>
									<div class="col-sm-6 res-margin-sm wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".2s">
										<div class="icon-bg-sm grdnt-orange">
											<span class="clip-txt">?</span>
										</div>
										<div class="text">
											<h5>是个什么平台?</h5>
											<p>是一款非常好用的学习办公的软件,这款软件里面包含的非常多丰富的学习办公的软件,这里面的可以很好的满足更多用户的稀罕的,可以在这里面提升更多的学习的氛围的。</p>
										</div>
									</div>
								</div>
								<div class="img-pre col-md-4 wow  fadeInUp animated" data-wow-duration="1.2s" data-wow-delay=".3s">
									<img alt="" src="image/img-faq.png">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- -->
</Layout>
<style>
	.overview-img {
		max-width: 300px;
	}

	.fr {
		float: right;
	}

	.tools-item img{
		padding: 1.5rem;
	}

	.row {
		margin-left: unset;
		margin-right: unset;
	}
</style>