tp/public/themes/template3/index.php

369 lines
17 KiB
PHP

<?php
$pageTitle = '首页 - Nova';
$pageDescription = 'Nova Bootstrap Template 的首页';
$pageKeywords = 'home, nova';
require_once __DIR__ . '/header.php';
?>
<!-- Hero Section -->
<section id="hero" class="hero section dark-background">
<img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/hero-bg.jpg" alt="" data-aos="fade-in">
<div class="container">
<div class="row">
<div class="col-xl-4">
<h1 data-aos="fade-up">专注于重要的事情</h1>
<blockquote data-aos="fade-up" data-aos-delay="100">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis cum recusandae eum laboriosam voluptatem repudiandae odio, vel exercitationem officiis provident minima. </p>
</blockquote>
<div class="d-flex" data-aos="fade-up" data-aos-delay="200">
<a href="#about" class="btn-get-started">开始使用</a>
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>观看视频</span></a>
</div>
</div>
</div>
</div>
</section><!-- /Hero Section -->
<!-- Why Us Section -->
<section id="why-us" class="why-us section">
<div class="container">
<div class="row g-0">
<div class="col-xl-5 img-bg" data-aos="fade-up" data-aos-delay="100">
<img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/why-us-bg.jpg" alt="">
</div>
<div class="col-xl-7 slides position-relative" data-aos="fade-up" data-aos-delay="200">
<div class="swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"centeredSlides": true,
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
},
"navigation": {
"nextEl": ".swiper-button-next",
"prevEl": ".swiper-button-prev"
}
}
</script>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">让我们一起成长</h3>
<h4 class="mb-3">Optio reiciendis accusantium iusto architecto at quia minima maiores quidem, dolorum.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, ipsam perferendis asperiores explicabo vel tempore velit totam, natus nesciunt accusantium dicta quod quibusdam ipsum maiores nobis non, eum. Ullam reiciendis dignissimos laborum aut, magni voluptatem velit doloribus quas sapiente optio.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Unde perspiciatis ut repellat dolorem</h3>
<h4 class="mb-3">Amet cumque nam sed voluptas doloribus iusto. Dolorem eos aliquam quis.</h4>
<p>Dolorem quia fuga consectetur voluptatem. Earum consequatur nulla maxime necessitatibus cum accusamus. Voluptatem dolorem ut numquam dolorum delectus autem veritatis facilis. Et ea ut repellat ea. Facere est dolores fugiat dolor.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Aliquid non alias minus</h3>
<h4 class="mb-3">Necessitatibus voluptatibus explicabo dolores a vitae voluptatum.</h4>
<p>Neque voluptates aut. Soluta aut perspiciatis porro deserunt. Voluptate ut itaque velit. Aut consectetur voluptatem aspernatur sequi sit laborum. Voluptas enim dolorum fugiat aut.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Necessitatibus suscipit non voluptatem quibusdam</h3>
<h4 class="mb-3">Tempora quos est ut quia adipisci ut voluptas. Deleniti laborum soluta nihil est. Eum similique neque autem ut.</h4>
<p>Ut rerum et autem vel. Et rerum molestiae aut sit vel incidunt sit at voluptatem. Saepe dolorem et sed voluptate impedit. Ad et qui sint at qui animi animi rerum.</p>
</div>
</div><!-- End slide item -->
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</section><!-- /Why Us Section -->
<!-- Services Section -->
<section id="services" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>我们的服务</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container">
<div class="row gy-4">
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<div class="icon flex-shrink-0"><i class="bi bi-briefcase" style="color: #f57813;"></i></div>
<div>
<h4 class="title">Lorem Ipsum</h4>
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="200">
<div class="icon flex-shrink-0"><i class="bi bi-card-checklist" style="color: #15a04a;"></i></div>
<div>
<h4 class="title">Dolor Sitema</h4>
<p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="300">
<div class="icon flex-shrink-0"><i class="bi bi-bar-chart" style="color: #d90769;"></i></div>
<div>
<h4 class="title">Sed ut perspiciatis</h4>
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="400">
<div class="icon flex-shrink-0"><i class="bi bi-binoculars" style="color: #15bfbc;"></i></div>
<div>
<h4 class="title">Magni Dolores</h4>
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="500">
<div class="icon flex-shrink-0"><i class="bi bi-brightness-high" style="color: #f5cf13;"></i></div>
<div>
<h4 class="title">Nemo Enim</h4>
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="600">
<div class="icon flex-shrink-0"><i class="bi bi-calendar4-week" style="color: #1335f5;"></i></div>
<div>
<h4 class="title">Eiusmod Tempor</h4>
<p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
</div>
</div>
</section><!-- /Services Section -->
<!-- Call To Action Section -->
<section id="call-to-action" class="call-to-action section dark-background">
<img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/cta-bg.jpg" alt="">
<div class="container">
<div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
<div class="col-xl-10">
<div class="text-center">
<h3>联系我们</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="cta-btn" href="#">联系我们</a>
</div>
</div>
</div>
</div>
</section><!-- /Call To Action Section -->
<!-- Features Section -->
<section id="features" class="features section">
<div class="container">
<div class="row">
<div class="col-lg-7" data-aos="fade-up" data-aos-delay="100">
<h3 class="mb-0">强大的功能</h3>
<h3>为您的企业</h3>
<div class="row gy-4">
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-eye" style="color: #ff8b2c;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-infinity" style="color: #5578ff;"></i>
<span>Sit amet consectetur adipisicing</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-mortarboard" style="color: #e80368;"></i>
<span>Ipsum Rerum Explicabo</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-star" style="color: #ffa76e;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-x-diamond" style="color: #11dbcf;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-camera-video" style="color: #4233ff;"></i>
<span>Sit amet consectetur adipisicing</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-brightness-high" style="color: #29cc61;"></i>
<span>Ipsum Rerum Explicabo</span>
</div>
</div><!-- End Icon List Item-->
<div class="col-md-6">
<div class="icon-list d-flex">
<i class="bi bi-activity" style="color: #ff5828;"></i>
<span>Easy Cart Features</span>
</div>
</div><!-- End Icon List Item-->
</div>
</div>
<div class="col-lg-5 position-relative" data-aos="zoom-out" data-aos-delay="200">
<div class="phone-wrap">
<img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/iphone.png" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="details">
<div class="container">
<div class="row">
<div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
<h4>Labore Sdio Lidui<br>Bonde Naruto</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam nostrum molestias doloremque quae delectus odit minima corrupti blanditiis quo animi!</p>
<a href="#about" class="btn-get-started">开始使用</a>
</div>
</div>
</div>
</div>
</section><!-- /Features Section -->
<!-- Recent Posts Section -->
<section id="recent-posts" class="recent-posts section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>最新博客文章</h2>
</div><!-- End Section Title -->
<div class="container">
<div class="row gy-5">
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="post-box">
<div class="post-img"><img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/blog/blog-1.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, December 12</span>
<span class="post-author"> / Julia Parker</span>
</div>
<h3 class="post-title">Eum ad dolor et. Autem aut fugiat debitis</h3>
<p>Illum voluptas ab enim placeat. Adipisci enim velit nulla. Vel omnis laudantium. Asperiores eum ipsa est officiis. Modi qui magni est...</p>
<a href="<?php echo $baseUrl; ?>/blog-details.php" class="readmore stretched-link"><span>阅读更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="post-box">
<div class="post-img"><img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/blog/blog-2.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Fri, September 05</span>
<span class="post-author"> / Mario Douglas</span>
</div>
<h3 class="post-title">Et repellendus molestiae qui est sed omnis</h3>
<p>Voluptatem nesciunt omnis libero autem tempora enim ut ipsam id. Odit quia ab eum assumenda. Quisquam omnis doloribus...</p>
<a href="<?php echo $baseUrl; ?>/blog-details.php" class="readmore stretched-link"><span>阅读更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="600">
<div class="post-box">
<div class="post-img"><img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/blog/blog-3.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, July 27</span>
<span class="post-author"> / Lisa Hunter</span>
</div>
<h3 class="post-title">Quia assumenda est et veritati</h3>
<p>Quia nam eaque omnis explicabo similique eum quaerat similique laboriosam. Quis omnis repellat sed quae consectetur magnam...</p>
<a href="<?php echo $baseUrl; ?>/blog-details.php" class="readmore stretched-link"><span>阅读更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="600">
<div class="post-box">
<div class="post-img"><img src="<?php echo $baseUrl; ?>/themes/template3/assets/img/blog/blog-4.jpg" class="img-fluid" alt=""></div>
<div class="meta">
<span class="post-date">Tue, Sep 16</span>
<span class="post-author"> / Mario Douglas</span>
</div>
<h3 class="post-title">Pariatur quia facilis similique deleniti</h3>
<p>Et consequatur eveniet nam voluptas commodi cumque ea est ex. Aut quis omnis sint ipsum earum quia eligendi...</p>
<a href="<?php echo $baseUrl; ?>/blog-details.php" class="readmore stretched-link"><span>阅读更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section><!-- /Recent Posts Section -->
</main>
<?php require_once __DIR__ . '/footer.php'; ?>