---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_5.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getTp5Extra } from "../../../../utils/config";
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
import { newsIndex } from "../../../../utils/rpc";
const config = getConfig(Astro)
const extra = getTp5Extra(config.app_extra_tag);
const {code, data} = await newsIndex(config.id, 3);

const breadcrumb = [{
    title: TP2_COLUMN_INDEX,
    url: TP2_COLUMN_INDEX_URL
}]
---

<Layout
    title={`${config.app_name}`}
    description={config.app_description}
    keywords={config.app_keywords}
    breadcrumb={breadcrumb}
>

<section class="banner-section" slot="banner-slot">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="banner_content" data-aos="fade-down">
                    <h1>知屿寻光    </h1>
                    <h3 class="text-white">学徒追光，知海寻明</h3>
                    <p class="text-white">"知屿寻光"是一款融合课程学习与阅读功能的综合平台，专为热爱知识和自我提升的用户打造。平台汇聚了各类精品课程、书籍、讲座等资源，涵盖了从文学艺术到科技创新、从职场技能到个人成长等多个领域，满足不同用户的学习需求。我们致力于为用户提供多元化的知识获取渠道，无论是通过系统化的课程学习，还是通过随时随地的书籍阅读，都能帮助用户轻松提升自我、拓宽视野。平台不仅注重知识的深度与专业性，还鼓励用户参与其中，分享与交流，激发学习动力和创造力。</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="banner_wrapper2">
                    <figure class="mb-0 bannerphoneback">
                        <img src="./template_5/images/bannerphoneback-image1.png" alt="">
                    </figure>
                    <figure class="mb-0 bannerphone2" >
                        <img class="img-fluid" src="./template_5/images/bannerphone2-img.png" alt="">
                    </figure>
                    <figure class="mb-0 bannerphone-circleicon">
                        <img src="./template_5/images/bannerphone-circleicon.png" alt="">
                    </figure> 
                    <figure class="mb-0 bannerphone-circle">
                        <img class="img-fluid" src="./template_5/images/bannerphone-circle.png" alt="">
                    </figure>
                    <figure class="mb-0 bannerphone1">
                        <img src="./template_5/images/bannerphone1-img.png" alt="">
                    </figure> 
                </div>
            </div>
        </div>
        <figure class="mb-0 bannersidecircle1" data-aos="fade-left">
            <img src="./template_5/images/banner-sidecircle1.png" alt="">
        </figure>
        <figure class="mb-0 bannersidecircle2" data-aos="fade-left">
            <img src="./template_5/images/banner-sidecircle2.png" alt="">
        </figure>
    </div>    
</section>
<!-- Partner -->
<div class="partner-section d-none d-lg-inline"> 
    <div class="container">
        <div class="partner_box" data-aos="fade-up">
            <ul class="mb-0 list-unstyled">
                <li>
                    <figure class="mb-0 partner1 partner2">
                        <Image class="shareIcon" height={50} width={50} alt="huawei" src={`/common/huawei.svg`} />
                    </figure>
                </li>
                <li>
                    <figure class="mb-0 partner1 partner3">
                        <Image class="shareIcon" height={50} width={50} alt="vivo" src={`/common/vivo.svg`} />
                    </figure>
                </li>
                <li>
                    <figure class="mb-0 partner1 partner4">
                        <Image class="shareIcon" height={50} width={50} alt="xiaomi" src={`/common/xiaomi.svg`} />
                    </figure>
                </li>
                <li>
                    <figure class="mb-0 partner1 partner5">
                        <Image class="shareIcon" height={50} width={50} alt="oppo" src={`/common/oppo.svg`} />
                    </figure>
                </li>
                <li>
                    <figure class="mb-0 partner1 partner5">
                        <Image class="shareIcon" height={50} width={50} alt="meizu" src={`/common/meizu.svg`} />
                    </figure>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- About Us -->
