fix: perbaiki navigasi mobile — semua menu tetap inline seperti referensi
This commit is contained in:
@@ -1,55 +1,220 @@
|
||||
@extends('public.layout')
|
||||
|
||||
@section('title', 'Beranda')
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- Hero --}}
|
||||
<div class="text-center py-16 bg-green-700 text-white rounded-2xl mb-12 px-6">
|
||||
<h1 class="text-4xl font-bold mb-3">Persegi</h1>
|
||||
<p class="text-lg opacity-90">Organisasi Pemuda Desa Karangdadap</p>
|
||||
<p class="text-sm opacity-75 mt-1">Kecamatan Kalibagor, Kabupaten Banyumas</p>
|
||||
<a href="{{ route('tentang') }}" class="mt-6 inline-block bg-white text-green-700 font-semibold px-6 py-2 rounded-full hover:bg-green-50">
|
||||
Kenali Kami
|
||||
</a>
|
||||
</div>
|
||||
<section class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
||||
<span class="w-4 h-px bg-gray-400 inline-block"></span> Organisasi Pemuda Independen
|
||||
</p>
|
||||
<h1 class="text-5xl font-bold leading-tight tracking-tight mb-6">
|
||||
Bersama membangun<br>desa yang lebih baik
|
||||
</h1>
|
||||
<p class="text-gray-500 text-lg leading-relaxed mb-8">
|
||||
Persegi adalah organisasi pemuda Desa Karangdadap yang bergerak di bidang sosial,
|
||||
pendidikan, olahraga, dan budaya untuk mendorong kemajuan masyarakat desa.
|
||||
</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('tentang') }}"
|
||||
class="bg-gray-900 text-white px-6 py-3 rounded-full text-sm font-medium hover:bg-gray-700 transition">
|
||||
Kenali Kami
|
||||
</a>
|
||||
<a href="{{ route('kegiatan') }}"
|
||||
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition underline underline-offset-4">
|
||||
Lihat Kegiatan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Visual kanan --}}
|
||||
<div class="bg-gray-900 rounded-2xl p-8 text-green-400 font-mono text-sm leading-relaxed shadow-xl">
|
||||
<div class="flex gap-1.5 mb-4">
|
||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs mb-3">// persegi.info</p>
|
||||
<p><span class="text-purple-400">organisasi</span> <span class="text-white">Persegi</span> {</p>
|
||||
<p class="pl-4"><span class="text-blue-400">lokasi</span>: <span class="text-yellow-300">"Karangdadap"</span>,</p>
|
||||
<p class="pl-4"><span class="text-blue-400">anggota</span>: <span class="text-green-300">{{ $totalAnggota }}</span>,</p>
|
||||
<p class="pl-4"><span class="text-blue-400">divisi</span>: <span class="text-green-300">{{ $totalDivisi }}</span>,</p>
|
||||
<p class="pl-4"><span class="text-blue-400">status</span>: <span class="text-yellow-300">"aktif"</span>,</p>
|
||||
<p class="pl-4"><span class="text-blue-400">misi</span>: <span class="text-yellow-300">"membangun desa"</span></p>
|
||||
<p>}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Stats --}}
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-6 mb-12 text-center">
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<div class="text-3xl font-bold text-green-700">{{ $totalAnggota }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Anggota Aktif</div>
|
||||
<section class="border-y border-gray-100 bg-gray-50">
|
||||
<div class="max-w-6xl mx-auto px-6 py-12 grid grid-cols-3 gap-8 text-center">
|
||||
<div>
|
||||
<div class="text-4xl font-bold">{{ $totalAnggota }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Anggota Aktif</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl font-bold">{{ $totalDivisi }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Divisi</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl font-bold">{{ $totalKegiatan }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Kegiatan Terlaksana</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<div class="text-3xl font-bold text-green-700">{{ $totalDivisi }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Divisi</div>
|
||||
</section>
|
||||
|
||||
{{-- Divisi --}}
|
||||
<section class="max-w-6xl mx-auto px-6 py-24">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 flex items-center gap-2">
|
||||
<span class="w-4 h-px bg-gray-400 inline-block"></span> Struktur Organisasi
|
||||
</p>
|
||||
<h2 class="text-3xl font-bold mb-12">Divisi kami</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
@foreach($divisi as $div)
|
||||
<div class="border border-gray-100 rounded-xl p-6 hover:border-gray-300 transition">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-2">
|
||||
<span class="w-3 h-px bg-gray-400 inline-block"></span> {{ $div->members_count }} anggota
|
||||
</p>
|
||||
<h3 class="font-bold text-lg mb-2">{{ $div->name }}</h3>
|
||||
<p class="text-sm text-gray-500 leading-relaxed">{{ $div->description }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-6 col-span-2 md:col-span-1">
|
||||
<div class="text-3xl font-bold text-green-700">{{ $kegiatan->count() }}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">Kegiatan Terbaru</div>
|
||||
</section>
|
||||
|
||||
{{-- CTA --}}
|
||||
<section class="bg-gray-900 text-white">
|
||||
<div class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
||||
<span class="w-4 h-px bg-gray-500 inline-block"></span> Bergabung bersama kami
|
||||
</p>
|
||||
<h2 class="text-4xl font-bold leading-tight mb-6">Jadilah bagian dari perubahan</h2>
|
||||
<p class="text-gray-400 leading-relaxed mb-8">
|
||||
Persegi membuka kesempatan bagi pemuda Desa Karangdadap untuk berkontribusi nyata
|
||||
dalam pembangunan desa melalui berbagai program dan kegiatan.
|
||||
</p>
|
||||
<a href="{{ route('kontak') }}"
|
||||
class="inline-block bg-white text-gray-900 px-6 py-3 rounded-full text-sm font-medium hover:bg-gray-100 transition">
|
||||
Hubungi Kami
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-2xl p-8 font-mono text-sm text-green-400 leading-relaxed">
|
||||
<div class="flex gap-1.5 mb-4">
|
||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs mb-3">// daftar.persegi</p>
|
||||
<p><span class="text-purple-400">function</span> <span class="text-white">bergabung</span>() {</p>
|
||||
<p class="pl-4 text-gray-400">// hubungi pengurus</p>
|
||||
<p class="pl-4"><span class="text-blue-400">return</span> <span class="text-yellow-300">"masa depan cerah"</span>;</p>
|
||||
<p>}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Kegiatan Terbaru --}}
|
||||
<h2 class="text-2xl font-bold mb-6">Kegiatan Terbaru</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
@forelse($kegiatan as $item)
|
||||
<a href="{{ route('kegiatan.detail', $item) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block">
|
||||
<div class="text-xs text-green-600 font-semibold mb-1">
|
||||
{{ $item->start_date->format('d M Y') }}
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-800 mb-2">{{ $item->title }}</h3>
|
||||
<p class="text-sm text-gray-500 line-clamp-3">{{ $item->description }}</p>
|
||||
</a>
|
||||
@empty
|
||||
<p class="text-gray-400 col-span-3">Belum ada kegiatan.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
<section class="max-w-6xl mx-auto px-6 py-24">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 flex items-center gap-2">
|
||||
<span class="w-4 h-px bg-gray-400 inline-block"></span> Kegiatan
|
||||
</p>
|
||||
<div class="flex items-end justify-between mb-12">
|
||||
<h2 class="text-3xl font-bold">Kegiatan terbaru</h2>
|
||||
<a href="{{ route('kegiatan') }}" class="text-sm text-gray-500 hover:text-gray-900 underline underline-offset-4 transition">
|
||||
Lihat semua
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($kegiatan->count())
|
||||
<div class="text-center mt-8">
|
||||
<a href="{{ route('kegiatan') }}" class="text-green-700 font-semibold hover:underline">Lihat semua kegiatan →</a>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
@forelse($kegiatan as $item)
|
||||
<a href="{{ route('kegiatan.detail', $item) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
|
||||
<div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
|
||||
<div class="flex gap-1 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-red-500"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
</div>
|
||||
<p class="text-gray-500">// {{ $item->start_date->format('d M Y') }}</p>
|
||||
<p class="text-white mt-1 line-clamp-2">{{ $item->title }}</p>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="font-bold mb-2 group-hover:underline underline-offset-2">{{ $item->title }}</h3>
|
||||
<p class="text-sm text-gray-500 line-clamp-2">{{ $item->description }}</p>
|
||||
<p class="text-xs text-gray-400 mt-3">see more →</p>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<p class="text-gray-400 col-span-3">Belum ada kegiatan.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Blog --}}
|
||||
@if($posts->count())
|
||||
<section class="max-w-6xl mx-auto px-6 pb-24">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 flex items-center gap-2">
|
||||
<span class="w-4 h-px bg-gray-400 inline-block"></span> Blog
|
||||
</p>
|
||||
<div class="flex items-end justify-between mb-12">
|
||||
<h2 class="text-3xl font-bold">Artikel terbaru</h2>
|
||||
<a href="{{ route('blog') }}" class="text-sm text-gray-500 hover:text-gray-900 underline underline-offset-4 transition">
|
||||
Lebih banyak artikel
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
@foreach($posts as $post)
|
||||
<a href="{{ route('blog.detail', $post) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
|
||||
<div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
|
||||
<div class="flex gap-1 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-red-500"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
</div>
|
||||
<p class="text-gray-500">// {{ $post->published_at->format('d M Y') }}</p>
|
||||
<p class="text-white mt-1">{{ $post->title }}</p>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="font-bold mb-2 group-hover:underline underline-offset-2">{{ $post->title }}</h3>
|
||||
<p class="text-sm text-gray-500 line-clamp-2">{{ strip_tags($post->content) }}</p>
|
||||
<p class="text-xs text-gray-400 mt-3">see more →</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- FAQ --}}
|
||||
<section class="max-w-6xl mx-auto px-6 pb-24 grid md:grid-cols-2 gap-16">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-3">Pertanyaan umum</h2>
|
||||
<p class="text-gray-500 text-sm">Informasi dasar tentang organisasi Persegi.</p>
|
||||
</div>
|
||||
<div class="space-y-4" x-data="{open: null}">
|
||||
@foreach([
|
||||
['q' => 'Apa itu Persegi?', 'a' => 'Persegi adalah organisasi pemuda independen Desa Karangdadap, Kecamatan Kalibagor, Kabupaten Banyumas.'],
|
||||
['q' => 'Bagaimana cara bergabung?', 'a' => 'Hubungi pengurus melalui halaman Kontak atau datang langsung ke sekretariat di Desa Karangdadap.'],
|
||||
['q' => 'Apakah ada iuran anggota?', 'a' => 'Ada iuran anggota yang digunakan untuk mendanai kegiatan organisasi secara transparan.'],
|
||||
['q' => 'Siapa yang bisa bergabung?', 'a' => 'Pemuda Desa Karangdadap yang memiliki semangat berkontribusi untuk kemajuan desa.'],
|
||||
['q' => 'Apakah keanggotaan gratis?', 'a' => 'Pendaftaran gratis, hanya ada iuran rutin yang sangat terjangkau.'],
|
||||
] as $i => $faq)
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden" x-data="{open: false}">
|
||||
<button @click="open = !open"
|
||||
class="w-full flex items-center justify-between px-5 py-4 text-sm font-medium text-left hover:bg-gray-50 transition">
|
||||
{{ $faq['q'] }}
|
||||
<span class="text-gray-400 text-lg" x-text="open ? '−' : '+'"></span>
|
||||
</button>
|
||||
<div x-show="open" x-cloak class="px-5 pb-4 text-sm text-gray-500">
|
||||
{{ $faq['a'] }}
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user