feat(homepage): New Homepage
This commit is contained in:
ifanprima130206
parent
9b25af9ef0
commit
4afaa3a878
17
app/Livewire/Home/Article/Index.php
Normal file
17
app/Livewire/Home/Article/Index.php
Normal file
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Home\Article;
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
#[Layout('components.layouts.home', [
|
||||
'title' => 'Article',
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.article.index');
|
||||
}
|
||||
}
|
||||
17
app/Livewire/Home/Faq/Index.php
Normal file
17
app/Livewire/Home/Faq/Index.php
Normal file
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Home\Faq;
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
#[Layout('components.layouts.home', [
|
||||
'title' => 'FAQ',
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.faq.index');
|
||||
}
|
||||
}
|
||||
@ -27,7 +27,7 @@ public function mount()
|
||||
{
|
||||
$this->brands = Brand::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (Brand $brand) => [
|
||||
->map(fn(Brand $brand) => [
|
||||
'name' => $brand->name,
|
||||
'image' => $brand->getFirstMediaUrl('image') ? Storage::url($brand->getFirstMediaUrl('image')) : asset('assets/images/logo.png'),
|
||||
])
|
||||
@ -35,7 +35,7 @@ public function mount()
|
||||
|
||||
$this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (PerfumeFeature $perfumeFeature) => [
|
||||
->map(fn(PerfumeFeature $perfumeFeature) => [
|
||||
'name' => $perfumeFeature->name,
|
||||
'description' => $perfumeFeature->description,
|
||||
])
|
||||
@ -43,7 +43,7 @@ public function mount()
|
||||
|
||||
$this->faqs = Faq::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (Faq $faq) => [
|
||||
->map(fn(Faq $faq) => [
|
||||
'question' => $faq->question,
|
||||
'answer' => $faq->answer,
|
||||
])
|
||||
@ -51,7 +51,7 @@ public function mount()
|
||||
|
||||
$this->whyChooseUs = ChooseUs::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (ChooseUs $chooseUs) => [
|
||||
->map(fn(ChooseUs $chooseUs) => [
|
||||
'name' => $chooseUs->name,
|
||||
'description' => $chooseUs->description,
|
||||
])
|
||||
@ -64,4 +64,14 @@ public function render()
|
||||
'pageTitle' => 'Beranda',
|
||||
]);
|
||||
}
|
||||
|
||||
public function goToProduct()
|
||||
{
|
||||
return redirect('/product');
|
||||
}
|
||||
|
||||
public function goToVoucher()
|
||||
{
|
||||
return redirect('/voucher');
|
||||
}
|
||||
}
|
||||
|
||||
18
app/Livewire/Home/Product/Index.php
Normal file
18
app/Livewire/Home/Product/Index.php
Normal file
@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Home\Product;
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
#[Layout('components.layouts.home', [
|
||||
'title' => 'Product',
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.product.index');
|
||||
}
|
||||
}
|
||||
17
app/Livewire/Home/Voucher/Index.php
Normal file
17
app/Livewire/Home/Voucher/Index.php
Normal file
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Home\Voucher;
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
#[Layout('components.layouts.home', [
|
||||
'title' => 'Voucher',
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.voucher.index');
|
||||
}
|
||||
}
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1636,6 +1636,7 @@
|
||||
"version": "4.0.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@ -2147,6 +2148,7 @@
|
||||
"version": "7.1.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
|
||||
@ -3,12 +3,21 @@
|
||||
@import '../../vendor/livewire/flux/dist/flux.css';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
:root {
|
||||
--home-background: #E5F0FF;
|
||||
--home-accent: #D1E8FF;
|
||||
--home-foreground: #000000;
|
||||
--home-primary: #CAE8FF;
|
||||
}
|
||||
@theme {
|
||||
--font-sans: Inter, sans-serif;
|
||||
--color-accent: var(--color-emerald-600);
|
||||
--color-accent-content: var(--color-emerald-600);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
--color-home-background: var(--home-background);
|
||||
--color-home-accent: var(--home-accent);
|
||||
--color-home-foreground: var(--home-foreground);
|
||||
--color-home-primary: var(--home-primary);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
@ -16,6 +25,9 @@ @layer theme {
|
||||
--color-accent: var(--color-emerald-600);
|
||||
--color-accent-content: var(--color-emerald-400);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
--color-home-background: var(--home-background);
|
||||
--color-home-foreground: var(--home-foreground);
|
||||
--color-home-primary: var(--home-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,3 +41,8 @@ @layer components {
|
||||
@import "@dasundev/livewire-dropzone-styles";
|
||||
}
|
||||
}
|
||||
|
||||
/* * {
|
||||
border: 1px red solid;
|
||||
} */
|
||||
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
@include('components.partials.home._meta')
|
||||
@include('components.partials.home._css')
|
||||
</head>
|
||||
<head>
|
||||
@include('components.partials.home._meta')
|
||||
@include('components.partials.home._css')
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content-wrapper">
|
||||
@include('components.partials.home._header')
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
@include('components.partials.home._footer')
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
@include('components.partials.home._js')
|
||||
</body>
|
||||
<body>
|
||||
|
||||
@include("components.partials.home._header")
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@include("components.partials.home._footer")
|
||||
|
||||
@include('components.partials.home._js')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<link rel="shortcut icon" href="{{ asset('assets/img/favicon.png') }}">
|
||||
{{-- <link rel="shortcut icon" href="{{ asset('assets/img/favicon.png') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/plugins.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/colors/grape.css') }}">
|
||||
<link rel="preload" href="{{ asset('assets/css/fonts/space.css') }}" as="style" onload="this.rel='stylesheet'">
|
||||
<link rel="preload" href="{{ asset('assets/css/fonts/space.css') }}" as="style" onload="this.rel='stylesheet'"> --}}
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@ -1,90 +1,93 @@
|
||||
<footer class="bg-light">
|
||||
<div class="container py-13 py-md-15">
|
||||
<div class="row gy-6 gy-lg-0">
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<div class="widget">
|
||||
<img class="mb-4" src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x"
|
||||
alt="">
|
||||
<p class="mb-4">© 2022 Sandbox. <br class="d-none d-lg-block">All rights reserved.</p>
|
||||
<nav class="nav social ">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
<footer class="bg-gray-100 text-gray-700 py-12 px-6 lg:px-32 xl:px-48 font-sans">
|
||||
<div class="container mx-auto">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-8">
|
||||
|
||||
<div class="md:col-span-4 flex flex-col gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo Yadi Parfum"
|
||||
class="w-16 h-16 object-contain">
|
||||
<h2 class="text-2xl font-bold text-gray-800">Yadi Parfum</h2>
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
|
||||
<p class="text-gray-600 text-sm leading-relaxed text-justify">
|
||||
Menyediakan berbagai macam varian parfum berkualitas tinggi dengan wangi yang tahan lama dan harga
|
||||
terjangkau. Temukan aroma khasmu di sini.
|
||||
</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<div class="widget">
|
||||
<h4 class="widget-title mb-3">Get in Touch</h4>
|
||||
<address class="pe-xl-13 pe-xxl-15">Moonshine St. 14/05 Light City, London, United Kingdom
|
||||
</address>
|
||||
<a href="mailto:#" class="link-body">info@email.com</a><br> 00 (123) 456 78 90
|
||||
|
||||
<div class="md:col-span-3 md:pl-8">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4 uppercase tracking-wider">Tautan Cepat</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Beranda</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Katalog Produk</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Tentang Kami</a>
|
||||
</li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors duration-200">Kontak</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT SIDE -->
|
||||
<div class="md:col-span-5 flex flex-col gap-4">
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-gray-700 text-lg leading-relaxed">
|
||||
Alamat
|
||||
</p>
|
||||
<p class="text-gray-500">
|
||||
{{ $outlet->note ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<div class="widget">
|
||||
<h4 class="widget-title mb-3">Learn More</h4>
|
||||
<ul class="list-unstyled text-reset mb-0">
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Our Story</a></li>
|
||||
<li><a href="#">Projects</a></li>
|
||||
<li><a href="#">Terms of Use</a></li>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-12 col-lg-3">
|
||||
<div class="widget">
|
||||
<h4 class="widget-title mb-3">Our Newsletter</h4>
|
||||
<p class="mb-5">Subscribe to our newsletter to get our news & deals delivered to
|
||||
you.</p>
|
||||
<div class="newsletter-wrapper">
|
||||
<!-- Begin Mailchimp Signup Form -->
|
||||
<div id="mc_embed_signup2">
|
||||
<form
|
||||
action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a"
|
||||
method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form"
|
||||
class="validate " target="_blank" novalidate="">
|
||||
<div id="mc_embed_signup_scroll2">
|
||||
<div class="mc-field-group input-group form-floating">
|
||||
<input type="email" value="" name="EMAIL"
|
||||
class="required email form-control" placeholder="Email Address"
|
||||
id="mce-EMAIL2">
|
||||
<label for="mce-EMAIL2">Email Address</label>
|
||||
<input type="submit" value="Join" name="subscribe"
|
||||
id="mc-embedded-subscribe2" class="btn btn-primary ">
|
||||
</div>
|
||||
<div id="mce-responses2" class="clear">
|
||||
<div class="response" id="mce-error-response2" style="display:none"></div>
|
||||
<div class="response" id="mce-success-response2" style="display:none"></div>
|
||||
</div>
|
||||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||
<div style="position: absolute; left: -5000px;" aria-hidden="true">
|
||||
<input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc"
|
||||
tabindex="-1" value="">
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--End mc_embed_signup-->
|
||||
|
||||
<div class="space-y-2 mt-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm">{{ $outlet->email ?? 'admin@yadiparfum.com' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="text-sm">{{ $outlet->phone ?? '+62 812-3456-7890' }}</span>
|
||||
</div>
|
||||
<!-- /.newsletter-wrapper -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-300 my-8">
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
|
||||
<div class="text-sm text-gray-500 text-center md:text-left">
|
||||
© {{ date('Y') }} Yadi Parfum. All rights reserved.
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-pink-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.163c3.204..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-500 hover:text-green-500 transition-colors">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M.057 24l1.687..."></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</footer>
|
||||
|
||||
@ -1,110 +1,260 @@
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-light caret-none">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="{{ route('homepage') }}" wire:navigate>
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="logo" height="50" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Yadi Parfum</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ request()->routeIs('homepage') ? 'active' : '' }}"
|
||||
href="{{ route('homepage') }}">Beranda</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
|
||||
<div class="offcanvas-header">
|
||||
<h3 class="text-white fs-30 mb-0">Yadi Parfum</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body pb-6">
|
||||
<div class="widget mb-8">
|
||||
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great
|
||||
solution for your business.</p>
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget mb-8">
|
||||
<h4 class="widget-title text-white mb-3">Contact Info</h4>
|
||||
<address> Moonshine St. 14/05 <br /> Light City, London </address>
|
||||
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget mb-8">
|
||||
<h4 class="widget-title text-white mb-3">Learn More</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#">Our Story</a></li>
|
||||
<li><a href="#">Terms of Use</a></li>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
<li><a href="#">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget">
|
||||
<h4 class="widget-title text-white mb-3">Follow Us</h4>
|
||||
<nav class="nav social social-white">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
<header id="navbar"
|
||||
class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200">
|
||||
|
||||
<div class="flex lg:hidden items-center z-50">
|
||||
<button id="mobile-menu-btn" aria-label="Toggle Mobile Menu" aria-expanded="false" aria-controls="mobile-menu"
|
||||
class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group">
|
||||
|
||||
<svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="size-6 text-black transition-colors duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
|
||||
<svg id="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor"
|
||||
class="size-6 text-white hidden transition-transform duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.offcanvas -->
|
||||
|
||||
<a href="/" class="flex items-center ml-8 lg:ml-0 z-50">
|
||||
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
||||
class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-500">
|
||||
</a>
|
||||
|
||||
<nav id="nav-links"
|
||||
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-500 border"
|
||||
aria-label="Main Navigation">
|
||||
<a href="#" class="hover:opacity-80 transition-opacity">Beranda</a>
|
||||
<a href="#" class="hover:opacity-80 transition-opacity">Outlet</a>
|
||||
<div class="relative group">
|
||||
<button wire:click="goToProduct" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<span>Produk</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 group-hover:rotate-180 transition-transform duration-300">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute left-0 top-full hidden group-hover:block pt-2 w-40">
|
||||
<div class="bg-white/95 backdrop-blur-md shadow-lg rounded-lg py-2 border border-gray-200">
|
||||
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Parfum</a>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Botol</a>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Arabian</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a wire:click="goToVoucher" class="hover:opacity-80 transition-opacity cursor-pointer">Voucher</a>
|
||||
<a href="#" class="hover:opacity-80 transition-opacity">Artikel</a>
|
||||
<a href="#" class="hover:opacity-80 transition-opacity">FAQ</a>
|
||||
</nav>
|
||||
|
||||
<section class="flex items-center lg:gap-3 z-50">
|
||||
<button id="cart"
|
||||
class="flex items-center rounded-full transition-all duration-500 border lg:p-0 lg:border-0 hover:scale-110">
|
||||
<div id="cart-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="cart-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ms-2 me-3 transition-all duration-500 hidden lg:block">Keranjang</span>
|
||||
</button>
|
||||
|
||||
<button id="login"
|
||||
class="hidden lg:flex items-center border px-4 py-2 rounded-full ms-2 transition-all duration-500 hover:scale-105 font-medium">
|
||||
Masuk
|
||||
</button>
|
||||
|
||||
<button id="profile"
|
||||
class="flex items-center rounded-full transition-all duration-500 p-2 lg:p-0 lg:border-0 hover:scale-110">
|
||||
<div id="profile-icon"
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" id="profile-svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<nav id="mobile-menu"
|
||||
class="fixed inset-0 h-screen w-screen bg-black/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-500 opacity-0"
|
||||
aria-label="Mobile Navigation">
|
||||
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Beranda</a>
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Outlet</a>
|
||||
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<span class="text-3xl font-bold text-white">Produk</span>
|
||||
<div class="flex gap-4 text-gray-400">
|
||||
<a href="#" class="hover:text-white">Parfum</a>
|
||||
<span class="text-gray-600">•</span>
|
||||
<a href="#" class="hover:text-white">Botol</a>
|
||||
<span class="text-gray-600">•</span>
|
||||
<a href="#" class="hover:text-white">Arabian</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a wire:click="goToVoucher"
|
||||
class="text-3xl font-bold text-white hover:text-gray-300 transition-colors cursor-pointer">Voucher</a>
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Artikel</a>
|
||||
<a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">FAQ</a>
|
||||
|
||||
<button
|
||||
class="mt-8 px-8 py-3 bg-white text-black font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
||||
Get CV
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const navbar = document.getElementById('navbar');
|
||||
const navLinks = document.getElementById('nav-links');
|
||||
const cart = document.getElementById('cart');
|
||||
const login = document.getElementById('login');
|
||||
const profile = document.getElementById('profile');
|
||||
const cartIcon = document.getElementById('cart-icon');
|
||||
const cartSvg = document.getElementById('cart-svg');
|
||||
const profileIcon = document.getElementById('profile-icon');
|
||||
const profileSvg = document.getElementById('profile-svg');
|
||||
|
||||
const mobileBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const hamburgerIcon = document.getElementById('hamburger-icon');
|
||||
const closeIcon = document.getElementById('close-icon');
|
||||
|
||||
function setIconsLight() {
|
||||
cartIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
cartIcon.classList.add('bg-white');
|
||||
cartSvg.classList.remove('text-white', 'text-gray-800');
|
||||
cartSvg.classList.add('text-black');
|
||||
|
||||
profileIcon.classList.remove('bg-black', 'bg-gray-100');
|
||||
profileIcon.classList.add('bg-white');
|
||||
profileSvg.classList.remove('text-white', 'text-gray-800');
|
||||
profileSvg.classList.add('text-black');
|
||||
}
|
||||
|
||||
function setIconsDark() {
|
||||
cartIcon.classList.add('bg-black');
|
||||
cartIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
cartSvg.classList.add('text-white');
|
||||
cartSvg.classList.remove('text-black', 'text-gray-800');
|
||||
|
||||
profileIcon.classList.add('bg-black');
|
||||
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
||||
profileSvg.classList.add('text-white');
|
||||
profileSvg.classList.remove('text-black', 'text-gray-800');
|
||||
}
|
||||
|
||||
function setIconsScrolled() {
|
||||
cartIcon.classList.add('bg-gray-100');
|
||||
cartIcon.classList.remove('bg-black', 'bg-white');
|
||||
cartSvg.classList.add('text-gray-800');
|
||||
cartSvg.classList.remove('text-white', 'text-black');
|
||||
|
||||
profileIcon.classList.add('bg-gray-100');
|
||||
profileIcon.classList.remove('bg-black', 'bg-white');
|
||||
profileSvg.classList.add('text-gray-800');
|
||||
profileSvg.classList.remove('text-white', 'text-black');
|
||||
}
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
const isClosed = mobileMenu.classList.contains('hidden');
|
||||
|
||||
if (isClosed) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
void mobileMenu.offsetWidth;
|
||||
mobileMenu.classList.remove('opacity-0');
|
||||
mobileMenu.classList.add('opacity-100');
|
||||
|
||||
hamburgerIcon.classList.add('hidden');
|
||||
closeIcon.classList.remove('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'true');
|
||||
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.add('bg-transparent');
|
||||
|
||||
setIconsLight();
|
||||
|
||||
} else {
|
||||
mobileMenu.classList.remove('opacity-100');
|
||||
mobileMenu.classList.add('opacity-0');
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 500);
|
||||
|
||||
hamburgerIcon.classList.remove('hidden');
|
||||
closeIcon.classList.add('hidden');
|
||||
mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
|
||||
const scrolled = window.scrollY > 10;
|
||||
if (scrolled) {
|
||||
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
navbar.classList.remove('bg-transparent');
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
navbar.classList.add('bg-transparent');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
||||
'border-gray-200');
|
||||
setIconsDark();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const isMenuOpen = !mobileMenu.classList.contains('hidden');
|
||||
if (isMenuOpen) return;
|
||||
|
||||
const scrolled = window.scrollY > 10;
|
||||
|
||||
if (scrolled) {
|
||||
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-gray-200');
|
||||
navbar.classList.remove('bg-transparent');
|
||||
|
||||
navLinks.classList.add('bg-white', 'border-gray-300', 'text-black');
|
||||
navLinks.classList.remove('bg-transparent', 'border-black', 'text-black');
|
||||
|
||||
cart.classList.add('border-gray-300', 'bg-white');
|
||||
cart.classList.remove('border-black');
|
||||
cart.querySelector('span').classList.add('text-gray-800');
|
||||
|
||||
login.classList.add('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
login.classList.remove('border-black', 'text-black');
|
||||
|
||||
profile.classList.add('border-gray-300');
|
||||
profile.classList.remove('border-black');
|
||||
|
||||
setIconsScrolled();
|
||||
} else {
|
||||
navbar.classList.add('bg-transparent');
|
||||
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b',
|
||||
'border-gray-200');
|
||||
|
||||
navLinks.classList.add('bg-transparent', 'border-black', 'text-black');
|
||||
navLinks.classList.remove('bg-white', 'border-gray-300');
|
||||
|
||||
cart.classList.add('border-black');
|
||||
cart.classList.remove('border-gray-300', 'bg-white');
|
||||
cart.querySelector('span').classList.remove('text-gray-800');
|
||||
cart.querySelector('span').classList.add('text-black');
|
||||
|
||||
login.classList.add('border-black', 'text-black');
|
||||
login.classList.remove('border-gray-300', 'text-gray-800', 'bg-white');
|
||||
|
||||
profile.classList.add('border-black');
|
||||
profile.classList.remove('border-gray-300');
|
||||
|
||||
setIconsDark();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
<script src="{{ asset('assets/js/plugins.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/theme.js') }}"></script>
|
||||
{{-- <script src="{{ asset('assets/js/plugins.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/theme.js') }}"></script> --}}
|
||||
|
||||
317
resources/views/livewire/home/article/index.blade.php
Normal file
317
resources/views/livewire/home/article/index.blade.php
Normal file
@ -0,0 +1,317 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-home-foreground mb-2">Artikel</h1>
|
||||
<p class="text-home-foreground/60">Baca tips dan trik seputar perawatan wewangian dan lifestyle</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
|
||||
<section class="lg:col-span-3">
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" placeholder="Cari artikel..." aria-label="Cari artikel"
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select aria-label="Urutkan artikel"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="name">Nama</option>
|
||||
<option value="views">Paling Dilihat</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Tips Memilih Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Perawatan</span>
|
||||
<span class="text-xs text-home-foreground/60">5 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Memilih parfum yang
|
||||
tepat bukan hanya tentang aroma yang disukai, tetapi juga tentang menemukan
|
||||
signature scent yang mencerminkan kepribadian Anda. Dalam artikel ini kami akan
|
||||
membahas cara memilih parfum yang paling sesuai...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Siti Rahma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Siti Rahma</p>
|
||||
<time datetime="2024-11-05" class="text-xs text-home-foreground/60">5 Nov
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Cara Menyimpan Parfum" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Lifestyle</span>
|
||||
<span class="text-xs text-home-foreground/60">8 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum adalah
|
||||
investasi
|
||||
yang berharga, dan penyimpanan yang tepat adalah kunci untuk menjaga kualitas
|
||||
dan daya tahan aroma. Temukan tips profesional tentang suhu ideal, lokasi
|
||||
penyimpanan terbaik, dan cara menjaga botol parfum Anda...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Ahmad Rizki"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Ahmad Rizki</p>
|
||||
<time datetime="2024-11-03" class="text-xs text-home-foreground/60">3 Nov
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Musim Dingin" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Tren</span>
|
||||
<span class="text-xs text-home-foreground/60">6 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat yang Sempurna untuk Liburan</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Musim dingin
|
||||
membutuhkan aromaterapi yang berbeda. Kami merekomendasikan koleksi parfum
|
||||
dengan nada hangat seperti vanilla, kayu cedar, dan musk yang sempurna untuk
|
||||
menciptakan suasana nyaman di musim yang dingin...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Rina Kusuma"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Rina Kusuma</p>
|
||||
<time datetime="2024-11-01" class="text-xs text-home-foreground/60">1 Nov
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
||||
<img src="https://placehold.co/500x300/png" alt="Parfum Unisex" loading="lazy"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
</div>
|
||||
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex gap-2 mb-3">
|
||||
<span
|
||||
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Rekomendasi</span>
|
||||
<span class="text-xs text-home-foreground/60">7 min read</span>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua Jenis Kelamin</h3>
|
||||
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum unisex semakin
|
||||
populer karena fleksibilitas dan keunikannya. Kami telah mengumpulkan
|
||||
rekomendasi parfum unisex terbaik tahun ini yang dapat digunakan oleh siapa saja
|
||||
dan cocok untuk berbagai kesempatan...</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://placehold.co/500x300/png" alt="Budi Santoso"
|
||||
class="w-8 h-8 rounded-full">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-home-foreground">Budi Santoso</p>
|
||||
<time datetime="2024-10-28" class="text-xs text-home-foreground/60">28 Oct
|
||||
2024</time>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
||||
fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center justify-center mt-12" aria-label="Pagination">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||||
disabled aria-label="Halaman sebelumnya">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@for ($page = 1; $page <= 3; $page++)
|
||||
@if ($page == 1)
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||||
aria-current="page">{{ $page }}</button>
|
||||
@else
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
||||
@endif
|
||||
@endfor
|
||||
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
||||
aria-label="Halaman selanjutnya">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<aside class="lg:col-span-1">
|
||||
<div class="sticky top-24 space-y-6">
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="cat-heading">
|
||||
<h3 id="cat-heading" class="text-lg font-bold text-home-foreground mb-4">Kategori</h3>
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Perawatan
|
||||
Parfum</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Lifestyle</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tren
|
||||
Terkini</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tips
|
||||
& Trik</button>
|
||||
<button
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Review
|
||||
Produk</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="pop-heading">
|
||||
<h3 id="pop-heading" class="text-lg font-bold text-home-foreground mb-4">Artikel Populer</h3>
|
||||
<div class="space-y-4">
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Tips Memilih Parfum yang Tepat Sesuai Kepribadian</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">2.5K views</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Panduan Lengkap Cara Menyimpan Parfum</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.8K views</p>
|
||||
</a>
|
||||
<div class="border-t border-home-foreground/10"></div>
|
||||
<a href="#" class="block group">
|
||||
<p
|
||||
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
||||
Parfum Musim Dingin: Aroma Hangat</p>
|
||||
<p class="text-xs text-home-foreground/60 mt-1">1.2K views</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-6"
|
||||
aria-labelledby="newsletter-heading">
|
||||
<h3 id="newsletter-heading" class="text-lg font-bold text-home-foreground mb-2">Newsletter
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">Dapatkan tips dan artikel terbaru langsung ke
|
||||
email Anda</p>
|
||||
<form onsubmit="event.preventDefault();">
|
||||
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
||||
class="w-full py-2 px-3 rounded-lg border border-home-foreground/20 text-home-foreground placeholder-home-foreground/50 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-home-foreground">
|
||||
<button type="submit"
|
||||
class="w-full bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity text-sm">Subscribe</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
90
resources/views/livewire/home/faq/index.blade.php
Normal file
90
resources/views/livewire/home/faq/index.blade.php
Normal file
@ -0,0 +1,90 @@
|
||||
<div>
|
||||
<section class="px-6 md:px-12 lg:px-24 py-28 md:py-36 bg-white min-h-screen">
|
||||
<header class="mb-12 text-center md:text-left">
|
||||
<h1 class="text-4xl font-bold text-home-foreground mb-2">Frequently Asked Questions</h1>
|
||||
<p class="text-home-foreground/60 text-lg">
|
||||
Temukan jawaban untuk pertanyaan umum Anda tentang produk dan layanan kami
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="columns-1 lg:columns-2 gap-6 space-y-6 lg:space-y-0">
|
||||
@foreach ([
|
||||
['id' => 1, 'q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
||||
['id' => 2, 'q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
||||
['id' => 3, 'q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
||||
['id' => 4, 'q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
||||
['id' => 5, 'q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
||||
['id' => 6, 'q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
||||
] as $faq)
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm">
|
||||
<button
|
||||
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors accordion-trigger"
|
||||
data-accordion="{{ $faq['id'] }}" aria-expanded="false"
|
||||
aria-controls="faq-content-{{ $faq['id'] }}">
|
||||
|
||||
<h3 class="text-lg font-bold text-home-foreground text-left pr-4">
|
||||
{{ $faq['q'] }}
|
||||
</h3>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-home-foreground accordion-icon transition-transform duration-300 flex-shrink-0"
|
||||
fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="faq-content-{{ $faq['id'] }}"
|
||||
class="accordion-content hidden px-6 py-5 border-t border-home-foreground/10"
|
||||
data-content="{{ $faq['id'] }}">
|
||||
<p class="text-home-foreground/70 leading-relaxed">{{ $faq['a'] }}</p>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-10 bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-8 text-center">
|
||||
<h3 class="text-2xl font-bold text-home-foreground mb-2">Masih ada pertanyaan?</h3>
|
||||
<p class="text-home-foreground/60 mb-6">Tim customer service kami siap membantu Anda 24/7</p>
|
||||
<button
|
||||
class="bg-home-foreground text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Hubungi Kami
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('.accordion-trigger').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.accordion;
|
||||
const content = document.querySelector(`[data-content="${id}"]`);
|
||||
const icon = btn.querySelector('.accordion-icon');
|
||||
|
||||
document.querySelectorAll('.accordion-content').forEach(el => {
|
||||
if (el.dataset.content !== id) {
|
||||
el.classList.add('hidden');
|
||||
const otherBtn = document.querySelector(
|
||||
`[data-accordion="${el.dataset.content}"]`);
|
||||
if (otherBtn) {
|
||||
otherBtn.setAttribute('aria-expanded', 'false');
|
||||
otherBtn.querySelector('.accordion-icon').style.transform =
|
||||
'rotate(0deg)';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
content.classList.toggle('hidden');
|
||||
|
||||
if (content.classList.contains('hidden')) {
|
||||
icon.style.transform = 'rotate(0deg)';
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
icon.style.transform = 'rotate(180deg)';
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -1,433 +1,8 @@
|
||||
<div class="">
|
||||
<!-- /header -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
|
||||
data-image-src="{{ asset('assets/images/bg/bg22.png') }}">
|
||||
<div class="container pt-16 pt-md-18 pb-9">
|
||||
<div class="row gx-0 gy-10 align-items-center text-center text-lg-start">
|
||||
<div class="col-lg-6 col-xxl-5 position-relative" data-cues="slideInDown" data-group="page-title"
|
||||
data-delay="700">
|
||||
<img src="{{ asset('assets/images/svg/doodle1.svg') }}"
|
||||
class="h-9 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
|
||||
style="top: -9%; left: -6%" alt="doodle 1">
|
||||
<img src="{{ asset('assets/images/svg/doodle2.svg') }}"
|
||||
class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
|
||||
style="bottom: 9%; right: -22%" alt="doodle 2">
|
||||
<h1 class="display-1 fs-50 mb-4">Temukan
|
||||
<span class="text-gradient gradient-7">aroma terbaik</span>
|
||||
yang mencerminkan kepribadianmu.
|
||||
</h1>
|
||||
<p class="lead fs-24 lh-sm mb-7">
|
||||
Koleksi parfum eksklusif kami kini tersedia untuk dibeli secara
|
||||
online dan di toko resmi kami.</p>
|
||||
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown"
|
||||
data-group="page-title-buttons" data-delay="1800">
|
||||
<span>
|
||||
<a class="btn btn-lg btn-primary rounded-xl mx-1">Belanja</a>
|
||||
</span>
|
||||
<span>
|
||||
<a class="btn btn-lg btn-outline-fuchsia rounded-xl mx-1">Tanya Ahli</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
<div class="divider text-light mx-n2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="wrapper bg-light">
|
||||
<div class="container pt-18 pt-md-20 pb-14 pb-md-16">
|
||||
<div class="row text-center">
|
||||
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto position-relative">
|
||||
<img src="{{ asset('assets/images/svg/doodle3.svg') }}"
|
||||
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">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>
|
||||
</div>
|
||||
<div class="row mb-20">
|
||||
<div class="col-xxl-11 mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="">
|
||||
<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>
|
||||
</div>
|
||||
<div class="row mb-lg-20 mb-xl-23">
|
||||
<div class="col-xxl-11 mx-auto">
|
||||
@if (!empty($perfumeFeatures))
|
||||
<div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
|
||||
<div class="col-md-6 col-lg-4 order-lg-first">
|
||||
@foreach (array_slice($perfumeFeatures, 0, 2) as $index => $feature)
|
||||
<div class="{{ $index == 0 ? 'mb-8' : '' }}">
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
|
||||
{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
|
||||
</span>
|
||||
<h4 class="fs-20">{{ $feature['name'] }}</h4>
|
||||
<p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
|
||||
<figure class="mx-auto">
|
||||
<img src="{{ asset('assets/images/devices4.png') }}" alt="perfume">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="w-100 d-lg-none"></div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
@foreach (array_slice($perfumeFeatures, 2, 2) as $index => $feature)
|
||||
<div class="{{ $index == 0 ? 'mb-8' : '' }}">
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
|
||||
{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}
|
||||
</span>
|
||||
<h4 class="fs-20">{{ $feature['name'] }}</h4>
|
||||
<p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</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;">
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-xxl-10 mx-auto">
|
||||
<div class="mt-lg-n20 mt-xl-n22 mb-14 mb-md-16 rounded-xl">
|
||||
<div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="165101721"></div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<img src="{{ asset('assets/images/svg/doodle7.svg') }}"
|
||||
class="h-7 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
style="top: -90%; right: -3%" alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle8.svg') }}"
|
||||
class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
style="top: -20%; left: -12%" alt="">
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3 text-center">FAQ</h2>
|
||||
<h3 class="display-3 mb-11 px-lg-8 px-xl-11 text-center">Pertanyaan yang sering diajukan
|
||||
<span class="text-gradient gradient-7">seputar layanan </span>kami.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-0">
|
||||
<div id="accordion-1" class="accordion-wrapper">
|
||||
@foreach (array_slice($faqs, 0, ceil(count($faqs) / 2)) as $index => $faq)
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-1-{{ $index }}">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-1-{{ $index }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-1-{{ $index }}">{{ $faq['question'] }}</button>
|
||||
</div>
|
||||
<div id="accordion-collapse-1-{{ $index }}" class="collapse"
|
||||
aria-labelledby="accordion-heading-1-{{ $index }}"
|
||||
data-bs-target="#accordion-{{ $index }}">
|
||||
<div class="card-body">
|
||||
<p>{{ $faq['answer'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
@foreach (array_slice($faqs, ceil(count($faqs) / 2)) as $index => $faq)
|
||||
<div id="accordion-2" class="accordion-wrapper">
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-2-{{ $index }}">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-2-{{ $index }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-2-{{ $index }}">{{ $faq['question'] }}</button>
|
||||
</div>
|
||||
<div id="accordion-collapse-2-{{ $index }}" class="collapse"
|
||||
aria-labelledby="accordion-heading-2-{{ $index }}"
|
||||
data-bs-target="#accordion-2">
|
||||
<div class="card-body">
|
||||
<p>{{ $faq['answer'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /.accordion-wrapper -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<section class="wrapper bg-light">
|
||||
<div class="container py-16 py-md-18">
|
||||
<div class="row text-center">
|
||||
<div class="col-md-11 col-lg-9 col-xl-8 col-xxl-7 mx-auto position-relative">
|
||||
<img src="{{ asset('assets/images/svg/doodle3.svg') }}"
|
||||
class="h-11 position-absolute d-none d-lg-block" style="top: -20%; right: -12%"
|
||||
alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle9.svg') }}"
|
||||
class="h-17 position-absolute d-none d-lg-block" style="bottom: 5%; left: -17%"
|
||||
alt="">
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3 text-center">Mengapa Harus Kami?</h2>
|
||||
<h3 class="display-3 mb-12 text-center">Karena kami percaya <span
|
||||
class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa harus
|
||||
berlebihan.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="col-lg-5 ms-auto">
|
||||
@foreach ($whyChooseUs as $item)
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div class="card card-border-start border-primary">
|
||||
<div class="card-body py-4">
|
||||
<h4 class="fs-20">{{ $loop->iteration }}. {{ $item['name'] }}</h4>
|
||||
<p class="m-0">{{ $item['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<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') }}"
|
||||
class="h-9 position-absolute d-none d-lg-block" style="top: 2%; left: 9%" alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle10.svg') }}"
|
||||
class="h-7 position-absolute d-none d-lg-block" style="top: -45%; left: -17%" alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle11.svg') }}"
|
||||
class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
|
||||
alt="">
|
||||
<h2 class="fs-16 text-uppercase text-muted mb-3">Pelanggan Kami yang Puas</h2>
|
||||
<h3 class="display-3 mb-11 px-xl-10 px-xxl-13">
|
||||
Jangan hanya percaya pada kata kami. Lihat apa yang dikatakan
|
||||
<span class="text-gradient gradient-7">pelanggan</span> tentang kami.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid mb-12">
|
||||
<div class="row isotope gy-6">
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-grape">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus
|
||||
facilisis sociis natoque penatibus.”</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Coriss Ambady</h5>
|
||||
<p class="mb-0">Financial Analyst</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-green">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum
|
||||
massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum
|
||||
faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.
|
||||
Aenean lacinia bibendum nulla sed consectetur.”</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Cory Zamora</h5>
|
||||
<p class="mb-0">Marketing Specialist</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-orange">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue
|
||||
laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac
|
||||
consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.”
|
||||
</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Nikolas Brooten</h5>
|
||||
<p class="mb-0">Sales Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-pink">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus
|
||||
rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac
|
||||
elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac
|
||||
laoreet vitae.”</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Coriss Ambady</h5>
|
||||
<p class="mb-0">Financial Analyst</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-blue">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum
|
||||
sociis natoque penatibus magnis dis montes, nascetur ridiculus mus.
|
||||
Donec sed odio dui. Nulla vitae elit libero a pharetra.”</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Jackie Sanders</h5>
|
||||
<p class="mb-0">Investment Planner</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="item col-md-6 col-xl-4">
|
||||
<div class="card shadow-none rounded-xl bg-soft-yellow">
|
||||
<div class="card-body">
|
||||
<blockquote class="icon mb-0">
|
||||
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit
|
||||
libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis
|
||||
parturient montes, nascetur ridiculus mus.”</p>
|
||||
<div class="blockquote-details">
|
||||
<div class="info ps-0">
|
||||
<h5 class="mb-1">Laura Widerski</h5>
|
||||
<p class="mb-0">Sales Specialist</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.grid-view -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</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;">
|
||||
<div class="divider divider-alt text-light mx-n2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img src="{{ asset('assets/images/svg/doodle2.svg') }}"
|
||||
class="h-15 position-absolute d-none d-lg-block" style="bottom: 36%; right: -25%"
|
||||
alt="">
|
||||
<img src="{{ asset('assets/images/svg/doodle6.svg') }}"
|
||||
class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
|
||||
style="top: -20%; left: -25%" alt="">
|
||||
<h2 class="display-3 mb-4">Manage all your bills, accounts & budgets in <span
|
||||
class="text-gradient gradient-7">one place.</span></h2>
|
||||
<p class="lead fs-24 lh-sm mb-7">Sandbox is available to download from both App Store and
|
||||
Google Play Store.</p>
|
||||
<div class="d-flex justify-content-center justify-content-lg-start">
|
||||
<span>
|
||||
<a href="#" class="me-2">
|
||||
<img src="./assets/images/photos/button-appstore.svg" class="h-11 rounded-xl"
|
||||
alt=""></a></span>
|
||||
<span><a href="#"><img src="./assets/images/photos/button-google-play.svg"
|
||||
class="h-11 rounded-xl" alt=""></a></span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
|
||||
<div class="relative min-h-screen">
|
||||
@include('livewire.home.partials.jumbotron')
|
||||
@include('livewire.home.partials.partners')
|
||||
@include('livewire.home.partials.why')
|
||||
@include('livewire.home.partials.categories')
|
||||
@include('livewire.home.partials.benefits')
|
||||
@include('livewire.home.partials.cta')
|
||||
</div>
|
||||
|
||||
96
resources/views/livewire/home/partials/benefits.blade.php
Normal file
96
resources/views/livewire/home/partials/benefits.blade.php
Normal file
@ -0,0 +1,96 @@
|
||||
@php
|
||||
$accordions = [
|
||||
[
|
||||
'title' => 'Aroma Premium Tahan Lama',
|
||||
'content' =>
|
||||
'Setiap varian dirancang menggunakan konsentrat berkualitas tinggi sehingga wanginya bertahan sepanjang hari, cocok dipakai kerja maupun aktivitas luar.',
|
||||
],
|
||||
[
|
||||
'title' => 'Formula Aman untuk Kulit',
|
||||
'content' =>
|
||||
'Parfum kami menggunakan bahan yang lebih lembut di kulit sehingga nyaman digunakan setiap hari tanpa rasa perih atau iritasi.',
|
||||
],
|
||||
[
|
||||
'title' => 'Pilihan Aroma Sangat Beragam',
|
||||
'content' =>
|
||||
'Mulai dari floral, fresh, woody, oriental hingga parfum harian — semua tersedia untuk menyesuaikan gaya dan kepribadianmu.',
|
||||
],
|
||||
[
|
||||
'title' => 'Harga Terjangkau Kualitas Premium',
|
||||
'content' =>
|
||||
'Nikmati parfum berkelas tanpa perlu mengeluarkan biaya tinggi. Value terbaik untuk kebutuhan harian maupun koleksi pribadi.',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<section class="bg-white py-20 px-6 lg:px-48 relative overflow-hidden font-sans text-home-foreground">
|
||||
<div class="absolute top-24 left-[40%] w-4 h-4 bg-gray-200 rounded-full opacity-50"></div>
|
||||
<div class="absolute top-32 left-[30%] w-2 h-2 bg-orange-200 rounded-full opacity-50"></div>
|
||||
<div class="absolute bottom-10 right-[20%] w-2 h-2 bg-red-200 rounded-full opacity-50"></div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12 mb-20 items-start">
|
||||
<figure class="w-full">
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
||||
class="w-full h-[500px] object-cover rounded-2xl shadow" alt="Parfum Premium">
|
||||
</figure>
|
||||
|
||||
<article class="space-y-4 mt-4 lg:mt-0">
|
||||
<h2 class="text-4xl leading-tight mb-6 text-home-foreground">
|
||||
Keunggulan Produk Kami.
|
||||
</h2>
|
||||
<p class="text-gray-700 mb-8 max-w-3xl leading-relaxed">
|
||||
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik.
|
||||
Dan kalau kamu ingin pengalaman yang lebih eksklusif, ada paket membership yang bikin kamu jauh lebih
|
||||
hemat dan leluasa mencoba banyak aroma.
|
||||
</p>
|
||||
|
||||
@foreach ($accordions as $acc)
|
||||
<div class="border-b border-gray-200 pb-4 accordion-item">
|
||||
<button class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
|
||||
onclick="toggleAccordion(this)" aria-expanded="false">
|
||||
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
|
||||
{{ $acc['title'] }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xl font-light text-gray-400 transition-transform duration-300 icon-plus">+</span>
|
||||
</button>
|
||||
<div
|
||||
class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out content text-gray-700 text-sm leading-relaxed">
|
||||
<div class="pt-2 pb-2">{{ $acc['content'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function toggleAccordion(button) {
|
||||
const content = button.nextElementSibling;
|
||||
const icon = button.querySelector('.icon-plus');
|
||||
|
||||
document.querySelectorAll('.accordion-item').forEach(item => {
|
||||
const otherBtn = item.querySelector('button');
|
||||
const otherContent = item.querySelector('.content');
|
||||
const otherIcon = item.querySelector('.icon-plus');
|
||||
|
||||
if (otherBtn !== button) {
|
||||
otherContent.style.maxHeight = null;
|
||||
otherIcon.textContent = '+';
|
||||
otherIcon.style.transform = 'rotate(0deg)';
|
||||
otherBtn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
if (content.style.maxHeight) {
|
||||
content.style.maxHeight = null;
|
||||
icon.textContent = '+';
|
||||
icon.style.transform = 'rotate(0deg)';
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
content.style.maxHeight = content.scrollHeight + 'px';
|
||||
icon.style.transform = 'rotate(45deg)';
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
145
resources/views/livewire/home/partials/categories.blade.php
Normal file
145
resources/views/livewire/home/partials/categories.blade.php
Normal file
@ -0,0 +1,145 @@
|
||||
@php
|
||||
$industries = [
|
||||
['name' => 'AROMA FLORAL'],
|
||||
['name' => 'AROMA FRESH'],
|
||||
['name' => 'AROMA WOODY'],
|
||||
['name' => 'AROMA ORIENTAL'],
|
||||
['name' => 'PARFUM HARIAN'],
|
||||
['name' => 'PARFUM KERJA'],
|
||||
['name' => 'PARFUM MALAM'],
|
||||
['name' => 'PARFUM PREMIUM'],
|
||||
['name' => 'AROMA SWEET'],
|
||||
['name' => 'AROMA FRUITY'],
|
||||
['name' => 'AROMA MUSKY'],
|
||||
['name' => 'LIMITED EDITION'],
|
||||
['name' => 'AROMA CITRUS'],
|
||||
['name' => 'AROMA AQUA'],
|
||||
['name' => 'AROMA SPICY'],
|
||||
['name' => 'PARFUM SPORT'],
|
||||
['name' => 'PARFUM CLASSIC'],
|
||||
['name' => 'AROMA GREEN'],
|
||||
['name' => 'AROMA TEA'],
|
||||
['name' => 'PARFUM SUMMER'],
|
||||
['name' => 'AROMA TROPICAL'],
|
||||
['name' => 'PARFUM LUXURY'],
|
||||
['name' => 'AROMA EARTHY'],
|
||||
];
|
||||
|
||||
$perPage = 12;
|
||||
$page = request('page', 1);
|
||||
$total = count($industries);
|
||||
$start = ($page - 1) * $perPage;
|
||||
$currentItems = array_slice($industries, $start, $perPage);
|
||||
$totalPages = ceil($total / $perPage);
|
||||
@endphp
|
||||
|
||||
<section class="bg-gray-100 py-16 sm:py-20 px-6 sm:px-10 lg:px-48 relative overflow-hidden">
|
||||
|
||||
<header class="text-center mb-12">
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Temukan Aroma yang <br class="hidden sm:block">
|
||||
Cocok dengan Kepribadianmu.
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="relative">
|
||||
|
||||
<div id="category-container" class="fade-enter-active">
|
||||
<div
|
||||
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-px bg-gray-300 overflow-hidden rounded-2xl">
|
||||
@foreach ($currentItems as $industry)
|
||||
<article
|
||||
class="flex flex-col items-center justify-center py-8 sm:py-10 px-4 bg-gray-100 group hover:bg-white transition duration-300 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-gray-600 mb-3 group-hover:text-black transition">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3
|
||||
class="text-[10px] sm:text-[11px] md:text-xs font-bold tracking-[0.15em] text-gray-500 uppercase group-hover:text-black transition">
|
||||
{{ $industry['name'] }}
|
||||
</h3>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="mt-10 flex flex-col items-center space-y-4 lg:hidden" aria-label="Pagination Mobile">
|
||||
<div class="flex items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-2 h-6 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="text-[10px] font-bold tracking-widest text-gray-400">
|
||||
TAP TO EXPLORE
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="hidden lg:flex absolute top-0 right-[-40px] h-full items-start" aria-label="Pagination Desktop">
|
||||
<div class="flex items-center gap-4 sticky top-10">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
@for ($i = 1; $i <= $totalPages; $i++)
|
||||
<a href="?page={{ $i }}" aria-label="Halaman {{ $i }}"
|
||||
class="w-[3px] h-10 rounded-full pagination-link transition duration-300 {{ $i == $page ? 'bg-black' : 'bg-gray-400' }}"></a>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="flex flex-col text-[10px] font-bold tracking-widest text-gray-400">
|
||||
@foreach (str_split('TAP TO EXPLORE') as $char)
|
||||
<span>{!! $char == ' ' ? ' ' : $char !!}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all .4s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const links = document.querySelectorAll('.pagination-link');
|
||||
const container = document.getElementById('category-container');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
links.forEach(l => l.classList.remove('bg-black'));
|
||||
links.forEach(l => l.classList.add('bg-gray-400'));
|
||||
|
||||
e.target.classList.remove('bg-gray-400');
|
||||
e.target.classList.add('bg-black');
|
||||
|
||||
fetch(link.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const newContent = doc.querySelector('#category-container')
|
||||
.innerHTML;
|
||||
|
||||
container.classList.add('fade-enter');
|
||||
setTimeout(() => {
|
||||
container.innerHTML = newContent;
|
||||
container.classList.remove('fade-enter');
|
||||
container.classList.add('fade-enter-active');
|
||||
}, 120);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
47
resources/views/livewire/home/partials/cta.blade.php
Normal file
47
resources/views/livewire/home/partials/cta.blade.php
Normal file
@ -0,0 +1,47 @@
|
||||
<section class="relative text-center md:text-left bg-black text-white py-16 px-6 md:px-12 mt-48 lg:mt-0">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<figure class="flex justify-center md:justify-start relative z-10">
|
||||
<img src="https://png.pngtree.com/png-vector/20230918/ourmid/pngtree-man-in-shirt-smiles-and-gives-thumbs-up-to-show-approval-png-image_10094392.png"
|
||||
alt="Testimoni Pelanggan yang Puas"
|
||||
class="w-full max-w-sm lg:max-w-md h-auto absolute bottom-0 md:-top-72 object-contain drop-shadow-2xl">
|
||||
</figure>
|
||||
|
||||
<div class="relative z-20">
|
||||
|
||||
<div class="flex justify-center md:justify-start gap-1 mb-4" aria-label="Rating bintang 5 dari 5">
|
||||
@for ($i = 0; $i < 5; $i++)
|
||||
<span class="text-white text-xl" aria-hidden="true">★</span>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<blockquote
|
||||
class="text-gray-300 text-lg leading-relaxed mb-6 italic border-l-4 border-white/20 pl-4 md:border-none md:pl-0">
|
||||
"Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa,
|
||||
justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."
|
||||
</blockquote>
|
||||
|
||||
<figcaption>
|
||||
<cite class="not-italic font-bold text-white text-lg mb-1 block">
|
||||
Coriss Ambady
|
||||
</cite>
|
||||
<span class="text-gray-400 text-sm tracking-widest font-semibold block uppercase">
|
||||
Financial Analyst
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="mt-8 flex justify-center md:justify-start">
|
||||
<button
|
||||
class="border border-white py-2 px-6 bg-home-foreground rounded-full hover:bg-white hover:text-black transition-colors duration-300 font-medium">
|
||||
Gabung Member Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,4 @@
|
||||
<main class="flex flex-col lg:flex-row justify-between min-h-screen w-full relative overflow-x-hidden">
|
||||
@include('livewire.home.partials.jumbotron.left')
|
||||
@include('livewire.home.partials.jumbotron.right')
|
||||
</main>
|
||||
170
resources/views/livewire/home/partials/jumbotron/left.blade.php
Normal file
170
resources/views/livewire/home/partials/jumbotron/left.blade.php
Normal file
@ -0,0 +1,170 @@
|
||||
<section
|
||||
class="relative w-full lg:w-[35%] mt-24 lg:mt-0 p-6 lg:p-10 flex flex-col justify-center text-lg space-y-6 z-20 bg-white lg:bg-transparent">
|
||||
|
||||
<header class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<figure
|
||||
class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 1" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
<figure
|
||||
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 2" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
<figure
|
||||
class="border-2 border-home-background -ms-2 w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm">
|
||||
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=100"
|
||||
alt="User 3" class="w-full h-full object-cover">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="border border-black py-1 px-3 rounded-full text-sm lg:text-lg">
|
||||
Plus <span class="px-2 py-1 bg-black text-home-background rounded-full">25K</span> Trusted users!
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1 class="text-black text-4xl lg:text-6xl leading-tight text-start font-bold">
|
||||
Discover your best<br><span class="italic font-serif font-light">perfume</span> at today
|
||||
</h1>
|
||||
|
||||
<p class="text-lg w-[90%] lg:w-full lg:text-lg text-gray-700">
|
||||
Selecting a perfume is a personal journey. Consider your lifestyle, favorite scents, and the impression you want
|
||||
to make.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="bg-black text-home-background py-3 px-6 rounded-full hover:opacity-90 transition-opacity font-medium">
|
||||
Explore Shop
|
||||
</button>
|
||||
<span class="w-8 h-[2px] bg-black"></span>
|
||||
<button
|
||||
class="flex items-center justify-center w-12 h-12 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors group">
|
||||
<div
|
||||
class="w-8 h-8 bg-black flex justify-center items-center rounded-full group-hover:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 text-white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<article
|
||||
class="relative w-full mt-10 h-[300px] lg:h-[250px] lg:w-[800px] lg:absolute lg:bottom-2 lg:left-10 lg:mt-0 bg-white lg:bg-white/40 backdrop-blur-xl border border-home-foreground/5 rounded-2xl z-30 shadow-lg lg:shadow-none overflow-hidden">
|
||||
|
||||
<div id="testimonial-track" class="relative w-full h-full p-6">
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-100 z-10 translate-x-0 bg-white lg:bg-transparent">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Sarah Jenkins</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Aroma yang sangat elegan dan tahan
|
||||
lama. Saya sangat menyukainya untuk dipakai sehari-hari ke kantor."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Michael Chen</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Pengiriman sangat cepat dan
|
||||
packaging aman. Wanginya persis seperti deskripsi di website."</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="testimonial-slide absolute inset-0 p-6 flex flex-col justify-center transition-all duration-500 ease-in-out opacity-0 z-0 translate-x-full bg-white lg:bg-transparent">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=100"
|
||||
class="w-12 h-12 rounded-full object-cover shadow-sm">
|
||||
<div>
|
||||
<h4 class="font-bold text-black text-sm lg:text-base">Jessica Tan</h4>
|
||||
<div class="flex text-yellow-500 text-xs">★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-800 text-base lg:text-lg italic leading-relaxed">"Varian Product Two adalah favorit
|
||||
saya! Sangat fresh dan tidak menyengat. Recommended!"</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
|
||||
<button id="prev-testi"
|
||||
class="w-10 h-10 rounded-full bg-white border border-gray-100 shadow-md hover:bg-gray-50 flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-black 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 id="next-testi"
|
||||
class="w-10 h-10 rounded-full bg-black shadow-md hover:bg-gray-800 flex justify-center items-center transition-colors group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-white 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>
|
||||
|
||||
</article>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const slides = document.querySelectorAll('.testimonial-slide');
|
||||
const prevBtn = document.getElementById('prev-testi');
|
||||
const nextBtn = document.getElementById('next-testi');
|
||||
let currentIndex = 0;
|
||||
|
||||
function updateSlides() {
|
||||
slides.forEach((slide, index) => {
|
||||
if (index === currentIndex) {
|
||||
slide.classList.remove('opacity-0', 'translate-x-full', '-translate-x-full', 'z-0');
|
||||
slide.classList.add('opacity-100', 'translate-x-0', 'z-10');
|
||||
} else {
|
||||
slide.classList.remove('opacity-100', 'translate-x-0', 'z-10');
|
||||
slide.classList.add('opacity-0', 'z-0');
|
||||
|
||||
if (index < currentIndex) {
|
||||
slide.classList.add('-translate-x-full');
|
||||
slide.classList.remove('translate-x-full');
|
||||
} else {
|
||||
slide.classList.add('translate-x-full');
|
||||
slide.classList.remove('-translate-x-full');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (nextBtn && prevBtn) {
|
||||
nextBtn.addEventListener('click', () => {
|
||||
currentIndex = (currentIndex + 1) % slides.length;
|
||||
updateSlides();
|
||||
});
|
||||
|
||||
prevBtn.addEventListener('click', () => {
|
||||
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
|
||||
updateSlides();
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
currentIndex = (currentIndex + 1) % slides.length;
|
||||
updateSlides();
|
||||
}, 6000);
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
@ -0,0 +1,76 @@
|
||||
<section
|
||||
class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen flex flex-col lg:flex-row justify-end items-end pb-8 pr-0 lg:pr-10 z-10">
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1595425959632-34f2822322ce?q=80&w=1098&auto=format&fit=crop')] bg-cover bg-center bg-no-repeat">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-white/90 via-white/50 to-transparent lg:hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full px-6 lg:px-0 lg:w-[80%] grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
alt="Product One">
|
||||
</figure>
|
||||
|
||||
<div class="flex-1 ml-4 lg:ml-6 flex flex-col justify-center space-y-2 lg:space-y-4">
|
||||
<div>
|
||||
<h3 class="text-lg lg:text-2xl text-black font-bold">Product One</h3>
|
||||
<p class="text-black/60 text-xs lg:text-lg">Fresh and elegant.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
||||
|
||||
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
alt="Product One">
|
||||
</figure>
|
||||
|
||||
<div class="flex-1 ml-4 lg:ml-6 flex flex-col justify-center space-y-2 lg:space-y-4">
|
||||
<div>
|
||||
<h3 class="text-lg lg:text-2xl text-black font-bold">Product Two</h3>
|
||||
<p class="text-black/60 text-xs lg:text-lg">Woody & classic.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<button
|
||||
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
||||
Shop Now
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="size-4 lg:size-5 text-white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
75
resources/views/livewire/home/partials/partners.blade.php
Normal file
75
resources/views/livewire/home/partials/partners.blade.php
Normal file
@ -0,0 +1,75 @@
|
||||
<section class="overflow-hidden relative pt-4" id="brand-slider" aria-label="Teknologi yang digunakan">
|
||||
<div class="flex gap-6 items-center whitespace-nowrap will-change-transform" id="brand-track">
|
||||
|
||||
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://brandlogos.net/wp-content/uploads/2023/11/tailwind_css-logo_brandlogos.net_v91ni.png"
|
||||
alt="Tailwind CSS" class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://raw.githubusercontent.com/livewire/livewire/main/art/readme_logo.png" alt="Livewire"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://logo.svgcdn.com/devicon/laravel-original-wordmark.png" alt="Laravel"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://images.seeklogo.com/logo-png/44/2/next-js-logo-png_seeklogo-449824.png" alt="Next.js"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://raw.githubusercontent.com/livewire/livewire/main/art/readme_logo.png" alt="Livewire"
|
||||
class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
<img src="https://brandlogos.net/wp-content/uploads/2023/11/tailwind_css-logo_brandlogos.net_v91ni.png"
|
||||
alt="Tailwind CSS" class="w-32 h-32 object-contain rounded-xl flex-shrink-0">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#brand-slider img {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#brand-slider img:hover {
|
||||
filter: grayscale(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const track = document.getElementById('brand-track');
|
||||
const originalChildren = Array.from(track.children);
|
||||
const originalHTML = track.innerHTML;
|
||||
|
||||
if (originalChildren.length === 0) return;
|
||||
|
||||
const itemWidth = originalChildren[0].offsetWidth;
|
||||
const gapStyle = window.getComputedStyle(track).gap;
|
||||
const gap = parseFloat(gapStyle) || 0;
|
||||
|
||||
const singleSetWidth = (itemWidth + gap) * originalChildren.length;
|
||||
|
||||
let currentWidth = singleSetWidth;
|
||||
while (currentWidth < window.innerWidth + singleSetWidth * 2) {
|
||||
track.innerHTML += originalHTML;
|
||||
currentWidth += singleSetWidth;
|
||||
}
|
||||
|
||||
let position = 0;
|
||||
const speed = 1;
|
||||
|
||||
function animate() {
|
||||
position -= speed;
|
||||
|
||||
if (Math.abs(position) >= singleSetWidth) {
|
||||
position = 0;
|
||||
}
|
||||
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
});
|
||||
</script>
|
||||
78
resources/views/livewire/home/partials/why.blade.php
Normal file
78
resources/views/livewire/home/partials/why.blade.php
Normal file
@ -0,0 +1,78 @@
|
||||
<section class="bg-white py-12 md:py-20 lg:py-24 px-4 md:px-8 lg:px-48">
|
||||
<div class="space-y-8 md:space-y-12 lg:space-y-16">
|
||||
<header class="space-y-4 md:space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-black leading-tight">
|
||||
Temukan Parfum Favorit dengan Kualitas Terbaik
|
||||
</h2>
|
||||
<p class="text-base md:text-lg text-gray-700 leading-relaxed max-w-3xl">
|
||||
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
||||
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap tetesnya
|
||||
asli dan terpercaya.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Parfum berkualitas" class="rounded-2xl w-full h-64 md:h-96 lg:h-[550px] object-cover">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Keaslian 100%</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Pengiriman Cepat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Harga Bersahabat</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="bg-white rounded-2xl p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100">
|
||||
<div class="mb-4 md:mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-600" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg md:text-xl font-bold text-black mb-2 md:mb-3">Layanan Terbaik</h3>
|
||||
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
|
||||
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
354
resources/views/livewire/home/product/index.blade.php
Normal file
354
resources/views/livewire/home/product/index.blade.php
Normal file
@ -0,0 +1,354 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
|
||||
<aside class="md:col-span-3">
|
||||
<div
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm hover:shadow-md transition-shadow sticky top-24">
|
||||
<h2 class="text-lg font-bold text-home-foreground mb-5">Kategori</h2>
|
||||
|
||||
<form>
|
||||
<fieldset class="space-y-3">
|
||||
<legend class="sr-only">Pilih Kategori</legend>
|
||||
@foreach (['Pria', 'Wanita', 'Unisex', 'Aromatherapy', 'Luxury'] as $kategori)
|
||||
<label class="flex items-center cursor-pointer group">
|
||||
<input type="checkbox"
|
||||
class="w-5 h-5 rounded border-gray-300 text-home-foreground cursor-pointer"
|
||||
value="{{ $kategori }}">
|
||||
<span
|
||||
class="ml-3 text-home-foreground group-hover:opacity-70 transition-opacity">{{ $kategori }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
|
||||
<div class="border-t border-home-foreground/10 my-5"></div>
|
||||
|
||||
<h3 class="text-sm font-semibold text-home-foreground mb-3">Rentang Harga</h3>
|
||||
<fieldset class="space-y-3">
|
||||
<legend class="sr-only">Pilih Rentang Harga</legend>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="all" checked>
|
||||
<span class="ml-2 text-sm text-home-foreground">Semua Harga</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="under-100k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Di bawah Rp100.000</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="100k-500k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Rp100.000 - Rp500.000</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" name="price" class="w-4 h-4 cursor-pointer text-home-foreground"
|
||||
value="above-500k">
|
||||
<span class="ml-2 text-sm text-home-foreground">Di atas Rp500.000</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="md:col-span-9">
|
||||
<header class="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" placeholder="Cari parfum favorit..."
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition"
|
||||
aria-label="Cari produk">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit"
|
||||
aria-label="Urutkan produk">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="popular">Terpopuler</option>
|
||||
<option value="price_low">Harga Terendah</option>
|
||||
<option value="price_high">Harga Tertinggi</option>
|
||||
<option value="best_rating">Rating Terbaik</option>
|
||||
</select>
|
||||
</header>
|
||||
|
||||
<div class="bg-home-foreground/5 border border-home-foreground/10 rounded-lg p-4 mb-6" role="status">
|
||||
<p class="text-sm text-home-foreground">Menampilkan <span class="font-semibold">12</span> dari <span
|
||||
class="font-semibold">48</span> koleksi parfum</p>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$mainProducts = [
|
||||
[
|
||||
'name' => 'Aqua Di Luna',
|
||||
'description' => 'Fresh aquatic fragrance',
|
||||
'price' => 249000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#10b981', '#3b82f6', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Velvet Bloom',
|
||||
'description' => 'Bunga merah jambu dengan musk',
|
||||
'price' => 189000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#ec4899', '#f97316', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Santal Noir',
|
||||
'description' => 'Sandalwood oriental elegance',
|
||||
'price' => 350000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#8b4513', '#1f2937', '#f5f5f5'],
|
||||
],
|
||||
[
|
||||
'name' => 'Citron Essence',
|
||||
'description' => 'Lemon dan bergamot fresh',
|
||||
'price' => 159000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#fbbf24', '#f59e0b', '#1f2937'],
|
||||
],
|
||||
[
|
||||
'name' => 'Rose Garden',
|
||||
'description' => 'Mawar klasik modern',
|
||||
'price' => 199000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#ef4444', '#ec4899', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Lavender Dream',
|
||||
'description' => 'Aromatherapy lavender murni',
|
||||
'price' => 129000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#a78bfa', '#7c3aed', '#1f2937'],
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||||
@foreach ($mainProducts as $product)
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy">
|
||||
<button
|
||||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||||
aria-label="Simpan ke favorit">
|
||||
<svg class="w-5 h-5 text-home-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-2 mb-3">
|
||||
@foreach ($product['colors'] as $color)
|
||||
<button
|
||||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||||
style="background-color: {{ $color }}"
|
||||
aria-label="Pilih warna"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||||
<div class="mb-4">
|
||||
<span
|
||||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||||
to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center justify-between bg-white rounded-2xl border border-home-foreground/10 p-6 shadow-sm"
|
||||
aria-label="Pagination">
|
||||
<div class="text-sm text-home-foreground">
|
||||
Halaman <span class="font-bold">1</span> dari <span class="font-bold">4</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
||||
aria-label="Halaman sebelumnya" disabled>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@for ($page = 1; $page <= 4; $page++)
|
||||
@if ($page == 1)
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
||||
aria-current="page">{{ $page }}</button>
|
||||
@else
|
||||
<button
|
||||
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
||||
@endif
|
||||
@endfor
|
||||
<button
|
||||
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
||||
aria-label="Halaman selanjutnya">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="mt-12" aria-labelledby="related-products-heading">
|
||||
<div class="flex items-center justify-between my-6">
|
||||
<h2 id="related-products-heading" class="text-2xl font-bold text-home-foreground">Produk
|
||||
Lainnya</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="prevBtn"
|
||||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||||
aria-label="Produk sebelumnya">‹</button>
|
||||
<button id="nextBtn"
|
||||
class="bg-white border border-home-foreground/20 w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-gray-50 transition-colors z-10"
|
||||
aria-label="Produk selanjutnya">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sliderTrack"
|
||||
class="flex gap-6 overflow-x-auto scroll-smooth pb-4 snap-x snap-mandatory hide-scrollbar"
|
||||
style="scrollbar-width: none; -ms-overflow-style: none;">
|
||||
@php
|
||||
$otherProducts = [
|
||||
[
|
||||
'name' => 'Oud Royal',
|
||||
'description' => 'Oud premium luxury',
|
||||
'price' => 1200000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#78350f', '#1f2937', '#d1d5db'],
|
||||
],
|
||||
[
|
||||
'name' => 'Coconut Paradise',
|
||||
'description' => 'Tropical eksotis',
|
||||
'price' => 169000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#f4a460', '#d2691e', '#8b4513'],
|
||||
],
|
||||
[
|
||||
'name' => 'Musk Addiction',
|
||||
'description' => 'Musk manis tahan lama',
|
||||
'price' => 149000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#d4a373', '#a0826d', '#5a4a42'],
|
||||
],
|
||||
[
|
||||
'name' => 'Woody Spice',
|
||||
'description' => 'Kayu rempah maskulin',
|
||||
'price' => 229000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#92400e', '#1f2937', '#c2410c'],
|
||||
],
|
||||
[
|
||||
'name' => 'Jasmine Nights',
|
||||
'description' => 'Melati romantis malam',
|
||||
'price' => 269000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#be123c', '#e11d48', '#6b7280'],
|
||||
],
|
||||
[
|
||||
'name' => 'Mint Fresh',
|
||||
'description' => 'Mint herbal menenangkan',
|
||||
'price' => 139000,
|
||||
'image' => 'https://placehold.co/400x500/png',
|
||||
'colors' => ['#10b981', '#059669', '#047857'],
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach ($otherProducts as $product)
|
||||
<article
|
||||
class="slider-item flex-none w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] snap-start bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
||||
<div class="relative h-80 bg-home-foreground/5 overflow-hidden">
|
||||
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy">
|
||||
<button
|
||||
class="absolute top-4 left-4 bg-white rounded-full p-2.5 shadow-md hover:shadow-lg transition-shadow"
|
||||
aria-label="Simpan ke favorit">
|
||||
<svg class="w-5 h-5 text-home-foreground" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m10 0l2-9m0 0h3.6">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-2 mb-3">
|
||||
@foreach ($product['colors'] as $color)
|
||||
<button
|
||||
class="w-5 h-5 rounded-full border-2 border-home-foreground/20 hover:border-home-foreground transition-all cursor-pointer"
|
||||
style="background-color: {{ $color }}"
|
||||
aria-label="Pilih warna"></button>
|
||||
@endforeach
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-home-foreground mb-1">{{ $product['name'] }}
|
||||
</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $product['description'] }}</p>
|
||||
<div class="mb-4">
|
||||
<span
|
||||
class="text-xl font-bold text-home-foreground">Rp{{ number_format($product['price'], 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="w-full bg-home-foreground text-white font-bold py-3 rounded-lg hover:opacity-90 transition-opacity">Add
|
||||
to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const track = document.getElementById("sliderTrack");
|
||||
const next = document.getElementById("nextBtn");
|
||||
const prev = document.getElementById("prevBtn");
|
||||
|
||||
if (track && next && prev) {
|
||||
next.addEventListener("click", () => {
|
||||
const item = track.querySelector('.slider-item');
|
||||
if (item) {
|
||||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||||
track.scrollBy({
|
||||
left: scrollAmount,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
prev.addEventListener("click", () => {
|
||||
const item = track.querySelector('.slider-item');
|
||||
if (item) {
|
||||
const scrollAmount = item.getBoundingClientRect().width + 24;
|
||||
track.scrollBy({
|
||||
left: -scrollAmount,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
160
resources/views/livewire/home/voucher/index.blade.php
Normal file
160
resources/views/livewire/home/voucher/index.blade.php
Normal file
@ -0,0 +1,160 @@
|
||||
<div>
|
||||
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-home-foreground mb-2">Voucher</h1>
|
||||
<p class="text-home-foreground/60">Dapatkan diskon spesial dengan voucher eksklusif kami</p>
|
||||
</header>
|
||||
|
||||
<section class="flex flex-col lg:flex-row gap-4 mb-8" aria-label="Pencarian dan Filter">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="text" placeholder="Cari kode voucher..." aria-label="Cari kode voucher"
|
||||
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select aria-label="Filter Outlet"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Filter Outlet</option>
|
||||
<option value="jakarta">Jakarta</option>
|
||||
<option value="bandung">Bandung</option>
|
||||
<option value="surabaya">Surabaya</option>
|
||||
<option value="medan">Medan</option>
|
||||
</select>
|
||||
|
||||
<select aria-label="Urutkan Voucher"
|
||||
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
||||
<option value="">Urutkan</option>
|
||||
<option value="latest">Terbaru</option>
|
||||
<option value="biggest">Terbesar</option>
|
||||
<option value="ending-soon">Berakhir Segera</option>
|
||||
</select>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
@php
|
||||
$vouchers = [
|
||||
[
|
||||
'tag' => 'DISKON 30%',
|
||||
'title' => 'Diskon Member Premium',
|
||||
'desc' => 'Hemat hingga Rp150.000 untuk pembelian',
|
||||
'code' => 'PREMIUM30',
|
||||
'min' => 'Rp500.000',
|
||||
'valid' => '15 Des 2024',
|
||||
'date_iso' => '2024-12-15',
|
||||
'quota' => '245/500',
|
||||
],
|
||||
[
|
||||
'tag' => 'GRATIS ONGKIR',
|
||||
'title' => 'Gratis Ongkir ke Seluruh Indonesia',
|
||||
'desc' => 'Tanpa minimum pembelian untuk wilayah tertentu',
|
||||
'code' => 'GRATIS500',
|
||||
'min' => 'Rp100.000',
|
||||
'valid' => '20 Des 2024',
|
||||
'date_iso' => '2024-12-20',
|
||||
'quota' => '189/300',
|
||||
],
|
||||
[
|
||||
'tag' => 'CASHBACK 20%',
|
||||
'title' => 'Cashback Pembelian Parfum',
|
||||
'desc' => 'Dapatkan kembali 20% untuk setiap pembelian',
|
||||
'code' => 'CASHBACK20',
|
||||
'min' => 'Rp200.000',
|
||||
'valid' => '25 Des 2024',
|
||||
'date_iso' => '2024-12-25',
|
||||
'quota' => '412/600',
|
||||
],
|
||||
[
|
||||
'tag' => 'DISKON 25%',
|
||||
'title' => 'Flash Sale Parfum Pria',
|
||||
'desc' => 'Hemat untuk koleksi parfum pria pilihan',
|
||||
'code' => 'FLASHPRIA',
|
||||
'min' => 'Rp300.000',
|
||||
'valid' => '18 Des 2024',
|
||||
'date_iso' => '2024-12-18',
|
||||
'quota' => '67/200',
|
||||
],
|
||||
[
|
||||
'tag' => 'DISKON 20%',
|
||||
'title' => 'Flash Sale Parfum Wanita',
|
||||
'desc' => 'Hemat untuk koleksi parfum wanita favorit',
|
||||
'code' => 'FLASHWOM',
|
||||
'min' => 'Rp250.000',
|
||||
'valid' => '22 Des 2024',
|
||||
'date_iso' => '2024-12-22',
|
||||
'quota' => '328/450',
|
||||
],
|
||||
[
|
||||
'tag' => 'BELI 2 GRATIS 1',
|
||||
'title' => 'Beli 2 Gratis 1 Aromatherapy',
|
||||
'desc' => 'Promo spesial untuk produk aromatherapy',
|
||||
'code' => 'BELI2GRAT',
|
||||
'min' => 'Rp150.000',
|
||||
'valid' => '28 Des 2024',
|
||||
'date_iso' => '2024-12-28',
|
||||
'quota' => '156/300',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach ($vouchers as $voucher)
|
||||
<article
|
||||
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow">
|
||||
<div class="bg-home-foreground/5 p-6 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-home-foreground/5 rounded-full -mr-8 -mt-8">
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div
|
||||
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3">
|
||||
{{ $voucher['tag'] }}</div>
|
||||
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $voucher['title'] }}</h3>
|
||||
<p class="text-sm text-home-foreground/60 mb-4">{{ $voucher['desc'] }}</p>
|
||||
|
||||
<div class="bg-white rounded-lg p-3 mb-4 border border-home-foreground/20">
|
||||
<p class="text-xs text-home-foreground/60 mb-1">Kode Voucher:</p>
|
||||
<p class="text-lg font-bold text-home-foreground font-mono tracking-widest">
|
||||
{{ $voucher['code'] }}</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm mb-4">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Min. Pembelian:</span>
|
||||
<span class="font-semibold text-home-foreground">{{ $voucher['min'] }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Berlaku:</span>
|
||||
<time datetime="{{ $voucher['date_iso'] }}"
|
||||
class="font-semibold text-home-foreground">{{ $voucher['valid'] }}</time>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-home-foreground/60">Sisa Voucher:</span>
|
||||
<span class="font-semibold text-home-foreground">{{ $voucher['quota'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex gap-3">
|
||||
<button
|
||||
class="flex-1 bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity">
|
||||
Klaim
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 border-2 border-home-foreground text-home-foreground font-bold py-2.5 rounded-lg hover:bg-home-foreground/5 transition-colors">
|
||||
Detail
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@ -1,6 +1,15 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Home\Index as HomeComponent;
|
||||
use App\Livewire\Home\Product\Index as ProductComponent;
|
||||
use App\Livewire\Home\Voucher\Index as VoucherComponent;
|
||||
use App\Livewire\Home\Article\Index as ArticleComponent;
|
||||
use App\Livewire\Home\Faq\Index as FaqComponent;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', HomeComponent::class)->name('homepage');
|
||||
Route::get('/product', ProductComponent::class)->name('product');
|
||||
Route::get('/voucher', VoucherComponent::class)->name('voucher');
|
||||
Route::get('/article', ArticleComponent::class)->name('article');
|
||||
Route::get('/faq', FaqComponent::class)->name('faq');
|
||||
// Route::get('/', HomeComponent::class)->name('produk');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user