ilham
/
sigd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update button styles and enhance UI with modern minimalistic design

john
Falih Ananta 2025-12-04 00:51:45 +07:00
parent 39a29a6525
commit 3547a1501f
3 changed files with 88 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/dashboard.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 401 KiB

After

Width:  |  Height:  |  Size: 1.9 MiB

38
resources/views/index.blade.php
View File

@ -7,8 +7,8 @@
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Gas Rumah Kaca Daerah</h1> <h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Gas Rumah Kaca Daerah</h1>
<p class="mb-0 text-[#878C91] md:w-[70%]">Platform terintegrasi untuk memantau, melaporkan, dan mengevaluasi status emisi GRK serta kemajuan Rencana Aksi Mitigasi di wilayah Jakarta. Akses data inventarisasi terbaru dan peran serta publik.</p> <p class="mb-0 text-[#878C91] md:w-[70%]">Platform terintegrasi untuk memantau, melaporkan, dan mengevaluasi status emisi GRK serta kemajuan Rencana Aksi Mitigasi di wilayah Jakarta. Akses data inventarisasi terbaru dan peran serta publik.</p>
<div class="flex flex-col md:flex-row gap-10 md:gap-3 mt-20"> <div class="flex flex-col md:flex-row gap-10 md:gap-3 mt-20">
<div><a href="" class="rounded-full bg-[#2084FF] px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div> <div><a href="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
<div><a href="" class="rounded-full px-10 py-4 border">Akses Dashboard Terbaru</a></div> <div><a href="" class="btn-minimal btn-secondary rounded-full px-10 py-4">Akses Dashboard Terbaru</a></div>
</div> </div>
</div> </div>
</section> </section>
@ -25,30 +25,30 @@
<div class="info-card bg-[url({{ asset('assets/images/bg1.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]"> <div class="info-card bg-[url({{ asset('assets/images/bg1.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content"> <div class="content">
<h4 class="text-[20px]">Energi</h4> <h4 class="text-[20px]">Energi</h4>
<p class="font-thin text-sm">We're a UK-based Laravel agency. We'll get your project moving so you can focus on what matters most. You'll have peac.</p> <p class="font-thin text-sm">Meliputi emisi dari pembakaran bahan bakar fosil di sektor Transportasi, Pembangkit Listrik, Industri, Komersial, dan Rumah Tangga.</p>
</div> </div>
</div> </div>
<div class="info-card bg-[url({{ asset('assets/images/bg2.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]"> <div class="info-card bg-[url({{ asset('assets/images/bg2.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content"> <div class="content">
<h4 class="text-[20px]">Industrial Processes and Product Use</h4> <h4 class="text-[20px]">Industrial Processes and Product Use</h4>
<p class="font-thin text-sm">As the largest on-shore Laravel development company in the United States, Active Logic is headquartered in.</p> <p class="font-thin text-sm">Emisi yang dilepaskan dari proses kimia dan fisik dalam industri manufaktur, bukan dari pembakaran bahan bakar itu sendiri.</p>
</div> </div>
</div> </div>
<div class="info-card bg-[url({{ asset('assets/images/bg3.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]"> <div class="info-card bg-[url({{ asset('assets/images/bg3.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content"> <div class="content">
<h4 class="text-[20px]">Pertanian & Lahan</h4> <h4 class="text-[20px]">Pertanian & Lahan</h4>
<p class="font-thin text-sm">We're the Laravel agency you couldn't afford locally. But we're based in Georgia, the country. So, you can.</p> <p class="font-thin text-sm">Meliputi emisi dan serapan (penghilangan) GRK dari kegiatan pertanian, kehutanan, peternakan, dan perubahan tata guna lahan.</p>
</div> </div>
</div> </div>
<div class="info-card bg-[url({{ asset('assets/images/bg4.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]"> <div class="info-card bg-[url({{ asset('assets/images/bg4.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content"> <div class="content">
<h4 class="text-[20px]">Limbah</h4> <h4 class="text-[20px]">Limbah</h4>
<p class="font-thin text-sm">We're the experts in all things Laravel. If you need an app built or rescued, or you need your team built or leveled up, we'v</p> <p class="font-thin text-sm">Emisi Metana yang dihasilkan dari penguraian sampah padat di TPA dan gas dari pengelolaan air limbah domestik serta industri.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]"> <div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
<div><a href="" class="rounded-full bg-[#2084FF] px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div> <div><a href="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
</div> </div>
</section> </section>
@ -60,10 +60,10 @@
</div> </div>
</div> </div>
<div class="flex flex-col lg:flex-row justify-center items-center gap-4 mt-[35px] px-20 lg:w-[90%] mx-auto text-center"> <div class="flex flex-col lg:flex-row justify-center items-center gap-4 mt-[35px] px-20 lg:w-[90%] mx-auto text-center">
<div class="rounded-full w-full border px-6 py-3 text-white"><a href="">Investasi Sektor</a></div> <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Inventarisasi Sektor</a></div>
<div class="rounded-full w-full border px-6 py-3 text-[#2084FF] bg-white"><a href="">Tren Tahun ke Tahun</a></div> <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Tren Tahun ke Tahun</a></div>
<div class="rounded-full w-full border px-6 py-3 text-white"><a href="">RAD GRK Interaktif</a></div> <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">RAD GRK Interaktif</a></div>
<div class="rounded-full w-full border px-6 py-3 text-white"><a href="">Peta Geografis Aksi</a></div> <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Peta Geografis Aksi</a></div>
</div> </div>
<div class="flex justify-center -mt-[50px]"> <div class="flex justify-center -mt-[50px]">
<img src="{{ asset('assets/images/dashboard.png') }}" alt=""> <img src="{{ asset('assets/images/dashboard.png') }}" alt="">
@ -87,9 +87,9 @@
</div> </div>
</div> </div>
<div class="flex justify-between gap-5"> <div class="flex justify-between gap-5">
<div><a class="p-3 rounded-full border" href=""><i class="bx bx-left-arrow-alt"></i></a></div> <div><a class="btn-minimal btn-icon p-3 rounded-full border" href=""><i class="bx bx-left-arrow-alt"></i></a></div>
<div class="text-[#878C91]">01 &nbsp;/&nbsp; 05</div> <div class="text-[#878C91]">01 &nbsp;/&nbsp; 05</div>
<div><a class="p-3 bg-[#2084FF] text-white rounded-full" href=""><i class="bx bx-right-arrow-alt"></i></a></div> <div><a class="btn-minimal btn-icon p-3 bg-[#2084FF] text-white rounded-full" href=""><i class="bx bx-right-arrow-alt"></i></a></div>
</div> </div>
</div> </div>
</div> </div>
@ -104,8 +104,8 @@
menjawab pertanyaan umum dari publik dan pemangku kepentingan mengenai data emisi dan upaya mitigasi daerah menjawab pertanyaan umum dari publik dan pemangku kepentingan mengenai data emisi dan upaya mitigasi daerah
</p> </p>
<div class="flex gap-3 justify-center items-center mt-5"> <div class="flex gap-3 justify-center items-center mt-5">
<a class="border px-6 py-3 rounded-full" href="">Akses Materi Edukasi</a> <a class="btn-minimal btn-outline border px-6 py-3 rounded-full" href="">Akses Materi Edukasi</a>
<a class="px-6 py-3 underline" href="">Hubungi Kami</a> <a class="btn-minimal btn-link px-6 py-3 underline" href="">Hubungi Kami</a>
</div> </div>
</div> </div>
<div class="flex flex-col gap-3 lg:w-[60%]"> <div class="flex flex-col gap-3 lg:w-[60%]">
@ -201,7 +201,7 @@
kondisi emisi serta efektifitas program mitigasi. kondisi emisi serta efektifitas program mitigasi.
</p> </p>
</div> </div>
<div class="mt-5"><a class="border border-[#000] px-6 py-3 rounded-full" href="">Lihat Selengkapnya</a></div> <div class="mt-5"><a class="btn-minimal btn-outline border border-[#000] px-6 py-3 rounded-full" href="">Lihat Selengkapnya</a></div>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-[50px]"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-[50px]">
@ -215,7 +215,7 @@
<div class="w-[70%]"> <div class="w-[70%]">
<p class="text-[#878C91]">Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.</p> <p class="text-[#878C91]">Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.</p>
</div> </div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div> <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div> </div>
</div> </div>
</div> </div>
@ -229,7 +229,7 @@
<div class="w-[70%]"> <div class="w-[70%]">
<p class="text-[#878C91]">Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.</p> <p class="text-[#878C91]">Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.</p>
</div> </div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div> <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div> </div>
</div> </div>
</div> </div>
@ -243,7 +243,7 @@
<div class="w-[70%]"> <div class="w-[70%]">
<p class="text-[#878C91]">Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.</p> <p class="text-[#878C91]">Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.</p>
</div> </div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div> <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div> </div>
</div> </div>
</div> </div>

