177 lines
10 KiB
PHP
177 lines
10 KiB
PHP
@extends('layouts.app')
|
|
@section('title', 'Home')
|
|
@section('content')
|
|
<style>
|
|
@keyframes landing-hero-vertigo {
|
|
0% {
|
|
transform: scale(1.04) translate3d(0, 0, 0);
|
|
}
|
|
25% {
|
|
transform: scale(1.08) translate3d(-0.8%, -0.6%, 0);
|
|
}
|
|
50% {
|
|
transform: scale(1.1) translate3d(0.8%, 0.5%, 0);
|
|
}
|
|
75% {
|
|
transform: scale(1.07) translate3d(-0.5%, 0.7%, 0);
|
|
}
|
|
100% {
|
|
transform: scale(1.04) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.landing-hero-image {
|
|
animation: landing-hero-vertigo 18s ease-in-out infinite alternate;
|
|
filter: blur(1.8px);
|
|
transform-origin: center center;
|
|
will-change: transform;
|
|
}
|
|
|
|
.landing-hero-glass {
|
|
backdrop-filter: blur(3px);
|
|
-webkit-backdrop-filter: blur(3px);
|
|
}
|
|
</style>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8 md:space-y-10">
|
|
<section class="surface-card rounded-4xl overflow-hidden">
|
|
<div class="grid lg:grid-cols-3 gap-0">
|
|
<div class="lg:col-span-2 relative min-h-[360px] p-5 sm:p-7 md:min-h-[420px] md:p-10 flex flex-col justify-between overflow-hidden">
|
|
<div class="absolute inset-0">
|
|
<img
|
|
src="{{ asset('images/kameras/Untuk Landing Page.jpg') }}"
|
|
alt="Background landing page"
|
|
class="landing-hero-image absolute inset-0 h-full w-full object-cover"
|
|
>
|
|
<div class="absolute inset-0 bg-black/74"></div>
|
|
<div class="landing-hero-glass absolute inset-0 bg-black/20"></div>
|
|
<div class="absolute inset-y-6 left-6 right-6 rounded-[1.6rem] border border-white/10 bg-linear-to-br from-black/68 via-black/40 to-[#edc039]/14"></div>
|
|
<div class="absolute inset-x-8 bottom-8 h-44 rounded-[1.4rem] bg-linear-to-t from-black/88 via-black/58 to-transparent"></div>
|
|
</div>
|
|
<div class="relative z-10 -translate-y-2 sm:-translate-y-3">
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-white/70 bg-white/70 px-4 py-2 text-xs font-medium uppercase tracking-[0.2em] text-gray-600 backdrop-blur">
|
|
<i class="bi bi-stars text-[#edc039]"></i>
|
|
Jember Kamera Mangli
|
|
</div>
|
|
</div>
|
|
<div class="relative z-10 max-w-2xl rounded-[1.8rem] bg-black/30 p-4 sm:p-5 md:p-6 text-white shadow-[0_20px_45px_rgba(0,0,0,0.28)]">
|
|
<h1 class="mt-2 text-2xl font-bold leading-tight text-white [text-shadow:0_3px_18px_rgba(0,0,0,0.7)] sm:text-3xl md:text-5xl">Temukan Kamera Terbaik Sesuai Kebutuhanmu</h1>
|
|
<p class="mt-4 text-sm text-white/95 [text-shadow:0_2px_12px_rgba(0,0,0,0.65)] sm:text-base md:text-lg max-w-2xl">
|
|
Sistem rekomendasi berbasis TOPSIS membantu kamu memilih kamera secara objektif, cepat, dan mudah dipahami untuk kebutuhan foto maupun video.
|
|
</p>
|
|
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
|
|
@auth
|
|
@if(auth()->user()->isAdmin())
|
|
<a href="{{ route('dashboard') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Buka Dashboard Admin</a>
|
|
@else
|
|
<a href="{{ route('form') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Mulai Rekomendasi</a>
|
|
<a href="{{ route('profile') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Lihat Profile User</a>
|
|
@endif
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Login Untuk Mulai</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-4 sm:p-6 md:p-7">
|
|
<div class="rounded-[1.6rem] border border-gray-200 bg-white p-5 shadow-[0_18px_40px_rgba(15,23,42,0.08)]">
|
|
<h2 class="text-xl font-bold text-gray-900">Coba Rekomendasi Cepat</h2>
|
|
<p class="text-sm text-gray-600 mt-1">Isi form ringkas untuk mulai cari kamera terbaik dengan tampilan yang lebih simpel dan nyaman.</p>
|
|
|
|
@auth
|
|
<form action="{{ route('proses') }}" method="POST" class="mt-5 space-y-3">
|
|
@csrf
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700">Jenis Penggunaan</label>
|
|
<select name="penggunaan" class="mt-1 w-full rounded-full border-gray-200 bg-[#fbfbfa] px-4 py-3 focus:border-[#edc039] focus:ring-[#edc039]">
|
|
<option value="outdoor_day">Outdoor - Day</option>
|
|
<option value="outdoor_night">Outdoor - Night</option>
|
|
<option value="indoor_cerah">Indoor - Cerah</option>
|
|
<option value="indoor_gelap">Indoor - Gelap</option>
|
|
<option value="all">Semua Kondisi</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700">Merek Kamera</label>
|
|
<select name="merek" class="mt-1 w-full rounded-full border-gray-200 bg-[#fbfbfa] px-4 py-3 focus:border-[#edc039] focus:ring-[#edc039]">
|
|
<option value="semua">Semua Merek</option>
|
|
@foreach($merekList as $merek)
|
|
<option value="{{ $merek }}">{{ $merek }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="w-full btn-dark py-3 font-semibold hover:opacity-95">
|
|
Proses Rekomendasi
|
|
</button>
|
|
</form>
|
|
@else
|
|
<form action="{{ route('login') }}" method="GET" class="mt-5 space-y-3">
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700">Jenis Penggunaan</label>
|
|
<select disabled class="mt-1 w-full rounded-full border-gray-200 bg-[#f6f6f4] px-4 py-3 text-gray-500">
|
|
<option>Outdoor - Day</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700">Merek Kamera</label>
|
|
<select disabled class="mt-1 w-full rounded-full border-gray-200 bg-[#f6f6f4] px-4 py-3 text-gray-500">
|
|
<option>Semua Merek</option>
|
|
@foreach($merekList as $merek)
|
|
<option>{{ $merek }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="w-full btn-dark py-3 font-semibold hover:opacity-95">
|
|
Login Untuk Coba Rekomendasi
|
|
</button>
|
|
<a href="{{ route('register') }}" class="block text-center text-sm text-[#edc039] hover:underline">Belum punya akun? Register dulu</a>
|
|
</form>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div class="surface-card rounded-[1.6rem] p-5 text-center">
|
|
<p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-bullseye"></i></p>
|
|
<h3 class="font-semibold text-gray-800">Rekomendasi Objektif</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Perhitungan berbasis metode TOPSIS.</p>
|
|
</div>
|
|
<div class="surface-card rounded-[1.6rem] p-5 text-center">
|
|
<p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-hand-thumbs-up"></i></p>
|
|
<h3 class="font-semibold text-gray-800">Mudah Digunakan</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Input preferensi dalam beberapa langkah.</p>
|
|
</div>
|
|
<div class="surface-card rounded-[1.6rem] p-5 text-center">
|
|
<p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-lightning-charge"></i></p>
|
|
<h3 class="font-semibold text-gray-800">Cepat & Efisien</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Hasil rekomendasi tampil dalam hitungan detik.</p>
|
|
</div>
|
|
<div class="surface-card rounded-[1.6rem] p-5 text-center">
|
|
<p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-mortarboard"></i></p>
|
|
<h3 class="font-semibold text-gray-800">Cocok Untuk Pemula</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Panduan pilihan kamera jadi lebih terarah.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="surface-card rounded-[1.8rem] p-5 md:p-8">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900">Cara Kerja Rekomendasi</h2>
|
|
<p class="text-gray-600 mt-2">Alur singkat agar kamu tahu bagaimana sistem menentukan kamera terbaik.</p>
|
|
<div class="mt-5 grid gap-4 text-sm md:grid-cols-3">
|
|
<div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
|
|
<p class="font-semibold text-[#edc039]">1. Isi Kebutuhan</p>
|
|
<p class="text-gray-600 mt-1">Tentukan tujuan penggunaan, merek favorit, dan prioritas kualitas.</p>
|
|
</div>
|
|
<div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
|
|
<p class="font-semibold text-[#edc039]">2. Proses TOPSIS</p>
|
|
<p class="text-gray-600 mt-1">Sistem melakukan normalisasi, pembobotan, dan perhitungan nilai preferensi.</p>
|
|
</div>
|
|
<div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
|
|
<p class="font-semibold text-[#edc039]">3. Hasil Rekomendasi</p>
|
|
<p class="text-gray-600 mt-1">Kamu mendapatkan kamera terbaik berikut lensa yang paling sesuai.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|