134 lines
7.4 KiB
PHP
134 lines
7.4 KiB
PHP
@extends('layoutuser.app')
|
|
@section('content')
|
|
|
|
<!-- Latar belakang biru gradasi penuh -->
|
|
<div style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb); min-height: 100vh; padding-top: 5rem; padding-bottom: 5rem;">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Fitur Unggulan</p>
|
|
<h1 class="text-dark mb-4">Kenali Fitur-fitur Utama Kami</h1>
|
|
<p class="text-dark mb-4 pb-2">
|
|
Sistem ini dirancang khusus untuk membantu penderita penyakit jantung memilih menu makanan terbaik dengan pendekatan ilmiah dan teknologi yang mudah digunakan.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- Daftar Fitur Horizontal -->
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4 text-center mb-5">
|
|
@php
|
|
$features = [
|
|
['id' => 'feature1', 'icon' => 'fas fa-heartbeat', 'label' => 'Rekomendasi Sehat'],
|
|
['id' => 'feature2', 'icon' => 'fas fa-brain', 'label' => 'Pendekatan Ilmiah'],
|
|
['id' => 'feature3', 'icon' => 'fas fa-desktop', 'label' => 'Tampilan Responsif'],
|
|
['id' => 'feature4', 'icon' => 'fas fa-database', 'label' => 'Keamanan Data'],
|
|
['id' => 'feature5', 'icon' => 'fas fa-hands-helping', 'label' => 'Dukungan Penuh'],
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($features as $feature)
|
|
<div class="col">
|
|
<div class="p-3 rounded shadow-sm bg-white hover-shadow transition" data-bs-toggle="collapse" href="#{{ $feature['id'] }}" style="cursor: pointer;">
|
|
<i class="{{ $feature['icon'] }} text-primary fs-4 mb-2"></i>
|
|
<h6 class="text-dark mb-0">{{ $feature['label'] }}</h6>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Penjelasan Fitur -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
|
|
<!-- Fitur 1 -->
|
|
<div class="collapse" id="feature1">
|
|
<div class="p-4 rounded shadow-sm mb-3" style="background-color: #e3f2fd;">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature1" aria-label="Close"></button>
|
|
<p class="text-dark mb-0">
|
|
Sistem ini memberikan <strong>rekomendasi makanan khusus untuk penderita penyakit jantung</strong> berdasarkan nutrisi seperti <strong>lemak, natrium, energi, dan karbohidrat</strong>.
|
|
Data makanan bersumber dari <a href="https://www.panganku.org/id-ID/beranda" target="_blank"><strong>Panganku.org</strong></a>, sehingga akurat dan terpercaya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fitur 2 -->
|
|
<div class="collapse" id="feature2">
|
|
<div class="p-4 rounded shadow-sm mb-3" style="background-color: #bbdefb;">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature2" aria-label="Close"></button>
|
|
<p class="text-dark mb-2">
|
|
Metode <strong>AHP (Analytical Hierarchy Process)</strong> digunakan untuk menilai dan membandingkan makanan berdasarkan berbagai kriteria gizi.
|
|
</p>
|
|
<p class="text-dark mb-2">
|
|
AHP memecah masalah menjadi hierarki dan memungkinkan perbandingan berpasangan secara sistematis. Ini menghasilkan bobot dan peringkat akhir yang objektif.
|
|
</p>
|
|
<ul class="text-dark mb-2">
|
|
<li>Memperhatikan konsistensi penilaian pengguna.</li>
|
|
<li>Cocok untuk keputusan berbasis preferensi manusia.</li>
|
|
<li>Dapat menangani data kuantitatif dan kualitatif.</li>
|
|
</ul>
|
|
<p class="text-dark">
|
|
🔗 Referensi lebih lanjut:
|
|
<ul class="text-dark">
|
|
<li><a href="https://www.1000minds.com/decision-making/analytic-hierarchy-process-ahp" target="_blank">1000Minds: Penjelasan AHP</a></li>
|
|
<li><a href="https://informatika.ciputra.ac.id/2023/03/analytical-hierarchy-process-ahp/" target="_blank">Universitas Ciputra: AHP dalam SPK</a></li>
|
|
</ul>
|
|
</p>
|
|
<p class="text-dark mb-0">
|
|
Anda tidak perlu memahami rumusnya — sistem kami melakukan perhitungannya secara otomatis untuk membantu keputusan yang tepat dan sehat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fitur 3 -->
|
|
<div class="collapse" id="feature3">
|
|
<div class="p-4 rounded shadow-sm mb-3" style="background-color: #c8e6c9;">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature3" aria-label="Close"></button>
|
|
<p class="text-dark mb-0">
|
|
Tampilan antarmuka dirancang sederhana dan responsif. Siapa pun dapat menggunakannya dengan mudah, termasuk pasien, keluarga, dan tenaga medis.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fitur 4 -->
|
|
<div class="collapse" id="feature4">
|
|
<div class="p-4 rounded shadow-sm mb-3" style="background-color: #fff9c4;">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature4" aria-label="Close"></button>
|
|
<p class="text-dark mb-0">
|
|
Data hasil rekomendasi disimpan otomatis, sehingga bisa diakses kembali dan digunakan dalam diskusi dengan ahli gizi untuk evaluasi lanjutan.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fitur 5 -->
|
|
<div class="collapse" id="feature5">
|
|
<div class="p-4 rounded shadow-sm mb-3" style="background-color: #e1bee7;">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-toggle="collapse" data-bs-target="#feature5" aria-label="Close"></button>
|
|
<p class="text-dark mb-0">
|
|
Fitur ini dikembangkan untuk mendampingi Anda menjalani gaya hidup lebih sehat. Kami percaya bahwa informasi yang baik menghasilkan keputusan yang baik pula.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animasi Hover CSS -->
|
|
<style>
|
|
.hover-shadow:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
|
transform: translateY(-5px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.transition {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(to bottom, #e3f2fd, #bbdefb) !important;
|
|
}
|
|
</style>
|
|
|
|
@endsection
|