253 lines
12 KiB
PHP
253 lines
12 KiB
PHP
@extends('layouts.main-landing')
|
|
@section('content')
|
|
<!-- slider Area Start -->
|
|
<div class="slider-area mb-5 ">
|
|
<!-- Mobile Menu -->
|
|
<div class="slider-active">
|
|
<div class="single-slider slider-height" data-background="{{ asset('assets/img/hero/h1_hero.jpg') }}">
|
|
<div class="container">
|
|
<div class="row d-flex align-items-center justify-content-between">
|
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 d-none d-md-block">
|
|
<div class="hero__img" data-animation="bounceIn" data-delay=".4s">
|
|
<img src="assets/img/hero/hero_man.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-8">
|
|
<div class="hero__caption">
|
|
<span data-animation="fadeInRight" data-delay=".4s">Sentral</span>
|
|
<h1 data-animation="fadeInRight" data-delay=".6s">Konveksi <br> Jember</h1>
|
|
<p data-animation="fadeInRight" data-delay=".8s">Terbaik dan Ekonomis
|
|
</p>
|
|
<!-- Hero-btn -->
|
|
<div class="hero__btn" data-animation="fadeInRight" data-delay="1s">
|
|
<a href="/category-landing" class="btn hero-btn">Belanja Sekarang</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- slider Area End-->
|
|
<!-- Category Area Start-->
|
|
{{-- <section class="category-area section-padding30">
|
|
<div class="container-fluid">
|
|
<!-- Section Tittle -->
|
|
<div class="row ">
|
|
<div class="col-lg-12">
|
|
<div class="section-tittle text-center mb-85">
|
|
<h2>Katalog Produk Kami</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
@foreach ($kategori as $item)
|
|
<div class="col-xl-4 col-lg-6">
|
|
<div class="single-category mb-30">
|
|
<div class="category-img">
|
|
@php
|
|
$firstProduct = $item->produk->where('kategori_id', $item->id)->first();
|
|
$firstProductImage = $firstProduct ? $firstProduct->image : 'default_image.jpg'; // Use default image if no product found
|
|
@endphp
|
|
<a href="{{ route('kategori.id', ['id' => $item->id]) }}"><img
|
|
src="{{ asset('assets/img/hero/h1_hero.jpg') }}" style="color: #000;"
|
|
alt=""></a>
|
|
<div class="category-caption">
|
|
<h2 style="">{{ $item->nama }}</h2>
|
|
<span class="best"><a href="{{ route('kategori.id', ['id' => $item->id]) }}">Harga Terbaik</a></span>
|
|
<span class="collection">Koleksi Terbaru</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section> --}}
|
|
<!-- Category Area End-->
|
|
<!-- Latest Products Start -->
|
|
|
|
<section class="latest-product-area padding-bottom mt-5 section-padding30">
|
|
<div class="container">
|
|
<div class="row product-btn d-flex justify-content-end align-items-end">
|
|
<!-- Section Tittle -->
|
|
<div class="col-xl-8 col-lg-7 col-md-7">
|
|
<div class="section-tittle mb-30">
|
|
<h2>Produk Terbaru</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-8 col-lg-7 col-md-7">
|
|
<div class="properties__button f-right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Nav Card -->
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<!-- card one -->
|
|
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
|
|
<div class="row">
|
|
@foreach ($latestProduk as $item)
|
|
<div class="col-xl-4 col-lg-4 col-md-6">
|
|
<div class="single-product mb-60">
|
|
<div class="product-img">
|
|
<a href="{{ route('produk.id', ['id' => $item->id]) }}">
|
|
<img src="{{ asset('foto/product/' . $item->image) }}" alt=""></a>
|
|
<div class="new-product">
|
|
<span>Baru</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-caption">
|
|
<h4><a href="{{ route('produk.id', ['id' => $item->id]) }}">{{ $item->nama }}</a>
|
|
</h4>
|
|
<div class="price">
|
|
<ul>
|
|
<li>Rp. {{ number_format($item->harga, 0, ',', '.') }}</li>
|
|
</ul>
|
|
</div>
|
|
<form action="{{ route('checkout', ['id' => $item->id]) }}" method="GET">
|
|
<button type="submit" class="btn header-btn mt-3">Pesan Sekarang</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Nav Card -->
|
|
</div>
|
|
</section>
|
|
<!-- Latest Products End -->
|
|
<!-- Best Product Start -->
|
|
<div class="best-product-area lf-padding">
|
|
<div class="product-wrapper bg-height" style="background-image: url('assets/img/categori/card.png')">
|
|
<div class="container position-relative">
|
|
<div class="row justify-content-between align-items-end">
|
|
<div class="product-man position-absolute d-none d-lg-block">
|
|
{{-- <img src="assets/img/categori/card-man.png" alt=""> --}}
|
|
</div>
|
|
<div class="col-xl-2 col-lg-2 col-md-2 d-none d-lg-block">
|
|
<div class="vertical-text">
|
|
<span>Sentral</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-8 col-lg-8">
|
|
<div class="best-product-caption">
|
|
<h2>Sentral Konveksi<br> Jember.</h2>
|
|
<p>Terbaik dan Ekonomis Se-Tapal Kuda. <br> Temukan produk dan harga terbaik <br> di Sentral
|
|
Konveksi Jember.</p>
|
|
<a href="/category-landing" class="black-btn">Belanja Sekarang</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Shape -->
|
|
<div class="shape bounce-animate d-none d-md-block">
|
|
<img src="assets/img/categori/card-shape.png" alt="" class="responsive-shape">
|
|
</div>
|
|
</div>
|
|
<!-- Best Product End-->
|
|
<!-- Shop Method Start-->
|
|
<div class="shop-method-area section-padding30">
|
|
<div class="container">
|
|
<div class="row d-flex justify-content-between">
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single-method mb-40">
|
|
<i class="ti-package"></i>
|
|
<h6>Pengiriman Cepat</h6>
|
|
<p>Dapatkan pesanan Anda dengan cepat dan tepat waktu.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single-method mb-40">
|
|
<i class="ti-unlock"></i>
|
|
Dapatkan pesanan Anda dengan cepat dan tepat waktu.
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single-method mb-40">
|
|
<i class="ti-reload"></i>
|
|
<h6>Terbaik dan Ekonomis</h6>
|
|
<p>Temukan solusi terbaik dengan harga yang ekonomis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Shop Method End-->
|
|
<!-- Best Collection Start -->
|
|
{{-- <div class="best-collection-area section-padding2">
|
|
<div class="container">
|
|
<div class="row d-flex justify-content-between align-items-end">
|
|
<!-- Left content -->
|
|
<div class="col-xl-4 col-lg-4 col-md-6">
|
|
<div class="best-left-cap">
|
|
<h2>Konveksi Jember</h2>
|
|
<p>Sentral Bordir Sablon Jember.</p>
|
|
<a href="/category-landing" class="btn shop1-btn">Pesan Sekarang</a>
|
|
</div>
|
|
<div class="best-left-img mb-30 d-none d-sm-block">
|
|
<img src="assets/img/collection/collection1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- Mid Img -->
|
|
<div class="col-xl-2 col-lg-2 d-none d-lg-block">
|
|
<div class="best-mid-img mb-30 ">
|
|
<img src="assets/img/collection/collection2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- Riht Caption -->
|
|
<div class="col-xl-4 col-lg-6 col-md-6">
|
|
<div class="best-right-cap ">
|
|
<div class="best-single mb-30">
|
|
<div class="single-cap">
|
|
<h4>Jaket<br></h4>
|
|
</div>
|
|
<div class="single-img">
|
|
<img src="assets/img/collection/collection3.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="best-right-cap">
|
|
<div class="best-single mb-30">
|
|
<div class="single-cap active">
|
|
<h4>Kemeja<br></h4>
|
|
</div>
|
|
<div class="single-img">
|
|
<img src="assets/img/collection/collection4.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="best-right-cap">
|
|
<div class="best-single mb-30">
|
|
<div class="single-cap">
|
|
<h4>Kaos<br></h4>
|
|
</div>
|
|
<div class="single-img">
|
|
<img src="assets/img/collection/collection5.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
<!-- Best Collection End -->
|
|
<style>
|
|
.responsive-shape {
|
|
width: 480px;
|
|
/* Set the width to a fixed size */
|
|
max-width: 100%;
|
|
/* Ensure the image doesn't exceed 100% of its container */
|
|
height: auto;
|
|
/* Maintain aspect ratio */
|
|
/* Optional: Add a minimum width */
|
|
min-width: 300px;
|
|
/* Set a minimum width to prevent the image from becoming too small */
|
|
}
|
|
</style>
|
|
@endsection
|