81 lines
4.8 KiB
PHP
81 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title', 'Persegi') — Organisasi Pemuda Desa Karangdadap</title>
|
|
<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; }
|
|
.skew-top { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); margin-top: -2rem; padding-top: 5rem; }
|
|
.skew-bottom { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); padding-bottom: 5rem; }
|
|
.skew-both { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); margin-top: -2rem; padding-top: 5rem; padding-bottom: 5rem; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-gray-900 font-sans antialiased">
|
|
|
|
{{-- Navbar --}}
|
|
<nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100" x-data="{open: false}">
|
|
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
|
|
<a href="{{ route('home') }}" class="font-bold text-base tracking-tight">Persegi <span class="text-gray-400">///</span></a>
|
|
|
|
{{-- Desktop --}}
|
|
<div class="hidden md:flex items-center gap-8 text-sm text-gray-600">
|
|
<a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
|
|
<a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
|
|
<a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
|
|
<a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
|
|
<a href="{{ route('filament.admin.auth.login') }}"
|
|
class="flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full hover:bg-gray-700 transition">
|
|
<svg class="w-3.5 h-3.5" 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>
|
|
|
|
{{-- Hamburger --}}
|
|
<button @click="open = !open" class="md:hidden p-2 text-gray-600 hover:text-gray-900">
|
|
<svg x-show="!open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
<svg x-show="open" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Mobile menu --}}
|
|
<div x-show="open" x-cloak @click.outside="open = false"
|
|
class="md:hidden border-t border-gray-100 bg-white px-4 py-4 flex flex-col gap-4 text-sm text-gray-600">
|
|
<a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
|
|
<a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
|
|
<a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
|
|
<a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
|
|
<a href="{{ route('filament.admin.auth.login') }}"
|
|
class="inline-flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full w-fit hover:bg-gray-700 transition">
|
|
<svg class="w-3.5 h-3.5" 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>
|
|
</nav>
|
|
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
|
|
<main class="pt-16">
|
|
@yield('content')
|
|
</main>
|
|
|
|
{{-- Footer --}}
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|