70 lines
3.1 KiB
Plaintext
70 lines
3.1 KiB
Plaintext
@{
|
|
ViewData["Title"] = @ViewBag.data.Name;
|
|
}
|
|
|
|
<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
|
|
<a asp-controller="flora" asp-action="Index" class="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
|
|
<i data-lucide="arrow-left" class="h-4 w-4"></i> Kembali
|
|
</a>
|
|
<div class="mt-6 grid gap-10 lg:grid-cols-5">
|
|
<div class="lg:col-span-3">
|
|
<div class="overflow-hidden rounded-2xl border border-border bg-muted">
|
|
<img src="~/images/@ViewBag.data.Image" class="aspect-[4/3] w-full object-cover" alt="@ViewBag.data.Name"/>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-2">
|
|
<div class="inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-1 text-[11px] font-medium text-foreground">
|
|
<i data-lucide="leaf" class="h-3 w-3"></i> Flora
|
|
</div>
|
|
|
|
<h1 class="mt-4 font-serif text-4xl leading-tight text-foreground sm:text-5xl">
|
|
@ViewBag.data.Name
|
|
</h1>
|
|
<p class="mt-1 text-lg italic text-muted-foreground">
|
|
@ViewBag.data.NamaIlmiah
|
|
</p>
|
|
<div class="mt-4">
|
|
<span class="rounded-full border border-border px-3 py-1 text-xs">
|
|
Status: @ViewBag.data.StatusPerlindungan
|
|
</span>
|
|
</div>
|
|
<p class="mt-6 text-base leading-relaxed text-foreground">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rerum pariatur incidunt optio repellat fuga illum repudiandae. Numquam aperiam, mollitia accusamus deleniti quis repellat harum voluptas temporibus perspiciatis explicabo reiciendis.
|
|
</p>
|
|
|
|
<div class="mt-8 rounded-xl border border-border bg-secondary/40 p-5">
|
|
<h3 class="text-sm font-semibold text-foreground">
|
|
Habitat
|
|
</h3>
|
|
<p class="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
@ViewBag.data.Habitat.Name
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-16">
|
|
<h2 class="font-serif text-2xl text-foreground">
|
|
Dapat ditemukan di
|
|
</h2>
|
|
<div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach(var l in Model.FeaturedLocations)
|
|
{
|
|
<a asp-controller="lokasi" asp-action="detail" asp-route-slug="@l.Slug" class="group flex items-center gap-4 rounded-xl border border-border bg-card p-3 transition-colors hover:border-primary/40 hover:bg-secondary/60">
|
|
<img src="~/images/@l.Image" class="h-14 w-14 rounded-lg object-cover" alt="@l.Name" />
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate font-medium text-foreground">
|
|
@l.Name
|
|
</div>
|
|
<div class="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<i data-lucide="map-pin" class="h-3 w-3"></i>
|
|
@l.Region
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
</div> |