1347 lines
66 KiB
PHP
1347 lines
66 KiB
PHP
@extends('user.template')
|
|
|
|
@section('content')
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container d-flex flex-column justify-content-center align-items-center text-center position-relative">
|
|
<h1>Selamat Datang di <span>SIG TPS</span></h1>
|
|
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
|
<div class="d-flex">
|
|
<a href="#about" class="btn-get-started scrollto">Lihat Peta</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>Watch Video</span></a> -->
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Featured Services Section -->
|
|
<section id="featured-services" class="featured-services section">
|
|
<div class="container">
|
|
|
|
<!-- Section Title -->
|
|
<div class="section-title text-center" data-aos="fade-up">
|
|
<h2>Timbulan Sampah</h2>
|
|
<p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per hari</strong>.</p>
|
|
</div>
|
|
|
|
<div class="row gy-4">
|
|
|
|
<!-- Total Timbulan Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-trash2 icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>23,893.07</h1>
|
|
<p><strong>Total Timbulan Sampah</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sampah Dikelola -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-gear icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>7,479.65</h1>
|
|
<p><strong>Total Sampah Dikelola</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sampah Didaur Ulang -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-recycle icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>2,780.05</h1>
|
|
<p><strong>Total Sampah Didaur Ulang</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sisa Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-exclamation-triangle icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>13,633.35</h1>
|
|
<p><strong>Total Sisa Sampah</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /Featured Services Section -->
|
|
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Tentang</h2>
|
|
<p>Sistem Informasi Geografis yang menampilkan data lokasi secara visual dan interaktif.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<div class="col-lg-5">
|
|
<div class="about-img">
|
|
<img src="{{ asset('assets/user/img/about-portrait.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
|
|
|
|
<!-- Tabs -->
|
|
<!-- <ul class="nav nav-pills mb-3">
|
|
<li><a class="nav-link active" data-bs-toggle="pill" href="#about-tab1">Saepe fuga</a></li>
|
|
<li><a class="nav-link" data-bs-toggle="pill" href="#about-tab2">Voluptates</a></li>
|
|
<li><a class="nav-link" data-bs-toggle="pill" href="#about-tab3">Corrupti</a></li>
|
|
</ul> -->
|
|
<!-- End Tabs -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane fade show active" id="about-tab1">
|
|
|
|
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Peta Interaktif Lokasi TPS</h4>
|
|
</div>
|
|
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Informasi TPS Lengkap</h4>
|
|
</div>
|
|
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Layanan Aduan TPS</h4>
|
|
</div>
|
|
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
|
|
|
|
</div><!-- End Tab 1 Content -->
|
|
|
|
<!-- <div class="tab-pane fade" id="about-tab2">
|
|
|
|
<p class="fst-italic">Consequuntur inventore voluptates consequatur aut vel et. Eos doloribus expedita. Sapiente atque consequatur minima nihil quae aspernatur quo suscipit voluptatem.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Repudiandae rerum velit modi et officia quasi facilis</h4>
|
|
</div>
|
|
<p>Laborum omnis voluptates voluptas qui sit aliquam blanditiis. Sapiente minima commodi dolorum non eveniet magni quaerat nemo et.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Incidunt non veritatis illum ea ut nisi</h4>
|
|
</div>
|
|
<p>Non quod totam minus repellendus autem sint velit. Rerum debitis facere soluta tenetur. Iure molestiae assumenda sunt qui inventore eligendi voluptates nisi at. Dolorem quo tempora. Quia et perferendis.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Omnis ab quia nemo dignissimos rem eum quos..</h4>
|
|
</div>
|
|
<p>Eius alias aut cupiditate. Dolor voluptates animi ut blanditiis quos nam. Magnam officia aut ut alias quo explicabo ullam esse. Sunt magnam et dolorem eaque magnam odit enim quaerat. Vero error error voluptatem eum.</p>
|
|
|
|
</div> -->
|
|
<!-- End Tab 2 Content -->
|
|
|
|
<!-- <div class="tab-pane fade" id="about-tab3">
|
|
|
|
<p class="fst-italic">Consequuntur inventore voluptates consequatur aut vel et. Eos doloribus expedita. Sapiente atque consequatur minima nihil quae aspernatur quo suscipit voluptatem.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Repudiandae rerum velit modi et officia quasi facilis</h4>
|
|
</div>
|
|
<p>Laborum omnis voluptates voluptas qui sit aliquam blanditiis. Sapiente minima commodi dolorum non eveniet magni quaerat nemo et.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Incidunt non veritatis illum ea ut nisi</h4>
|
|
</div>
|
|
<p>Non quod totam minus repellendus autem sint velit. Rerum debitis facere soluta tenetur. Iure molestiae assumenda sunt qui inventore eligendi voluptates nisi at. Dolorem quo tempora. Quia et perferendis.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Omnis ab quia nemo dignissimos rem eum quos..</h4>
|
|
</div>
|
|
<p>Eius alias aut cupiditate. Dolor voluptates animi ut blanditiis quos nam. Magnam officia aut ut alias quo explicabo ullam esse. Sunt magnam et dolorem eaque magnam odit enim quaerat. Vero error error voluptatem eum.</p>
|
|
|
|
</div> -->
|
|
<!-- End Tab 3 Content -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /About Section -->
|
|
|
|
<!-- Clients Section -->
|
|
<!-- <section id="clients" class="clients section">
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="row gy-4">
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-1.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-2.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-3.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-4.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-5.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-6.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> -->
|
|
<!-- /Clients Section -->
|
|
|
|
<!-- Call To Action Section -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
/* Hilangkan padding section */
|
|
#call-to-action.call-to-action {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Container dibuat flex agar map bisa center */
|
|
#call-to-action .container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* Wrapper card map modern */
|
|
.map-wrapper {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
/* agar map di tengah */
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Map full card */
|
|
#mapTPS {
|
|
width: 100%;
|
|
height: 450px;
|
|
}
|
|
|
|
/* Zoom Button Modern */
|
|
.leaflet-control-zoom {
|
|
border-radius: 10px !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Popup Modern */
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 14px !important;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|
|
|
|
<section id="call-to-action" class="call-to-action section">
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="map-wrapper">
|
|
<div id="mapTPS"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: "Leaflet | © OpenStreetMap contributors",
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
var tpsData = [{
|
|
name: "TPS 1 Berbek",
|
|
lat: -7.5978,
|
|
lng: 111.917
|
|
},
|
|
{
|
|
name: "TPS 2 Loceret",
|
|
lat: -7.6280,
|
|
lng: 111.910
|
|
},
|
|
{
|
|
name: "TPS 3 Nganjuk Kota",
|
|
lat: -7.6140,
|
|
lng: 111.900
|
|
}
|
|
];
|
|
|
|
tpsData.forEach(tps => {
|
|
L.marker([tps.lat, tps.lng])
|
|
.addTo(map)
|
|
.bindPopup(`<b style='font-size:16px;'>${tps.name}</b>`);
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- /Call To Action Section -->
|
|
|
|
<!-- Onfocus Section -->
|
|
<!-- <section id="onfocus" class="onfocus section dark-background">
|
|
|
|
<div class="container-fluid p-0" data-aos="fade-up">
|
|
|
|
<div class="row g-0">
|
|
<div class="col-lg-6 video-play position-relative">
|
|
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox pulsating-play-btn"></a>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="content d-flex flex-column justify-content-center h-100">
|
|
<h3>Voluptatem dignissimos provident quasi corporis</h3>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
<a href="#" class="read-more align-self-start"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> -->
|
|
<!-- /Onfocus Section -->
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="features section">
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<ul class="nav nav-tabs row gy-4 d-flex justify-content-center">
|
|
|
|
<!-- TPS -->
|
|
<li class="nav-item col-6 col-md-4 col-lg-2">
|
|
<a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#tab-tps">
|
|
<i class="bi bi-geo-alt-fill" style="color: #FF7A21;"></i>
|
|
<h4>TPS</h4>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- TPA -->
|
|
<li class="nav-item col-6 col-md-4 col-lg-2">
|
|
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-tpa">
|
|
<i class="bi bi-recycle" style="color: #FF7A21;"></i>
|
|
<h4>TPA</h4>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- TPSR -->
|
|
<li class="nav-item col-6 col-md-4 col-lg-2">
|
|
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-tps3r">
|
|
<i class="bi bi-building-check" style="color: #FF7A21;"></i>
|
|
<h4>TPS3R</h4>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane fade active show" id="tab-tps">
|
|
<div class="row gy-4">
|
|
|
|
<!-- Keterangan -->
|
|
<div class="col-lg-8 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
|
|
<h3>Tempat Pembuangan Sementara (TPS)</h3>
|
|
<p class="fst-italic">
|
|
TPS merupakan lokasi penampungan awal sampah sebelum dipindahkan menuju TPA atau TPS3R.
|
|
Keberadaan TPS sangat penting dalam menjaga kebersihan lingkungan dan mendukung sistem persampahan
|
|
di Kabupaten Nganjuk agar proses pengelolaan berjalan lebih efektif.
|
|
</p>
|
|
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Digunakan sebagai lokasi penampungan sampah sementara dari masyarakat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Memudahkan petugas dalam proses pengangkutan menuju TPA.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Membantu mengurangi penumpukan sampah di area pemukiman dan fasilitas umum.</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Sebaran TPS di Kabupaten Nganjuk dapat membantu pemerintah daerah dalam memonitor kapasitas, lokasi strategis,
|
|
dan kebutuhan pembangunan TPS baru. Peta ini menampilkan titik-titik TPS yang tersebar di setiap kecamatan sehingga
|
|
dapat dianalisis lebih lanjut dalam proses perencanaan infrastruktur persampahan.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Gambar ilustrasi -->
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center" data-aos="fade-up" data-aos-delay="200">
|
|
<img src="{{ asset('assets/user/img/features-1.svg') }}" alt="TPS Illustration" class="img-fluid">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content 1 -->
|
|
|
|
<div class="tab-pane fade" id="tab-tpa">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<h3>Undaesenti</h3>
|
|
<p>
|
|
Ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Provident mollitia neque rerum asperiores dolores quos qui a. Ipsum neque dolor voluptate nisi sed.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center">
|
|
<img src="{{ asset('assets/user/img/features-2.svg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div><!-- End Tab Content 2 -->
|
|
|
|
<div class="tab-pane fade" id="tab-tps3r">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<h3>Pariatur</h3>
|
|
<p>
|
|
Ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Provident mollitia neque rerum asperiores dolores quos qui a. Ipsum neque dolor voluptate nisi sed.</li>
|
|
</ul>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center">
|
|
<img src="{{ asset('assets/user/img/features-3.svg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div><!-- End Tab Content 3 -->
|
|
|
|
<div class="tab-pane fade" id="features-tab-4">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<h3>Nostrum</h3>
|
|
<p>
|
|
Ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center">
|
|
<img src="{{ asset('assets/user/img/features-4.svg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div><!-- End Tab Content 4 -->
|
|
|
|
<div class="tab-pane fade" id="features-tab-5">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<h3>Adipiscing</h3>
|
|
<p>
|
|
Ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center">
|
|
<img src="{{ asset('assets/user/img/features-5.svg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div><!-- End Tab Content 5 -->
|
|
|
|
<div class="tab-pane fade" id="features-tab-6">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-8 order-2 order-lg-1">
|
|
<h3>Reprehit</h3>
|
|
<p>
|
|
Ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-4 order-1 order-lg-2 text-center">
|
|
<img src="{{ asset('assets/user/img/features-6.svg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div><!-- End Tab Content 6 -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Features Section -->
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Jenis Tempat Pembuangan Sampah</h2>
|
|
<p>Terdapat 3 macam tempat pembuangan sampah</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-5">
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-activity"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pembuangan Sampah</h3>
|
|
</a>
|
|
<p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-2.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-broadcast"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pengolahan Sampah Reduce, Reuse, Recycle</h3>
|
|
</a>
|
|
<p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="400">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-3.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-easel"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pembuangan Akhir</h3>
|
|
</a>
|
|
<p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="500">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-4.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-bounding-box-circles"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Asperiores Commodit</h3>
|
|
</a>
|
|
<p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p>
|
|
<a href="service-details.html" class="stretched-link"></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="600">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-5.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-calendar4-week"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Velit Doloremque</h3>
|
|
</a>
|
|
<p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p>
|
|
<a href="service-details.html" class="stretched-link"></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="700">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-6.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-chat-square-text"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Dolori Architecto</h3>
|
|
</a>
|
|
<p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p>
|
|
<a href="service-details.html" class="stretched-link"></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Services Section -->
|
|
|
|
<!-- Testimonials Section -->
|
|
<section id="testimonials" class="testimonials section dark-background">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Testimonials</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<img src="{{ asset('assets/user/img/testimonials-bg.jpg') }}" class="testimonials-bg" alt="">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="swiper init-swiper">
|
|
<script type="application/json" class="swiper-config">
|
|
{
|
|
"loop": true,
|
|
"speed": 600,
|
|
"autoplay": {
|
|
"delay": 5000
|
|
},
|
|
"slidesPerView": "auto",
|
|
"pagination": {
|
|
"el": ".swiper-pagination",
|
|
"type": "bullets",
|
|
"clickable": true
|
|
}
|
|
}
|
|
</script>
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="{{ asset('assets/user/img/testimonials/testimonials-1.jpg') }}" class="testimonial-img" alt="">
|
|
<h3>Saul Goodman</h3>
|
|
<h4>Ceo & Founder</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="{{ asset('assets/user/img/testimonials/testimonials-2.jpg') }}" class="testimonial-img" alt="">
|
|
<h3>Sara Wilsson</h3>
|
|
<h4>Designer</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="{{ asset('assets/user/img/testimonials/testimonials-3.jpg') }}" class="testimonial-img" alt="">
|
|
<h3>Jena Karlis</h3>
|
|
<h4>Store Owner</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="{{ asset('assets/user/img/testimonials/testimonials-4.jpg') }}" class="testimonial-img" alt="">
|
|
<h3>Matt Brandon</h3>
|
|
<h4>Freelancer</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="swiper-slide">
|
|
<div class="testimonial-item">
|
|
<img src="{{ asset('assets/user/img/testimonials/testimonials-5.jpg') }}" class="testimonial-img" alt="">
|
|
<h3>John Larson</h3>
|
|
<h4>Entrepreneur</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Testimonials Section -->
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="pricing section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Our Pricing</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-4">
|
|
|
|
<div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="pricing-item">
|
|
|
|
<div class="pricing-header">
|
|
<h3>Free Plan</h3>
|
|
<h4><sup>$</sup>0<span> / month</span></h4>
|
|
</div>
|
|
|
|
<ul>
|
|
<li><i class="bi bi-dot"></i> <span>Quam adipiscing vitae proin</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nec feugiat nisl pretium</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nulla at volutpat diam uteera</span></li>
|
|
<li class="na"><i class="bi bi-x"></i> <span>Pharetra massa massa ultricies</span></li>
|
|
<li class="na"><i class="bi bi-x"></i> <span>Massa ultricies mi quis hendrerit</span></li>
|
|
</ul>
|
|
|
|
<div class="text-center mt-auto">
|
|
<a href="#" class="buy-btn">Buy Now</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- End Pricing Item -->
|
|
|
|
<div class="col-lg-4" data-aos="zoom-in" data-aos-delay="400">
|
|
<div class="pricing-item featured">
|
|
|
|
<div class="pricing-header">
|
|
<h3>Business Plan</h3>
|
|
<h4><sup>$</sup>29<span> / month</span></h4>
|
|
</div>
|
|
|
|
<ul>
|
|
<li><i class="bi bi-dot"></i> <span>Quam adipiscing vitae proin</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nec feugiat nisl pretium</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nulla at volutpat diam uteera</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Pharetra massa massa ultricies</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Massa ultricies mi quis hendrerit</span></li>
|
|
</ul>
|
|
|
|
<div class="text-center mt-auto">
|
|
<a href="#" class="buy-btn">Buy Now</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- End Pricing Item -->
|
|
|
|
<div class="col-lg-4" data-aos="zoom-in" data-aos-delay="600">
|
|
<div class="pricing-item">
|
|
|
|
<div class="pricing-header">
|
|
<h3>Developer Plan</h3>
|
|
<h4><sup>$</sup>49<span> / month</span></h4>
|
|
</div>
|
|
|
|
<ul>
|
|
<li><i class="bi bi-dot"></i> <span>Quam adipiscing vitae proin</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nec feugiat nisl pretium</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Nulla at volutpat diam uteera</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Pharetra massa massa ultricies</span></li>
|
|
<li><i class="bi bi-dot"></i> <span>Massa ultricies mi quis hendrerit</span></li>
|
|
</ul>
|
|
|
|
<div class="text-center mt-auto">
|
|
<a href="#" class="buy-btn">Buy Now</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- End Pricing Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Pricing Section -->
|
|
|
|
<!-- Faq Section -->
|
|
<section id="faq" class="faq section">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row gy-4">
|
|
|
|
<div class="col-lg-7 d-flex flex-column justify-content-center order-2 order-lg-1">
|
|
|
|
<div class="content px-xl-5" data-aos="fade-up" data-aos-delay="100">
|
|
<h3><span>Frequently Asked </span><strong>Questions</strong></h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit
|
|
</p>
|
|
</div>
|
|
|
|
<div class="faq-container px-xl-5" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<div class="faq-item faq-active">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Non consectetur a erat nam at lectus urna duis?</h3>
|
|
<div class="faq-content">
|
|
<p>Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
<div class="faq-item">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?</h3>
|
|
<div class="faq-content">
|
|
<p>Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
<div class="faq-item">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Dolor sit amet consectetur adipiscing elit pellentesque?</h3>
|
|
<div class="faq-content">
|
|
<p>Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-5 order-1 order-lg-2">
|
|
<img src="{{ asset('assets/user/img/faq.jpg') }}" class="img-fluid" alt="" data-aos="zoom-in" data-aos-delay="100">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Faq Section -->
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="portfolio section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Portfolio</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
|
|
|
|
<ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
|
|
<li data-filter="*" class="filter-active">All</li>
|
|
<li data-filter=".filter-app">App</li>
|
|
<li data-filter=".filter-product">Product</li>
|
|
<li data-filter=".filter-branding">Branding</li>
|
|
<li data-filter=".filter-books">Books</li>
|
|
</ul><!-- End Portfolio Filters -->
|
|
|
|
<div class="row g-0 isotope-container" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/app-1.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/app-1.jpg') }}" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/product-1.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/product-1.jpg') }}" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/branding-1.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/branding-1.jpg') }}" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-books">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/books-1.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/books-1.jpg') }}" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/app-2.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/app-2.jpg') }}" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/product-2.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/product-2.jpg') }}" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/branding-2.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/branding-2.jpg') }}" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-books">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/books-2.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/books-2.jpg') }}" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/app-3.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/app-3.jpg') }}" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/product-3.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/product-3.jpg') }}" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/branding-3.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/branding-3.jpg') }}" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6 portfolio-item isotope-item filter-books">
|
|
<div class="portfolio-content h-100">
|
|
<img src="{{ asset('assets/user/img/portfolio/books-3.jpg') }}" class="img-fluid" alt="">
|
|
<div class="portfolio-info">
|
|
<a href="{{ asset('assets/user/img/portfolio/books-3.jpg') }}" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
|
|
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Portfolio Item -->
|
|
|
|
</div><!-- End Portfolio Container -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Portfolio Section -->
|
|
|
|
<!-- Team Section -->
|
|
<section id="team" class="team section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Our Team</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-5">
|
|
|
|
<div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="team-member">
|
|
<div class="member-img">
|
|
<img src="{{ asset('assets/user/img/team/team-1.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="member-info">
|
|
<div class="social">
|
|
<a href=""><i class="bi bi-twitter-x"></i></a>
|
|
<a href=""><i class="bi bi-facebook"></i></a>
|
|
<a href=""><i class="bi bi-instagram"></i></a>
|
|
<a href=""><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
<h4>Walter White</h4>
|
|
<span>Chief Executive Officer</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Team Member -->
|
|
|
|
<div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-delay="400">
|
|
<div class="team-member">
|
|
<div class="member-img">
|
|
<img src="{{ asset('assets/user/img/team/team-2.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="member-info">
|
|
<div class="social">
|
|
<a href=""><i class="bi bi-twitter-x"></i></a>
|
|
<a href=""><i class="bi bi-facebook"></i></a>
|
|
<a href=""><i class="bi bi-instagram"></i></a>
|
|
<a href=""><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
<h4>Sarah Jhonson</h4>
|
|
<span>Product Manager</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Team Member -->
|
|
|
|
<div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-delay="600">
|
|
<div class="team-member">
|
|
<div class="member-img">
|
|
<img src="{{ asset('assets/user/img/team/team-3.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="member-info">
|
|
<div class="social">
|
|
<a href=""><i class="bi bi-twitter-x"></i></a>
|
|
<a href=""><i class="bi bi-facebook"></i></a>
|
|
<a href=""><i class="bi bi-instagram"></i></a>
|
|
<a href=""><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
<h4>William Anderson</h4>
|
|
<span>CTO</span>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Team Member -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Team Section -->
|
|
|
|
<!-- Recent Posts Section -->
|
|
<section id="recent-posts" class="recent-posts section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Recent Blog Posts</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-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
|
|
<article>
|
|
|
|
<div class="post-img">
|
|
<img src="{{ asset('assets/user/img/blog/blog-1.jpg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
|
|
<p class="post-category">Politics</p>
|
|
|
|
<h2 class="title">
|
|
<a href="blog-details.html">Dolorum optio tempore voluptas dignissimos</a>
|
|
</h2>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<img src="{{ asset('assets/user/img/blog/blog-author.jpg') }}" alt="" class="img-fluid post-author-img flex-shrink-0">
|
|
<div class="post-meta">
|
|
<p class="post-author">Maria Doe</p>
|
|
<p class="post-date">
|
|
<time datetime="2022-01-01">Jan 1, 2022</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</article>
|
|
</div><!-- End post list item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
|
|
<article>
|
|
|
|
<div class="post-img">
|
|
<img src="{{ asset('assets/user/img/blog/blog-2.jpg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
|
|
<p class="post-category">Sports</p>
|
|
|
|
<h2 class="title">
|
|
<a href="blog-details.html">Nisi magni odit consequatur autem nulla dolorem</a>
|
|
</h2>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<img src="{{ asset('assets/user/img/blog/blog-author-2.jpg') }}" alt="" class="img-fluid post-author-img flex-shrink-0">
|
|
<div class="post-meta">
|
|
<p class="post-author">Allisa Mayer</p>
|
|
<p class="post-date">
|
|
<time datetime="2022-01-01">Jun 5, 2022</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</article>
|
|
</div><!-- End post list item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
|
|
<article>
|
|
|
|
<div class="post-img">
|
|
<img src="{{ asset('assets/user/img/blog/blog-3.jpg') }}" alt="" class="img-fluid">
|
|
</div>
|
|
|
|
<p class="post-category">Entertainment</p>
|
|
|
|
<h2 class="title">
|
|
<a href="blog-details.html">Possimus soluta ut id suscipit ea ut in quo quia et soluta</a>
|
|
</h2>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<img src="{{ asset('assets/user/img/blog/blog-author-3.jpg') }}" alt="" class="img-fluid post-author-img flex-shrink-0">
|
|
<div class="post-meta">
|
|
<p class="post-author">Mark Dower</p>
|
|
<p class="post-date">
|
|
<time datetime="2022-01-01">Jun 22, 2022</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</article>
|
|
</div><!-- End post list item -->
|
|
|
|
</div><!-- End recent posts list -->
|
|
|
|
</div>
|
|
|
|
</section><!-- /Recent Posts Section -->
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Contact</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="mb-5">
|
|
<iframe style="width: 100%; height: 400px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" allowfullscreen=""></iframe>
|
|
</div><!-- End Google Maps -->
|
|
|
|
<div class="container" data-aos="fade">
|
|
|
|
<div class="row gy-5 gx-lg-5">
|
|
|
|
<div class="col-lg-4">
|
|
|
|
<div class="info">
|
|
<h3>Get in touch</h3>
|
|
<p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi minus.</p>
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Location:</h4>
|
|
<p>A108 Adam Street, New York, NY 535022</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-envelope flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Email:</h4>
|
|
<p>info@example.com</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-phone flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Call:</h4>
|
|
<p>+1 5589 55488 55</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-8">
|
|
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
|
<div class="row">
|
|
<div class="col-md-6 form-group">
|
|
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required="">
|
|
</div>
|
|
<div class="col-md-6 form-group mt-3 mt-md-0">
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required="">
|
|
</div>
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required="">
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
|
</div>
|
|
<div class="my-3">
|
|
<div class="loading">Loading</div>
|
|
<div class="error-message"></div>
|
|
<div class="sent-message">Your message has been sent. Thank you!</div>
|
|
</div>
|
|
<div class="text-center"><button type="submit">Send Message</button></div>
|
|
</form>
|
|
</div><!-- End Contact Form -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
@endsection
|