271 lines
13 KiB
PHP
271 lines
13 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', 'Beranda')
|
|
|
|
@section('content')
|
|
|
|
<div class="container-fluid py-5 mb-5 hero-header bg-light">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center g-5">
|
|
<div class="col-lg-6 order-2 order-lg-1">
|
|
<div class="d-inline-block border border-secondary text-secondary rounded-pill px-3 py-2 mb-3 fw-bold">
|
|
🌾 Mitra Petani Padi Indonesia
|
|
</div>
|
|
<h1 class="display-4 fw-bold text-dark mb-4">
|
|
Jual Beli Gabah & <br>
|
|
<span class="text-primary">Beras Berkualitas.</span>
|
|
</h1>
|
|
<p class="lead text-muted mb-5">
|
|
Platform langsung yang menghubungkan petani padi lokal dengan pembeli.
|
|
Dapatkan harga gabah terbaik dan beras segar tanpa pemutih.
|
|
</p>
|
|
<div class="d-flex gap-2">
|
|
<a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill py-3 px-5 shadow">
|
|
<i class="fas fa-shopping-bag me-2"></i> Belanja
|
|
</a>
|
|
<a href="#katalog" class="btn btn-outline-secondary rounded-pill py-3 px-5">
|
|
Lihat Stok
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 order-1 order-lg-2 text-center">
|
|
<div class="position-relative d-inline-block">
|
|
<img src="https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=1000&auto=format&fit=crop"
|
|
class="img-fluid rounded-circle shadow-lg w-100" style="max-height: 450px; object-fit: cover;"
|
|
alt="Padi Premium">
|
|
<div class="position-absolute bg-white p-3 rounded-3 shadow d-none d-md-block"
|
|
style="bottom: 30px; left: -30px;">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="bg-primary text-white rounded-circle p-2 d-flex align-items-center justify-content-center"
|
|
style="width: 40px; height: 40px;">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="text-start">
|
|
<h6 class="mb-0 fw-bold">100% Panen Baru</h6>
|
|
<small class="text-muted">Kualitas Terjamin</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container py-5">
|
|
<div class="row g-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
|
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
|
style="width: 70px; height: 70px;">
|
|
<i class="fas fa-truck fa-2x"></i>
|
|
</div>
|
|
<h5 class="fw-bold mb-3">Siap Antar</h5>
|
|
<p class="mb-0 text-muted">Armada pickup siap kirim langsung ke lokasi Anda.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
|
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
|
style="width: 70px; height: 70px;">
|
|
<i class="fas fa-hand-holding-usd fa-2x"></i>
|
|
</div>
|
|
<h5 class="fw-bold mb-3">Harga Petani</h5>
|
|
<p class="mb-0 text-muted">Harga tangan pertama langsung tanpa tengkulak.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
|
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
|
style="width: 70px; height: 70px;">
|
|
<i class="fas fa-certificate fa-2x"></i>
|
|
</div>
|
|
<h5 class="fw-bold mb-3">Kualitas Super</h5>
|
|
<p class="mb-0 text-muted">Jaminan beras pulen, wangi, dan bebas pemutih.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
|
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
|
style="width: 70px; height: 70px;">
|
|
<i class="fas fa-shield-alt fa-2x"></i>
|
|
</div>
|
|
<h5 class="fw-bold mb-3">Transaksi Aman</h5>
|
|
<p class="mb-0 text-muted">Pembayaran fleksibel, bisa transfer atau COD.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Produk terlaris --}}
|
|
<div class="container py-5">
|
|
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
|
|
<h1 class="display-6 fw-bold">Produk Terlaris</h1>
|
|
<p class="text-muted">Pilihan favorit pelanggan kami minggu ini.</p>
|
|
</div>
|
|
<div class="row g-4">
|
|
|
|
@forelse($produkTerlaris as $item)
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="rounded position-relative border border-secondary shadow-sm overflow-hidden h-100">
|
|
<div class="fruit-img">
|
|
<img src="{{ $item->foto_produk ? asset('storage/' . $item->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
|
class="img-fluid w-100" style="height: 200px; object-fit: cover;"
|
|
alt="{{ $item->nama_produk }}">
|
|
</div>
|
|
|
|
<div class="text-white bg-danger px-3 py-1 rounded position-absolute"
|
|
style="top: 10px; left: 10px;">
|
|
Terjual {{ $item->total_terjual ?? 0 }}
|
|
</div>
|
|
|
|
<div class="p-4 border-top border-secondary bg-white d-flex flex-column"
|
|
style="height: calc(100% - 200px);">
|
|
<h4>{{ $item->nama_produk }}</h4>
|
|
<p class="text-muted small mb-2 flex-grow-1">
|
|
{{ Str::limit($item->deskripsi, 50) }}
|
|
</p>
|
|
|
|
<div class="d-flex justify-content-between align-items-end">
|
|
<div>
|
|
<p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($item->harga, 0, ',', '.') }}
|
|
</p>
|
|
<small class="text-muted">/ kg</small>
|
|
</div>
|
|
<a href="{{ route('produk.detail', $item->id) }}"
|
|
class="btn btn-outline-primary rounded-pill px-3">
|
|
<i class="fa fa-shopping-bag"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12 text-center">
|
|
<p class="text-muted">Belum ada data penjualan.</p>
|
|
</div>
|
|
@endforelse
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid py-5 bg-light">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
<div class="col-md-6 col-lg-3 text-center">
|
|
<i class="fas fa-users fa-3x text-primary mb-3"></i>
|
|
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">150+</h2>
|
|
<p class="mb-0 text-muted text-uppercase fw-bold">Petani Mitra</p>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3 text-center">
|
|
<i class="fas fa-shopping-cart fa-3x text-primary mb-3"></i>
|
|
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">2,500+</h2>
|
|
<p class="mb-0 text-muted text-uppercase fw-bold">Transaksi</p>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3 text-center">
|
|
<i class="fas fa-star fa-3x text-primary mb-3"></i>
|
|
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">4.8</h2>
|
|
<p class="mb-0 text-muted text-uppercase fw-bold">Rating Rata-rata</p>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3 text-center">
|
|
<i class="fas fa-check-circle fa-3x text-primary mb-3"></i>
|
|
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">100%</h2>
|
|
<p class="mb-0 text-muted text-uppercase fw-bold">Garansi Kualitas</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Katalog --}}
|
|
<div class="container py-5" id="katalog">
|
|
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
|
|
<h2 class="fw-bold display-6 text-dark">Stok Gudang Kami</h2>
|
|
<p class="text-muted">Pilih varietas padi atau beras yang Anda butuhkan hari ini.</p>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-12 text-center">
|
|
@php $kategoris = ['Semua', 'Pandan Wangi', 'IR 64', 'Ketan', 'Merah', 'Hitam']; @endphp
|
|
<div class="d-flex justify-content-center flex-wrap gap-2">
|
|
@foreach ($kategoris as $kategori)
|
|
<button
|
|
class="btn {{ $loop->first ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category"
|
|
data-kategori="{{ $kategori }}">
|
|
{{ $kategori }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4" id="product-container">
|
|
@include('landing.partials.product_list')
|
|
</div>
|
|
|
|
<div class="text-center mt-5">
|
|
<a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill px-5 py-3 shadow">
|
|
Lihat Semua Produk
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Banner --}}
|
|
<div class="container-fluid bg-primary py-5 mt-5">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-8 text-center text-lg-start mb-4 mb-lg-0">
|
|
<h2 class="display-5 fw-bold text-white mb-3">Butuh Suplai Besar?</h2>
|
|
<p class="fs-5 text-white mb-4 opacity-75">
|
|
Kami melayani kerjasama untuk penggilingan padi, restoran, dan toko
|
|
kelontong dengan harga grosir spesial.
|
|
</p>
|
|
<a href="https://wa.me/6281234567890" target="_blank"
|
|
class="btn btn-light rounded-pill px-5 py-3 text-success fw-bold shadow">
|
|
<i class="fab fa-whatsapp me-2"></i> Hubungi Kami
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-4 text-center">
|
|
<i class="fas fa-warehouse text-white opacity-25" style="font-size: 10rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.btn-category').click(function(e) {
|
|
e.preventDefault();
|
|
let kategori = $(this).data('kategori');
|
|
$('.btn-category').removeClass('btn-primary').addClass('btn-outline-primary');
|
|
$(this).removeClass('btn-outline-primary').addClass('btn-primary');
|
|
|
|
$('#product-container').html(
|
|
'<div class="col-12 text-center py-5">' +
|
|
'<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>' +
|
|
'<p class="mt-3 text-muted">Sedang mengambil data...</p>' +
|
|
'</div>'
|
|
);
|
|
|
|
$.ajax({
|
|
url: "{{ route('home') }}",
|
|
type: "GET",
|
|
data: {
|
|
kategori: kategori
|
|
},
|
|
success: function(response) {
|
|
$('#product-container').html(response);
|
|
},
|
|
error: function(xhr) {
|
|
$('#product-container').html(
|
|
'<div class="col-12 text-center text-danger">Gagal memuat data.</div>'
|
|
);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|