302 lines
17 KiB
PHP
302 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Rental Mobil</title>
|
|
@vite('resources/css/app.css')
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans text-gray-100">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="fixed w-full z-10 top-0 p-4 bg-[#1e3a8a] text-white shadow">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<!-- Logo Tulisan (tanpa gambar) -->
|
|
<a href="#beranda" class="font-bold text-2xl text-white hover:text-white transition">
|
|
RentSmart
|
|
</a>
|
|
|
|
<!-- Navigation Links -->
|
|
<div class="hidden md:flex space-x-10 mx-auto">
|
|
<a href="#beranda" class="hover:text-[#bfdbfe] transition">Beranda</a>
|
|
<a href="#katalog" class="hover:text-[#bfdbfe] transition">Katalog</a>
|
|
<a href="#tentang" class="hover:text-[#bfdbfe] transition">Tentang Kami</a>
|
|
<a href="#kontak" class="hover:text-[#bfdbfe] transition">Kontak</a>
|
|
<a href="#lokasi" class="hover:text-[#bfdbfe] transition">Lokasi</a>
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
{{-- <div class="hidden md:block">
|
|
<a href="{{ route('login') }}"
|
|
class="bg-transparent border border-white text-white py-2 px-4 rounded shadow transition font-semibold hover:bg-white hover:text-[#1e3a8a]">
|
|
Login
|
|
</a>
|
|
</div> --}}
|
|
|
|
<!-- Mobile Menu Icon (Optional) -->
|
|
<div class="md:hidden">
|
|
<!-- Tambahkan ikon menu mobile di sini kalau mau -->
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Beranda -->
|
|
<section id="beranda" class="scroll-mt-24 h-[70vh] flex items-center justify-center bg-cover bg-center bg-no-repeat pt-24 relative" style="background-image: url('{{ asset('assets/images/bg-awal.jpg') }}');">
|
|
<div class="absolute inset-0 bg-black bg-opacity-60"></div>
|
|
<div class="text-center text-white px-6 relative z-10">
|
|
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Temukan Mobil Sewa Terbaik</h1>
|
|
<p class="text-base sm:text-lg md:text-xl mb-6 text-gray-300">Rental mobil terpercaya dan terjangkau untuk kebutuhan Anda</p>
|
|
<a href="{{ route('rekomendasi.form') }}"
|
|
class="bg-[#1e3a8a] text-white px-6 py-3 rounded shadow hover:bg-[#162e6b] transition font-semibold">
|
|
Lihat Rekomendasi
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Katalog -->
|
|
<section id="katalog" class="scroll-mt-24 py-16 bg-gradient-to-br from-white to-blue-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold mb-12 text-[#1e3a8a] tracking-wide border-b-4 border-blue-700 inline-block pb-2">
|
|
Katalog Mobil
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
|
|
@foreach ($mobils as $mobil)
|
|
<div class="relative bg-white rounded-xl border border-gray-200 shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-2 hover:scale-[1.01]">
|
|
|
|
<!-- Gambar dengan overlay gradient -->
|
|
<div class="relative aspect-video overflow-hidden">
|
|
<img src="{{ asset('assets/images/' . $mobil->gambar) }}" alt="{{ $mobil->nama_mobil }}"
|
|
class="w-full h-full object-cover transition duration-300 hover:scale-105">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
|
</div>
|
|
|
|
<!-- Isi -->
|
|
<div class="p-5 space-y-3 text-center">
|
|
<div class="flex flex-col items-center justify-center space-y-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13l1.5-3h15l1.5 3v5a2 2 0 01-2 2h-1a2 2 0 01-2-2v-1H8v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-5z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 13v-3a4 4 0 018 0v3" />
|
|
</svg>
|
|
<h3 class="text-lg font-semibold text-[#1e3a8a]">{{ $mobil->nama_mobil }}</h3>
|
|
</div>
|
|
|
|
<div class="inline-block bg-blue-50 text-blue-900 text-sm px-3 py-1.5 rounded-md shadow-sm">
|
|
Jenis: {{ $mobil->subKriteria->nama_subkriteria ?? 'Tidak diketahui' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Garis aksen bawah -->
|
|
<div class="absolute bottom-0 left-0 w-full h-1 bg-[#1e3a8a]"></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tentang Kami -->
|
|
<section id="tentang" class="scroll-mt-24 py-16 bg-[#1e3a8a] relative overflow-hidden">
|
|
<!-- Grid pattern dekoratif kanan atas -->
|
|
<svg class="absolute top-0 right-0 w-32 h-32 opacity-10 text-white z-0" fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
|
|
<rect width="1" height="1" fill="currentColor" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100" height="100" fill="url(#grid)" />
|
|
</svg>
|
|
|
|
<!-- Garis putih tipis di sisi kiri -->
|
|
<div class="hidden md:block absolute left-0 top-10 h-3/4 w-1 bg-white opacity-5"></div>
|
|
|
|
<!-- Konten utama -->
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
|
<!-- Kiri: Judul dan teks -->
|
|
<div>
|
|
<div class="flex items-center mb-6">
|
|
<svg class="absolute top-0 right-0 w-40 h-40 text-white/70 drop-shadow-md z-0" fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h2l3 9 4-18 3 9h2" />
|
|
</svg>
|
|
<h2 class="text-3xl font-bold text-white relative inline-block">
|
|
Tentang Website
|
|
<div class="h-1 w-20 bg-white rounded mt-2"></div>
|
|
</h2>
|
|
</div>
|
|
<p class="text-white leading-relaxed text-justify">
|
|
Website ini dirancang untuk membantu pengguna dalam memilih mobil yang paling sesuai dengan kebutuhan mereka.
|
|
Dengan memanfaatkan pendekatan machine learning, sistem akan menganalisis preferensi dan kebutuhan pengguna untuk memberikan rekomendasi mobil secara cerdas dan akurat.
|
|
Tujuan kami adalah memberikan pengalaman yang efisien, cepat, dan terpercaya dalam proses pemilihan mobil, baik untuk kebutuhan sehari-hari, perjalanan bisnis, maupun liburan.
|
|
</p>
|
|
<a href="{{ route('rekomendasi.form') }}"
|
|
class="inline-flex items-center gap-2 mt-8 px-6 py-3 bg-white text-[#1e3a8a] font-semibold rounded-lg shadow-md hover:bg-gray-100 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#1e3a8a]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm8 0l4 4" />
|
|
</svg>
|
|
Coba Sekarang
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- Kanan: Gambar -->
|
|
<div class="flex justify-center relative">
|
|
<img src="{{ asset('assets/images/bg-tentang.jpg') }}" alt="Tentang Kami"
|
|
class="rounded-xl shadow-lg w-full max-w-md object-cover transition-transform duration-300 hover:scale-105 z-20">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulatan menyebar di sisi section -->
|
|
<div class="pointer-events-none z-0">
|
|
<div class="absolute -top-10 -left-10 w-24 h-24 bg-white opacity-10 rounded-full blur-md"></div>
|
|
<div class="absolute top-1/2 -left-16 w-16 h-16 bg-white opacity-10 rounded-full blur-sm"></div>
|
|
<div class="absolute -bottom-20 right-10 w-20 h-20 bg-white opacity-10 rounded-full blur-md"></div>
|
|
<div class="absolute top-1/3 right-0 w-14 h-14 bg-white opacity-10 rounded-full blur-sm"></div>
|
|
<div class="absolute bottom-10 left-1/2 w-28 h-28 bg-white opacity-10 rounded-full blur-lg"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Kontak -->
|
|
<section id="kontak" class="scroll-mt-24 py-16 bg-white">
|
|
<div class="container mx-auto px-4 max-w-5xl">
|
|
<div class="text-center mb-12">
|
|
<h2
|
|
class="text-3xl font-bold text-center text-[#1e3a8a] tracking-wide border-b-4 border-blue-700 inline-block pb-2 mx-auto">
|
|
Kontak Kami
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row rounded-xl shadow-lg overflow-hidden" style="background-color: #f9fafb;">
|
|
<!-- Kiri: Form -->
|
|
<div class="flex-1 p-10 bg-gray-100 text-[#1e3a8a] rounded-xl shadow-md">
|
|
@if(session('success'))
|
|
<div class="mb-6 p-4 bg-green-100 text-green-700 rounded">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="mb-6 p-4 bg-red-100 text-red-700 rounded">
|
|
<ul class="list-disc pl-5">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
<form action="{{ route('kontak.kirim') }}" method="POST" class="space-y-6">
|
|
@csrf
|
|
<div>
|
|
<label for="nama" class="block mb-2 font-semibold">Nama</label>
|
|
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required
|
|
class="w-full px-5 py-3 rounded-md border border-gray-300 focus:border-[#1e3a8a] focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] bg-white placeholder-gray-400 text-[#1e3a8a]" />
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block mb-2 font-semibold">Email</label>
|
|
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required
|
|
class="w-full px-5 py-3 rounded-md border border-gray-300 focus:border-[#1e3a8a] focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] bg-white placeholder-gray-400 text-[#1e3a8a]" />
|
|
</div>
|
|
|
|
<div>
|
|
<label for="pesan" class="block mb-2 font-semibold">Pesan</label>
|
|
<textarea id="pesan" name="pesan" rows="5" placeholder="Tulis pesan Anda di sini..." required
|
|
class="w-full px-5 py-3 rounded-md border border-gray-300 focus:border-[#1e3a8a] focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] bg-white placeholder-gray-400 text-[#1e3a8a] resize-none"></textarea>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="bg-[#1e3a8a] text-white font-semibold px-6 py-3 rounded-md hover:bg-[#163268] transition duration-300 w-full">
|
|
Kirim Pesan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Kanan: Info Kontak dengan background gambar & blur -->
|
|
<div
|
|
class="relative flex-1 md:flex-[0.7] text-white p-10 flex flex-col justify-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center;">
|
|
<!-- Overlay blur + dark -->
|
|
<div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
|
|
|
|
<!-- Konten di atas overlay -->
|
|
<div class="relative z-10">
|
|
<h3 class="text-3xl font-bold mb-4">Informasi Kontak</h3>
|
|
<p class="mb-8 max-w-md text-gray-200">
|
|
Jangan ragu untuk menghubungi kami melalui informasi berikut atau kirim pesan menggunakan form di sebelah kiri.
|
|
</p>
|
|
<ul class="space-y-6 text-gray-200">
|
|
<li class="flex items-center space-x-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-300" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-9 5v6" />
|
|
</svg>
|
|
<span>Jl. Pelita No. 47<br>
|
|
TamanSari Indah, Kec. Bondowoso<br>
|
|
Kabupaten Bondowoso, Jawa Timur</span>
|
|
</li>
|
|
|
|
<li class="flex items-center space-x-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-300" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 5a2 2 0 012-2h3l2 3h7a2 2 0 012 2v6a2 2 0 01-2 2h-7l-2 3H5a2 2 0 01-2-2v-6z" />
|
|
</svg>
|
|
<span>082332627839</span>
|
|
</li>
|
|
|
|
<li class="flex items-center space-x-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-300" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 12a4 4 0 01-8 0 4 4 0 018 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14v7" />
|
|
</svg>
|
|
<span>unitedtourtravel1@gmail.com</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="lokasi" class="scroll-mt-24 py-16 bg-[#1e3a8a] text-white">
|
|
<div class="container mx-auto px-4 max-w-4xl text-center">
|
|
<h2 class="text-3xl font-bold mb-6 tracking-wide">Lokasi Kami</h2>
|
|
<p class="mb-12 max-w-xl mx-auto text-blue-200">
|
|
Temukan kantor kami dengan mudah di lokasi berikut. Kami selalu siap menyambut Anda!
|
|
</p>
|
|
|
|
<!-- Embed Google Maps -->
|
|
<div class="w-full h-72 rounded-xl overflow-hidden shadow-lg">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3756.1853464245737!2d113.8234935!3d-7.9250362999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd6ddd092d7fb01%3A0x9027fd2622c5aea9!2sUnitedTrans%20Tour%20And%20Travel%20Rental%20Mobil%20(AsmoroJr)%20Tamansari!5e1!3m2!1sen!2sid!4v1747574636016!5m2!1sen!2sid"
|
|
width="100%"
|
|
height="100%"
|
|
style="border:0;"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
title="Lokasi Kantor Kami"></iframe>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-800 text-gray-400 text-center py-6">
|
|
<p>© {{ date('Y') }} RentSmart. Semua hak dilindungi.</p>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |