feat(homepage): menampilkan brand
This commit is contained in:
Yoga Pangestu
parent
f740226824
commit
b7518cd0c7
@ -2,9 +2,11 @@
|
||||
|
||||
namespace App\Livewire\Home;
|
||||
|
||||
use App\Models\Brand;
|
||||
use App\Models\ChooseUs;
|
||||
use App\Models\Faq;
|
||||
use App\Models\PerfumeFeature;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
@ -13,6 +15,8 @@
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public array $brands = [];
|
||||
|
||||
public array $perfumeFeatures = [];
|
||||
|
||||
public array $faqs = [];
|
||||
@ -21,6 +25,14 @@ class Index extends Component
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->brands = Brand::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (Brand $brand) => [
|
||||
'name' => $brand->name,
|
||||
'image' => $brand->getFirstMediaUrl('image') ? Storage::url($brand->getFirstMediaUrl('image')) : asset('assets/images/logo.png'),
|
||||
])
|
||||
->toArray();
|
||||
|
||||
$this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (PerfumeFeature $perfumeFeature) => [
|
||||
|
||||
@ -29,15 +29,12 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
|
||||
<figure>
|
||||
<img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
@ -49,9 +46,7 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.overflow-hidden -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper bg-light">
|
||||
<div class="container pt-18 pt-md-20 pb-14 pb-md-16">
|
||||
<div class="row text-center">
|
||||
@ -60,95 +55,42 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
|
||||
class="h-11 position-absolute d-none d-lg-block" style="top: -45%; left: 23%" alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle4.svg') }}"
|
||||
class="h-8 position-absolute d-none d-lg-block" style="top: 6%; right: 2%" alt="">
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
|
||||
<h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
|
||||
class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
|
||||
setiap hari.</h3>
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3">Merek</h2>
|
||||
<h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami menghadirkan beberapa <span
|
||||
class="text-gradient gradient-7">merek terkenal</span> terkenal.</h3>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row mb-20">
|
||||
<div class="col-xxl-11 mx-auto">
|
||||
<div class="row gx-md-8 gy-10 text-center">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/cloud-network-2.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Tahan Lama</h4>
|
||||
<div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-loop="true"
|
||||
data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000"
|
||||
data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper ticker">
|
||||
@foreach ($brands as $brand)
|
||||
<div class="swiper-slide px-5">
|
||||
<img src="{{ $brand['image'] }}" alt="{{ $brand['name'] }}" />
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-green rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/touchscreen.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Kualitas Terjamin</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-purple rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/lock.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Bahan Premium</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/rocket.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Ramah Untuk Kulit</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-violet rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/bar-chart.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">200+ Aroma</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-orange rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/safe.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Kemasan Elegant</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/controls.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Bebas Alkohol</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl mb-4"> <img
|
||||
src="./assets/images/icons/solid/checked.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Tersertifikasi</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row text-center">
|
||||
<div class="col-md-10 col-lg-7 mx-auto position-relative">
|
||||
<img src="{{ asset('assets/images/svg/doodle5.svg') }}"
|
||||
class="w-15 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
style="bottom: -60%; right: 10%" alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle6.svg') }}"
|
||||
class="h-15 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
style="top: -40%; left: -5%" alt="">
|
||||
class="h-15 position-absolute d-none d-lg-block" data-delay="1800" style="top: -40%; left: -5%"
|
||||
alt="">
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
|
||||
<h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
|
||||
class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
|
||||
setiap hari.</h3>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row mb-lg-20 mb-xl-23">
|
||||
<div class="col-xxl-11 mx-auto">
|
||||
@if (!empty($perfumeFeatures))
|
||||
@ -187,13 +129,10 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
|
||||
data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
|
||||
<div class="container py-14 pt-md-16 pt-lg-0 pb-md-17 position-relative" style="z-index: 2;">
|
||||
@ -268,7 +207,6 @@ class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
<!--/.row -->
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper bg-light">
|
||||
<div class="container py-16 py-md-18">
|
||||
<div class="row text-center">
|
||||
@ -284,16 +222,13 @@ class="h-17 position-absolute d-none d-lg-block" style="bottom: 5%; left: -17%"
|
||||
class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa harus
|
||||
berlebihan.</h3>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row d-flex align-items-start mb-19">
|
||||
<div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
|
||||
<figure>
|
||||
<img src="{{ asset('assets/images/devices5.png') }}" alt="image">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-lg-5 ms-auto">
|
||||
@foreach ($whyChooseUs as $item)
|
||||
<div class="d-flex flex-row mb-8">
|
||||
@ -306,9 +241,7 @@ class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa ha
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row">
|
||||
<div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
|
||||
<img src="{{ asset('assets/images/svg/doodle1.svg') }}"
|
||||
@ -324,9 +257,7 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
|
||||
<span class="text-gradient gradient-7">pelanggan</span> tentang kami.
|
||||
</h3>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="grid mb-12">
|
||||
<div class="row isotope gy-6">
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
@ -453,13 +384,11 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.grid-view -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
|
||||
data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
@ -471,7 +400,6 @@ class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.overflow-hidden -->
|
||||
<div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
|
||||
<div class="row gx-0 gy-10">
|
||||
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
|
||||
@ -494,16 +422,12 @@ class="text-gradient gradient-7">one place.</span></h2>
|
||||
class="h-11 rounded-xl" alt=""></a></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
|
||||
<figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user