322 lines
12 KiB
Plaintext
322 lines
12 KiB
Plaintext
@using kehati.Models.View
|
|
@{
|
|
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" }
|
|
};
|
|
}
|
|
|
|
@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">
|
|
@{
|
|
var stats = new[]
|
|
{
|
|
new {
|
|
Label = "Lokasi Konservasi",
|
|
Value = @Model.Statistik.TotalLocations
|
|
},
|
|
new {
|
|
Label = "Jenis Flora",
|
|
Value = @Model.Statistik.TotalFlora
|
|
},
|
|
new {
|
|
Label = "Jenis Fauna",
|
|
Value = @Model.Statistik.TotalFauna
|
|
},
|
|
new {
|
|
Label = "Total Spesies",
|
|
Value = @Model.Statistik.TotalSpecies
|
|
}
|
|
};
|
|
}
|
|
@foreach (var item in stats)
|
|
{
|
|
<div class="px-4 py-8 text-center sm:py-10">
|
|
<div class="font-serif text-4xl text-primary sm:text-5xl">
|
|
@item.Value
|
|
</div>
|
|
<div class="mt-2 text-xs uppercase tracking-widest text-muted-foreground">
|
|
@item.Label
|
|
</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="LokasiModel"
|
|
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(LokasiModel loc in Model.FeaturedLocations)
|
|
{
|
|
<a asp-controller="lokasi"
|
|
asp-action="detail"
|
|
asp-route-slug="@loc.Slug"
|
|
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.FloraCount Flora
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="flex items-center gap-1">
|
|
|
|
<i data-lucide="bird"
|
|
class="h-4 w-4 text-primary"></i>
|
|
|
|
@loc.FaunaCount Fauna
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</a>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPESIES -->
|
|
|
|
<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 & Fauna khas Jakarta
|
|
</h2>
|
|
</div>
|
|
<a asp-controller="Katalog"
|
|
asp-action="Index"
|
|
class="hidden shrink-0 items-center gap-1.5 text-sm font-medium text-primary hover:underline sm:inline-flex">
|
|
Semua spesies
|
|
<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">
|
|
@foreach(SpesiesModel s in Model.FeaturedSpesies)
|
|
{
|
|
<a asp-controller="katalog"
|
|
asp-action="detail"
|
|
asp-route-slug="@s.Slug"
|
|
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.CommonName"
|
|
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">
|
|
@if(s.Type == "Flora")
|
|
{
|
|
<i data-lucide="leaf" class="h-3 w-3"></i>
|
|
}
|
|
else
|
|
{
|
|
<i data-lucide="bird" class="h-3 w-3"></i>
|
|
}
|
|
@s.Type
|
|
</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.CommonName
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.ScientificName
|
|
</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.ConservationStatus)
|
|
? statusColor[s.ConservationStatus]
|
|
: "")">
|
|
@s.ConservationStatus
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</section> |