tuxarmy/persegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: perbaiki navigasi mobile — semua menu tetap inline seperti referensi

Browse Source
This commit is contained in:
tuxarmy
2026-04-03 05:47:18 +07:00
parent 396ecdb489
commit 2a8d8a813c
9 changed files with 413 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/PublicController.php
+4 -2
View File
@@ -15,8 +15,10 @@ class PublicController extends Controller
return view('public.home', [ return view('public.home', [
'totalAnggota' => User::where('status', 'aktif')->count(), 'totalAnggota' => User::where('status', 'aktif')->count(),
'totalDivisi' => Division::count(), 'totalDivisi' => Division::count(),
'kegiatan' => Activity::where('status', 'approved') 'totalKegiatan' => Activity::where('status', 'approved')->whereNotNull('executed_at')->count(),
->latest('start_date')->take(3)->get(), 'divisi' => Division::withCount('members')->get(),
'kegiatan' => Activity::where('status', 'approved')->latest('start_date')->take(3)->get(),
'posts' => Post::published()->latest('published_at')->take(2)->get(),
]); ]);
} }
resources/views/public/blog-detail.blade.php
+8 -12
View File
@@ -1,26 +1,22 @@
@extends('public.layout') @extends('public.layout')
@section('title', $post->title) @section('title', $post->title)
@section('content') @section('content')
<a href="{{ route('blog') }}" class="text-green-700 text-sm hover:underline">← Kembali ke Blog</a> <section class="max-w-4xl mx-auto px-6 py-24">
<a href="{{ route('blog') }}" class="text-sm text-gray-400 hover:text-gray-700 transition">← Kembali</a>
<div class="bg-white rounded-xl shadow p-8 mt-6"> <div class="mt-8">
<div class="flex items-center gap-3 mb-3"> <div class="flex items-center gap-3 mb-4">
<span class="text-xs px-2 py-0.5 rounded-full font-medium <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ ucfirst($post->category) }}</span>
{{ $post->category === 'pengumuman' ? 'bg-yellow-100 text-yellow-700' : ($post->category === 'berita' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}">
{{ ucfirst($post->category) }}
</span>
<span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</span> <span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</span>
</div> </div>
<h1 class="text-4xl font-bold mb-3">{{ $post->title }}</h1>
<h1 class="text-3xl font-bold mb-2">{{ $post->title }}</h1> <p class="text-sm text-gray-400 mb-10">Oleh {{ $post->author->name }}</p>
<p class="text-sm text-gray-400 mb-8">Oleh {{ $post->author->name }}</p>
<div class="prose max-w-none text-gray-700 leading-relaxed"> <div class="prose max-w-none text-gray-700 leading-relaxed">
{!! $post->content !!} {!! $post->content !!}
</div> </div>
</div> </div>
</section>
@endsection @endsection
resources/views/public/blog.blade.php
+27 -17
View File
@@ -1,31 +1,41 @@
@extends('public.layout') @extends('public.layout')
@section('title', 'Blog') @section('title', 'Blog')
@section('content') @section('content')
<h1 class="text-3xl font-bold mb-2">Blog</h1> <section class="max-w-6xl mx-auto px-6 py-24">
<p class="text-gray-500 mb-10">Artikel, pengumuman, dan berita dari Persegi</p> <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> Blog
</p>
<h1 class="text-5xl font-bold mb-4">Artikel</h1>
<p class="text-gray-500 mb-16 max-w-xl">Pengumuman, berita, dan tulisan dari organisasi Persegi.</p>
<div class="grid md:grid-cols-3 gap-6"> <div class="grid md:grid-cols-2 gap-6">
@forelse($posts as $post) @forelse($posts as $post)
<a href="{{ route('blog.detail', $post) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block"> <a href="{{ route('blog.detail', $post) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
<div class="flex items-center gap-2 mb-2"> <div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
<span class="text-xs px-2 py-0.5 rounded-full font-medium <div class="flex gap-1 mb-3">
{{ $post->category === 'pengumuman' ? 'bg-yellow-100 text-yellow-700' : ($post->category === 'berita' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}"> <span class="w-2 h-2 rounded-full bg-red-500"></span>
{{ ucfirst($post->category) }} <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
</span> <span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</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">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ ucfirst($post->category) }}</span>
</div>
<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> </div>
<h3 class="font-bold text-gray-800 mb-2">{{ $post->title }}</h3>
<p class="text-sm text-gray-500 line-clamp-3">{{ strip_tags($post->content) }}</p>
<div class="text-xs text-gray-400 mt-3">{{ $post->author->name }}</div>
</a> </a>
@empty @empty
<p class="text-gray-400 col-span-3">Belum ada artikel.</p> <p class="text-gray-400 col-span-2">Belum ada artikel.</p>
@endforelse @endforelse
</div> </div>
<div class="mt-10">{{ $posts->links() }}</div> <div class="mt-12">{{ $posts->links() }}</div>
</section>
@endsection @endsection
resources/views/public/home.blade.php
+198 -33
View File
@@ -1,55 +1,220 @@
@extends('public.layout') @extends('public.layout')
@section('title', 'Beranda') @section('title', 'Beranda')
@section('content') @section('content')
{{-- Hero --}} {{-- Hero --}}
<div class="text-center py-16 bg-green-700 text-white rounded-2xl mb-12 px-6"> <section class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
<h1 class="text-4xl font-bold mb-3">Persegi</h1> <div>
<p class="text-lg opacity-90">Organisasi Pemuda Desa Karangdadap</p> <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
<p class="text-sm opacity-75 mt-1">Kecamatan Kalibagor, Kabupaten Banyumas</p> <span class="w-4 h-px bg-gray-400 inline-block"></span> Organisasi Pemuda Independen
<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"> </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 Kenali Kami
</a> </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 --}}
<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>
</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>
</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>
</section>
{{-- Kegiatan Terbaru --}}
<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> </div>
{{-- 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>
</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>
</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>
</div>
</div>
{{-- Kegiatan Terbaru --}}
<h2 class="text-2xl font-bold mb-6">Kegiatan Terbaru</h2>
<div class="grid md:grid-cols-3 gap-6"> <div class="grid md:grid-cols-3 gap-6">
@forelse($kegiatan as $item) @forelse($kegiatan as $item)
<a href="{{ route('kegiatan.detail', $item) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block"> <a href="{{ route('kegiatan.detail', $item) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
<div class="text-xs text-green-600 font-semibold mb-1"> <div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
{{ $item->start_date->format('d M Y') }} <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> </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> </a>
@empty @empty
<p class="text-gray-400 col-span-3">Belum ada kegiatan.</p> <p class="text-gray-400 col-span-3">Belum ada kegiatan.</p>
@endforelse @endforelse
</div> </div>
</section>
@if($kegiatan->count()) {{-- Blog --}}
<div class="text-center mt-8"> @if($posts->count())
<a href="{{ route('kegiatan') }}" class="text-green-700 font-semibold hover:underline">Lihat semua kegiatan →</a> <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>
<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 @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 @endsection
resources/views/public/kegiatan-detail.blade.php
+20 -23
View File
@@ -1,46 +1,43 @@
@extends('public.layout') @extends('public.layout')
@section('title', $activity->title) @section('title', $activity->title)
@section('content') @section('content')
<a href="{{ route('kegiatan') }}" class="text-green-700 text-sm hover:underline">← Kembali ke Kegiatan</a> <section class="max-w-4xl mx-auto px-6 py-24">
<a href="{{ route('kegiatan') }}" class="text-sm text-gray-400 hover:text-gray-700 transition">← Kembali</a>
<div class="bg-white rounded-xl shadow p-8 mt-6"> <div class="mt-8">
<div class="text-sm text-green-600 font-semibold mb-2"> <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>
{{ $activity->start_date->format('d M Y') }} {{ $activity->start_date->format('d M Y') }}
@if($activity->start_date->ne($activity->end_date)) @if($activity->start_date->ne($activity->end_date)) — {{ $activity->end_date->format('d M Y') }} @endif
— {{ $activity->end_date->format('d M Y') }} </p>
@endif <h1 class="text-4xl font-bold mb-6">{{ $activity->title }}</h1>
</div> <p class="text-gray-500 text-lg leading-relaxed mb-10">{{ $activity->description }}</p>
<h1 class="text-3xl font-bold mb-4">{{ $activity->title }}</h1> <div class="border-t border-gray-100 pt-8 grid md:grid-cols-3 gap-6 text-sm">
<p class="text-gray-600 leading-relaxed mb-6">{{ $activity->description }}</p>
<div class="grid md:grid-cols-2 gap-4 text-sm text-gray-500 border-t pt-6">
<div> <div>
<span class="font-semibold text-gray-700">Dibuat oleh:</span> <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Dibuat oleh</p>
{{ $activity->creator->name }} <p class="font-medium">{{ $activity->creator->name }}</p>
</div> </div>
<div> <div>
<span class="font-semibold text-gray-700">Peserta:</span> <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Peserta</p>
{{ $activity->participants->count() }} orang <p class="font-medium">{{ $activity->participants->count() }} orang</p>
</div> </div>
@if($activity->executed_at) @if($activity->executed_at)
<div> <div>
<span class="font-semibold text-gray-700">Dilaksanakan:</span> <p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Dilaksanakan</p>
{{ $activity->executed_at->format('d M Y') }} <p class="font-medium">{{ $activity->executed_at->format('d M Y') }}</p>
</div> </div>
@endif @endif
</div> </div>
@if($activity->execution_notes) @if($activity->execution_notes)
<div class="mt-6 bg-green-50 rounded-lg p-4"> <div class="mt-8 bg-gray-50 rounded-xl p-6">
<div class="font-semibold text-green-800 mb-1">Catatan Pelaksanaan</div> <p class="text-xs text-gray-400 uppercase tracking-widest mb-2">Catatan Pelaksanaan</p>
<p class="text-sm text-green-700">{{ $activity->execution_notes }}</p> <p class="text-gray-700 leading-relaxed">{{ $activity->execution_notes }}</p>
</div> </div>
@endif @endif
</div> </div>
</section>
@endsection @endsection
resources/views/public/kegiatan.blade.php
+25 -17
View File
@@ -1,36 +1,44 @@
@extends('public.layout') @extends('public.layout')
@section('title', 'Kegiatan') @section('title', 'Kegiatan')
@section('content') @section('content')
<h1 class="text-3xl font-bold mb-2">Kegiatan</h1> <section class="max-w-6xl mx-auto px-6 py-24">
<p class="text-gray-500 mb-10">Dokumentasi kegiatan organisasi Persegi</p> <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> Kegiatan
</p>
<h1 class="text-5xl font-bold mb-16">Semua kegiatan</h1>
<div class="grid md:grid-cols-3 gap-6"> <div class="grid md:grid-cols-3 gap-6">
@forelse($kegiatan as $item) @forelse($kegiatan as $item)
<a href="{{ route('kegiatan.detail', $item) }}" class="bg-white rounded-xl shadow hover:shadow-md transition p-5 block"> <a href="{{ route('kegiatan.detail', $item) }}" class="group border border-gray-100 rounded-xl overflow-hidden hover:border-gray-300 transition">
<div class="text-xs text-green-600 font-semibold mb-1"> <div class="bg-gray-900 p-6 font-mono text-xs text-green-400 leading-relaxed">
{{ $item->start_date->format('d M Y') }} <div class="flex gap-1 mb-3">
@if($item->start_date->ne($item->end_date)) <span class="w-2 h-2 rounded-full bg-red-500"></span>
— {{ $item->end_date->format('d M Y') }} <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
@endif <span class="w-2 h-2 rounded-full bg-green-500"></span>
</div> </div>
<h3 class="font-bold text-gray-800 mb-2">{{ $item->title }}</h3> <p class="text-gray-500">// {{ $item->start_date->format('d M Y') }}</p>
<p class="text-sm text-gray-500 line-clamp-3">{{ $item->description }}</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>
<div class="flex items-center justify-between mt-3">
@if($item->executed_at) @if($item->executed_at)
<span class="mt-3 inline-block text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Terlaksana</span> <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Terlaksana</span>
@else @else
<span class="mt-3 inline-block text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">Akan Datang</span> <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Akan datang</span>
@endif @endif
<span class="text-xs text-gray-400">see more →</span>
</div>
</div>
</a> </a>
@empty @empty
<p class="text-gray-400 col-span-3">Belum ada kegiatan.</p> <p class="text-gray-400 col-span-3">Belum ada kegiatan.</p>
@endforelse @endforelse
</div> </div>
<div class="mt-10"> <div class="mt-12">{{ $kegiatan->links() }}</div>
{{ $kegiatan->links() }} </section>
</div>
@endsection @endsection
resources/views/public/kontak.blade.php
+60 -58
View File
@@ -1,68 +1,70 @@
@extends('public.layout') @extends('public.layout')
@section('title', 'Kontak') @section('title', 'Kontak')
@section('content') @section('content')
<div class="max-w-2xl mx-auto"> <section class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16">
<h1 class="text-3xl font-bold mb-2">Hubungi Kami</h1>
<p class="text-gray-500 mb-8">Kirimkan pesan, pertanyaan, atau saran kepada kami.</p>
@if(session('success'))
<div class="bg-green-50 border border-green-200 text-green-700 rounded-lg px-4 py-3 mb-6">
{{ session('success') }}
</div>
@endif
<div class="bg-white rounded-xl shadow p-8">
<form method="POST" action="{{ route('kontak.store') }}" class="space-y-5">
@csrf
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama <span class="text-red-500">*</span></label> <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
<input type="text" name="name" value="{{ old('name') }}" required <span class="w-4 h-px bg-gray-400 inline-block"></span> Kontak
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 @error('name') border-red-400 @enderror"> </p>
@error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror <h1 class="text-5xl font-bold leading-tight mb-6">Hubungi<br>kami</h1>
</div> <p class="text-gray-500 leading-relaxed mb-8">
Kirimkan pesan, pertanyaan, atau saran. Kami akan merespons secepatnya.
<div class="grid md:grid-cols-2 gap-4"> </p>
<div> <div class="space-y-3 text-sm text-gray-500">
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" name="email" value="{{ old('email') }}"
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
@error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">No. Telepon</label>
<input type="text" name="phone" value="{{ old('phone') }}"
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Subjek <span class="text-red-500">*</span></label>
<input type="text" name="subject" value="{{ old('subject') }}" required
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 @error('subject') border-red-400 @enderror">
@error('subject')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Pesan <span class="text-red-500">*</span></label>
<textarea name="message" rows="5" required
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 @error('message') border-red-400 @enderror">{{ old('message') }}</textarea>
@error('message')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<button type="submit"
class="w-full bg-green-700 text-white font-semibold py-2.5 rounded-lg hover:bg-green-800 transition">
Kirim Pesan
</button>
</form>
</div>
<div class="mt-8 bg-white rounded-xl shadow p-6 text-sm text-gray-600 space-y-2">
<p>📍 Desa Karangdadap, Kecamatan Kalibagor, Kabupaten Banyumas</p> <p>📍 Desa Karangdadap, Kecamatan Kalibagor, Kabupaten Banyumas</p>
</div> </div>
</div> </div>
<div>
@if(session('success'))
<div class="border border-gray-200 bg-gray-50 rounded-xl px-5 py-4 mb-6 text-sm text-gray-700">
{{ session('success') }}
</div>
@endif
<form method="POST" action="{{ route('kontak.store') }}" class="space-y-4">
@csrf
<div>
<label class="block text-xs font-medium text-gray-500 uppercase tracking-widest mb-1.5">Nama *</label>
<input type="text" name="name" value="{{ old('name') }}" required
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gray-400 transition @error('name') border-red-300 @enderror">
@error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-medium text-gray-500 uppercase tracking-widest mb-1.5">Email</label>
<input type="email" name="email" value="{{ old('email') }}"
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gray-400 transition">
</div>
<div>
<label class="block text-xs font-medium text-gray-500 uppercase tracking-widest mb-1.5">Telepon</label>
<input type="text" name="phone" value="{{ old('phone') }}"
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gray-400 transition">
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-500 uppercase tracking-widest mb-1.5">Subjek *</label>
<input type="text" name="subject" value="{{ old('subject') }}" required
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gray-400 transition @error('subject') border-red-300 @enderror">
@error('subject')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<div>
<label class="block text-xs font-medium text-gray-500 uppercase tracking-widest mb-1.5">Pesan *</label>
<textarea name="message" rows="5" required
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gray-400 transition @error('message') border-red-300 @enderror">{{ old('message') }}</textarea>
@error('message')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>
<button type="submit"
class="w-full bg-gray-900 text-white font-medium py-3 rounded-full text-sm hover:bg-gray-700 transition">
Kirim Pesan
</button>
</form>
</div>
</section>
@endsection @endsection
resources/views/public/layout.blade.php
+32 -14
View File
@@ -5,29 +5,47 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Persegi') — Organisasi Pemuda Desa Karangdadap</title> <title>@yield('title', 'Persegi') — Organisasi Pemuda Desa Karangdadap</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style>
[x-cloak] { display: none; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prose p { margin-bottom: 1rem; }
</style>
</head> </head>
<body class="bg-gray-50 text-gray-800 font-sans"> <body class="bg-white text-gray-900 font-sans antialiased">
<nav class="bg-green-700 text-white shadow"> {{-- Navbar --}}
<div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between"> <nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100">
<a href="{{ route('home') }}" class="font-bold text-xl tracking-wide">🌿 Persegi</a> <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex gap-6 text-sm font-medium"> <a href="{{ route('home') }}" class="font-bold text-base tracking-tight whitespace-nowrap">Persegi <span class="text-gray-400">///</span></a>
<a href="{{ route('home') }}" class="hover:underline">Beranda</a> <div class="flex items-center gap-3 md:gap-8 text-xs md:text-sm text-gray-600">
<a href="{{ route('tentang') }}" class="hover:underline">Tentang</a> <a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
<a href="{{ route('kegiatan') }}" class="hover:underline">Kegiatan</a> <a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition hidden sm:inline">Kegiatan</a>
<a href="{{ route('blog') }}" class="hover:underline">Blog</a> <a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
<a href="{{ route('kontak') }}" class="hover:underline">Kontak</a> <a href="{{ route('filament.admin.auth.login') }}"
<a href="{{ route('filament.admin.auth.login') }}" class="bg-white text-green-700 px-3 py-1 rounded hover:bg-green-50">Login</a> class="flex items-center gap-1 bg-gray-900 text-white text-xs font-medium px-3 py-1.5 rounded-full hover:bg-gray-700 transition whitespace-nowrap">
<svg class="w-3 h-3" 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"/></svg>
Masuk
</a>
</div> </div>
</div> </div>
</nav> </nav>
<main class="max-w-5xl mx-auto px-4 py-10"> <main class="pt-16">
@yield('content') @yield('content')
</main> </main>
<footer class="bg-green-800 text-white text-center text-sm py-6 mt-16"> {{-- Footer --}}
<p>© {{ date('Y') }} Persegi — Organisasi Pemuda Desa Karangdadap, Kalibagor, Banyumas</p> <footer class="border-t border-gray-100 mt-24">
<div class="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
<p class="text-sm text-gray-400">
Copyright © {{ date('Y') }} — Persegi, Desa Karangdadap, Kalibagor, Banyumas
</p>
<div class="flex items-center gap-4 text-gray-400">
<a href="{{ route('kontak') }}" class="hover:text-gray-700 text-sm transition">Kontak</a>
<a href="{{ route('tentang') }}" class="hover:text-gray-700 text-sm transition">Tentang</a>
</div>
</div>
</footer> </footer>
</body> </body>
resources/views/public/tentang.blade.php
+20 -21
View File
@@ -1,35 +1,34 @@
@extends('public.layout') @extends('public.layout')
@section('title', 'Tentang Kami') @section('title', 'Tentang Kami')
@section('content') @section('content')
<h1 class="text-3xl font-bold mb-2">Tentang Persegi</h1> <section class="max-w-6xl mx-auto px-6 py-24">
<p class="text-gray-500 mb-10">Organisasi Pemuda Independen Desa Karangdadap</p> <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> Tentang
<div class="bg-white rounded-xl shadow p-8 mb-10 prose max-w-none">
<p>
<strong>Persegi</strong> adalah organisasi pemuda independen yang berdiri di Desa Karangdadap,
Kecamatan Kalibagor, Kabupaten Banyumas. Kami berkomitmen untuk mendorong partisipasi aktif
pemuda dalam pembangunan desa melalui kegiatan sosial, pendidikan, olahraga, dan budaya.
</p> </p>
<p> <h1 class="text-5xl font-bold leading-tight mb-6">Persegi</h1>
Dengan prinsip <em>transparansi, gotong royong, dan inovasi</em>, Persegi hadir sebagai <p class="text-gray-500 text-lg max-w-2xl leading-relaxed mb-16">
wadah bagi pemuda desa untuk berkontribusi nyata bagi masyarakat. Organisasi pemuda independen Desa Karangdadap, Kecamatan Kalibagor, Kabupaten Banyumas.
Kami bergerak di bidang sosial, pendidikan, olahraga, dan budaya dengan prinsip
transparansi, gotong royong, dan inovasi.
</p> </p>
</div>
<h2 class="text-2xl font-bold mb-6">Divisi Organisasi</h2> <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
</p>
<h2 class="text-3xl font-bold mb-10">Divisi organisasi</h2>
<div class="grid md:grid-cols-2 gap-6"> <div class="grid md:grid-cols-2 gap-6">
@foreach($divisi as $div) @foreach($divisi as $div)
<div class="bg-white rounded-xl shadow p-6"> <div class="border border-gray-100 rounded-xl p-6 hover:border-gray-300 transition">
<h3 class="font-bold text-green-700 text-lg mb-1">{{ $div->name }}</h3> <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-2">
<p class="text-sm text-gray-500 mb-3">{{ $div->description }}</p> <span class="w-3 h-px bg-gray-400 inline-block"></span> {{ $div->members_count }} anggota
<span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full"> </p>
{{ $div->members_count }} anggota <h3 class="font-bold text-lg mb-2">{{ $div->name }}</h3>
</span> <p class="text-sm text-gray-500 leading-relaxed">{{ $div->description }}</p>
</div> </div>
@endforeach @endforeach
</div> </div>
</section>
@endsection @endsection