244 lines
10 KiB
PHP
244 lines
10 KiB
PHP
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
|
|
<div class="space-y-24 py-12">
|
|
{{-- 1. Hero Section --}}
|
|
<div>
|
|
@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 shadow-2xl px-8 py-20 rounded-3xl overflow-hidden text-white transition-colors duration-300">
|
|
|
|
{{-- ✅ Layer gambar + gradient --}}
|
|
<div class="absolute inset-0 bg-cover bg-no-repeat"
|
|
style="
|
|
background-image:
|
|
linear-gradient(
|
|
to right,
|
|
rgba({{ $rgb }},0.85) 0%,
|
|
rgba({{ $rgb }},0.6) 40%,
|
|
rgba({{ $rgb }},0.2) 70%,
|
|
rgba({{ $rgb }},0) 100%
|
|
),
|
|
url('{{ asset('images/hero-klinik.jpg') }}');
|
|
|
|
background-position: 85% center;
|
|
background-size: 120%;
|
|
">
|
|
</div>
|
|
|
|
{{-- ✅ Konten --}}
|
|
<div class="z-10 relative max-w-3xl">
|
|
|
|
<flux:badge color="{{ $site->accent ?? 'emerald' }}"
|
|
class="bg-white/20 backdrop-blur-md mb-4 border-white/30 text-white">
|
|
Terakreditasi Paripurna
|
|
</flux:badge>
|
|
|
|
<flux:heading size="xl" class="mb-6 font-extrabold text-white 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="dark:bg-white hover:bg-zinc-100 border-none
|
|
text-{{ $site->accent ?? 'emerald' }}-900
|
|
dark:text-{{ $site->accent ?? 'emerald' }}-400
|
|
font-bold shadow-lg px-6 transition-all">
|
|
Daftar Pasien Baru
|
|
</flux:button>
|
|
@endif
|
|
|
|
<flux:button href="{{ route('about') }}" variant="outline">
|
|
Selengkapnya
|
|
</flux:button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- dekorasi --}}
|
|
<div class="-top-24 -right-24 absolute bg-white/10 blur-[100px] rounded-full w-96 h-96"></div>
|
|
<div class="-bottom-24 -left-24 absolute bg-black/5 dark:bg-white/5 blur-[80px] rounded-full w-72 h-72">
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
{{-- 2. Features/Services --}}
|
|
<section id="layanan" class="py-16">
|
|
|
|
{{-- Header --}}
|
|
<div class="mb-12 text-center">
|
|
<flux:heading level="2" class="mb-2">
|
|
Layanan Klinik
|
|
</flux:heading>
|
|
|
|
<flux:subheading class="mx-auto max-w-xl">
|
|
Kami menyediakan berbagai layanan kesehatan untuk memenuhi kebutuhan Anda dan keluarga.
|
|
</flux:subheading>
|
|
</div>
|
|
|
|
{{-- Grid --}}
|
|
<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">
|
|
|
|
{{-- Header --}}
|
|
<div class="flex items-center gap-3 mb-4">
|
|
|
|
{{-- Icon --}}
|
|
<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>
|
|
|
|
{{-- List --}}
|
|
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
|
|
|
|
@foreach ($category->services->take(5) as $service)
|
|
<li class="flex items-start gap-2">
|
|
|
|
<span class="text-{{ $site->accent ?? 'emerald' }}-500 mt-[2px]">
|
|
•
|
|
</span>
|
|
|
|
<span>{{ $service->name }}</span>
|
|
|
|
</li>
|
|
@endforeach
|
|
|
|
</ul>
|
|
|
|
{{-- Footer --}}
|
|
@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>
|
|
|
|
{{-- bg-zinc-50/50 diubah agar adaptif di dark mode --}}
|
|
<flux:card class="space-y-6 bg-zinc-50/50 dark:bg-zinc-900/50 p-6 border-zinc-200 dark:border-zinc-800">
|
|
{{-- Alamat --}}
|
|
<div class="flex gap-4">
|
|
<flux:icon.map-pin class="text-{{ $site->accent }}-600 dark:text-{{ $site->accent }}-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" />
|
|
|
|
{{-- Telepon --}}
|
|
<div class="flex gap-4">
|
|
<flux:icon.phone class="text-{{ $site->accent }}-600 dark:text-{{ $site->accent }}-400" />
|
|
<div>
|
|
<p class="font-bold text-zinc-800 dark:text-zinc-200">Telepon & WhatsApp</p>
|
|
<p class="text-zinc-500 dark:text-zinc-400 text-sm">{{ $settings['clinic_phone'] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:separator variant="faint" class="dark:border-zinc-800" />
|
|
|
|
{{-- Media Sosial --}}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex gap-4">
|
|
<flux:icon.globe-asia-australia
|
|
class="text-{{ $site->accent }}-600 dark:text-{{ $site->accent }}-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>
|