MIF_E31220044/resources/views/landing.blade.php

306 lines
14 KiB
PHP

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pupuk - Sistem Pendukung Keputusan Pemilihan Pupuk Organik Cair</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>
/* Custom CSS */
.hero-section {
background: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url('/images/agriculture-bg.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
color: white;
}
.feature-card {
border: none;
transition: transform 0.3s;
margin-bottom: 20px;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
font-size: 2.5rem;
color: #28a745;
margin-bottom: 1rem;
}
.cta-section {
background-color: #f8f9fa;
padding: 80px 0;
}
.navbar {
background-color: rgba(255, 255, 255, 0.95);
}
.footer {
background-color: #333;
color: white;
padding: 40px 0;
}
/* Custom card styling for pupuk cair */
.pupuk-card {
border: 2px solid #28a745;
border-radius: 15px;
transition: box-shadow 0.3s ease;
}
.pupuk-card:hover {
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
transform: translateY(-5px);
}
.pupuk-icon {
font-size: 3rem;
color: #28a745;
margin-bottom: 1rem;
}
.section-title {
font-weight: 700;
color: #28a745;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-leaf text-success"></i> SPK-P
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#beranda">Beranda</a></li>
<li class="nav-item"><a class="nav-link" href="#fitur">Fitur</a></li>
<li class="nav-item"><a class="nav-link" href="#pupuk">Pupuk Cair</a></li>
<li class="nav-item"><a class="nav-link" href="#tentang">Tentang</a></li>
<li class="nav-item"><a class="nav-link" href="#kontak">Kontak</a></li>
<li class="nav-item">
<a class="btn btn-success ms-2" href="{{route('login')}}">Masuk</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section" id="beranda">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1 class="display-4 fw-bold mb-4">
Pilih Pupuk Organik Cair Terbaik untuk Hasil Maksimal
</h1>
<p class="lead mb-4">
Sistem pendukung keputusan yang membantu Anda memilih pupuk organik cair terbaik berdasarkan kriteria penting.
</p>
<a href="/register" class="btn btn-success btn-lg me-3">Daftar Sekarang</a>
<a href="#fitur" class="btn btn-outline-light btn-lg">Pelajari Lebih Lanjut</a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-5" id="fitur">
<div class="container">
<h2 class="text-center mb-5 section-title">Fitur Unggulan</h2>
<div class="row">
<div class="col-lg-4">
<div class="card feature-card text-center p-4 shadow-sm">
<div class="card-body">
<i class="fas fa-calculator feature-icon"></i>
<h4>Perhitungan SAW</h4>
<p>Menggunakan metode Simple Additive Weighting untuk rekomendasi akurat</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card feature-card text-center p-4 shadow-sm">
<div class="card-body">
<i class="fas fa-database feature-icon"></i>
<h4>Database Pupuk Cair</h4>
<p>Informasi lengkap berbagai alternatif pupuk organik cair</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card feature-card text-center p-4 shadow-sm">
<div class="card-body">
<i class="fas fa-chart-bar feature-icon"></i>
<h4>Analisis Perbandingan</h4>
<p>Bandingkan berbagai kriteria pupuk cair untuk pilihan terbaik</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-5 bg-light" id="tentang">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="mb-4 section-title">Tentang PupukPintar</h2>
<p class="lead">
PupukPintar adalah sistem pendukung keputusan yang dirancang untuk membantu petani memilih pupuk organik cair terbaik.
</p>
<p>
Dengan metode SAW (Simple Additive Weighting), kami memberikan rekomendasi berdasarkan kriteria seperti:
</p>
<ul class="list-unstyled">
<li><i class="fas fa-check text-success me-2"></i> Kandungan nutrisi lengkap (N, P, K)</li>
<li><i class="fas fa-check text-success me-2"></i> Harga terjangkau</li>
<li><i class="fas fa-check text-success me-2"></i> Ketersediaan dan kualitas bahan</li>
<li><i class="fas fa-check text-success me-2"></i> Manfaat pertumbuhan dan kesuburan tanah</li>
</ul>
</div>
<div class="col-lg-6">
<img src="/images/about-img.jpg" alt="Tentang Kami" class="img-fluid rounded shadow" />
</div>
</div>
</div>
</section>
<!-- Pupuk Organik Cair Section -->
<section class="py-5" id="pupuk">
<div class="container">
<h2 class="text-center mb-5 section-title">Alternatif Pupuk Organik Cair</h2>
<div class="row g-4 justify-content-center">
<!-- Darah -->
<div class="col-md-6 col-lg-4">
<div class="card pupuk-card p-4 text-center h-100 shadow-sm">
<i class="fas fa-tint pupuk-icon"></i>
<h4 class="text-success mb-3">Pupuk Cair Darah</h4>
<p>
Larutan hasil pembusukan darah hewan yang kaya nitrogen dan cepat diserap tanaman.
</p>
<ul class="list-unstyled text-start">
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Bahan Utama:</strong> Darah sapi atau kambing</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Kandungan:</strong> Nitrogen tinggi, hormon pertumbuhan</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Manfaat:</strong> Merangsang pertumbuhan dan kesuburan tanah</li>
<li><i class="fas fa-tag text-success me-2"></i><strong>Harga:</strong> Rp 60.000 - Rp 80.000 /liter</li>
</ul>
</div>
</div>
<!-- Urin -->
<div class="col-md-6 col-lg-4">
<div class="card pupuk-card p-4 text-center h-100 shadow-sm">
<i class="fas fa-tint pupuk-icon"></i>
<h4 class="text-success mb-3">Pupuk Cair Urin</h4>
<p>
Pupuk organik cair yang berasal dari urin hewan, mengandung nitrogen dan mikroorganisme bermanfaat.
</p>
<ul class="list-unstyled text-start">
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Bahan Utama:</strong> Urin sapi, kambing, atau ayam</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Kandungan:</strong> Nitrogen, mikroorganisme aktif</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Manfaat:</strong> Meningkatkan kesuburan dan kesehatan tanah</li>
<li><i class="fas fa-tag text-success me-2"></i><strong>Harga:</strong> Rp 45.000 - Rp 70.000 /liter</li>
</ul>
</div>
</div>
<!-- Air Kelapa -->
<div class="col-md-6 col-lg-4">
<div class="card pupuk-card p-4 text-center h-100 shadow-sm">
<i class="fas fa-tint pupuk-icon"></i>
<h4 class="text-success mb-3">Pupuk Cair Air Kelapa</h4>
<p>
Larutan organik dari air kelapa yang mengandung nutrisi dan hormon alami tanaman.
</p>
<ul class="list-unstyled text-start">
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Bahan Utama:</strong> Air kelapa segar</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Kandungan:</strong> Nutrisi lengkap, hormon pertumbuhan alami</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Manfaat:</strong> Merangsang pertumbuhan akar dan daun</li>
<li><i class="fas fa-tag text-success me-2"></i><strong>Harga:</strong> Rp 50.000 - Rp 65.000 /liter</li>
</ul>
</div>
</div>
<!-- Jus Pisang -->
<div class="col-md-6 col-lg-4">
<div class="card pupuk-card p-4 text-center h-100 shadow-sm">
<i class="fas fa-tint pupuk-icon"></i>
<h4 class="text-success mb-3">Pupuk Cair Jus Pisang</h4>
<p>
Pupuk cair dari fermentasi buah pisang yang kaya vitamin dan mineral untuk tanaman.
</p>
<ul class="list-unstyled text-start">
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Bahan Utama:</strong> Buah pisang fermentasi</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Kandungan:</strong> Vitamin, mineral, mikroorganisme</li>
<li><i class="fas fa-check-circle text-success me-2"></i><strong>Manfaat:</strong> Meningkatkan daya tahan tanaman dan kesuburan tanah</li>
<li><i class="fas fa-tag text-success me-2"></i><strong>Harga:</strong> Rp 55.000 - Rp 70.000 /liter</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-5" id="kontak">
<div class="container">
<h2 class="text-center mb-5 section-title">Hubungi Kami</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<form>
<div class="mb-3">
<label for="name" class="form-label">Nama</label>
<input type="text" class="form-control" id="name" placeholder="Nama Anda" required />
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="email"
placeholder="email@domain.com"
required
/>
</div>
<div class="mb-3">
<label for="message" class="form-label">Pesan</label>
<textarea class="form-control" id="message" rows="4" placeholder="Tulis pesan Anda di sini..." required></textarea>
</div>
<button type="submit" class="btn btn-success">Kirim Pesan</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<p>© 2025 PupukPintar - Sistem Pendukung Keputusan Pemilihan Pupuk Organik Cair</p>
<p>Contact: info@pupukpintar.com | +62 812 3456 7890</p>
</div>
</footer>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>