261 lines
16 KiB
PHP
261 lines
16 KiB
PHP
<div> {{-- Root Element Utama --}}
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
|
|
<div class="space-y-24 py-12">
|
|
|
|
{{-- 1. Hero Section (Full Width) --}}
|
|
<div class="right-1/2 left-1/2 relative -mt-12 mr-[50vw] -ml-[50vw] w-screen">
|
|
@php
|
|
$accent = $site->accent ?? 'emerald';
|
|
$colors = [
|
|
'emerald' => '16,185,129',
|
|
'blue' => '59,130,246',
|
|
'red' => '239,68,68',
|
|
'amber' => '245,158,11',
|
|
];
|
|
$rgb = $colors[$accent] ?? '16,185,129';
|
|
@endphp
|
|
|
|
<section class="relative h-[600px] overflow-hidden text-white transition-colors duration-300">
|
|
<div class="absolute inset-0 bg-cover bg-no-repeat bg-center"
|
|
style="background-image:
|
|
linear-gradient(to right, rgba({{ $rgb }}, 0.9) 0%, rgba({{ $rgb }}, 0.4) 100%),
|
|
url('{{ asset('images/hero-klinik.jpg') }}');">
|
|
</div>
|
|
|
|
<div class="z-10 relative flex items-center mx-auto px-8 max-w-7xl h-full">
|
|
<div class="max-w-3xl">
|
|
<flux:badge color="{{ $site->accent ?? 'emerald' }}"
|
|
class="bg-white/20 backdrop-blur-md mb-6 border-white/30 text-white">
|
|
Terakreditasi Paripurna
|
|
</flux:badge>
|
|
|
|
<flux:heading size="xl" class="mb-6 font-extrabold text-white !text-5xl leading-tight">
|
|
Selamat Datang di {{ $settings['site_name'] ?? 'Klinik Kami' }}
|
|
</flux:heading>
|
|
|
|
<flux:subheading class="mb-10 text-white/90 text-xl leading-relaxed">
|
|
{{ $settings['site_description'] ?? 'Melayani kesehatan keluarga dengan teknologi modern.' }}
|
|
</flux:subheading>
|
|
|
|
<div class="flex flex-wrap gap-4">
|
|
@if (($settings['registration_open'] ?? 'false') === 'true')
|
|
<flux:button href="/register" variant="primary"
|
|
class="bg-white hover:bg-zinc-100 px-8 py-3 font-bold text-zinc-900">
|
|
Daftar Pasien Baru
|
|
</flux:button>
|
|
@endif
|
|
<flux:button href="#layanan" variant="outline"
|
|
class="hover:bg-white/10 border-white text-white">
|
|
Lihat Layanan
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-0 left-0 absolute bg-gradient-to-t from-white dark:from-zinc-950 to-transparent w-full h-24">
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- 2. Features/Services --}}
|
|
<section id="layanan" class="py-16">
|
|
<div class="mb-12 text-center">
|
|
<flux:heading size="xl">Layanan Klinik</flux:heading>
|
|
<flux:subheading>Kami menyediakan berbagai layanan kesehatan untuk memenuhi kebutuhan Anda dan keluarga.</flux:subheading>
|
|
</div>
|
|
|
|
<div class="gap-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
|
|
@foreach ($services as $category)
|
|
<div class="bg-white dark:bg-zinc-900 shadow-sm hover:shadow-md p-6 border border-zinc-200 dark:border-zinc-800 rounded-2xl transition">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex justify-center items-center bg-{{ $site->accent ?? 'emerald' }}-100 dark:bg-{{ $site->accent ?? 'emerald' }}-900/30 rounded-xl w-10 h-10 text-{{ $site->accent ?? 'emerald' }}-600 dark:text-{{ $site->accent ?? 'emerald' }}-400">
|
|
<flux:icon.heart class="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<flux:heading class="font-semibold text-base">{{ $category->name }}</flux:heading>
|
|
<p class="text-zinc-500 text-xs">{{ $category->services->count() }} layanan</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
|
|
@foreach ($category->services as $service)
|
|
<li wire:key="service-item-{{ $service->id }}"
|
|
wire:click="showServiceDetail({{ $service->id }})"
|
|
class="group flex items-center gap-3 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 -mx-2 p-2 rounded-xl transition-all cursor-pointer">
|
|
|
|
<div class="relative flex-shrink-0 border border-zinc-100 dark:border-zinc-800 rounded-lg w-12 h-12 overflow-hidden">
|
|
@if($service->photo)
|
|
@php $photos = is_array($service->photo) ? $service->photo : json_decode($service->photo, true); @endphp
|
|
<img src="{{ asset('storage/' . ($photos[0] ?? '')) }}" class="w-full h-full object-cover">
|
|
@else
|
|
<div class="flex justify-center items-center bg-zinc-100 dark:bg-zinc-800 w-full h-full">
|
|
<svg class="w-4 h-4 text-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5v6a1.5 1.5 0 0 0-1.5-1.5h3.75a1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5zm10.5-11.25h.008v.008h-.008v8.25zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<span class="font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-blue-600 transition-colors">
|
|
{{ $service->name }}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
@if ($category->services->count() > 5)
|
|
<div class="mt-4 pt-3 border-zinc-100 dark:border-zinc-800 border-t">
|
|
<button class="text-sm text-{{ $site->accent ?? 'emerald' }}-600 hover:underline">Lihat semua →</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 3. Contact & Information Section --}}
|
|
<section id="kontak" class="items-start gap-16 grid grid-cols-1 lg:grid-cols-2">
|
|
<div class="space-y-8">
|
|
<div>
|
|
<flux:heading size="xl">Informasi Kontak</flux:heading>
|
|
<flux:subheading>Butuh bantuan medis? Hubungi nomor darurat atau kunjungi lokasi kami.</flux:subheading>
|
|
</div>
|
|
|
|
<flux:card class="space-y-6 bg-zinc-50/50 dark:bg-zinc-900/50 p-6 border-zinc-200 dark:border-zinc-800">
|
|
<div class="flex gap-4">
|
|
<flux:icon.map-pin class="text-{{ $site->accent ?? 'emerald' }}-600 dark:text-{{ $site->accent ?? 'emerald' }}-400" />
|
|
<div>
|
|
<p class="font-bold text-zinc-800 dark:text-zinc-200">Lokasi Klinik</p>
|
|
<p class="mb-3 text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">{{ $settings['clinic_address'] ?? '' }}</p>
|
|
<flux:button wire:click="copyAddress" variant="ghost" size="sm" icon="clipboard">Salin Alamat</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:separator variant="faint" class="dark:border-zinc-800" />
|
|
|
|
@php
|
|
$phone = $settings['clinic_phone'] ?? '';
|
|
// Hapus karakter selain angka
|
|
$cleanPhone = preg_replace('/[^0-9]/', '', $phone);
|
|
// Jika diawali angka 0, ganti dengan 62
|
|
if (str_starts_with($cleanPhone, '0')) {
|
|
$cleanPhone = '62' . substr($cleanPhone, 1);
|
|
}
|
|
@endphp
|
|
<div class="flex gap-4">
|
|
<flux:icon.phone
|
|
class="text-{{ $site->accent ?? 'emerald' }}-600 dark:text-{{ $site->accent ?? 'emerald' }}-400" />
|
|
<div>
|
|
<p class="font-bold text-zinc-800 dark:text-zinc-200">Telepon & WhatsApp</p>
|
|
<a href="https://wa.me/{{ $cleanPhone ?? '' }}"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="text-zinc-500 dark:text-zinc-400 text-sm hover:underline hover:text-{{ $site->accent ?? 'emerald' }}-600">
|
|
{{ $settings['clinic_phone'] ?? '' }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:separator variant="faint" class="dark:border-zinc-800" />
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex gap-4">
|
|
<flux:icon.globe-asia-australia class="text-{{ $site->accent ?? 'emerald' }}-600 dark:text-{{ $site->accent ?? 'emerald' }}-400" />
|
|
<div><p class="font-bold text-zinc-800 dark:text-zinc-200">Ikuti Kami</p></div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<flux:button href="{{ $settings['social_facebook'] ?? '#' }}" target="_blank" variant="ghost" size="sm">Facebook</flux:button>
|
|
<flux:button href="{{ $settings['social_instagram'] ?? '#' }}" target="_blank" variant="ghost" size="sm">Instagram</flux:button>
|
|
<flux:button href="{{ $settings['social_twitter'] ?? '#' }}" target="_blank" variant="ghost" size="sm">Twitter / X</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
|
|
{{-- 4. Google Maps Section --}}
|
|
<div class="group relative bg-zinc-200 dark:bg-zinc-800 shadow-xl border-4 border-white dark:border-zinc-900 rounded-3xl w-full h-[450px] overflow-hidden">
|
|
<div class="opacity-90 dark:opacity-80 group-hover:opacity-100 grayscale dark:grayscale-[0.5] group-hover:grayscale-0 w-full h-full transition-all contrast-125 dark:contrast-100">
|
|
<iframe width="100%" height="100%" frameborder="0" style="border:0;"
|
|
src="https://maps.google.com/maps?q={{ $settings['clinic_latitude'] ?? '' }},{{ $settings['clinic_longitude'] ?? '' }}&z=15&output=embed"
|
|
allowfullscreen loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
|
|
<div class="right-4 bottom-4 absolute">
|
|
<flux:button href="https://www.google.com/maps/search/?api=1&query={{ $settings['clinic_latitude'] ?? '' }},{{ $settings['clinic_longitude'] ?? '' }}"
|
|
target="_blank" variant="primary" icon="arrow-up-right">
|
|
Buka di Maps
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 5. FAQ / Footer Teaser --}}
|
|
<section class="py-12 border-zinc-100 dark:border-zinc-800 border-t text-center">
|
|
<flux:heading class="mb-4">Siap Memulai Konsultasi?</flux:heading>
|
|
<flux:subheading class="mb-8">Bergabunglah dengan ribuan pasien lainnya yang telah mempercayakan kesehatannya kepada kami.</flux:subheading>
|
|
<flux:button href="/register" variant="primary">Buat Akun Sekarang</flux:button>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- DETAIL MODAL (Murni Hanya Menampilkan Data / Read-Only) --}}
|
|
<flux:modal name="service-modal" wire:model.self="showModal" @close="closeModal" class="md:w-[28rem]">
|
|
@if ($selectedService)
|
|
<div class="space-y-5">
|
|
{{-- Bagian Header Gambar (Jika ada foto di database) --}}
|
|
@if($selectedService->photo)
|
|
@php
|
|
$modalPhotos = is_array($selectedService->photo) ? $selectedService->photo : json_decode($selectedService->photo, true);
|
|
@endphp
|
|
@if(!empty($modalPhotos[0]))
|
|
<div class="w-full h-48 rounded-xl overflow-hidden shadow-inner bg-zinc-100 dark:bg-zinc-800">
|
|
<img src="{{ asset('storage/' . $modalPhotos[0]) }}" class="w-full h-full object-cover">
|
|
</div>
|
|
@endif
|
|
@endif
|
|
|
|
{{-- Informasi Kategori & Judul Layanan --}}
|
|
<div>
|
|
<flux:badge size="sm" color="{{ $site->accent ?? 'emerald' }}" variant="flat" class="mb-2">
|
|
{{ $selectedService->category?->name ?? 'Layanan Klinik' }}
|
|
</flux:badge>
|
|
<flux:heading size="xl" class="font-bold text-zinc-900 dark:text-white">
|
|
{{ $selectedService->name }}
|
|
</flux:heading>
|
|
</div>
|
|
|
|
{{-- Deskripsi Layanan --}}
|
|
<div class="pt-2 border-t border-zinc-100 dark:border-zinc-800">
|
|
<p class="text-zinc-400 dark:text-zinc-500 font-semibold text-xs tracking-wider uppercase mb-1">Deskripsi Layanan</p>
|
|
<div class="text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed whitespace-pre-line">
|
|
{{ $selectedService->description ?? 'Tidak ada deskripsi tambahan untuk layanan ini.' }}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Footer Tombol Tutup --}}
|
|
<div class="flex pt-4 border-t border-zinc-100 dark:border-zinc-800">
|
|
<flux:spacer />
|
|
<flux:modal.close>
|
|
<flux:button variant="filled" class="px-5">Tutup</flux:button>
|
|
</flux:modal.close>
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- State Loading saat menunggu pengiriman data dari Server ke DOM --}}
|
|
<div class="py-12 flex flex-col items-center justify-center space-y-3 text-zinc-400">
|
|
<svg class="animate-spin h-6 w-6 text-zinc-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-xs tracking-wide">Memuat rincian data...</span>
|
|
</div>
|
|
@endif
|
|
</flux:modal>
|
|
|
|
</div> |