-
-
-
Let's get started
-
Laravel has an incredibly rich ecosystem.
We suggest starting with the following.
-
-
-
- {{-- Laravel Logo --}}
-
+ /* SECTIONS */
+ section { padding: 96px 0; }
+ .section-label {
+ font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
+ text-transform: uppercase; color: var(--green-600);
+ display: block; margin-bottom: 10px;
+ }
+ .section-title {
+ font-family: 'Playfair Display', serif;
+ font-size: clamp(28px, 3vw, 40px);
+ font-weight: 700; color: var(--green-950); line-height: 1.2;
+ margin-bottom: 14px;
+ }
+ .section-sub { font-size: 15px; color: #6b7280; line-height: 1.7; }
- {{-- Light Mode 12 SVG --}}
-
+ /* FEATURES */
+ #fitur { background: white; }
+ .feature-card {
+ padding: 30px; border-radius: 16px;
+ border: 1.5px solid #e5e7eb;
+ transition: all 0.3s; height: 100%;
+ position: relative; overflow: hidden;
+ }
+ .feature-card::after {
+ content: ''; position: absolute;
+ top: 0; left: 0; right: 0; height: 3px;
+ background: linear-gradient(90deg, var(--green-400), var(--green-600));
+ transform: scaleX(0); transform-origin: left;
+ transition: transform 0.3s;
+ }
+ .feature-card:hover { border-color: var(--green-200); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,163,74,0.1); }
+ .feature-card:hover::after { transform: scaleX(1); }
+ .feature-icon {
+ width: 50px; height: 50px; border-radius: 12px;
+ background: var(--green-50);
+ display: flex; align-items: center; justify-content: center;
+ margin-bottom: 18px;
+ }
+ .feature-icon i { font-size: 22px; color: var(--green-600); }
+ .feature-card h5 { font-size: 17px; font-weight: 700; color: var(--green-900); margin-bottom: 10px; }
+ .feature-card p { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 16px; }
+ .feature-link { font-size: 13px; font-weight: 600; color: var(--green-600); text-decoration: none; }
+ .feature-link:hover { text-decoration: underline; }
+ .feature-link i { transition: transform 0.2s; }
+ .feature-link:hover i { transform: translateX(4px); }
- {{-- Dark Mode 12 SVG --}}
-
-
-
+ /* ARTIKEL */
+ #artikel { background: var(--green-50); }
+ .artikel-card {
+ background: white; border-radius: 16px;
+ overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
+ transition: all 0.3s; height: 100%;
+ }
+ .artikel-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
+ .artikel-thumb {
+ height: 160px; display: flex;
+ align-items: center; justify-content: center;
+ }
+ .artikel-thumb i { font-size: 52px; opacity: 0.6; }
+ .artikel-body { padding: 20px; }
+ .artikel-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
+ .artikel-body h6 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 8px 0; line-height: 1.4; }
+ .artikel-body p { font-size: 13px; color: #6b7280; line-height: 1.5; }
+ .artikel-footer { padding: 12px 20px; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
+ .login-overlay { position: relative; }
+ .login-blur { filter: blur(3px); pointer-events: none; }
+ .login-gate {
+ position: absolute; inset: 0;
+ display: flex; flex-direction: column;
+ align-items: center; justify-content: center;
+ background: rgba(255,255,255,0.75);
+ backdrop-filter: blur(2px);
+ border-radius: 16px; gap: 12px;
+ }
+ .login-gate p { font-size: 13px; font-weight: 600; color: var(--green-800); margin: 0; }
+ .btn-login-gate {
+ padding: 8px 20px; background: var(--green-600);
+ color: white; border-radius: 8px; font-size: 13px; font-weight: 600;
+ text-decoration: none; transition: background 0.2s;
+ }
+ .btn-login-gate:hover { background: var(--green-700); color: white; }
+
+ /* CARA KERJA */
+ #cara-kerja { background: white; }
+ .step-connector {
+ position: absolute; top: 35px; left: 60%; right: -40%;
+ height: 2px; background: linear-gradient(90deg, var(--green-300, #86efac), var(--green-200));
+ z-index: 0;
+ }
+ .step-wrap { position: relative; }
+ .step-num {
+ width: 70px; height: 70px; border-radius: 50%;
+ background: linear-gradient(135deg, var(--green-500), var(--green-700));
+ color: white; font-size: 22px; font-weight: 800;
+ display: flex; align-items: center; justify-content: center;
+ margin: 0 auto 20px;
+ box-shadow: 0 8px 20px rgba(22,163,74,0.3);
+ position: relative; z-index: 1;
+ }
+ .step h6 { font-size: 15px; font-weight: 700; color: var(--green-900); margin-bottom: 8px; }
+ .step p { font-size: 13px; color: #6b7280; line-height: 1.6; }
+
+ /* TENTANG */
+ #tentang { background: linear-gradient(135deg, var(--green-900), var(--green-950)); color: white; }
+ #tentang .section-title { color: white; }
+ #tentang .section-sub { color: rgba(255,255,255,0.65); }
+ .about-check-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
+ .check-circle {
+ width: 22px; height: 22px; border-radius: 50%;
+ background: var(--green-500); flex-shrink: 0;
+ display: flex; align-items: center; justify-content: center;
+ margin-top: 2px;
+ }
+ .check-circle i { font-size: 11px; color: white; }
+ .about-check-item p { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; margin: 0; }
+ .about-stat-card {
+ background: rgba(255,255,255,0.08); border-radius: 14px;
+ padding: 24px; text-align: center;
+ border: 1px solid rgba(255,255,255,0.1);
+ }
+ .about-stat-num {
+ font-family: 'Playfair Display', serif;
+ font-size: 32px; font-weight: 900; color: var(--green-400);
+ }
+ .about-stat-lbl { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }
+
+ /* KONTAK */
+ #kontak { background: var(--cream); }
+ .contact-icon-box {
+ width: 48px; height: 48px; border-radius: 12px;
+ background: var(--green-100);
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0;
+ }
+ .contact-icon-box i { font-size: 20px; color: var(--green-600); }
+ .contact-info-title { font-size: 15px; font-weight: 700; color: var(--green-900); margin-bottom: 2px; }
+ .contact-info-text { font-size: 13px; color: #6b7280; margin: 0; }
+ .contact-form-card {
+ background: white; border-radius: 18px;
+ padding: 36px; box-shadow: 0 8px 32px rgba(0,0,0,0.08);
+ }
+ .form-control, .form-control:focus {
+ border: 1.5px solid #e5e7eb; border-radius: 10px;
+ font-size: 14px; padding: 12px 16px;
+ box-shadow: none; font-family: 'DM Sans', sans-serif;
+ }
+ .form-control:focus { border-color: var(--green-500); }
+ .form-label { font-size: 13px; font-weight: 600; color: #374151; }
+ .btn-submit {
+ width: 100%; padding: 13px;
+ background: linear-gradient(135deg, var(--green-600), var(--green-800));
+ color: white; border: none; border-radius: 10px;
+ font-size: 15px; font-weight: 600;
+ font-family: 'DM Sans', sans-serif;
+ cursor: pointer; transition: all 0.2s;
+ box-shadow: 0 4px 14px rgba(22,163,74,0.3);
+ }
+ .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22,163,74,0.4); }
+
+ /* FOOTER */
+ footer {
+ background: var(--green-950);
+ padding: 60px 0 0;
+ }
+ .footer-brand {
+ font-family: 'Playfair Display', serif;
+ font-size: 20px; font-weight: 700; color: white;
+ display: flex; align-items: center; gap: 10px;
+ margin-bottom: 14px;
+ }
+ .footer-brand .brand-icon { background: rgba(255,255,255,0.15); }
+ .footer-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 280px; }
+ .footer-heading { font-size: 13px; font-weight: 700; color: white; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
+ .footer-links { list-style: none; padding: 0; }
+ .footer-links li { margin-bottom: 10px; }
+ .footer-links a { font-size: 14px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
+ .footer-links a:hover { color: var(--green-400); }
+ .footer-bottom {
+ margin-top: 50px; padding: 20px 0;
+ border-top: 1px solid rgba(255,255,255,0.08);
+ display: flex; justify-content: space-between; align-items: center;
+ flex-wrap: wrap; gap: 12px;
+ }
+ .footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.35); margin: 0; }
+ .footer-social { display: flex; gap: 12px; }
+ .social-btn {
+ width: 36px; height: 36px; border-radius: 8px;
+ background: rgba(255,255,255,0.08);
+ display: flex; align-items: center; justify-content: center;
+ color: rgba(255,255,255,0.5); text-decoration: none;
+ transition: all 0.2s; font-size: 15px;
+ }
+ .social-btn:hover { background: var(--green-600); color: white; }
+
+ /* ANIMATIONS */
+ @keyframes floatUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+ .reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
+ .reveal.visible { opacity: 1; transform: translateY(0); }
+
+
+
+
+
+
- @if (Route::has('login'))
-
- @endif
-
-
+
+
+
+
+
+
+
+ Sistem Pakar Berbasis Certainty Factor
+
+
Deteksi Penyakit Tanaman Kopi dengan Tepat
+
Platform cerdas untuk petani kopi Indonesia. Diagnosa penyakit tanaman, baca artikel budidaya, dan dapatkan solusi pengendalian hama secara akurat.
+
+
+
+
+
Hasil Diagnosa
+
Penggerek Buah Kopi
+
Hypothenemus hampei
+
+ Tingkat Kepercayaan
+ 87%
+
+
+
+
+
+
+
+
+
+
Pengendalian Organik
+
Perangkap feromon betina
+
+
+
+
+
+
+
+
Artikel Terbaru
+
Persiapan Lahan Budidaya Kopi
+
+
+
+
+
+
+
+
+
+
+
Fitur Unggulan
+
Semua yang Kamu Butuhkan
+
Dari diagnosa penyakit hingga panduan budidaya, semua tersedia dalam satu platform.
+
+
+
+
+
+
Diagnosa Penyakit
+
Identifikasi penyakit tanaman kopi secara akurat menggunakan metode Certainty Factor. Pilih gejala dan dapatkan hasil instan.
+
Coba Sekarang
+
+
+
+
+
+
Artikel Budidaya
+
Panduan lengkap budidaya kopi dari persiapan lahan hingga panen. Disusun sistematis dan mudah dipahami petani.
+
Baca Artikel
+
+
+
+
+
+
Info Hama & Penyakit
+
Database lengkap hama dan penyakit tanaman kopi beserta cara pengendalian kimia, organik, dan budidaya.
+
Lihat Database
+
+
+
+
+
+
Riwayat Diagnosa
+
Simpan dan pantau riwayat diagnosa tanaman kopi kamu. Unduh hasil diagnosa dalam format PDF kapan saja.
+
Lihat Riwayat
+
+
+
+
+
+
Akurasi Tinggi
+
Menggunakan algoritma Certainty Factor yang telah terbukti akurat dalam mendeteksi penyakit tanaman kopi.
+
Pelajari Lebih
+
+
+
+
+
+
Mudah Digunakan
+
Antarmuka intuitif dan ramah pengguna. Dapat diakses dari perangkat apapun, kapanpun dan dimanapun.
+
Daftar Gratis
+
+
+
+
+
+
+
+
+
+
+
Konten Terkurasi
+
Artikel & Informasi
+
Akses artikel lengkap setelah login. Berikut preview konten yang tersedia.
+
+
Login untuk Akses Penuh
+
+
+
+
+
+
+
+
+
+
Budidaya
+
Persiapan Lahan untuk Budidaya Kopi
+
Panduan lengkap memilih dan menyiapkan lahan yang ideal untuk tanaman kopi berkualitas.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hama
+
Penggerek Buah Kopi (PBKo)
+
Mengenal hama paling merusak pada tanaman kopi dan cara pengendaliannya secara efektif.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Penyakit
+
Karat Daun Kopi (Coffee Leaf Rust)
+
Penyakit jamur paling umum pada kopi dan strategi pengendalian yang tepat sasaran.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cara Penggunaan
+
Mudah dalam 4 Langkah
+
Proses diagnosa yang cepat dan akurat untuk membantu petani kopi.
+
+
+
+
+
1
+
Daftar Akun
+
Buat akun gratis dengan email kamu untuk mengakses semua fitur platform.
+
+
+
+
+
2
+
Pilih Gejala
+
Centang gejala yang terlihat pada tanaman kopi kamu dari daftar yang tersedia.
+
+
+
+
+
3
+
Analisis Sistem
+
Sistem menghitung probabilitas menggunakan metode Certainty Factor secara otomatis.
+
+
+
+
+
4
+
Terima Hasil
+
Dapatkan diagnosa lengkap beserta solusi pengendalian dan unduh laporan PDF.
+
+
+
+
+
+
+
+
+
+
+
Tentang Platform
+
Mengapa Sistem Pakar Kopi?
+
Dikembangkan khusus untuk membantu petani kopi Indonesia mendeteksi dan menangani penyakit tanaman secara cepat dan tepat.
+
+
+
+
Menggunakan metode Certainty Factor yang telah terbukti akurat dalam sistem pakar
+
+
+
+
Database penyakit dan hama tanaman kopi yang lengkap dan terus diperbarui
+
+
+
+
Solusi pengendalian berbasis kimia, organik, dan budidaya untuk setiap penyakit
+
+
+
+
Dapat diakses kapan saja dan di mana saja melalui browser
+
+
+
+
+
+
+
+
Certainty Factor
+
Metode Sistem Pakar yang Digunakan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hubungi Kami
+
Ada Pertanyaan?
+
Kami siap membantu kamu dalam menggunakan platform Sistem Pakar Kopi.
+
+
+
+
+
Email
+
sistempakar.kopi@gmail.com
+
+
+
+
+
+
+
Jam Layanan
+
Senin - Jumat, 08.00 - 17.00 WIB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file