MIF_E31221247/resources/views/home/home.blade.php

269 lines
13 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Catty Care - Sistem Pakar Penyakit Kucing</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="Sistem pakar untuk mendiagnosa penyakit kucing yang disebabkan oleh virus" name="description">
<!-- Google Web Fonts -->
<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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:slnt,wght@-10..0,100..900&display=swap" rel="stylesheet">
<link rel="icon" href="{{ asset('assets/images/logo-cat.png') }}">
<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link rel="stylesheet" href="{{ asset('landingpage/lib/animate/animate.min.css') }}" />
<link href="{{ asset('landingpage/lib/lightbox/css/lightbox.min.css') }}" rel="stylesheet">
<link href="{{ asset('landingpage/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="{{ asset('landingpage/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="{{ asset('landingpage/css/style.css') }}" rel="stylesheet">
<!-- Custom CSS untuk Profil Pakar -->
<style>
.profil-pakar {
padding: 60px 0;
}
.profil-pakar .card {
border: none;
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profil-pakar .card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.profil-pakar .card img {
width: 150px;
height: 150px;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.profil-pakar .card-body {
padding: 2rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
.profil-pakar h4 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.profil-pakar p {
font-size: 1rem;
color: #6c757d;
margin-bottom: 0.5rem;
}
.profil-pakar .text-muted {
font-size: 0.9rem;
}
</style>
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Navbar & Hero Start -->
<div class="container-fluid nav-bar px-0 px-lg-4 py-lg-0">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand p-0">
<h1 class="text-primary mb-0">
<img src="{{ asset('assets/images/logo-cat.png') }}" alt="Logo Catty Care" width="50"> Catty Care
</h1>
</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 justify-content-end" id="navbarNav">
<div class="d-flex flex-column flex-lg-row align-items-center">
<a href="{{ route('sistem-pakar') }}" class="mb-2 mb-lg-0">
<button class="btn btn-primary">Diagnosa Sekarang</button>
</a>
<a href="{{ url('/login') }}" class="ms-lg-3">
<button class="btn btn-outline-primary">Login Admin</button>
</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar & Hero End -->
<!-- Carousel Start -->
<div class="header-carousel owl-carousel">
<div class="header-carousel-item bg-primary">
<div class="carousel-caption">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-lg-7 animated fadeInLeft">
<div class="text-sm-center text-md-start">
<h4 class="text-white text-uppercase fw-bold mb-4">Selamat datang</h4>
<h1 class="display-1 text-white mb-4">Catty Care</h1>
<p class="mb-5 fs-5">Sistem pakar untuk mendiagnosa penyakit kucing yang disebabkan oleh virus.</p>
<div class="d-flex justify-content-center justify-content-md-start flex-shrink-0 mb-4">
<a class="btn btn-light rounded-pill py-3 px-4 px-md-5 me-2" href="{{ route('sistem-pakar') }}">Diagnosa Sekarang</a>
</div>
</div>
</div>
<div class="col-lg-5 animated fadeInRight">
<div class="calrousel-img" style="object-fit: cover;">
<img src="{{ asset('landingpage/img/cat.png') }}" class="img-fluid w-100" alt="Gambar Kucing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel End -->
<!-- Feature Start -->
<div class="container-fluid feature bg-light py-5">
<div class="container py-5">
<div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
<h4 class="text-primary">Tentang Catty Care</h4>
<h1 class="display-4 mb-4">Diagnosis Penyakit Kucing Cepat, Akurat & Gratis</h1>
</div>
<div class="wow fadeInUp" data-wow-delay="0.3s" style="max-width: 900px; margin: 0 auto; text-align: justify;">
<p class="mb-3">
<strong>Catty Care</strong> adalah sistem pakar berbasis web yang dirancang untuk membantu pemilik kucing dalam mengidentifikasi penyakit yang disebabkan oleh virus dengan mudah, cepat, dan akurat.
Dengan antarmuka yang intuitif, Anda hanya perlu memasukkan gejala yang dialami kucing Anda, dan sistem akan menganalisis data untuk memberikan diagnosa awal serta rekomendasi penanganan yang sesuai.
</p>
<p class="mb-3">
Menggunakan teknologi <strong>Case-Based Reasoning (CBR)</strong>, Catty Care membandingkan kasus-kasus sebelumnya untuk menghasilkan hasil yang lebih akurat dan relevan.
Meskipun tidak menggantikan peran dokter hewan, sistem ini dapat menjadi solusi awal yang membantu Anda mengambil langkah yang tepat sebelum mendapatkan perawatan profesional.
</p>
<p class="mb-0 text-center">
<strong>Jaga kesehatan kucing kesayangan Anda dengan solusi cerdas dari Catty Care! 🐾</strong>
</p>
</div>
</div>
</div>
<!-- Feature End -->
<!-- Service Start -->
<div class="container-fluid service py-5">
<div class="container py-5">
<div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
<h4 class="text-primary">Mengapa Memilih Catty Care?</h4>
<h1 class="display-4 mb-4">Solusi Terbaik untuk Kesehatan Kucing Anda</h1>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item bg-light rounded p-4 text-center">
<div class="service-icon mb-4">
<i class="fas fa-shield-virus fa-3x text-primary"></i>
</div>
<h4 class="mb-3">Penyakit Kucing</h4>
<p class="mb-0">Informasi lengkap mengenai penyakit kucing yang disebabkan oleh virus.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item bg-light rounded p-4 text-center">
<div class="service-icon mb-4">
<i class="fas fa-stethoscope fa-3x text-primary"></i>
</div>
<h4 class="mb-3">Konsultasi Pakar</h4>
<p class="mb-0">Dapatkan saran dari dokter hewan terpercaya untuk kesehatan kucing Anda.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item bg-light rounded p-4 text-center">
<div class="service-icon mb-4">
<i class="fas fa-notes-medical fa-3x text-primary"></i>
</div>
<h4 class="mb-3">Diagnosa Penyakit</h4>
<p class="mb-0">Temukan penyakit kucing Anda berdasarkan gejala yang dialami.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
<!-- Profil Pakar Start -->
<div class="container-fluid profil-pakar bg-light">
<div class="container">
<div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
<h4 class="text-primary">Profil Pakar</h4>
<h1 class="display-4 mb-4">Dokter Hewan Ahli</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
<div class="card">
<div class="card-body text-center">
<img src="{{ asset('assets/images/pakar.jpg') }}" alt="Drh Evi Kumala Dewi" class="rounded-circle mb-4">
<h4 class="mb-2">Drh Evi Kumala Dewi</h4>
<p class="text-muted mb-2">198803132021212001</p>
<p class="text-muted mb-0">Dokter Hewan</p>
<p class="text-muted">Banyuwangi, Jawa Timur</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Profil Pakar End -->
<!-- Informasi Penyakit Start -->
@include('home.info')
<!-- Informasi Penyakit End -->
<!-- Footer Start -->
<div class="container-fluid footer bg-dark py-5 wow fadeIn" data-wow-delay="0.2s">
<div class="container py-5">
<div class="row">
<div class="col-12 text-center">
<div class="footer-item">
<a href="/" class="p-0">
<img src="{{ asset('assets/images/whitetext.png') }}" alt="Logo Catty Care" width="150">
</a>
<p class="text-white mt-3 mb-0">
Catty Care adalah sistem pakar untuk mendiagnosa penyakit kucing yang disebabkan oleh virus.
</p>
<p class="text-white mt-2">&copy; 2025 Catty Care. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary btn-lg-square rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('landingpage/lib/wow/wow.min.js') }}"></script>
<script src="{{ asset('landingpage/lib/easing/easing.min.js') }}"></script>
<script src="{{ asset('landingpage/lib/waypoints/waypoints.min.js') }}"></script>
<script src="{{ asset('landingpage/lib/counterup/counterup.min.js') }}"></script>
<script src="{{ asset('landingpage/lib/lightbox/js/lightbox.min.js') }}"></script>
<script src="{{ asset('landingpage/lib/owlcarousel/owl.carousel.min.js') }}"></script>
<!-- Template Javascript -->
<script src="{{ asset('landingpage/js/main.js') }}"></script>
</body>
</html>