<section class="aboutus-section overflow-hidden">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                <div class="aboutus_content">
                    <h4>关于我们</h4>
                    <h2 class="mb-0 ">为什么选择我们</h2>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12 col-12">
                <div class="aboutus_text" data-aos="fade-left">
                    <p class="mb-0 ">我们努力以专业目全面的课程体系设置，全方位满足用户多样化的学习需求，助力用户在不同知识与技能维度实现自我提升。</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Features -->
<section class="basic-feature" id="basic-feature">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="feature_wrapperleft">
                    <figure class="mb-0 feature-circle">
                        <img class="img-fluid" src="./template_5/images/feature-circle.png" alt="">
                    </figure>
                    <figure class="mb-0 featurephoneback">
                        <img src="./template_5/images/featurephoneback-img.png" alt="">
                    </figure>
                    <figure class="mb-0 featurephone">
                        <img class="img-fluid" src="./template_5/images/featurephone-img.png" alt="">
                    </figure>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="feature_wrapperright">
                    <div class="feature_content">
                        <h4>专注于产品自身</h4>
                        <h2>我们具有以下优势</h2>
                    </div>
                    <div class="feature_lowercontent" data-aos="fade-up">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                <div class="feature-box">
                                    <figure class="feature-marketicon">
                                        <img src="./template_5/images/feature-marketicon.png" alt="" class="img-fluid">
                                    </figure> 
                                    <h6>丰富的书籍资源</h6>
                                    <p class="text-size-18 mb-0">涵盖哲学系列、名人史迹、历史研究、地域文明、文化理论。</p>
                                </div>   
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                <div class="feature-design">
                                    <div class="feature-box">
                                        <figure class="feature-graphicon feature-box-2">
                                            <img src="./template_5/images/feature-graphicon.png" alt="" class="img-fluid">
                                        </figure>
                                        <h6>离线阅读</h6>
                                        <p class="text-size-18 mb-0">支持离线阅读，无网络也能畅游书海。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="feature-downcontent">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                    <div class="feature-box">
                                        <figure class="feature-graphicon feature-box-3">
                                            <img src="./template_5/images/feature-supporticon.png" alt="" class="img-fluid">
                                        </figure>
                                        <h6>深度视频课程</h6>
                                        <p class="text-size-18 mb-0">理解世界的本质逻辑，开阔视野，了解多元文明。</p>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                    <div class="feature-design feature-guide">
                                        <div class="feature-box">
                                            <figure class="feature-guideicon feature-box-4">
                                                <img src="./template_5/images/feature-guideicon.png" alt="" class="img-fluid">
                                            </figure>
                                            <h6>提供全天候服务支持</h6>
                                            <p class="text-size-18 mb-0">提供7×24小时在线咨询服务，第一时间获得解答和支持。</p> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Ease of Search -->
<section class="search-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="search_content" data-aos="fade-up">
                    <figure class="search-icon">
                        <img src="./template_5/images/search-icon.png" alt="" class="img-fluid">
                    </figure>
                    <h2>丰富的阅读种类</h2>
                    <p>"知屿寻光"提供丰富的阅读种类，涵盖多个领域，助力个人成长与全方位提升。无论是探索个人成长的心灵修养，还是深入社会人文的思考，亦或学习经济管理与职场效能的实用知识，平台都为您精心推荐相关书籍。通过多元化的阅读资源，您将获得关于人际沟通的技巧、领导力的提升，以及工作效率的优化，帮助您在个人与职业生活中不断取得突破与进步。</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="search_wrapper">
                    <figure class="mb-0 search-sidecircle">
                        <img class="img-fluid" src="./template_5/images/search-sidecircle.png" alt="">
                    </figure>
                    <figure class="mb-0 search-phoneback">
                        <img src="./template_5/images/search-phoneback.png" alt="">
                    </figure>
                    <figure class="mb-0 search-phone1">
                        <img class="img-fluid" src="./template_5/images/search-phone1.png" alt="">
                    </figure>
                    <figure class="mb-0 search-phone2">
                        <img class="img-fluid" src="./template_5/images/search-phone2.png" alt="">
                    </figure>
                </div>
            </div>
        </div>
