241 lines
13 KiB
PHP
241 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
|
|
|
@fonts
|
|
|
|
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
@else
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
@endif
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen antialiased">
|
|
|
|
{{-- Navigation --}}
|
|
<header class="bg-green-800 text-white shadow-lg">
|
|
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-7 h-7 text-green-300" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17 8C8 10 5.9 16.17 3.82 21H5.71C6.72 18.42 8.05 15.64 10.18 13.68C11.09 14.62 12 15.88 12 17H14C14 14.93 12.74 13.2 11.49 11.98C12.87 11.07 14.62 10.5 17 10.5V8Z"/>
|
|
<path d="M17 8C8 10 5.9 16.17 3.82 21H5.71C6.72 18.42 8.05 15.64 10.18 13.68C11.09 14.62 12 15.88 12 17H14C14 14.93 12.74 13.2 11.49 11.98C12.87 11.07 14.62 10.5 17 10.5V8Z"/>
|
|
</svg>
|
|
<span class="text-xl font-bold tracking-wide">Hutan Simpan Malaysia</span>
|
|
</div>
|
|
|
|
@if (Route::has('login'))
|
|
<div class="flex items-center gap-3">
|
|
@auth
|
|
<a href="{{ url('/dashboard') }}"
|
|
class="px-4 py-2 text-sm border border-green-400 rounded hover:bg-green-700 transition">
|
|
Dashboard
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}"
|
|
class="px-4 py-2 text-sm hover:text-green-200 transition">
|
|
Log in
|
|
</a>
|
|
@if (Route::has('register'))
|
|
<a href="{{ route('register') }}"
|
|
class="px-4 py-2 text-sm border border-green-400 rounded hover:bg-green-700 transition">
|
|
Daftar
|
|
</a>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
@endif
|
|
</nav>
|
|
</header>
|
|
|
|
{{-- Carousel --}}
|
|
<div
|
|
x-data="{
|
|
current: 0,
|
|
total: 3,
|
|
next() { this.current = (this.current + 1) % this.total },
|
|
prev() { this.current = (this.current - 1 + this.total) % this.total },
|
|
init() { setInterval(() => this.next(), 5000) }
|
|
}"
|
|
class="relative w-full overflow-hidden h-[480px] sm:h-[560px]"
|
|
>
|
|
{{-- Slide 1 --}}
|
|
<div
|
|
x-show="current === 0"
|
|
x-transition:enter="transition ease-out duration-700"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-500"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="absolute inset-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=1400&h=600&fit=crop&q=80"
|
|
alt="Hutan hujan tropika Malaysia"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
|
|
<div class="p-8 sm:p-12">
|
|
<h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Keindahan Hutan Hujan Tropika</h2>
|
|
<p class="text-green-200 text-sm sm:text-base">Warisan alam semula jadi yang perlu kita pelihara bersama</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Slide 2 --}}
|
|
<div
|
|
x-show="current === 1"
|
|
x-transition:enter="transition ease-out duration-700"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-500"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="absolute inset-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1511497584788-876760111969?w=1400&h=600&fit=crop&q=80"
|
|
alt="Hutan simpan yang dilindungi"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
|
|
<div class="p-8 sm:p-12">
|
|
<h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Hutan Simpan yang Dilindungi</h2>
|
|
<p class="text-green-200 text-sm sm:text-base">Ekosistem penting bagi keseimbangan alam dan kehidupan liar</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Slide 3 --}}
|
|
<div
|
|
x-show="current === 2"
|
|
x-transition:enter="transition ease-out duration-700"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-500"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="absolute inset-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1542401886-65d6c61db217?w=1400&h=600&fit=crop&q=80"
|
|
alt="Rimba tropika Malaysia"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
|
|
<div class="p-8 sm:p-12">
|
|
<h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Rimba Tropika yang Kaya</h2>
|
|
<p class="text-green-200 text-sm sm:text-base">Kepelbagaian flora dan fauna yang unik di rantau Asia Tenggara</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Prev Button --}}
|
|
<button
|
|
@click="prev()"
|
|
class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white w-10 h-10 rounded-full flex items-center justify-center transition text-xl font-bold"
|
|
aria-label="Sebelumnya"
|
|
>
|
|
‹
|
|
</button>
|
|
|
|
{{-- Next Button --}}
|
|
<button
|
|
@click="next()"
|
|
class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white w-10 h-10 rounded-full flex items-center justify-center transition text-xl font-bold"
|
|
aria-label="Seterusnya"
|
|
>
|
|
›
|
|
</button>
|
|
|
|
{{-- Dot Indicators --}}
|
|
<div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-2">
|
|
<button @click="current = 0" :class="current === 0 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
|
|
<button @click="current = 1" :class="current === 1 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
|
|
<button @click="current = 2" :class="current === 2 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Forest Reserve Section --}}
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl sm:text-4xl font-bold text-green-800 mb-3">Hutan Simpan Utama Malaysia</h2>
|
|
<p class="text-gray-500 max-w-xl mx-auto">Kenali warisan alam semula jadi negara kita yang bernilai tinggi dan perlu dipelihara untuk generasi akan datang.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
{{-- Card: Royal Belum --}}
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
|
|
<div class="h-52 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=600&h=300&fit=crop&q=80"
|
|
alt="Hutan Simpan Royal Belum"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
>
|
|
</div>
|
|
<div class="p-6">
|
|
<span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Perak</span>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Royal Belum</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed">
|
|
Salah satu hutan tertua di dunia berusia lebih 130 juta tahun dengan keluasan 117,500 hektar.
|
|
Merupakan habitat gajah, harimau belang, badak sumbu dan tapir yang dilindungi di bawah pemuliharaan ketat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card: Ayer Hitam --}}
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
|
|
<div class="h-52 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1511497584788-876760111969?w=600&h=300&fit=crop&q=80"
|
|
alt="Hutan Simpan Ayer Hitam"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
>
|
|
</div>
|
|
<div class="p-6">
|
|
<span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Selangor</span>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Ayer Hitam</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed">
|
|
Hutan hujan tropika pamah seluas 1,100 hektar di kawasan Puchong, Selangor.
|
|
Berfungsi sebagai tapak penyelidikan, pendidikan alam sekitar, dan tarikan eko-pelancongan yang popular berhampiran Kuala Lumpur.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card: Bukit Nanas --}}
|
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
|
|
<div class="h-52 overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1542401886-65d6c61db217?w=600&h=300&fit=crop&q=80"
|
|
alt="Hutan Simpan Bukit Nanas"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
>
|
|
</div>
|
|
<div class="p-6">
|
|
<span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Kuala Lumpur</span>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Bukit Nanas</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed">
|
|
Rizab hutan bandar tertua di Malaysia, digazet sejak tahun 1906 dan terletak di jantung Kuala Lumpur.
|
|
Menyimpan pelbagai spesies flora dan fauna unik di tengah-tengah persekitaran bandar yang sibuk.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Footer --}}
|
|
<footer class="bg-green-900 text-white mt-8 py-8">
|
|
<div class="max-w-7xl mx-auto px-4 text-center">
|
|
<p class="text-green-300 text-sm">© {{ date('Y') }} {{ config('app.name') }}. Hak Cipta Terpelihara.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|