424 lines
23 KiB
PHP
424 lines
23 KiB
PHP
{{-- resources/views/landing.blade.php
|
|
KEGUNAAN: Halaman landing page publik RedGuard.
|
|
Bisa diakses tanpa login. Menampilkan informasi sistem,
|
|
fitur, daftar penyakit, dan ajakan untuk konsultasi. --}}
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RedGuard — Sistem Pakar Penyakit Cabai Rawit</title>
|
|
<meta name="description" content="Sistem pakar diagnosis penyakit dan hama cabai rawit berbasis Certainty Factor. Gratis, akurat, dan mudah digunakan.">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Poppins',sans-serif;background:#fff;color:#1a2e1a;overflow-x:hidden}
|
|
|
|
/* ── NAVBAR ── */
|
|
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;background:rgba(255,255,255,0.95);border-bottom:1px solid #D5EFE3;position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(39,174,96,0.08)}
|
|
.nav-brand{display:flex;align-items:center;gap:8px}
|
|
.nav-logo{width:32px;height:32px;background:#C0392B;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(192,57,43,0.25)}
|
|
.nav-name{font-size:15px;font-weight:800;color:#1a2e1a;letter-spacing:-0.02em}
|
|
.nav-name span{color:#C0392B}
|
|
.nav-links{display:none}
|
|
@media(min-width:640px){.nav-links{display:flex;gap:24px;align-items:center}}
|
|
.nl{font-size:13px;color:#6B7280;cursor:pointer;font-weight:500;text-decoration:none;transition:color 0.15s}
|
|
.nl:hover{color:#C0392B}
|
|
.nl.active{color:#C0392B;font-weight:600}
|
|
.nav-cta{background:#C0392B;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(192,57,43,0.25);text-decoration:none;transition:all 0.2s;display:inline-flex;align-items:center}
|
|
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(192,57,43,0.35)}
|
|
|
|
/* ── HERO ── */
|
|
.hero{padding:40px 20px 48px;background:#FFFBF9;position:relative;overflow:hidden;border-bottom:1px solid #F0E8E4}
|
|
.hero-bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(192,57,43,0.05) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
|
|
.hero-blob1{position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(192,57,43,0.04);top:-80px;right:-60px;pointer-events:none}
|
|
.hero-blob2{position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(39,174,96,0.04);bottom:-40px;left:-40px;pointer-events:none}
|
|
.hero-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
|
|
.hero-logo-tag{display:flex;align-items:center;gap:10px;margin-bottom:18px}
|
|
.hero-logo-big{width:42px;height:42px;background:#C0392B;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900;box-shadow:0 6px 18px rgba(192,57,43,0.3)}
|
|
.hero-logo-name{font-size:17px;font-weight:800;color:#1a2e1a;letter-spacing:-0.02em}
|
|
.hero-logo-name span{color:#C0392B}
|
|
.hero-logo-sub{font-size:11px;color:#9CA3AF;margin-top:1px}
|
|
.hero h1{font-size:clamp(26px,6vw,38px);font-weight:800;line-height:1.12;letter-spacing:-0.025em;color:#1a2e1a;margin-bottom:12px}
|
|
.hero h1 em{color:#C0392B;font-style:normal}
|
|
.hero p{font-size:13px;color:#6B7280;line-height:1.75;margin-bottom:24px;max-width:460px}
|
|
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
|
|
.btn-red{background:#C0392B;color:#fff;border:none;padding:11px 22px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 5px 18px rgba(192,57,43,0.28);transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center}
|
|
.btn-red:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(192,57,43,0.38)}
|
|
.btn-ghost{background:#fff;color:#1a2e1a;border:1.5px solid #E5E7EB;padding:11px 18px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center}
|
|
.btn-ghost:hover{border-color:#C0392B;color:#C0392B}
|
|
.hero-trust{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
|
|
.trust-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#9CA3AF}
|
|
.trust-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
|
|
|
|
/* ── MOCK CARD ── */
|
|
.mock-card{background:#fff;border-radius:14px;border:1px solid #F0E8E4;box-shadow:0 12px 40px rgba(192,57,43,0.1),0 3px 12px rgba(0,0,0,0.05);overflow:hidden}
|
|
.mock-header{background:#C0392B;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
|
|
.mock-title{font-size:12px;font-weight:700;color:#fff}
|
|
.mock-badge{background:rgba(255,255,255,0.2);color:#fff;font-size:10px;padding:2px 8px;border-radius:100px;font-weight:700}
|
|
.mock-body{padding:12px 16px}
|
|
.mock-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #FDF5F3}
|
|
.mock-item:last-child{border-bottom:none}
|
|
.mk{font-size:10px;font-weight:700;color:#C0392B;background:#FDEDEC;border:1px solid #FADBD8;padding:2px 6px;border-radius:4px;font-family:monospace;flex-shrink:0}
|
|
.mn{font-size:12px;color:#1a2e1a;font-weight:500;flex:1}
|
|
.mc{width:17px;height:17px;border-radius:4px;background:#C0392B;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(192,57,43,0.25)}
|
|
.mc-e{width:17px;height:17px;border-radius:4px;border:1.5px solid #E5E7EB;flex-shrink:0}
|
|
.mock-footer{padding:10px 16px;border-top:1px solid #FDF5F3;background:#FFFBF9;display:flex;justify-content:space-between;align-items:center}
|
|
.mock-count{font-size:11px;color:#9CA3AF}
|
|
.mock-count b{color:#C0392B;font-size:13px}
|
|
.mock-btn{background:#C0392B;color:#fff;border:none;padding:7px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(192,57,43,0.25)}
|
|
|
|
/* ── STATS BAR ── */
|
|
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);background:#EAFAF1;gap:1px;border-top:1px solid #D5EFE3;border-bottom:1px solid #D5EFE3}
|
|
.sb{padding:22px 12px;text-align:center;background:#EAFAF1;transition:background 0.2s;cursor:default;position:relative}
|
|
.sb:hover{background:#D5EFE3}
|
|
.sb::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:#27AE60;border-radius:0 0 4px 4px}
|
|
.sb-n{font-size:clamp(22px,5vw,32px);font-weight:800;color:#1a2e1a;line-height:1;margin-bottom:4px;letter-spacing:-0.02em}
|
|
.sb-n span{color:#C0392B}
|
|
.sb-l{font-size:11px;color:#52946B;font-weight:500}
|
|
|
|
/* ── SECTIONS ── */
|
|
.section{padding:48px 20px;max-width:700px;margin:0 auto}
|
|
.sec-label{font-size:10px;font-weight:700;color:#27AE60;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px}
|
|
.sec-h{font-size:clamp(20px,4vw,26px);font-weight:800;color:#1a2e1a;letter-spacing:-0.02em;margin-bottom:6px;line-height:1.2}
|
|
.sec-sub{font-size:13px;color:#9CA3AF;margin-bottom:28px}
|
|
|
|
/* ── FEATURES ── */
|
|
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.fc{background:#fff;border:1px solid #EDF2EC;border-radius:12px;padding:18px;transition:all 0.25s;cursor:default}
|
|
.fc:hover{transform:translateY(-3px);border-color:#C0D9C8;box-shadow:0 10px 32px rgba(39,174,96,0.1)}
|
|
.fc-icon{width:38px;height:38px;border-radius:10px;background:#EAFAF1;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;box-shadow:0 3px 10px rgba(39,174,96,0.12)}
|
|
.fc-t{font-size:13px;font-weight:700;color:#1a2e1a;margin-bottom:4px}
|
|
.fc-d{font-size:11px;color:#9CA3AF;line-height:1.6}
|
|
|
|
/* ── PENYAKIT ── */
|
|
.penyakit-sec{background:#EAFAF1;border-top:1px solid #D5EFE3;border-bottom:1px solid #D5EFE3;padding:48px 0}
|
|
.penyakit-inner{padding:0 20px;max-width:700px;margin:0 auto}
|
|
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
|
|
.pc{background:#fff;border-radius:12px;border:1px solid #EDF2EC;overflow:hidden;transition:all 0.25s;cursor:default}
|
|
.pc:hover{transform:translateY(-4px);border-color:#C0D9C8;box-shadow:0 12px 36px rgba(39,174,96,0.1)}
|
|
.pc-img{height:90px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative}
|
|
.pc-img-hama{background:linear-gradient(135deg,#FEF9E7,#FEF0CC)}
|
|
.pc-img-penyakit{background:linear-gradient(135deg,#FDEDEC,#FADBD8)}
|
|
.pc-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:100px}
|
|
.pc-badge-h{background:#FEF9E7;color:#B7770D;border:1px solid #F9E79F}
|
|
.pc-badge-p{background:#FDEDEC;color:#A93226;border:1px solid #FADBD8}
|
|
.pc-body{padding:12px}
|
|
.pc-name{font-size:13px;font-weight:700;color:#1a2e1a;margin-bottom:2px}
|
|
.pc-sci{font-size:10px;color:#9CA3AF;font-style:italic;margin-bottom:6px}
|
|
.pc-desc{font-size:11px;color:#6B7280;line-height:1.55}
|
|
.pc-footer{padding:8px 12px;border-top:1px solid #F0F7F2;background:#F7FBF8;display:flex;align-items:center;justify-content:space-between}
|
|
.pc-gejala{font-size:10px;color:#9CA3AF}
|
|
.pc-gejala b{color:#27AE60}
|
|
.pc-arrow{width:22px;height:22px;border-radius:6px;background:#EAFAF1;display:flex;align-items:center;justify-content:center;color:#27AE60;font-size:11px;font-weight:700}
|
|
|
|
/* ── CARA PAKAI ── */
|
|
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
|
|
.step{background:#FAFFFE;border:1px solid #EDF7F2;border-radius:12px;padding:18px;transition:all 0.2s}
|
|
.step:hover{border-color:#C0D9C8;box-shadow:0 8px 24px rgba(39,174,96,0.08)}
|
|
.step-num{width:36px;height:36px;border-radius:50%;background:#C0392B;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 4px 14px rgba(192,57,43,0.25)}
|
|
.step-t{font-size:13px;font-weight:700;color:#1a2e1a;margin-bottom:4px}
|
|
.step-d{font-size:11px;color:#9CA3AF;line-height:1.6}
|
|
|
|
/* ── CTA ── */
|
|
.cta-s{padding:48px 20px;background:#EAFAF1;border-top:1px solid #D5EFE3;text-align:center;position:relative;overflow:hidden}
|
|
.cta-blob{position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(39,174,96,0.08);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
|
|
.cta-s h2{font-size:clamp(20px,4vw,28px);font-weight:800;color:#1a2e1a;margin-bottom:10px;position:relative;z-index:1;letter-spacing:-0.02em}
|
|
.cta-s p{font-size:13px;color:#52946B;margin-bottom:24px;position:relative;z-index:1}
|
|
.cta-note{font-size:11px;color:#8DB89E;margin-top:12px;position:relative;z-index:1}
|
|
|
|
/* ── FOOTER ── */
|
|
.footer{padding:32px 20px;background:#1a2e1a}
|
|
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:700px;margin:0 auto}
|
|
.ft-full{grid-column:1/-1}
|
|
.ft-brand{font-size:15px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.02em}
|
|
.ft-brand span{color:#C0392B}
|
|
.ft-desc{font-size:11px;color:#6B7280;line-height:1.7}
|
|
.ft-title{font-size:10px;font-weight:700;color:#52946B;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.08em}
|
|
.ft-link{font-size:12px;color:#6B7280;display:block;margin-bottom:6px;cursor:pointer;text-decoration:none;transition:color 0.15s}
|
|
.ft-link:hover{color:#fff}
|
|
.ft-bottom{padding:14px 20px;background:#132214;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
|
|
.ft-copy{font-size:10px;color:#374151}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
{{-- ── NAVBAR ── --}}
|
|
<nav class="nav">
|
|
<div class="nav-brand">
|
|
<div class="brand-icon">🌶️</div>
|
|
<div class="nav-name"><span>Red</span>Guard</div>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="{{ route('landing') }}" class="nl active">Beranda</a>
|
|
<a href="#fitur" class="nl">Fitur</a>
|
|
<a href="#penyakit" class="nl">Penyakit</a>
|
|
<a href="#cara-pakai" class="nl">Cara Pakai</a>
|
|
@auth
|
|
@if(auth()->user()->role === 'admin')
|
|
<a href="{{ route('admin.dashboard') }}" class="nl">Dashboard</a>
|
|
@else
|
|
<a href="{{ route('konsultasi.index') }}" class="nl">Konsultasi</a>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
@auth
|
|
<a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('konsultasi.index') }}" class="nav-cta">
|
|
{{ auth()->user()->role === 'admin' ? 'Dashboard' : 'Konsultasi' }}
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="nav-cta">Login</a>
|
|
@endauth
|
|
</nav>
|
|
|
|
{{-- ── HERO ── --}}
|
|
<section class="hero">
|
|
<div class="hero-bg-dots"></div>
|
|
<div class="hero-blob1"></div>
|
|
<div class="hero-blob2"></div>
|
|
<div class="hero-inner">
|
|
<div class="hero-logo-tag">
|
|
<div class="brand-icon">🌶️</div>
|
|
<div>
|
|
<div class="hero-logo-name"><span>Red</span>Guard</div>
|
|
<div class="hero-logo-sub">Sistem Pakar Cabai Rawit</div>
|
|
</div>
|
|
</div>
|
|
<h1>Deteksi <em>Penyakit</em><br>Cabai Rawit<br>Lebih Akurat</h1>
|
|
<p>Sistem pakar berbasis Certainty Factor yang membantu petani mendiagnosis penyakit dan hama tanaman cabai rawit — cepat, akurat, dan mudah digunakan.</p>
|
|
<div class="hero-btns">
|
|
@auth
|
|
<a href="{{ route('konsultasi.index') }}" class="btn-red">Konsultasi Sekarang</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn-red">Konsultasi Sekarang</a>
|
|
<a href="{{ route('register') }}" class="btn-ghost">Daftar Gratis</a>
|
|
@endauth
|
|
</div>
|
|
<div class="hero-trust">
|
|
<div class="trust-item"><div class="trust-dot" style="background:#27AE60"></div>Gratis digunakan</div>
|
|
<div class="trust-item"><div class="trust-dot" style="background:#3498DB"></div>Tanpa install</div>
|
|
<div class="trust-item"><div class="trust-dot" style="background:#C0392B"></div>Akurasi tinggi</div>
|
|
</div>
|
|
|
|
{{-- Mock Preview Form --}}
|
|
<div class="mock-card">
|
|
<div class="mock-header">
|
|
<span class="mock-title">Pilih Gejala Tanaman</span>
|
|
<span class="mock-badge">3 dipilih</span>
|
|
</div>
|
|
<div class="mock-body">
|
|
<div class="mock-item">
|
|
<span class="mk">G01</span><span class="mn">Daun muda mengeriting</span>
|
|
<div class="mc"><svg width="9" height="7" viewBox="0 0 9 7"><path d="M1 3.5l2.5 2.5L8 1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" fill="none"/></svg></div>
|
|
</div>
|
|
<div class="mock-item">
|
|
<span class="mk">G03</span><span class="mn">Bercak putih pada daun</span>
|
|
<div class="mc"><svg width="9" height="7" viewBox="0 0 9 7"><path d="M1 3.5l2.5 2.5L8 1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" fill="none"/></svg></div>
|
|
</div>
|
|
<div class="mock-item">
|
|
<span class="mk">G04</span><span class="mn">Permukaan daun keperakan</span>
|
|
<div class="mc"><svg width="9" height="7" viewBox="0 0 9 7"><path d="M1 3.5l2.5 2.5L8 1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" fill="none"/></svg></div>
|
|
</div>
|
|
<div class="mock-item">
|
|
<span class="mk">G05</span><span class="mn">Pertumbuhan terhambat</span>
|
|
<div class="mc-e"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-footer">
|
|
<span class="mock-count"><b>3</b> gejala dipilih</span>
|
|
<button class="mock-btn">Diagnosa</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ── STATS BAR ── --}}
|
|
<div class="stats-bar">
|
|
<div class="sb">
|
|
<div class="sb-n">{{ $totalPenyakit }}<span>+</span></div>
|
|
<div class="sb-l">Penyakit & Hama</div>
|
|
</div>
|
|
<div class="sb">
|
|
<div class="sb-n">{{ $totalGejala }}<span>+</span></div>
|
|
<div class="sb-l">Gejala Terdata</div>
|
|
</div>
|
|
<div class="sb">
|
|
<div class="sb-n">98<span>%</span></div>
|
|
<div class="sb-l">Akurasi Diagnosa</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── FITUR ── --}}
|
|
<div id="fitur" style="background:#fff">
|
|
<div class="section">
|
|
<div class="sec-label">Keunggulan Sistem</div>
|
|
<div class="sec-h">Mengapa Memilih RedGuard?</div>
|
|
<div class="sec-sub">Dirancang untuk kebutuhan nyata petani cabai Indonesia</div>
|
|
<div class="feat-grid">
|
|
<div class="fc"><div class="fc-icon">🧮</div><div class="fc-t">Certainty Factor</div><div class="fc-d">Algoritma CF memberikan tingkat keyakinan diagnosa yang akurat dan terukur.</div></div>
|
|
<div class="fc"><div class="fc-icon">⚡</div><div class="fc-t">Diagnosa Instan</div><div class="fc-d">Hasil langsung muncul setelah memilih gejala tanaman.</div></div>
|
|
<div class="fc"><div class="fc-icon">💊</div><div class="fc-t">Solusi Lengkap</div><div class="fc-d">Rekomendasi penanganan dari pakar pertanian berpengalaman.</div></div>
|
|
<div class="fc"><div class="fc-icon">📋</div><div class="fc-t">Riwayat Tersimpan</div><div class="fc-d">Pantau perkembangan kesehatan tanaman dari waktu ke waktu.</div></div>
|
|
<div class="fc"><div class="fc-icon">🔢</div><div class="fc-t">Transparan</div><div class="fc-d">Lihat detail perhitungan CF step-by-step untuk setiap gejala.</div></div>
|
|
<div class="fc"><div class="fc-icon">📱</div><div class="fc-t">Mobile Friendly</div><div class="fc-d">Akses dari HP maupun komputer tanpa install apapun.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── PENYAKIT ── --}}
|
|
<section id="penyakit" class="penyakit-sec">
|
|
<div class="penyakit-inner">
|
|
<div class="sec-label">Knowledge Base</div>
|
|
<div class="sec-h">Penyakit & Hama yang Dapat Dideteksi</div>
|
|
<div class="sec-sub">{{ $totalPenyakit }} jenis penyakit dan hama cabai rawit paling umum di Indonesia</div>
|
|
<div class="p-grid">
|
|
@php
|
|
$emojiMap = [
|
|
'P01' => '🐛', 'P02' => '🕷️', 'P03' => '🪰',
|
|
'P04' => '🐜', 'P05' => '🦟', 'P06' => '🦟',
|
|
'P07' => '🦠', 'P08' => '🍄', 'P09' => '🔴',
|
|
'P10' => '🟡', 'P11' => '🌿', 'P12' => '🍃',
|
|
];
|
|
$namaIlmiah = [
|
|
'P01' => 'Thrips parvispinus',
|
|
'P02' => 'Polyphagotarsonemus latus',
|
|
'P03' => 'Bactrocera dorsalis',
|
|
'P04' => 'Myzus persicae',
|
|
'P05' => 'Bemisia tabaci',
|
|
'P06' => 'Trialeurodes vaporariorum',
|
|
'P07' => 'Ralstonia solanacearum',
|
|
'P08' => 'Fusarium oxysporum',
|
|
'P09' => 'Colletotrichum capsici',
|
|
'P10' => 'Begomovirus',
|
|
'P11' => 'Cucumber Mosaic Virus',
|
|
'P12' => 'Leaf Curl Virus',
|
|
];
|
|
$deskripsiSingkat = [
|
|
'P01' => 'Daun mengeriting dan keperakan akibat serangan serangga kecil.',
|
|
'P02' => 'Daun muda menebal dan menggulung ke bawah.',
|
|
'P03' => 'Buah membusuk dari dalam sebelum matang.',
|
|
'P04' => 'Koloni serangga di pucuk, daun keriting dan lengket.',
|
|
'P05' => 'Serangga putih di bawah daun, muncul jelaga hitam.',
|
|
'P06' => 'Daun menguning, pertumbuhan terganggu.',
|
|
'P07' => 'Tanaman layu mendadak, batang mengeluarkan lendir.',
|
|
'P08' => 'Daun menguning dari bawah, akar membusuk.',
|
|
'P09' => 'Bercak cekung coklat kehitaman pada buah.',
|
|
'P10' => 'Daun menguning cerah merata, tanaman kerdil.',
|
|
'P11' => 'Daun belang hijau muda dan tua, tanaman kerdil.',
|
|
'P12' => 'Daun keriting tidak beraturan, ruas batang memendek.',
|
|
];
|
|
@endphp
|
|
|
|
@foreach($penyakitList as $p)
|
|
<div class="pc">
|
|
<div class="pc-img {{ $p->jenis === 'Hama' ? 'pc-img-hama' : 'pc-img-penyakit' }}">
|
|
{{ $emojiMap[$p->kode] ?? '🌿' }}
|
|
<div class="pc-badge {{ $p->jenis === 'Hama' ? 'pc-badge-h' : 'pc-badge-p' }}">
|
|
{{ $p->jenis }}
|
|
</div>
|
|
</div>
|
|
<div class="pc-body">
|
|
<div class="pc-name">{{ $p->nama }}</div>
|
|
<div class="pc-sci">{{ $namaIlmiah[$p->kode] ?? $p->penyebab }}</div>
|
|
<div class="pc-desc">{{ $deskripsiSingkat[$p->kode] ?? $p->deskripsi }}</div>
|
|
</div>
|
|
<div class="pc-footer">
|
|
<span class="pc-gejala"><b>{{ $p->rules_count }}</b> gejala</span>
|
|
<div class="pc-arrow">→</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div style="text-align:center;margin-top:20px">
|
|
@auth
|
|
<a href="{{ route('konsultasi.index') }}" class="btn-ghost" style="font-size:12px;border-color:#C0D9C8;color:#27AE60">
|
|
Mulai Konsultasi →
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn-ghost" style="font-size:12px;border-color:#C0D9C8;color:#27AE60">
|
|
Login untuk Konsultasi →
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ── CARA PAKAI ── --}}
|
|
<div id="cara-pakai" style="background:#fff">
|
|
<div class="section">
|
|
<div class="sec-label">Cara Penggunaan</div>
|
|
<div class="sec-h">4 Langkah Mudah</div>
|
|
<div class="sec-sub">Tidak perlu keahlian khusus — siapapun bisa menggunakannya</div>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div class="step-t">Daftar & Login</div>
|
|
<div class="step-d">Buat akun gratis atau login jika sudah punya akun</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div class="step-t">Pilih Gejala</div>
|
|
<div class="step-d">Centang semua gejala yang terlihat pada tanaman Anda</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div class="step-t">Proses CF</div>
|
|
<div class="step-d">Sistem menghitung nilai Certainty Factor secara otomatis</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">4</div>
|
|
<div class="step-t">Lihat Hasil</div>
|
|
<div class="step-d">Dapatkan diagnosa lengkap beserta solusi penanganan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── CTA ── --}}
|
|
<section class="cta-s">
|
|
<div class="cta-blob"></div>
|
|
<h2>Mulai Diagnosa Sekarang</h2>
|
|
<p>Gratis, mudah digunakan, dan akurat.<br>Bantu tanaman cabai Anda tumbuh sehat.</p>
|
|
@auth
|
|
<a href="{{ route('konsultasi.index') }}" class="btn-red" style="font-size:14px;padding:13px 32px;position:relative;z-index:1">
|
|
Mulai Konsultasi
|
|
</a>
|
|
@else
|
|
<a href="{{ route('register') }}" class="btn-red" style="font-size:14px;padding:13px 32px;position:relative;z-index:1">
|
|
Daftar & Konsultasi Gratis
|
|
</a>
|
|
@endauth
|
|
<div class="cta-note">Tidak perlu download · Langsung pakai di browser · Gratis selamanya</div>
|
|
</section>
|
|
|
|
{{-- ── FOOTER ── --}}
|
|
<footer class="footer">
|
|
<div class="footer-grid">
|
|
<div class="ft-full">
|
|
<div class="ft-brand"><span>Red</span>Guard</div>
|
|
<div class="ft-desc">Sistem pakar diagnosis penyakit dan hama tanaman cabai rawit berbasis Certainty Factor. Dibuat untuk mendukung petani Indonesia.</div>
|
|
</div>
|
|
<div>
|
|
<div class="ft-title">Menu</div>
|
|
<a href="{{ route('landing') }}" class="ft-link">Beranda</a>
|
|
<a href="{{ route('login') }}" class="ft-link">Konsultasi</a>
|
|
@auth
|
|
<a href="{{ route('user.riwayat') }}" class="ft-link">Riwayat</a>
|
|
@endauth
|
|
</div>
|
|
<div>
|
|
<div class="ft-title">Sistem</div>
|
|
<span class="ft-link">{{ $totalPenyakit }} Penyakit & Hama</span>
|
|
<span class="ft-link">{{ $totalGejala }} Gejala Terdata</span>
|
|
<span class="ft-link">{{ $totalRule }} Rule CF Aktif</span>
|
|
<span class="ft-link">Metode Certainty Factor</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<div class="ft-bottom">
|
|
<span class="ft-copy">© {{ date('Y') }} RedGuard — Sistem Pakar Cabai Rawit</span>
|
|
<span class="ft-copy">Tugas Akhir D3 · Metode: Certainty Factor</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |