219 lines
14 KiB
PHP
219 lines
14 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('title', 'Informasi Penyakit Daun Padi - Rice Leaf AI')
|
|
|
|
@section('content')
|
|
<div class="max-w-7xl mx-auto px-6 py-12 flex-grow">
|
|
|
|
<div class="text-center mb-16 animate-[fadeInUp_0.8s_ease-out_forwards]">
|
|
<span class="bg-green-100 text-green-700 px-4 py-1.5 rounded-full text-sm font-semibold mb-4 inline-block shadow-sm border border-green-200">
|
|
📚 Ensiklopedia Botani
|
|
</span>
|
|
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-800 mb-4">
|
|
Informasi Penyakit Daun Padi
|
|
</h1>
|
|
<p class="text-gray-500 max-w-2xl mx-auto text-lg">
|
|
Kenali lebih dalam berbagai jenis penyakit, penyebab, gejala, serta cara pengendalian yang tepat untuk menjaga kualitas panen Anda.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-10">
|
|
|
|
<div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
|
|
<div class="relative overflow-hidden h-64 shrink-0">
|
|
<img src="https://www.irri.org/sites/default/files/styles/large/public/blast-rice.jpg"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6">
|
|
<span class="bg-red-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Fungi</span>
|
|
<h2 class="text-4xl font-extrabold text-white drop-shadow-md">
|
|
Blast
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 flex-grow">
|
|
<div class="grid gap-4 h-full">
|
|
<div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
|
|
<h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🦠</span> Penyebab
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">Jamur <i class="font-semibold">Pyricularia oryzae</i></p>
|
|
</div>
|
|
|
|
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
|
<h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🔍</span> Gejala
|
|
</h3>
|
|
<ul class="list-none text-gray-700 text-sm space-y-1">
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Bercak berbentuk belah ketupat</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Warna abu-abu kecoklatan</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun mengering dari ujung</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
|
|
<h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>⚠️</span> Dampak
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Menurunkan hasil panen secara signifikan.</p>
|
|
</div>
|
|
|
|
<div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
|
|
<h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>💊</span> Pengendalian
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Gunakan fungisida dan varietas tahan penyakit.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
|
|
<div class="relative overflow-hidden h-64 shrink-0">
|
|
<img src="https://www.knowledgebank.irri.org/images/stories/xbacterial-blight.jpg.pagespeed.ic.y.jpg"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6">
|
|
<span class="bg-yellow-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Bakteri</span>
|
|
<h2 class="text-4xl font-extrabold text-white drop-shadow-md">
|
|
Blight
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 flex-grow">
|
|
<div class="grid gap-4 h-full">
|
|
<div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
|
|
<h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🦠</span> Penyebab
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">Bakteri <i class="font-semibold">Xanthomonas oryzae</i></p>
|
|
</div>
|
|
|
|
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
|
<h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🔍</span> Gejala
|
|
</h3>
|
|
<ul class="list-none text-gray-700 text-sm space-y-1">
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun menguning secara masif</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Tepi daun mengering cepat</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Pertumbuhan tanaman terhambat</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
|
|
<h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>⚠️</span> Dampak
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Penurunan produktivitas tanaman drastis.</p>
|
|
</div>
|
|
|
|
<div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
|
|
<h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>💊</span> Pengendalian
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Gunakan benih sehat dan sanitasi lahan rutin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-gray-100 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col">
|
|
<div class="relative overflow-hidden h-64 shrink-0">
|
|
<img src="https://www.knowledgebank.irri.org/images/stories/tungro-rice.jpg"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6">
|
|
<span class="bg-orange-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Virus</span>
|
|
<h2 class="text-4xl font-extrabold text-white drop-shadow-md">
|
|
Tungro
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 flex-grow">
|
|
<div class="grid gap-4 h-full">
|
|
<div class="bg-red-50/50 p-4 rounded-2xl border border-red-100">
|
|
<h3 class="font-bold text-red-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🦠</span> Penyebab
|
|
</h3>
|
|
<p class="text-gray-700 text-sm">Virus Tungro <span class="text-gray-500">(ditularkan wereng hijau)</span></p>
|
|
</div>
|
|
|
|
<div class="bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
|
|
<h3 class="font-bold text-blue-700 flex items-center gap-2 mb-2">
|
|
<span class="text-xl">🔍</span> Gejala
|
|
</h3>
|
|
<ul class="list-none text-gray-700 text-sm space-y-1">
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Daun menguning oranye terang</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Tanaman menjadi kerdil</li>
|
|
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span> Malai tidak berkembang baik</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-yellow-50/50 p-4 rounded-2xl border border-yellow-100">
|
|
<h3 class="font-bold text-yellow-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>⚠️</span> Dampak
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Gagal panen jika tidak dikendalikan dini.</p>
|
|
</div>
|
|
|
|
<div class="bg-green-50/50 p-4 rounded-2xl border border-green-100">
|
|
<h3 class="font-bold text-green-700 flex items-center gap-2 mb-2 text-sm">
|
|
<span>💊</span> Pengendalian
|
|
</h3>
|
|
<p class="text-gray-700 text-xs leading-relaxed">Kendalikan wereng dan pakai varietas tahan.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-white rounded-[2rem] shadow-lg hover:shadow-2xl border border-green-200 overflow-hidden hover:-translate-y-2 transition-all duration-500 flex flex-col relative">
|
|
<div class="absolute top-6 right-6 z-10 bg-white/90 backdrop-blur px-4 py-2 rounded-full text-green-600 font-bold shadow-md flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
Kondisi Optimal
|
|
</div>
|
|
|
|
<div class="relative overflow-hidden h-64 shrink-0">
|
|
<img src="https://www.knowledgebank.irri.org/images/stories/healthy-rice.jpg"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
|
<div class="absolute bottom-6 left-6">
|
|
<span class="bg-green-500/90 backdrop-blur text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider mb-2 inline-block">Normal</span>
|
|
<h2 class="text-4xl font-extrabold text-white drop-shadow-md">
|
|
Healthy
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 flex-grow flex flex-col justify-center">
|
|
<div class="bg-green-50/50 p-6 rounded-3xl border border-green-100 mb-6">
|
|
<h3 class="font-bold text-gray-800 text-lg mb-3 flex items-center gap-2">
|
|
<span>🌿</span> Deskripsi Fisik
|
|
</h3>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Tanaman padi yang sehat memiliki daun hijau segar merata, warna yang cerah, tanpa adanya bercak, dan terbebas dari gejala penyakit atau serangan hama. Tekstur daun normal dan pertumbuhan optimal.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-blue-50/50 p-6 rounded-3xl border border-blue-100">
|
|
<h3 class="font-bold text-blue-800 text-lg mb-3 flex items-center gap-2">
|
|
<span>💡</span> Rekomendasi Perawatan
|
|
</h3>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Untuk mempertahankan kondisi ini, pastikan menjaga pemupukan yang seimbang, manajemen irigasi air yang cukup, serta melakukan pengecekan dan pengendalian hama secara rutin.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection |