482 lines
35 KiB
PHP
482 lines
35 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id" class="scroll-smooth scroll-pt-24">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FiFreshChecker | Klasifikasi Kesegaran Insang Ikan</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
heading: ['Poppins', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: '#0A66C2',
|
|
'primary-dark': '#004182',
|
|
accent: '#00C4CC',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
html { scroll-behavior: smooth; }
|
|
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
|
|
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
|
.fade-in-delay-1 { transition-delay: 0.1s; }
|
|
.fade-in-delay-2 { transition-delay: 0.2s; }
|
|
.fade-in-delay-3 { transition-delay: 0.3s; }
|
|
.fade-in-delay-4 { transition-delay: 0.4s; }
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #0B192C 0%, #1A365D 50%, #0A66C2 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradientShift 8s ease infinite;
|
|
}
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.float-animation { animation: floating 4s ease-in-out infinite; }
|
|
@keyframes floating {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
.glow-accent { box-shadow: 0 0 40px rgba(0, 196, 204, 0.3); }
|
|
.step-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.step-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(10, 102, 194, 0.12); }
|
|
.nav-scrolled { background: rgba(255,255,255,0.98) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }
|
|
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; overflow: hidden; opacity: 0; }
|
|
#mobile-menu.open { max-height: 400px; opacity: 1; }
|
|
.badge-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
|
|
.stat-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans text-gray-800 bg-white antialiased">
|
|
|
|
<!-- ==================== NAVBAR ==================== -->
|
|
<nav id="navbar" class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 transition-all duration-300">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<a href="{{ route('home') }}" class="font-heading font-bold text-2xl text-primary tracking-tight flex items-center">
|
|
<i class="bi bi-droplet-half text-cyan-500 mr-2 text-3xl"></i>
|
|
<span>FiFresh<span class="text-accent">Checker</span></span>
|
|
</a>
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
<a href="#beranda" class="nav-link text-gray-600 hover:text-primary font-medium transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all hover:after:w-full">Beranda</a>
|
|
<a href="#tentang" class="nav-link text-gray-600 hover:text-primary font-medium transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all hover:after:w-full">Tentang</a>
|
|
<a href="#cara-kerja" class="nav-link text-gray-600 hover:text-primary font-medium transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all hover:after:w-full">Cara Kerja</a>
|
|
<a href="#fitur" class="nav-link text-gray-600 hover:text-primary font-medium transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all hover:after:w-full">Fitur</a>
|
|
<a href="{{ route('klasifikasi') }}" class="bg-primary hover:bg-primary-dark text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-primary/30 hover:-translate-y-0.5">
|
|
Coba Sekarang
|
|
</a>
|
|
</div>
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-600 hover:text-primary focus:outline-none p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
|
<i id="menu-icon" class="bi bi-list text-2xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{-- Mobile Menu --}}
|
|
<div id="mobile-menu" class="md:hidden bg-white border-t border-gray-100">
|
|
<div class="flex flex-col px-6 py-5 space-y-4">
|
|
<a href="#beranda" class="mobile-link text-gray-700 hover:text-primary font-medium flex items-center gap-2 py-1"><i class="bi bi-house text-primary/60"></i> Beranda</a>
|
|
<a href="#tentang" class="mobile-link text-gray-700 hover:text-primary font-medium flex items-center gap-2 py-1"><i class="bi bi-info-circle text-primary/60"></i> Tentang</a>
|
|
<a href="#cara-kerja" class="mobile-link text-gray-700 hover:text-primary font-medium flex items-center gap-2 py-1"><i class="bi bi-gear text-primary/60"></i> Cara Kerja</a>
|
|
<a href="#fitur" class="mobile-link text-gray-700 hover:text-primary font-medium flex items-center gap-2 py-1"><i class="bi bi-stars text-primary/60"></i> Fitur</a>
|
|
<a href="{{ route('klasifikasi') }}" class="bg-primary hover:bg-primary-dark text-white font-semibold px-5 py-2.5 rounded-xl transition-all text-center">
|
|
Coba Sekarang
|
|
</a>
|
|
@auth
|
|
<a href="{{ route('history.index') }}" class="text-gray-600 hover:text-primary font-medium transition-colors text-sm flex items-center gap-1.5">
|
|
<i class="bi bi-clock-history"></i> Riwayat
|
|
</a>
|
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
|
@csrf
|
|
<button type="submit" class="text-gray-500 hover:text-red-500 font-medium text-sm flex items-center gap-1.5 transition-colors">
|
|
<i class="bi bi-box-arrow-right"></i> Keluar
|
|
</button>
|
|
</form>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ==================== HERO ==================== -->
|
|
<section id="beranda" class="hero-gradient relative min-h-screen flex items-center pt-20 overflow-hidden">
|
|
<div class="absolute inset-0 opacity-[0.04]" style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 32px 32px;"></div>
|
|
<div class="absolute top-1/4 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none"></div>
|
|
<div class="absolute bottom-0 left-1/4 w-72 h-72 bg-primary/30 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full py-16 lg:py-0">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
<div class="text-center lg:text-left">
|
|
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 text-cyan-300 text-sm font-semibold px-4 py-2 rounded-full mb-8 fade-in">
|
|
<span class="w-2 h-2 bg-cyan-400 rounded-full badge-pulse"></span>
|
|
Sistem Klasifikasi Berbasis AI · Versi 1.0
|
|
</div>
|
|
<h1 class="font-heading text-white text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 fade-in fade-in-delay-1">
|
|
Deteksi Kesegaran Ikan dari
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-accent"> Citra Insang</span>
|
|
</h1>
|
|
<p class="text-white/75 text-lg md:text-xl font-light mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed fade-in fade-in-delay-2">
|
|
Teknologi <em>Machine Learning</em> dengan algoritma <strong class="text-white font-semibold">Naïve Bayes</strong> untuk menganalisis tingkat kesegaran ikan secara otomatis melalui citra insang ikan.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start fade-in fade-in-delay-3">
|
|
<a href="{{ route('klasifikasi') }}" class="bg-accent hover:bg-[#00a8af] text-white text-lg font-semibold px-8 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1 glow-accent inline-flex items-center justify-center gap-2">
|
|
<i class="bi bi-camera"></i> Mulai Analisis
|
|
</a>
|
|
|
|
@guest
|
|
<a href="{{ route('login') }}"
|
|
class="border border-white/30 hover:border-white/60 text-white text-lg font-semibold px-8 py-4 rounded-xl transition-all duration-300 hover:bg-white/10 inline-flex items-center justify-center gap-2 group relative"
|
|
title="Login untuk menyimpan riwayat klasifikasi">
|
|
<i class="bi bi-person-circle"></i> Login
|
|
<span class="absolute -bottom-10 left-1/2 -translate-x-1/2 bg-black/80 text-white text-xs px-3 py-1.5 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
|
<i class="bi bi-clock-history mr-1"></i> Login untuk lihat riwayat
|
|
</span>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('history.index') }}"
|
|
class="border border-white/30 hover:border-white/60 text-white text-lg font-semibold px-8 py-4 rounded-xl transition-all duration-300 hover:bg-white/10 inline-flex items-center justify-center gap-2">
|
|
<i class="bi bi-clock-history"></i> Riwayat Saya
|
|
</a>
|
|
@endguest
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-4 mt-12 fade-in fade-in-delay-4">
|
|
<div class="stat-card rounded-xl p-4 text-center">
|
|
<div class="font-heading text-2xl font-bold text-white">4</div>
|
|
<div class="text-white/60 text-xs mt-1">Tingkat Kesegaran</div>
|
|
</div>
|
|
<div class="stat-card rounded-xl p-4 text-center">
|
|
<div class="font-heading text-2xl font-bold text-white">AI</div>
|
|
<div class="text-white/60 text-xs mt-1">Naïve Bayes</div>
|
|
</div>
|
|
<div class="stat-card rounded-xl p-4 text-center">
|
|
<div class="font-heading text-2xl font-bold text-white"><i class="bi bi-lightning-charge-fill text-accent"></i></div>
|
|
<div class="text-white/60 text-xs mt-1">Hasil Instan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative flex justify-center lg:justify-end fade-in fade-in-delay-2">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-accent/30 to-primary/20 blur-3xl rounded-full scale-75 pointer-events-none"></div>
|
|
<div class="relative float-animation">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534948216015-843149f72be3?q=80&w=900&auto=format&fit=crop"
|
|
alt="Analisis Insang Ikan"
|
|
class="relative w-full max-w-md lg:max-w-lg rounded-[24px] shadow-[0_30px_60px_rgba(0,0,0,0.5)] border-2 border-white/10 object-cover aspect-[4/3]"
|
|
>
|
|
<div class="absolute -bottom-4 -left-4 bg-white rounded-2xl shadow-xl p-4 flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
|
<i class="bi bi-check-circle-fill text-green-500 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900 text-sm">Insang Terdeteksi</div>
|
|
<div class="text-green-600 text-xs font-medium">Sangat Segar</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -top-4 -right-4 bg-primary rounded-2xl shadow-xl p-3 text-white text-center min-w-[80px]">
|
|
<div class="font-heading text-xl font-bold">AI</div>
|
|
<div class="text-[10px] font-medium opacity-80">Powered</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-0 left-0 right-0">
|
|
<svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
|
<path d="M0,80 L0,40 Q360,0 720,40 Q1080,80 1440,40 L1440,80 Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== TENTANG ==================== -->
|
|
<section id="tentang" class="py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div class="fade-in order-2 lg:order-1">
|
|
<span class="inline-block bg-primary/10 text-primary text-sm font-semibold px-4 py-1.5 rounded-full mb-4">Tentang Sistem</span>
|
|
<h2 class="font-heading text-3xl md:text-4xl font-bold text-gray-900 mb-6 leading-tight">
|
|
Apa itu <span class="text-primary">FiFreshChecker</span>?
|
|
</h2>
|
|
<p class="text-gray-600 text-lg leading-relaxed mb-6">
|
|
FiFreshChecker adalah sistem klasifikasi kesegaran ikan berbasis <strong class="text-gray-900">Machine Learning</strong> yang menggunakan algoritma <strong class="text-primary">Naïve Bayes</strong> untuk menganalisis citra insang ikan secara otomatis.
|
|
</p>
|
|
<p class="text-gray-600 text-lg leading-relaxed mb-8">
|
|
Sistem mengekstraksi fitur citra — mulai dari fitur warna LAB, HSV, color ratio, hingga tekstur GLCM — dan mengklasifikasikannya ke dalam 4 tingkat kesegaran: <em>Sangat Segar, Segar, Cukup Segar,</em> dan <em>Tidak Segar</em>.
|
|
</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">Naïve Bayes</span>
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">GLCM Tekstur</span>
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">LAB Color Space</span>
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">HSV Analysis</span>
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">Flask API</span>
|
|
<span class="bg-gray-100 text-gray-700 text-sm font-medium px-4 py-2 rounded-full">Isolation Forest</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fade-in fade-in-delay-2 order-1 lg:order-2">
|
|
<div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-3xl p-8 border border-gray-100">
|
|
<h3 class="font-heading font-bold text-gray-900 text-xl mb-6">Mengapa Kesegaran Insang?</h3>
|
|
<div class="space-y-5">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="bi bi-eye text-primary text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900 mb-1">Indikator Visual Terpercaya</div>
|
|
<p class="text-gray-500 text-sm leading-relaxed">Insang adalah jaringan yang paling cepat menunjukkan perubahan warna saat ikan mulai tidak segar — merah cerah menandakan kesegaran.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="bi bi-camera text-accent text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900 mb-1">Mudah Difoto</div>
|
|
<p class="text-gray-500 text-sm leading-relaxed">Cukup buka tutup insang ikan dan foto close-up — tidak perlu alat khusus, cukup kamera smartphone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i class="bi bi-graph-up text-green-500 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900 mb-1">Fitur Kaya Informasi</div>
|
|
<p class="text-gray-500 text-sm leading-relaxed">Warna, tekstur, dan pola insang mengandung informasi yang kaya untuk diekstraksi dan diklasifikasikan oleh model.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== CARA KERJA ==================== -->
|
|
<section id="cara-kerja" class="py-24 bg-gray-50 border-y border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 fade-in">
|
|
<span class="inline-block bg-primary/10 text-primary text-sm font-semibold px-4 py-1.5 rounded-full mb-4">Alur Sistem</span>
|
|
<h2 class="font-heading text-3xl md:text-4xl font-bold text-gray-900 mb-4">Bagaimana Cara Kerjanya?</h2>
|
|
<p class="text-gray-500 text-lg max-w-2xl mx-auto">Hanya 3 langkah sederhana dari foto hingga hasil klasifikasi</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 relative">
|
|
<div class="hidden md:block absolute top-12 left-1/3 right-1/3 h-0.5 bg-gradient-to-r from-primary/30 via-accent/50 to-primary/30 z-0"></div>
|
|
<div class="step-card bg-white rounded-2xl p-8 border border-gray-100 relative z-10 fade-in">
|
|
<div class="w-14 h-14 bg-primary text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-lg shadow-primary/20">
|
|
<i class="bi bi-camera-fill"></i>
|
|
</div>
|
|
<div class="absolute top-6 right-6 font-heading text-5xl font-bold text-gray-100 select-none">01</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Upload Foto Insang</h4>
|
|
<p class="text-gray-500 leading-relaxed">Foto insang ikan dari jarak dekat menggunakan kamera smartphone. Pastikan insang terlihat jelas dan pencahayaan cukup.</p>
|
|
</div>
|
|
<div class="step-card bg-white rounded-2xl p-8 border border-gray-100 relative z-10 fade-in fade-in-delay-1">
|
|
<div class="w-14 h-14 bg-accent text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-lg shadow-accent/20">
|
|
<i class="bi bi-cpu-fill"></i>
|
|
</div>
|
|
<div class="absolute top-6 right-6 font-heading text-5xl font-bold text-gray-100 select-none">02</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Proses AI</h4>
|
|
<p class="text-gray-500 leading-relaxed">Sistem memvalidasi objek, mengekstraksi fitur citra warna dan tekstur, lalu diklasifikasikan oleh model Naïve Bayes.</p>
|
|
</div>
|
|
<div class="step-card bg-white rounded-2xl p-8 border border-gray-100 relative z-10 fade-in fade-in-delay-2">
|
|
<div class="w-14 h-14 bg-green-500 text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-lg shadow-green-500/20">
|
|
<i class="bi bi-bar-chart-fill"></i>
|
|
</div>
|
|
<div class="absolute top-6 right-6 font-heading text-5xl font-bold text-gray-100 select-none">03</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Hasil Klasifikasi</h4>
|
|
<p class="text-gray-500 leading-relaxed">Dapatkan hasil klasifikasi 4 tingkat kesegaran beserta probabilitas dan visualisasi area insang yang dianalisis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16 fade-in">
|
|
<h3 class="font-heading text-xl font-bold text-center text-gray-900 mb-8">4 Tingkat Kesegaran</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div class="bg-white border-2 border-green-200 rounded-2xl p-5 text-center hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<i class="bi bi-star-fill text-green-500 text-xl"></i>
|
|
</div>
|
|
<div class="font-heading font-bold text-gray-900 mb-1">Sangat Segar</div>
|
|
</div>
|
|
<div class="bg-white border-2 border-blue-200 rounded-2xl p-5 text-center hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<i class="bi bi-check-circle-fill text-blue-500 text-xl"></i>
|
|
</div>
|
|
<div class="font-heading font-bold text-gray-900 mb-1">Segar</div>
|
|
</div>
|
|
<div class="bg-white border-2 border-yellow-200 rounded-2xl p-5 text-center hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<i class="bi bi-exclamation-circle-fill text-yellow-500 text-xl"></i>
|
|
</div>
|
|
<div class="font-heading font-bold text-gray-900 mb-1">Cukup Segar</div>
|
|
</div>
|
|
<div class="bg-white border-2 border-red-200 rounded-2xl p-5 text-center hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<i class="bi bi-x-circle-fill text-red-500 text-xl"></i>
|
|
</div>
|
|
<div class="font-heading font-bold text-gray-900 mb-1">Tidak Segar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== FITUR ==================== -->
|
|
<section id="fitur" class="py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 fade-in">
|
|
<span class="inline-block bg-primary/10 text-primary text-sm font-semibold px-4 py-1.5 rounded-full mb-4">Fitur Unggulan</span>
|
|
<h2 class="font-heading text-3xl md:text-4xl font-bold text-gray-900 mb-4">Didukung Teknologi Terkini</h2>
|
|
<p class="text-gray-500 text-lg max-w-2xl mx-auto">Sistem yang dirancang untuk kemudahan penggunaan dengan analisis yang akurat dan terpercaya</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="group bg-white p-8 rounded-2xl border border-gray-100 hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/8 hover:border-primary/20 transition-all duration-300 fade-in">
|
|
<div class="w-14 h-14 bg-primary/10 text-primary rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-all duration-300 group-hover:scale-110">
|
|
<i class="bi bi-cloud-arrow-up-fill"></i>
|
|
</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Upload Mudah</h4>
|
|
<p class="text-gray-500 leading-relaxed">Unggah foto insang ikan langsung dari galeri atau ambil gambar menggunakan kamera smartphone. Format JPG, JPEG, dan PNG didukung.</p>
|
|
</div>
|
|
<div class="group bg-white p-8 rounded-2xl border border-gray-100 hover:-translate-y-2 hover:shadow-xl hover:shadow-accent/8 hover:border-accent/20 transition-all duration-300 fade-in fade-in-delay-1 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 bg-accent text-white text-xs font-bold px-3 py-1 rounded-bl-xl">Inti Sistem</div>
|
|
<div class="w-14 h-14 bg-accent/10 text-accent rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-accent group-hover:text-white transition-all duration-300 group-hover:scale-110">
|
|
<i class="bi bi-cpu-fill"></i>
|
|
</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Analisis AI Akurat</h4>
|
|
<p class="text-gray-500 leading-relaxed">Model Naïve Bayes dilatih dengan dataset insang ikan untuk mengklasifikasikan tingkat kesegaran secara otomatis dan efisien.</p>
|
|
</div>
|
|
<div class="group bg-white p-8 rounded-2xl border border-gray-100 hover:-translate-y-2 hover:shadow-xl hover:shadow-green-500/8 hover:border-green-200 transition-all duration-300 fade-in fade-in-delay-2">
|
|
<div class="w-14 h-14 bg-green-100 text-green-500 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-green-500 group-hover:text-white transition-all duration-300 group-hover:scale-110">
|
|
<i class="bi bi-lightning-charge-fill"></i>
|
|
</div>
|
|
<h4 class="font-heading text-xl font-bold text-gray-900 mb-3">Hasil Instan</h4>
|
|
<p class="text-gray-500 leading-relaxed">Tidak perlu akun atau login. Hasil klasifikasi beserta visualisasi area insang yang dianalisis tersedia dalam hitungan detik.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ==================== LOGIN BANNER ==================== --}}
|
|
@guest
|
|
<section class="py-16 bg-white border-y border-gray-100">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 border border-blue-100 rounded-3xl p-8 md:p-12 flex flex-col md:flex-row items-center gap-8">
|
|
<div class="flex-shrink-0 w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center">
|
|
<i class="bi bi-clock-history text-primary text-4xl"></i>
|
|
</div>
|
|
<div class="flex-1 text-center md:text-left">
|
|
<h3 class="font-heading text-2xl md:text-3xl font-bold text-gray-900 mb-2">Simpan & Pantau Riwayat Klasifikasi</h3>
|
|
<p class="text-gray-500 text-base md:text-lg leading-relaxed">Masuk atau daftar gratis untuk menyimpan semua hasil analisis ikan secara otomatis dan melihat riwayat klasifikasi kapan saja.</p>
|
|
<ul class="mt-4 flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-2 text-sm text-gray-600">
|
|
<li class="flex items-center gap-1.5"><i class="bi bi-check-circle-fill text-green-500"></i> Hasil tersimpan otomatis</li>
|
|
<li class="flex items-center gap-1.5"><i class="bi bi-check-circle-fill text-green-500"></i> Lihat riwayat kapan saja</li>
|
|
<li class="flex items-center gap-1.5"><i class="bi bi-check-circle-fill text-green-500"></i> Gratis tanpa biaya</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex flex-col gap-3 flex-shrink-0 w-full md:w-auto">
|
|
<a href="{{ route('register') }}" class="bg-primary hover:bg-primary-dark text-white font-bold px-8 py-3.5 rounded-xl transition-all hover:-translate-y-0.5 hover:shadow-lg text-center flex items-center justify-center gap-2">
|
|
<i class="bi bi-person-plus"></i> Daftar Gratis
|
|
</a>
|
|
<a href="{{ route('login') }}" class="border border-primary/30 text-primary hover:bg-primary/5 font-semibold px-8 py-3.5 rounded-xl transition-all text-center flex items-center justify-center gap-2">
|
|
<i class="bi bi-person"></i> Sudah punya akun? Masuk
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endguest
|
|
|
|
<!-- ==================== CTA ==================== -->
|
|
<section class="py-20 hero-gradient relative overflow-hidden">
|
|
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 24px 24px;"></div>
|
|
<div class="absolute top-0 right-1/4 w-64 h-64 bg-accent/20 rounded-full blur-[80px] pointer-events-none"></div>
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 fade-in">
|
|
<h2 class="font-heading text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">Siap Menganalisis Kesegaran Ikan?</h2>
|
|
<p class="text-white/60 text-base md:text-lg">Gratis · Tanpa Pendaftaran · Hasil dalam Detik</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== FOOTER ==================== -->
|
|
<footer class="bg-gray-900 text-gray-400 py-14 border-t border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col md:flex-row justify-between gap-10 mb-10">
|
|
<div class="max-w-sm">
|
|
<a href="{{ route('home') }}" class="font-heading font-bold text-2xl text-white flex items-center gap-2 mb-4 hover:text-cyan-400 transition-colors">
|
|
<i class="bi bi-droplet-half text-cyan-500 text-3xl"></i>
|
|
<span>FiFresh<span class="text-accent">Checker</span></span>
|
|
</a>
|
|
<p class="text-gray-500 text-sm leading-relaxed">Sistem klasifikasi kesegaran ikan berbasis AI menggunakan algoritma Naïve Bayes dan analisis citra insang ikan.</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-heading font-semibold text-white mb-4">Tentang Sistem</h5>
|
|
<ul class="space-y-3 text-sm">
|
|
<li class="flex items-start gap-2 text-gray-400"><i class="bi bi-mortarboard-fill text-accent mt-0.5 flex-shrink-0"></i><span>Tugas Akhir D3 Manajemen Informatika</span></li>
|
|
<li class="flex items-start gap-2 text-gray-400"><i class="bi bi-building text-accent mt-0.5 flex-shrink-0"></i><span>Politeknik Negeri Jember</span></li>
|
|
<li class="flex items-start gap-2 text-gray-400"><i class="bi bi-person-fill text-accent mt-0.5 flex-shrink-0"></i><span>Eki Nanda Lepa — E31230794</span></li>
|
|
<li class="flex items-start gap-2 text-gray-400"><i class="bi bi-calendar3 text-accent mt-0.5 flex-shrink-0"></i><span>Tahun Akademik 2025/2026</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
|
|
<p>© 2026 FiFreshChecker. Hak Cipta Dilindungi.</p>
|
|
<p class="text-gray-600">Teknologi Informasi · Politeknik Negeri Jember</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ==================== JAVASCRIPT ==================== -->
|
|
<script>
|
|
const mobileBtn = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const menuIcon = document.getElementById('menu-icon');
|
|
mobileBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('open');
|
|
if (mobileMenu.classList.contains('open')) {
|
|
menuIcon.classList.replace('bi-list', 'bi-x-lg');
|
|
} else {
|
|
menuIcon.classList.replace('bi-x-lg', 'bi-list');
|
|
}
|
|
});
|
|
document.querySelectorAll('.mobile-link').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('open');
|
|
menuIcon.classList.replace('bi-x-lg', 'bi-list');
|
|
});
|
|
});
|
|
window.addEventListener('scroll', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('nav-scrolled');
|
|
} else {
|
|
navbar.classList.remove('nav-scrolled');
|
|
}
|
|
});
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) entry.target.classList.add('visible');
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
document.querySelectorAll('.fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
const rect = el.getBoundingClientRect();
|
|
if (rect.top < window.innerHeight) el.classList.add('visible');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |