si-klinik/sk-klinik.my.id/resources/views/livewire/guest/about-page.blade.php

192 lines
7.9 KiB
PHP

<section class="space-y-24 py-12">
{{-- ===================== --}}
{{-- HERO --}}
{{-- ===================== --}}
<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">
Profil Klinik
</flux:badge>
<flux:heading size="xl" class="mb-6 font-extrabold text-white leading-tight">
Klinik Sahabat Keluarga
</flux:heading>
<flux:subheading class="text-white/90 text-lg leading-relaxed">
Klinik terpercaya sejak 2009 dengan pelayanan profesional, efektif, dan kekeluargaan.
</flux:subheading>
</div>
<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/10 blur-[80px] rounded-full w-72 h-72"></div>
</section>
</div>
{{-- ===================== --}}
{{-- TENTANG KAMI --}}
{{-- ===================== --}}
<div class="space-y-24 py-16">
<div class="mb-10 text-center">
<flux:heading>Tentang Kami</flux:heading>
<flux:subheading>
Klinik Sahabat Keluarga adalah klinik rawat inap yang berdiri sejak 2009. Kami berkomitmen
memberikan pelayanan kesehatan profesional, efektif, dan terjangkau untuk keluarga Anda.
</flux:subheading>
</div>
<div class="space-y-20 mx-auto px-4 max-w-5xl">
{{-- IDENTITAS --}}
<section class="gap-8 grid md:grid-cols-2 mb-12">
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-6">Informasi Klinik</flux:heading>
<div class="space-y-3 text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed">
<p><strong>Pemilik:</strong> Efin Sulistyorini, S.Si, M.Si</p>
<p><strong>Penanggung Jawab:</strong> dr. Jaean</p>
<p><strong>Berdiri:</strong> 2009</p>
<p><strong>Jenis:</strong> Klinik Rawat Inap</p>
</div>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-6">Alamat</flux:heading>
<p class="text-zinc-600 dark:text-zinc-400 text-sm leading-loose">
Jl. Raya Nganjuk - Madiun <br>
Kedondong, Bagor - Nganjuk
</p>
</flux:card>
</section>
{{-- VISI MISI --}}
<section class="gap-8 grid md:grid-cols-2">
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-6">Visi</flux:heading>
<p class="text-zinc-600 dark:text-zinc-400 text-sm leading-loose">
Menjadi klinik dengan pelayanan profesional, efektif,
efisien, kekeluargaan, dan terjangkau.
</p>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-6">Misi</flux:heading>
<ul class="space-y-3 text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed">
<li> Pelayanan berfokus pada pasien</li>
<li> Pelayanan ramah & nyaman</li>
<li> Tenaga medis profesional, berpengalaman, dan komunikatif</li>
<li> One Stop Service untuk pemeriksaan, tindakan, dan obat-obatan</li>
</ul>
</flux:card>
</section>
{{-- ===================== --}}
{{-- TIM KLINIK --}}
{{-- ===================== --}}
<section class="mx-auto py-12 max-w-7xl">
<div class="mb-10 text-center">
<flux:heading>Tim Kami</flux:heading>
<flux:subheading>
Tenaga profesional yang siap melayani Anda dengan sepenuh hati.
</flux:subheading>
</div>
<div class="gap-6 grid md:grid-cols-2 lg:grid-cols-3">
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-3">Dokter</flux:heading>
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
<li>Dr. Jaean (Pimpinan)</li>
<li>Dr. Andriawan Purwantoko</li>
<li>Dr. Risma Adistasari</li>
<li>Dr. Annora</li>
</ul>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-3">Perawat</flux:heading>
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
<li>Maryuni S.Kep, Ners</li>
<li>Lilis Maisaroh Amd.Kep</li>
<li>Mira Fanesti Amd.Kep</li>
<li>Ima Nur Kholifah Amd.Kep</li>
</ul>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-3">Bidan</flux:heading>
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
<li>Lusi Dwi S, Amd.Keb</li>
<li>Widawati Amd.Keb</li>
<li>Mundiatus Amd.Keb</li>
<li>Erlina Amd.Keb</li>
</ul>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-3">Farmasi</flux:heading>
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
<li>Siska Dwi H, Apt.Farm</li>
<li>Rahma Nur Azizah</li>
<li>Jovanka</li>
</ul>
</flux:card>
<flux:card class="shadow-sm p-6 rounded-2xl">
<flux:heading class="mb-3">Tim Pendukung</flux:heading>
<ul class="space-y-2 text-zinc-600 dark:text-zinc-400 text-sm">
<li>Admin: Atik Setiawan</li>
<li>CS: Fahmi, Fabian</li>
<li>Driver: Alif</li>
<li>Satpam: Nugroho</li>
</ul>
</flux:card>
</div>
</section>
</div>
</div>
</section>