339 lines
16 KiB
Plaintext
339 lines
16 KiB
Plaintext
@using kehati.Models.View
|
|
@using kehati.Helpers
|
|
@{
|
|
ViewData["Title"] = "Beranda";
|
|
var statusColor = new Dictionary<string, string>
|
|
{
|
|
{ "Aman", "bg-primary/10 text-primary border-primary/20" },
|
|
{ "Rentan", "bg-amber-100 text-amber-800 border-amber-200" },
|
|
{ "Terancam", "bg-orange-100 text-orange-800 border-orange-200" },
|
|
{ "Kritis", "bg-red-100 text-red-800 border-red-200" },
|
|
{ "Dilindungi", "bg-emerald-100 text-emerald-800 border-emerald-200" },
|
|
{ "Tidak Dilindungi", "bg-grey-100 text-emerald-800 border-emerald-200" }
|
|
};
|
|
}
|
|
|
|
@model kehati.Models.View.HomeViewModel
|
|
|
|
<!-- HERO SECTION -->
|
|
<section class="relative overflow-hidden">
|
|
<!-- Background Image -->
|
|
<div class="absolute inset-0 -z-10">
|
|
<img src="~/images/hero.jpg"
|
|
asp-append-version="true"
|
|
alt="Kanopi hutan Jakarta"
|
|
class="h-full w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/85 to-background/40"></div>
|
|
</div>
|
|
<div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8 lg:py-40">
|
|
<div class="max-w-2xl">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3.5 py-1.5 text-xs font-medium text-primary">
|
|
<i data-lucide="sparkles" class="h-3.5 w-3.5"></i>
|
|
Portal Keanekaragaman Hayati DKI Jakarta
|
|
</div>
|
|
<!-- Title -->
|
|
<h1 class="mt-6 font-serif text-5xl leading-[1.05] tracking-tight text-foreground sm:text-6xl lg:text-7xl">
|
|
Menjaga kekayaan hayati
|
|
<em class="text-primary">
|
|
ibu kota
|
|
</em>.
|
|
</h1>
|
|
<!-- Description -->
|
|
<p class="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
|
|
Jelajahi flora, fauna, dan lokasi konservasi Jakarta.
|
|
Sebuah inisiatif Dinas Lingkungan Hidup untuk mendokumentasikan
|
|
dan melestarikan keragaman hayati di setiap sudut kota.
|
|
</p>
|
|
<!-- Button -->
|
|
<div class="mt-8 flex flex-wrap gap-3">
|
|
<a asp-controller="lokasi"
|
|
asp-action="Index"
|
|
class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-medium text-primary-foreground shadow-sm transition-all hover:bg-primary/90 hover:shadow-md">
|
|
Jelajahi Lokasi
|
|
<i data-lucide="arrow-right" class="h-4 w-4"></i>
|
|
</a>
|
|
@* <a asp-controller="katalog"
|
|
asp-action="Index"
|
|
class="inline-flex items-center gap-2 rounded-lg border border-border bg-background/80 px-5 py-3 text-sm font-medium text-foreground backdrop-blur transition-colors hover:bg-secondary">
|
|
Lihat Katalog
|
|
</a> *@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATISTIK SECTION -->
|
|
<section class="border-y border-border/60 bg-secondary/30">
|
|
<div class="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-border/60 px-4 sm:px-6 lg:grid-cols-4 lg:px-8">
|
|
<div class="px-4 py-8 text-center sm:py-10">
|
|
<div class="font-serif text-4xl text-primary sm:text-5xl">
|
|
@ViewBag.TotalLokasi
|
|
</div>
|
|
<div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
|
|
Lokasi Konservasi
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-8 text-center sm:py-10">
|
|
<div class="font-serif text-4xl text-primary sm:text-5xl">
|
|
@ViewBag.TotalTumbuhan
|
|
</div>
|
|
<div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
|
|
Jenis Flora
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-8 text-center sm:py-10">
|
|
<div class="font-serif text-4xl text-primary sm:text-5xl">
|
|
@ViewBag.TotalFauna
|
|
</div>
|
|
<div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
|
|
Jenis Fauna
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-8 text-center sm:py-10">
|
|
<div class="font-serif text-4xl text-primary sm:text-5xl">
|
|
@ViewBag.Total
|
|
</div>
|
|
<div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
|
|
Total Spesies
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DESKRIPSI SECTION -->
|
|
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
|
|
<div class="grid gap-12 lg:grid-cols-5 lg:gap-16">
|
|
<div class="lg:col-span-2">
|
|
<div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
|
|
<i data-lucide="leaf" class="h-4 w-4"></i>
|
|
<span>Tentang Keanekaragaman Hayati</span>
|
|
</div>
|
|
<h2 class="mt-4 font-serif text-4xl leading-tight text-foreground">
|
|
Kota yang hidup butuh alam yang beragam.
|
|
</h2>
|
|
</div>
|
|
<div class="space-y-5 text-base leading-relaxed text-muted-foreground lg:col-span-3">
|
|
<p>
|
|
Keanekaragaman hayati adalah keragaman makhluk hidup — dari pohon peneduh
|
|
di taman kota, burung yang berkicau di pagi hari, hingga bakau yang
|
|
menjaga pesisir dari abrasi. Di Jakarta, kekayaan ini tumbuh berdampingan
|
|
dengan kepadatan penduduk lebih dari 10 juta jiwa.
|
|
</p>
|
|
<p>
|
|
Melalui program konservasi ruang hijau, hutan kota, dan kawasan mangrove,
|
|
Dinas Lingkungan Hidup berkomitmen menjaga habitat asli Jakarta. Portal
|
|
ini dirancang agar warga dapat mengenal, mempelajari, dan ikut menjaga
|
|
flora dan fauna yang menjadi warisan alam ibu kota.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- LOKASI -->
|
|
<section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
|
|
<div class="flex items-end justify-between gap-4">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
|
|
<i data-lucide="map-pin" class="h-4 w-4"></i>
|
|
Lokasi Pilihan
|
|
</div>
|
|
<h2 class="mt-3 font-serif text-4xl text-foreground">
|
|
Habitat di jantung Jakarta
|
|
</h2>
|
|
</div>
|
|
<a asp-controller="lokasi"
|
|
asp-action="Index"
|
|
class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
|
|
Semua lokasi
|
|
<i data-lucide="arrow-right" class="h-4 w-4"></i>
|
|
</a>
|
|
</div>
|
|
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach (var loc in ViewBag.lokasiHome)
|
|
{
|
|
<a asp-controller="lokasi"
|
|
asp-action="detail"
|
|
asp-route-slug="@Custom.Encode(loc.MsLokasiId)"
|
|
class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[16/10] overflow-hidden bg-muted">
|
|
<img src="~/images/@loc.Image"
|
|
alt="@loc.Name"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
<!-- Gradient -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
|
|
<!-- Overlay Text -->
|
|
<div class="absolute inset-x-0 bottom-0 p-4 text-white">
|
|
<div class="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-white/80">
|
|
<i data-lucide="map-pin" class="h-3 w-3"></i>
|
|
@loc.Region
|
|
</div>
|
|
<h3 class="mt-1 font-serif text-xl leading-tight">
|
|
@loc.Name
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Card -->
|
|
<div class="flex items-center justify-between p-4 text-sm">
|
|
<span class="text-muted-foreground">
|
|
@loc.Area
|
|
</span>
|
|
<div class="flex gap-3 text-foreground">
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="leaf"
|
|
class="h-4 w-4 text-primary"></i>
|
|
@loc.LokasiTumbuhan.Count Flora
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="bird"
|
|
class="h-4 w-4 text-primary"></i>
|
|
@loc.LokasiFauna.Count Fauna
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flora -->
|
|
|
|
<section class="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
|
|
<div class="flex items-end justify-between gap-4">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
|
|
<i data-lucide="leaf" class="h-4 w-4"></i>
|
|
Katalog Pilihan
|
|
</div>
|
|
<h2 class="mt-3 font-serif text-4xl text-foreground">
|
|
Flora khas Jakarta
|
|
</h2>
|
|
</div>
|
|
<a asp-controller="flora"
|
|
asp-action="Index"
|
|
class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
|
|
Semua flora
|
|
<i data-lucide="arrow-right" class="h-4 w-4"></i>
|
|
</a>
|
|
</div>
|
|
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
@if (ViewBag.tumbuhanHome != null && ViewBag.tumbuhanHome.Count > 0){
|
|
@foreach (var s in ViewBag.tumbuhanHome)
|
|
{
|
|
<a asp-controller="flora"
|
|
asp-action="detail"
|
|
asp-route-slug="@Custom.Encode(s.MsTumbuhanId)"
|
|
class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-muted">
|
|
<img src="~/images/@s.Image"
|
|
alt="@s.Name"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
|
|
<!-- Type Badge -->
|
|
<div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
|
|
<i data-lucide="leaf" class="h-3 w-3"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="font-serif text-lg leading-tight text-foreground">
|
|
@s.Name
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.NamaIlmiah
|
|
</p>
|
|
<!-- Status Badge -->
|
|
<div class="mt-3">
|
|
<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
|
|
@(statusColor.ContainsKey(s.StatusPerlindungan)
|
|
? statusColor[s.StatusPerlindungan]
|
|
: "")">
|
|
@s.StatusPerlindungan
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
}else{
|
|
<h4>Data Tidak Ada</h4>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Fauna -->
|
|
<section class="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
|
|
<div class="flex items-end justify-between gap-4">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-primary">
|
|
<i data-lucide="leaf" class="h-4 w-4"></i>
|
|
Katalog Pilihan
|
|
</div>
|
|
<h2 class="mt-3 font-serif text-4xl text-foreground">
|
|
Fauna khas Jakarta
|
|
</h2>
|
|
</div>
|
|
<a asp-controller="fauna"
|
|
asp-action="Index"
|
|
class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
|
|
Semua fauna
|
|
<i data-lucide="arrow-right" class="h-4 w-4"></i>
|
|
</a>
|
|
</div>
|
|
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
@if (ViewBag.faunaHome != null && ViewBag.faunaHome.Count > 0)
|
|
{
|
|
@foreach (var s in ViewBag.faunaHome)
|
|
{
|
|
<a asp-controller="fauna"
|
|
asp-action="detail"
|
|
asp-route-slug="@Custom.Encode(s.MsFaunaId)"
|
|
class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-muted">
|
|
<img src="~/images/@s.Image"
|
|
alt="@s.Name"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
|
|
<!-- Type Badge -->
|
|
<div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
|
|
<i data-lucide="bird" class="h-3 w-3"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="font-serif text-lg leading-tight text-foreground">
|
|
@s.Name
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.NamaIlmiah
|
|
</p>
|
|
<!-- Status Badge -->
|
|
<div class="mt-3">
|
|
<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
|
|
@(statusColor.ContainsKey(s.Status)
|
|
? statusColor[s.Status]
|
|
: "")">
|
|
@s.Status
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
}else{
|
|
<h4>Data Tidak Ada</h4>
|
|
}
|
|
</div>
|
|
</section> |