Untitled
unknown
plain_text
10 months ago
7.8 kB
14
Indexable
{{-- resources/views/homepage.blade.php --}}
@extends('layouts.app')
@section('title', 'Homepage')
@section('content')
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
<i class="fas fa-clipboard-list text-white text-lg"></i>
</div>
<div>
<h1 class="text-xl font-bold text-gray-900">Laporan Masyarakat</h1>
<p class="text-xs text-gray-600">Platform Pelaporan Online</p>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#beranda" class="text-gray-700 hover:text-primary-600 font-medium">Beranda</a>
<a href="#cara-kerja" class="text-gray-700 hover:text-primary-600 font-medium">Cara Kerja</a>
<a href="#kategori" class="text-gray-700 hover:text-primary-600 font-medium">Kategori</a>
<a href="#kontak" class="text-gray-700 hover:text-primary-600 font-medium">Kontak</a>
<form action="{{ route('logout') }}" method="POST" class="inline">
@csrf
<button type="submit" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors">
Logout
</button>
</form>
</div>
<button class="md:hidden p-2">
<i class="fas fa-bars text-gray-700"></i>
</button>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="beranda" class="bg-gradient-to-br from-primary-50 to-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 text-balance">
Suara Anda <span class="text-primary-600">Penting</span> untuk Perubahan
</h1>
<p class="text-xl text-gray-600 mb-8 text-pretty">
Platform digital yang memungkinkan masyarakat melaporkan masalah infrastruktur, layanan publik, dan keprihatinan lainnya secara langsung kepada pihak berwenang.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="{{ route('input') }}" class="bg-primary-500 text-white px-8 py-4 rounded-lg hover:bg-primary-600 transition-colors font-semibold text-lg flex items-center justify-center">
<i class="fas fa-plus mr-2"></i>
Buat Laporan Sekarang
</a>
<a href="#" class="border-2 border-primary-500 text-primary-600 px-8 py-4 rounded-lg hover:bg-primary-50 transition-colors font-semibold text-lg flex items-center justify-center">
<i class="fas fa-search mr-2"></i>
Lihat Status Laporan
</a>
</div>
</div>
<div class="relative">
<div class="bg-white rounded-2xl shadow-xl p-8">
<div class="flex items-center space-x-3 mb-6">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-primary-600"></i>
</div>
<div>
<h3 class="font-semibold text-gray-900">Laporan Baru</h3>
<p class="text-sm text-gray-600">Jalan rusak di Jl. Sudirman</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">Status</span>
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">
Dalam Review
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">Prioritas</span>
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium">
Tinggi
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">Estimasi</span>
<span class="text-sm font-medium text-gray-900">3-5 hari kerja</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Kategori, Cara Kerja, CTA, Footer bisa dipaste langsung dari versi HTML asli -->
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.md\\:hidden button');
const mobileMenu = document.createElement('div');
mobileMenu.className = 'md:hidden bg-white border-t border-gray-200 px-4 py-4 space-y-2';
mobileMenu.innerHTML = `
<a href="#beranda" class="block text-gray-700 hover:text-primary-600 font-medium py-2">Beranda</a>
<a href="#cara-kerja" class="block text-gray-700 hover:text-primary-600 font-medium py-2">Cara Kerja</a>
<a href="#kategori" class="block text-gray-700 hover:text-primary-600 font-medium py-2">Kategori</a>
<a href="#kontak" class="block text-gray-700 hover:text-primary-600 font-medium py-2">Kontak</a>
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="w-full bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 transition-colors mt-2">
Logout
</button>
</form>
`;
mobileMenu.style.display = 'none';
mobileMenuButton.addEventListener('click', function() {
const nav = document.querySelector('nav');
if (mobileMenu.style.display === 'none') {
nav.appendChild(mobileMenu);
mobileMenu.style.display = 'block';
} else {
mobileMenu.style.display = 'none';
}
});
</script>
</body>
@endsection
Editor is loading...
Leave a Comment