<!-- Manage -->
        <div class="manage-section">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-1 order-2">
                   <div class="manage_wrapper">
                        <figure class="mb-0 manage-sidecircle">
                            <img class="img-fluid" src="./template_5/images/manage-sidecircle.png" alt="">
                        </figure>
                        <figure class="mb-0 manage-phoneback">
                            <img src="./template_5/images/manage-phoneback.png" alt="">
                        </figure>
                        <figure class="mb-0 manage-phone2">
                            <img class="img-fluid" src="./template_5/images/manage-phone2.png" alt="">
                        </figure>
                        <figure class="mb-0 manage-phone1">
                            <img class="img-fluid" src="./template_5/images/manage-phone1.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-2 order-1">
                    <div class="manage_content" data-aos="fade-up">
                        <figure class="search-icon manage-icon">
                            <img src="./template_5/images/manage-icon.png" alt="" class="img-fluid">
                        </figure>
                        <h2>个性化推荐系统</h2>
                        <p>通过深入分析用户的阅读历史和兴趣偏好，我们的智能推荐系统能够精准地为您推荐与您口味相符的书籍。无论是您经常阅读的类型还是您尚未接触的新领域，系统都会为您精心挑选相关内容，帮助您发掘更多感兴趣的书籍。这样，您可以轻松拓展阅读范围，享受更加个性化和丰富的阅读体验。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- statistics -->
<section class="statistics-section" id="statistics">
    <div class="container">
        <figure class="mb-0 statistics-sidelayer">
            <img src="./template_5/images/statistics-sidelayer.png" alt="">
        </figure>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="statistics_content">
                    <h4 class="text-white">我们努力做得更好</h4>
                    <h2 class="text-white">持续创新，用户至上</h2>
                    <p class="text-white">我们不仅注重于产品自身，更注重于用户的体验。</p>
                </div>
            </div>
        </div>
        <div class="statistics-value" data-aos="fade-down">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="number1">
                        <span class="value1 counter">500000</span>
                        <sup class="mb-0 plus">+</sup>
                        <span class="text1">累计下载次数</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="number1">
                        <span class="value1 counter">25</span>
                        <sup class="mb-0 plus">+</sup>
                        <span class="text1 text2">学习课程</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="number1">
                        <span class="value1 counter">6</span>
                        <sup class="mb-0 plus">大</sup>
                        <span class="mb-0 text1 text3">课程分类</span>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="number1 number4">
                        <span class="value1 counter">7</span>
                        <sup class="mb-0 plus">24</sup>
                        <span class="mb-0 text1 text4">在线服务</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Available -->
<section class="available-section" id="get-app">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-7 col-sm-12 col-12">
                <div class="available_content">
                    <h2 class="text-white">在各大应用商店中下载</h2>
                    <p class="text-white">知屿寻光是一款全新推出的智能应用，致力于为用户提供精准的内容推荐和个性化服务。现在，您可以通过各大应用平台轻松下载并体验，为您的生活增添更多色彩与便利。</p>
                </div>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-12 col-12">
                <div class="available_wrapper">
                    <figure class="mb-0 available-phone1">
                        <img class="img-fluid" src="./template_5/images/available-phone1.png" alt="">
                    </figure>
                    <figure class="mb-0 available-phone3">
                        <img src="./template_5/images/available-phone3.png" alt="">
                    </figure>
                </div>
            </div>
        </div>
        <figure class="mb-0 available-phone2">
            <img class="img-fluid" src="./template_5/images/available-phone2.png" alt="">
        </figure>
        <figure class="mb-0 available-sidelayer">
            <img src="./template_5/images/available-sidelayer.png" alt="">
        </figure>
    </div>
</section>		
</Layout>
<style>
    .partner_box ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    @media screen and (max-width: 991px) {
        .partner_box ul {
            justify-content: unset;
        }
}
</style>