e41220949
/
TIF_NGANJUK_E41220949
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

landing page

This commit is contained in:
rahmagustin 2025-11-29 21:46:52 +07:00
parent a581c58efd
commit fadd20cb75
4 changed files with 1161 additions and 1136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
public/assets/user/css/main.css
View File

@ -20,9 +20,9 @@ :root {
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
--default-color: #1a1f24; /* Default color used for the majority of the text content across the entire website */
--heading-color: #485664; /* Color for headings, subheadings and title throughout the website */
--accent-color: #0ea2bd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--default-color: #2a2f33; /* Default color used for the majority of the text content across the entire website */
--heading-color: #FF7A21; /* Color for headings, subheadings and title throughout the website */
--accent-color: #00A86B; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
@ -30,11 +30,11 @@ :root {
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
--nav-color: #485664; /* The default color of the main navmenu links */
--nav-hover-color: #0ea2bd; /* Applied to main navmenu links when they are hovered over or active */
--nav-hover-color: #FF7A21; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #485664; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: #0ea2bd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
--nav-dropdown-hover-color: #FF7A21; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
@ -846,21 +846,47 @@ .section-title p {
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
min-height: 50vh;
min-height: 100vh;
position: relative;
padding: 120px 0 60px 0;
display: flex;
align-items: center;
background: url("../img/hero-bg.png") center center;
/* Background gambar */
background-image: url('/assets/user/img/bg.jpg');
background-size: cover;
background-position: center;
}
/* Overlay bayangan */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45); /* bayangan gelap 45% */
z-index: 1;
}
/* Agar isi di depan overlay */
.hero .container {
position: relative;
z-index: 2;
}
.hero h1 {
margin: 0 0 10px 0;
font-size: 48px;
font-weight: 300;
font-weight: 500;
color: var(--surface-color);
}
.hero h1 span {
@ -868,7 +894,7 @@ .hero h1 span {
}
.hero p {
color: color-mix(in srgb, var(--default-color), transparent 30%);
color: color-mix(in srgb, var(--surface-color), transparent 30%);
margin: 5px 0 30px 0;
font-size: 20px;
font-weight: 400;
@ -1009,10 +1035,25 @@ .featured-services .service-item:hover {
box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
}
.featured-services .service-item:hover h4 a {
.featured-services .service-item:hover h1 a {
color: var(--accent-color);
font-weight: bold;
}
.featured-services .service-item {
background: #fff;
padding: 30px 20px;
border-radius: 10px;
text-align: center;
width: 100%;
height: 100%;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: center;
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
@ -1137,96 +1178,7 @@ @media (max-width: 640px) {
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
padding: 0;
}
.call-to-action .container {
padding: 80px;
background: color-mix(in srgb, var(--default-color), transparent 96%);
border-radius: 15px;
}
@media (max-width: 992px) {
.call-to-action .container {
padding: 60px;
}
}
.call-to-action .content h3 {
font-size: 48px;
font-weight: 700;
}
.call-to-action .content h3 em {
font-style: normal;
position: relative;
z-index: 1;
}
.call-to-action .content h3 em:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 10px;
height: 10px;
background: color-mix(in srgb, var(--accent-color), transparent 30%);
z-index: -1;
}
.call-to-action .content p {
color: color-mix(in srgb, var(--default-color), transparent 20%);
font-weight: 400;
font-size: 18px;
}
.call-to-action .content .cta-btn {
color: var(--contrast-color);
font-weight: 500;
font-size: 16px;
display: inline-block;
padding: 12px 40px;
border-radius: 5px;
transition: 0.5s;
margin-top: 10px;
background: var(--accent-color);
}
.call-to-action .content .cta-btn:hover {
background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}
.call-to-action .img {
position: relative;
}
.call-to-action .img:before {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--contrast-color), transparent 20%);
border-radius: 15px;
transform: rotate(6deg);
z-index: 2;
}
.call-to-action .img:after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--default-color), transparent 95%);
border-radius: 15px;
transform: rotate(12deg);
z-index: 1;
}
.call-to-action .img img {
position: relative;
z-index: 3;
border-radius: 15px;
z-index: 3;
}
/*--------------------------------------------------------------
# Onfocus Section

BIN
public/assets/user/img/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

377
resources/views/user/index.blade.php
View File

@ -3,72 +3,81 @@
@section('content')
<!-- Hero Section -->
<section id="hero" class="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" data-aos="zoom-out">
<img src="{{ asset('assets/user/img/hero-img.svg') }}" class="img-fluid animated" alt="">
<h1>Welcome to <span>HeroBiz</span></h1>
<p>Et voluptate esse accusantium accusamus natus reiciendis quidem voluptates similique aut.</p>
<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">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>Watch Video</span></a>
<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">
</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-activity icon"></i></div>
<h4><a href="" class="stretched-link">Lorem Ipsum</a></h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
<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-bounding-box-circles icon"></i></div>
<h4><a href="" class="stretched-link">Sed ut perspici</a></h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
<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-calendar4-week icon"></i></div>
<h4><a href="" class="stretched-link">Magni Dolores</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
<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-broadcast icon"></i></div>
<h4><a href="" class="stretched-link">Nemo Enim</a></h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
<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 -->
</section><!-- /Featured Services Section -->
<!-- About Section -->
<section id="about" class="about section">
<!-- About Section -->
<section id="about" class="about section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>About Us</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
<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">
@ -82,43 +91,44 @@
</div>
<div class="col-lg-7">
<h3 class="pt-0 pt-lg-5">Neque officiis dolore maiores et exercitationem quae est seda lidera pat claero</h3>
<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">
<!-- <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 -->
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="about-tab1">
<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>
<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>Repudiandae rerum velit modi et officia quasi facilis</h4>
<h4>Peta Interaktif Lokasi TPS</h4>
</div>
<p>Laborum omnis voluptates voluptas qui sit aliquam blanditiis. Sapiente minima commodi dolorum non eveniet magni quaerat nemo et.</p>
<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>Incidunt non veritatis illum ea ut nisi</h4>
<h4>Informasi TPS Lengkap</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>
<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>Omnis ab quia nemo dignissimos rem eum quos..</h4>
<h4>Layanan Aduan TPS</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>
<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">
<!-- <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>
@ -140,9 +150,10 @@
</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> -->
<!-- End Tab 2 Content -->
<div class="tab-pane fade" id="about-tab3">
<!-- <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>
@ -164,7 +175,8 @@
</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> -->
<!-- End Tab 3 Content -->
</div>
@ -174,10 +186,10 @@
</div>
</section><!-- /About Section -->
</section><!-- /About Section -->
<!-- Clients Section -->
<section id="clients" class="clients section">
<!-- Clients Section -->
<!-- <section id="clients" class="clients section">
<div class="container" data-aos="fade-up">
@ -185,61 +197,130 @@
<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><!-- End Client Item -->
</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><!-- End Client Item -->
</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><!-- End Client Item -->
</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><!-- End Client Item -->
</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><!-- End Client Item -->
</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><!-- End Client Item -->
</div>
</div>
</section><!-- /Clients Section -->
<!-- Call To Action Section -->
<section id="call-to-action" class="call-to-action section">
<div class="container" data-aos="zoom-out">
<div class="row g-5">
<div class="col-lg-8 col-md-6 content d-flex flex-column justify-content-center order-last order-md-first">
<h3>Alias sunt quas <em>Cupiditate</em> oluptas hic minima</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 align-self-start" href="#">Call To Action</a>
</div>
<div class="col-lg-4 col-md-6 order-first order-md-last d-flex align-items-center">
<div class="img">
<img src="{{ asset('assets/user/img/cta.jpg') }}" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section><!-- /Call To Action Section -->
</section> -->
<!-- /Clients Section -->
<!-- Onfocus Section -->
<section id="onfocus" class="onfocus section dark-background">
<!-- 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">
@ -266,85 +347,77 @@
</div>
</section><!-- /Onfocus Section -->
</section> -->
<!-- /Onfocus Section -->
<!-- Features Section -->
<section id="features" class="features 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">
<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="#features-tab-1">
<i class="bi bi-binoculars" style="color: #0dcaf0;"></i>
<h4>Modinest</h4>
<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><!-- End Tab 1 Nav -->
</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="#features-tab-2">
<i class="bi bi-box-seam" style="color: #6610f2;"></i>
<h4>Undaesenti</h4>
<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><!-- End Tab 2 Nav -->
</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="#features-tab-3">
<i class="bi bi-brightness-high" style="color: #20c997;"></i>
<h4>Pariatur</h4>
<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><!-- End Tab 3 Nav -->
<li class="nav-item col-6 col-md-4 col-lg-2">
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-4">
<i class="bi bi-command" style="color: #df1529;"></i>
<h4>Nostrum</h4>
</a>
</li><!-- End Tab 4 Nav -->
<li class="nav-item col-6 col-md-4 col-lg-2">
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-5">
<i class="bi bi-easel" style="color: #0d6efd;"></i>
<h4>Adipiscing</h4>
</a>
</li><!-- End Tab 5 Nav -->
<li class="nav-item col-6 col-md-4 col-lg-2">
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-6">
<i class="bi bi-map" style="color: #fd7e14;"></i>
<h4>Reprehit</h4>
</a>
</li><!-- End Tab 6 Nav -->
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="features-tab-1">
<div class="tab-pane fade active show" id="ftab-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>Modinest</h3>
<h3>Tempat Pembuangan Sementara (TPS)</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
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> 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>
<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>
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
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="" class="img-fluid">
<img src="{{ asset('assets/user/img/features-1.svg') }}" alt="TPS Illustration" class="img-fluid">
</div>
</div>
</div>
</div><!-- End Tab Content 1 -->
<!-- End Tab Content 1 -->
<div class="tab-pane fade" id="features-tab-2">
<div class="row gy-4">
@ -476,10 +549,10 @@
</div>
</section><!-- /Features Section -->
</section><!-- /Features Section -->
<!-- Services Section -->
<section id="services" class="services section">
<!-- Services Section -->
<section id="services" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -600,10 +673,10 @@
</div>
</section><!-- /Services Section -->
</section><!-- /Services Section -->
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials section dark-background">
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials section dark-background">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -719,10 +792,10 @@
</div>
</section><!-- /Testimonials Section -->
</section><!-- /Testimonials Section -->
<!-- Pricing Section -->
<section id="pricing" class="pricing section">
<!-- Pricing Section -->
<section id="pricing" class="pricing section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -807,10 +880,10 @@
</div>
</section><!-- /Pricing Section -->
</section><!-- /Pricing Section -->
<!-- Faq Section -->
<section id="faq" class="faq section">
<!-- Faq Section -->
<section id="faq" class="faq section">
<div class="container-fluid">
@ -865,10 +938,10 @@
</div>
</section><!-- /Faq Section -->
</section><!-- /Faq Section -->
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio section">
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -1016,10 +1089,10 @@
</div>
</section><!-- /Portfolio Section -->
</section><!-- /Portfolio Section -->
<!-- Team Section -->
<section id="team" class="team section">
<!-- Team Section -->
<section id="team" class="team section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -1089,10 +1162,10 @@
</div>
</section><!-- /Team Section -->
</section><!-- /Team Section -->
<!-- Recent Posts Section -->
<section id="recent-posts" class="recent-posts section">
<!-- Recent Posts Section -->
<section id="recent-posts" class="recent-posts section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -1186,10 +1259,10 @@
</div>
</section><!-- /Recent Posts Section -->
</section><!-- /Recent Posts Section -->
<!-- Contact Section -->
<section id="contact" class="contact section">
<!-- Contact Section -->
<section id="contact" class="contact section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
@ -1268,6 +1341,6 @@
</div>
</section>
</section>
@endsection

22
resources/views/user/template.blade.php
View File

@ -37,19 +37,19 @@
<a href="index.html" class="logo d-flex align-items-center me-auto me-xl-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename">HeroBiz</h1>
<h1 class="sitename">SIG TPS</h1>
<span>.</span>
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero" class="active">Home<br></a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<li><a href="#hero" class="active">Beranda<br></a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Sebaran TPS</a></li>
<li><a href="#portfolio">Aduan TPS</a></li>
<li><a href="#team">Kontak</a></li>
<!-- <li><a href="blog.html">Blog</a></li> -->
<!-- <li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
@ -65,13 +65,13 @@
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</li> -->
<!-- <li><a href="#contact">Contact</a></li> -->
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
<a class="btn-getstarted" href="index.html#about">Get Started</a>
<a class="btn-getstarted" href="index.html#about">Lihat Peta</a>
</div>
</header>