banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor (landing): hero section

main
Yuri Dimas 2025-12-02 00:43:15 +07:00
parent 521e801aa4
commit 2859d5ebcc
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
7 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Views/Home/Index.cshtml
View File

@ -3,28 +3,22 @@
}
<!-- Hero Section -->
<section class="relative min-h-screen bg-cover bg-center overflow-hidden" style="background-image: url('/images/bg-landing-page-header.png');">
<section id="home" class="relative min-h-screen bg-cover bg-center overflow-hidden"
style="background-image: url('/images/bg-landing-page.png');">
<!-- Background overlay -->
<div class="absolute inset-0 bg-black/50"></div>
<!-- Hero Content -->
<div class="relative z-10 flex items-center min-h-screen px-4 lg:px-28 py-20">
<div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
<div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-20">
<div class="flex justify-start items-center gap-8 w-full">
<div class="max-w-[800px] pr-10 flex flex-col justify-start items-start gap-8">
<div class="flex flex-col justify-start items-start gap-8 w-full">
<!-- Badge -->
<div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
<div class="w-4 h-4 relative">
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-900 rounded-full"></div>
</div>
<div class="text-green-900 text-base font-bold font-jakarta">Portal Resmi</div>
</div>
<!-- Main Title -->
<div class="flex flex-col justify-start items-start gap-2 w-full">
<h1 class="text-white hero-title font-bold font-jakarta w-full">
e-Bank Sampah Jakarta
E-Bank Sampah Jakarta
</h1>
<p class="text-white text-base sm:text-lg font-medium font-jakarta leading-7 w-full">
Program dari Dinas Lingkungan Hidup Provinsi Jakarta
@ -33,17 +27,14 @@
</div>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row justify-start items-start gap-4">
<a href="/Registrasi/RegisterNasabah" class="btn-custom px-8 py-3 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
<span class="text-white text-base font-semibold font-jakarta">Pendaftaran Nasabah</span>
<div class="w-5 h-5 relative">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
<div class="flex flex-col sm:flex-row justify-start items-start gap-8">
<a href="/Registrasi/RegisterNasabah" class="btn-cta group">
<span class="font-jakarta tracking-wide">Pendaftaran Nasabah</span>
<i class="ph ph-arrow-up-right btn-cta__icon"></i>
</a>
<a href="/Registrasi/RegisterBankSampah" class="btn-custom px-8 py-3 bg-white/10 hover:bg-white/20 rounded-full border border-gray-300 flex justify-center items-center gap-2 transition-colors">
<span class="text-white text-base font-semibold font-jakarta">Pendaftaran Bank Sampah</span>
<a href="/Registrasi/RegisterBankSampah" class="btn-cta group">
<span class="font-jakarta tracking-wide">Pendaftaran Bank Sampah</span>
<i class="ph ph-arrow-up-right btn-cta__icon"></i>
</a>
</div>
</div>

24
Views/Shared/_NavbarLanding.cshtml
View File

@ -1,31 +1,35 @@
<nav id="navbar" class="w-full h-24 px-4 lg:px-28 fixed left-0 top-0 z-50 flex flex-col justify-center items-center transition-all duration-300">
<div class="w-full max-w-[1440px] flex justify-center items-center gap-8">
<div class="flex-1 flex justify-start items-center gap-2">
<img class="w-11 h-10" src="/images/logo.png" alt="Logo" />
<div class="bg-white rounded-full p-2 flex gap-2">
<img class="w-8 h-8" src="/images/logo/e_bank_sampah.png" alt="E Bank Sampah" />
<img class="w-8 h-8" src="/images/logo/dlh_jakarta.png" alt="DLH Jakarta" />
<img class="w-8 h-8" src="/images/logo/jakarta.png" alt="Jakarta" />
</div>
<div class="hidden lg:flex justify-start items-center gap-8">
<a href="/" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
</div>
<div class="hidden lg:flex justify-start items-center gap-8 bg-white/10 backdrop-blur-md p-2 rounded-lg">
<a href="#home" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-white text-base font-semibold font-jakarta leading-6">Beranda</div>
</a>
<a href="#about" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<a href="#about" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Tentang</div>
</a>
<a href="#publications" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<a href="#publications" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Publikasi</div>
</a>
<a href="#regulations" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<a href="#regulations" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Regulasi</div>
</a>
<a href="#location" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<a href="#location" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Lokasi</div>
</a>
<a href="#helpdesk" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<a href="#helpdesk" class="rounded flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Helpdesk</div>
</a>
</div>
<div class="flex-1 flex justify-end items-center gap-4">
<a asp-controller="Auth" asp-action="Login" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
<div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
<a asp-controller="Auth" asp-action="Login" class="btn bg-white rounded-full shadow-none border-none">
<div class="text-base font-semibold font-jakarta leading-6">Login</div>
</a>
</div>
</div>

17
wwwroot/css/input.css
View File

@ -53,14 +53,19 @@
border-radius: 50%;
}
/* Hover effects for buttons and cards */
.btn-custom {
transition: all 0.3s ease;
/* Hover effects for CTA button */
.btn-cta {
@apply btn btn-outline btn-lg border-white text-white bg-transparent shadow-none;
@apply rounded-lg px-6 flex items-center justify-center transition-all duration-300 ease-out;
}
.btn-custom:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
.btn-cta:hover {
@apply px-6 bg-white/10 border-none scale-110 backdrop-blur-md;
}
.btn-cta__icon {
@apply text-xl inline-flex w-0 overflow-hidden opacity-0 -translate-x-3 transition-all duration-300;
@apply group-hover:w-5 group-hover:ml-2 group-hover:opacity-100 group-hover:translate-x-1;
}
/* Map marker animation */

BIN
wwwroot/images/bg-landing-page.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
wwwroot/images/logo/dlh_jakarta.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 428 KiB

BIN
wwwroot/images/logo/e_bank_sampah.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
wwwroot/images/logo/jakarta.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 761 KiB