401 lines
22 KiB
PHP
401 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Sistem Antrian Puskesmas - Beranda')
|
|
|
|
@section('content')
|
|
@if (session('success'))
|
|
<div id="success-alert"
|
|
class="fixed top-4 right-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded shadow-lg z-50 transition-all duration-300 transform translate-x-0 opacity-100">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white shadow-lg sticky top-0 z-40">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-xl md:text-2xl font-bold text-primary">🏥 Puskesmas</h1>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
<a href="#layanan"
|
|
class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Layanan</a>
|
|
<a href="#tentang"
|
|
class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Tentang</a>
|
|
<a href="{{ route('display') }}"
|
|
class="text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-200">Display</a>
|
|
<a href="{{ route('login') }}"
|
|
class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Login</a>
|
|
</div>
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden flex items-center">
|
|
<button id="mobile-menu-button" class="text-gray-700 hover:text-primary">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
|
<a href="#layanan"
|
|
class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Layanan</a>
|
|
<a href="#tentang"
|
|
class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Tentang</a>
|
|
<a href="{{ route('display') }}"
|
|
class="text-gray-700 hover:text-primary block px-3 py-2 rounded-md text-base font-medium transition duration-200">Display</a>
|
|
<a href="{{ route('login') }}"
|
|
class="bg-primary hover:bg-secondary text-white block px-3 py-2 rounded-md text-base font-medium transition duration-200">Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-gradient-to-r from-primary via-blue-600 to-secondary text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
|
|
<div class="text-center animate-fade-in">
|
|
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
|
|
Puskesmas Mlandingan
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-4xl mx-auto">
|
|
Antrian digital yang memudahkan pelayanan kesehatan masyarakat
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ route('register') }}"
|
|
class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-xl text-lg font-semibold inline-block transition duration-200 transform hover:scale-105 shadow-lg">
|
|
Daftar Antrian
|
|
</a>
|
|
<a href="#layanan"
|
|
class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-4 rounded-xl text-lg font-semibold inline-block transition duration-200 transform hover:scale-105">
|
|
Lihat Layanan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<div id="layanan" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 md:mb-16 animate-slide-up">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Layanan Kami</h2>
|
|
<p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">Berbagai layanan kesehatan yang tersedia</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
|
|
<div
|
|
class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up">
|
|
<div class="text-4xl md:text-5xl mb-4 flex justify-center">
|
|
<svg class="w-12 h-12 md:w-16 md:h-16 text-red-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Umum</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Layanan pemeriksaan kesehatan umum untuk semua usia</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
|
|
style="animation-delay: 0.1s;">
|
|
<div class="text-4xl md:text-5xl mb-4 flex justify-center">
|
|
<svg class="w-12 h-12 md:w-16 md:h-16 text-blue-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Gigi</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Layanan perawatan dan pengobatan kesehatan gigi dan mulut
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
|
|
style="animation-delay: 0.2s;">
|
|
<div class="text-4xl md:text-5xl mb-4 flex justify-center">
|
|
<svg class="w-12 h-12 md:w-16 md:h-16 text-purple-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Kesehatan Jiwa</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Layanan konsultasi dan terapi kesehatan mental</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-gray-200 hover:shadow-2xl transition duration-300 transform hover:-translate-y-2 animate-slide-up"
|
|
style="animation-delay: 0.3s;">
|
|
<div class="text-4xl md:text-5xl mb-4 flex justify-center">
|
|
<svg class="w-12 h-12 md:w-16 md:h-16 text-green-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M9 1v6m6-6v6"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-3">Poli Kesehatan Tradisional</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Layanan pengobatan tradisional dan herbal</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works -->
|
|
<div class="py-16 md:py-24 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 md:mb-16 animate-slide-up">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Cara Kerja</h2>
|
|
<p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">Langkah-langkah menggunakan sistem antrian
|
|
digital</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
|
|
<div class="text-center animate-slide-up">
|
|
<div
|
|
class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
|
|
1</div>
|
|
<h3 class="text-lg md:text-xl font-semibold mb-3">Daftar Online</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Isi formulir pendaftaran dengan data lengkap</p>
|
|
</div>
|
|
|
|
<div class="text-center animate-slide-up" style="animation-delay: 0.1s;">
|
|
<div
|
|
class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
|
|
2</div>
|
|
<h3 class="text-lg md:text-xl font-semibold mb-3">Dapatkan Nomor</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Sistem akan memberikan nomor antrian</p>
|
|
</div>
|
|
|
|
<div class="text-center animate-slide-up" style="animation-delay: 0.2s;">
|
|
<div
|
|
class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
|
|
3</div>
|
|
<h3 class="text-lg md:text-xl font-semibold mb-3">Tunggu Panggilan</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Monitor layar atau tunggu panggilan</p>
|
|
</div>
|
|
|
|
<div class="text-center animate-slide-up" style="animation-delay: 0.3s;">
|
|
<div
|
|
class="bg-primary text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-lg">
|
|
4</div>
|
|
<h3 class="text-lg md:text-xl font-semibold mb-3">Layanan</h3>
|
|
<p class="text-gray-600 text-sm md:text-base">Dapatkan pelayanan kesehatan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About Section -->
|
|
<div id="tentang" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
<div class="animate-slide-up">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Tentang Kami</h2>
|
|
<p class="text-lg md:text-xl text-gray-600 mb-4">
|
|
Puskesmas kami berkomitmen untuk memberikan pelayanan kesehatan yang berkualitas
|
|
kepada masyarakat dengan sistem antrian digital yang modern dan efisien.
|
|
</p>
|
|
<p class="text-lg md:text-xl text-gray-600 mb-8">
|
|
Dengan teknologi terkini, kami memastikan proses antrian berjalan lancar
|
|
dan mengurangi waktu tunggu pasien.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
|
|
<span class="text-gray-700 text-base md:text-lg">Pelayanan 24/7</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
|
|
<span class="text-gray-700 text-base md:text-lg">Sistem Antrian Digital</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 bg-primary rounded-full mr-4"></div>
|
|
<span class="text-gray-700 text-base md:text-lg">Tim Medis Profesional</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 md:p-12 animate-slide-up"
|
|
style="animation-delay: 0.2s;">
|
|
<div class="text-center">
|
|
<div class="text-6xl md:text-8xl mb-6">🏥</div>
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Puskesmas Modern</h3>
|
|
<p class="text-gray-600 text-base md:text-lg">Melayani dengan teknologi terkini</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
|
|
<div>
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4">🏥 Puskesmas</h3>
|
|
<p class="text-gray-400 text-sm md:text-base">Sistem antrian digital untuk pelayanan kesehatan yang
|
|
lebih baik.</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg md:text-xl font-semibold mb-4">Layanan</h4>
|
|
<ul class="space-y-2 text-gray-400 text-sm md:text-base">
|
|
<li>Poli Umum</li>
|
|
<li>Poli Gigi</li>
|
|
<li>Poli Kesehatan Jiwa</li>
|
|
<li>Poli Kesehatan Tradisional</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg md:text-xl font-semibold mb-4">Kontak</h4>
|
|
<div class="space-y-3 text-gray-400 text-sm md:text-base">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
|
</path>
|
|
</svg>
|
|
<span>(62) 812-4901-0290</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
<span>pkmmlandinganeksotik@gmail.com</span>
|
|
</div>
|
|
<div class="flex items-start space-x-3">
|
|
<svg class="w-5 h-5 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
|
</path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
<span>Jalan Raya Mandingan No.437, Pesisir, Mlandingan Kulon, Kec. Mlandingan, Kabupaten
|
|
Situbondo, Jawa Timur 68353</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg md:text-xl font-semibold mb-4">Jam Operasional</h4>
|
|
<ul class="space-y-2 text-gray-400 text-sm md:text-base">
|
|
<li>Senin - Kamis: 08:00 - 12:00</li>
|
|
<li>Jumat: 08:00 - 10:00</li>
|
|
<li>Sabtu: 08:00 - 11:30</li>
|
|
<li>Minggu: Tutup</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 mt-8 md:mt-12 pt-8 text-center text-gray-400">
|
|
<p class="text-sm md:text-base">© 2025 Sistem Antrian Puskesmas. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Mobile menu toggle
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-hide success alert after 3 seconds
|
|
@if (session('success'))
|
|
setTimeout(function() {
|
|
const successAlert = document.getElementById('success-alert');
|
|
if (successAlert) {
|
|
// Add fade out animation
|
|
successAlert.classList.add('translate-x-full', 'opacity-0');
|
|
|
|
// Remove element after animation completes
|
|
setTimeout(function() {
|
|
successAlert.remove();
|
|
}, 300);
|
|
}
|
|
}, 3000);
|
|
@endif
|
|
|
|
// Show SweetAlert2 for error messages
|
|
@if (session('error'))
|
|
@if (str_contains(session('error'), 'sistem'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error Sistem!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 5000,
|
|
timerProgressBar: true,
|
|
showCloseButton: true,
|
|
allowOutsideClick: true,
|
|
allowEscapeKey: true
|
|
});
|
|
@else
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 4000,
|
|
timerProgressBar: true,
|
|
showCloseButton: true,
|
|
allowOutsideClick: true,
|
|
allowEscapeKey: true
|
|
});
|
|
@endif
|
|
@endif
|
|
|
|
// Intersection Observer for animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections
|
|
document.querySelectorAll('section, .animate-slide-up').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|