66 lines
3.1 KiB
Plaintext
66 lines
3.1 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Lokasi";
|
|
}
|
|
|
|
<section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
|
|
<div class="max-w-2xl">
|
|
<div class="text-xs font-medium uppercase tracking-widest text-primary">
|
|
Lokasi Konservasi
|
|
</div>
|
|
<h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
|
|
Habitat yang kami jaga
|
|
</h1>
|
|
<p class="mt-4 text-lg text-muted-foreground">
|
|
Ruang hijau, hutan kota, dan kawasan mangrove yang menjadi rumah bagi flora
|
|
dan fauna Jakarta.
|
|
</p>
|
|
</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> |