100
resources/views/layouts/front.blade.php
View File

@ -38,58 +38,96 @@
transform: translateY(0); transform: translateY(0);
} }
/* Button hover animations */ /* Modern Minimalist Button Hover Animations */
.btn-hover { .btn-minimal {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
overflow: hidden;
} }
.btn-hover:hover { .btn-minimal:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
} }
.btn-hover:active { .btn-minimal:active {
transform: translateY(0); transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition-duration: 0.1s;
} }
/* Primary button (blue background) hover effect */ /* Primary button (blue background) */
.btn-hover.btn-primary:hover { .btn-minimal.btn-primary {
background-color: #2084FF;
}
.btn-minimal.btn-primary:hover {
background-color: #1a6fd9; background-color: #1a6fd9;
transform: translateY(-3px); transform: scale(1.05);
box-shadow: 0 12px 30px rgba(32, 132, 255, 0.4);
} }
/* Secondary button (border only) hover effect */ /* Secondary button (border only) */
.btn-hover.btn-secondary:hover { .btn-minimal.btn-secondary {
background-color: #f8fafc; border: 1px solid currentColor;
background-color: transparent;
}
.btn-minimal.btn-secondary:hover {
background-color: #2084FF;
color: white;
border-color: #2084FF;
transform: scale(1.02);
}
/* Outline button */
.btn-minimal.btn-outline:hover {
background-color: rgba(32, 132, 255, 0.1);
border-color: #2084FF; border-color: #2084FF;
color: #2084FF; color: #2084FF;
transform: translateY(-2px); transform: translateX(4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
} }
/* Icon button hover effects */ /* Icon button */
.btn-hover.btn-icon:hover { .btn-minimal.btn-icon:hover {
transform: scale(1.1); transform: rotate(5deg) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
} }
/* Tab button hover effects */ /* Tab button */
.btn-hover.btn-tab:hover { .btn-minimal.btn-tab {
background-color: rgba(255, 255, 255, 0.9); display: block;
color: #2084FF; width: 100%;
transform: translateY(-1px); color: white;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); text-decoration: none;
background-color: transparent;
border-color: white;
font-weight: 500;
}
.btn-minimal.btn-tab:hover {
background-color: white !important;
color: #2084FF !important;
border-color: white;
transform: scale(1.02);
}
/* Link button */
.btn-minimal.btn-link:hover {
transform: translateX(8px);
}
.btn-minimal.btn-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: currentColor;
transition: width 0.3s ease;
}
.btn-minimal.btn-link:hover::after {
width: 100%;
} }
/* FAQ Static Styles */ /* FAQ Static Styles */
.faq-item {
/* Static display - no animations */
}
.faq-content { .faq-content {
/* Always visible */ /* Always visible */
display: block; display: block;