194 lines
12 KiB
PHP
194 lines
12 KiB
PHP
@props([
|
|
'totalMembersCount' => 0,
|
|
'formattedTotalMembersCount' => '',
|
|
'latestMembers' => [],
|
|
'testimonials' => [],
|
|
'bestSellingPerfumes' => [],
|
|
])
|
|
|
|
<main class="flex flex-col lg:flex-row justify-between lg:min-h-screen w-full relative overflow-x-hidden">
|
|
{{-- Left Section --}}
|
|
<section
|
|
class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:px-10 lg:pb-8 flex flex-col lg:min-h-screen lg:justify-between space-y-6 lg:space-y-0 z-20 bg-white">
|
|
<div class="flex flex-col justify-center flex-1 space-y-6 lg:pt-48">
|
|
@if ($totalMembersCount > 0)
|
|
<header class="flex flex-wrap items-center gap-4">
|
|
<div class="flex items-center">
|
|
@foreach ($latestMembers as $member)
|
|
<figure
|
|
class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm {{ !$loop->first ? '-ms-2' : '' }}">
|
|
<img src="{{ $member['avatar_url'] }}" alt="{{ $member['name'] }}"
|
|
class="w-full h-full object-cover">
|
|
</figure>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div
|
|
class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
|
|
<span class="text-home-primary font-bold">{{ $formattedTotalMembersCount }}</span>+ Customer
|
|
Happy &
|
|
Percaya
|
|
Kami 😍
|
|
</div>
|
|
</header>
|
|
@endif
|
|
|
|
<h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
|
|
Temukan<br>
|
|
<span class="italic font-serif font-light text-home-primary">
|
|
signature scent-mu
|
|
</span> hari ini ✨
|
|
</h1>
|
|
|
|
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
|
|
Tiap parfum punya cerita lho. Pilih aroma yang pas sama gayamu dan biarkan wangimu bercerita! 😉🌸
|
|
</p>
|
|
|
|
<div class="flex items-center">
|
|
<a href="{{ route('product.index') }}" wire:navigate
|
|
class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
|
|
Mulai Belanja 🛍️
|
|
</a>
|
|
<span class="w-8 h-[2px] bg-home-primary/20"></span>
|
|
<a href="{{ route('product.index') }}" wire:navigate
|
|
class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-5 h-5 text-home-primary">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Testimonial Section --}}
|
|
<div class="my-3">
|
|
@if (!empty($testimonials))
|
|
<div
|
|
class="testimonials-swiper-container relative w-full mt-auto h-[300px] lg:h-[250px] bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden transition-all duration-300">
|
|
<div class="swiper testimonials-swiper w-full h-full">
|
|
<div class="swiper-wrapper">
|
|
@foreach ($testimonials as $testimonial)
|
|
<div class="swiper-slide flex flex-col justify-center py-0 px-6 lg:px-10">
|
|
<div class="flex items-center gap-4 my-3">
|
|
<img src="{{ $testimonial['avatar_url'] }}"
|
|
alt="{{ $testimonial['customer_name'] }}"
|
|
class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
|
|
<div>
|
|
<h4 class="font-bold text-home-foreground text-sm lg:text-base">
|
|
{{ $testimonial['customer_name'] }}</h4>
|
|
<div class="flex text-home-primary text-xs">
|
|
@for ($i = 0; $i < $testimonial['rating']; $i++)
|
|
★
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="text-home-neutral text-base lg:text-lg italic leading-relaxed break-words line-clamp-4 lg:line-clamp-3">
|
|
"{{ $testimonial['content'] }}"
|
|
</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
|
<button
|
|
class="testimonials-button-prev w-10 h-10 rounded-full bg-home-background/80 backdrop-blur border border-home-background shadow-sm hover:bg-home-background flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-home-primary group-hover:scale-110 transition-transform"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="testimonials-button-next w-10 h-10 rounded-full bg-home-primary shadow-md hover:bg-home-primary/80 flex justify-center items-center transition-colors group">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-home-background group-hover:scale-110 transition-transform"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Right Section --}}
|
|
<section
|
|
class="relative w-full lg:w-[65%] flex flex-col lg:flex-row justify-end items-end py-6 lg:pt-12 lg:pb-8 pr-0 lg:px-10 z-10">
|
|
|
|
<div
|
|
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023-1ca6b0636780?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative w-full px-6 lg:px-0 my-3 overflow-hidden">
|
|
<div class="swiper-container best-selling-swiper">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper !ease-linear">
|
|
@foreach ($bestSellingPerfumes as $perfume)
|
|
<div class="swiper-slide">
|
|
<article
|
|
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-all flex flex-row items-center p-4 h-auto lg:h-[250px] group border border-white/20">
|
|
|
|
<figure
|
|
class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
|
<img src="{{ $perfume['image'] }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
alt="{{ $perfume['name'] }}">
|
|
</figure>
|
|
|
|
<div
|
|
class="flex-1 ml-4 lg:ml-6 flex flex-col justify-center space-y-2 lg:space-y-3">
|
|
<div>
|
|
<h3 class="text-base lg:text-xl text-black font-bold line-clamp-1">
|
|
{{ $perfume['name'] }}
|
|
</h3>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span class="text-home-primary font-bold text-sm lg:text-lg">
|
|
{{ $perfume['formatted_price'] }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 mt-0.5">
|
|
<span
|
|
class="text-[10px] lg:text-xs font-medium text-gray-400 capitalize">
|
|
{{ $perfume['formatted_sold_count'] }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mt-auto">
|
|
<a href="{{ route('product.show', ['slug' => $perfume['slug']]) }}"
|
|
wire:navigate
|
|
class="flex-1 flex justify-center items-center py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-home-primary/90 hover:scale-[1.02] transition-all text-home-background shadow-sm">
|
|
Checkout!
|
|
</a>
|
|
<a href="{{ route('product.show', ['slug' => $perfume['slug']]) }}"
|
|
wire:navigate
|
|
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary/10 flex justify-center items-center rounded-full hover:bg-home-primary hover:text-white transition-all flex-shrink-0 group/icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
|
|
class="size-4 lg:size-5 text-home-primary group-hover/icon:text-white transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|