feat(home): section perfume feature, faqs dan why choose us by data
This commit is contained in:
Yoga Pangestu
parent
a336e4dcc0
commit
f740226824
@ -2,6 +2,9 @@
|
||||
|
||||
namespace App\Livewire\Home;
|
||||
|
||||
use App\Models\ChooseUs;
|
||||
use App\Models\Faq;
|
||||
use App\Models\PerfumeFeature;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
@ -10,6 +13,39 @@
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public array $perfumeFeatures = [];
|
||||
|
||||
public array $faqs = [];
|
||||
|
||||
public array $whyChooseUs = [];
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (PerfumeFeature $perfumeFeature) => [
|
||||
'name' => $perfumeFeature->name,
|
||||
'description' => $perfumeFeature->description,
|
||||
])
|
||||
->toArray();
|
||||
|
||||
$this->faqs = Faq::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (Faq $faq) => [
|
||||
'question' => $faq->question,
|
||||
'answer' => $faq->answer,
|
||||
])
|
||||
->toArray();
|
||||
|
||||
$this->whyChooseUs = ChooseUs::orderBy('sort_order')
|
||||
->get()
|
||||
->map(fn (ChooseUs $chooseUs) => [
|
||||
'name' => $chooseUs->name,
|
||||
'description' => $chooseUs->description,
|
||||
])
|
||||
->toArray();
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.index', [
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<div class="">
|
||||
<!-- /header -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
|
||||
data-image-src="{{ asset('assets/img/photos/bg22.png') }}">
|
||||
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/img/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/img/svg/doodle2.svg') }}"
|
||||
<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
|
||||
@ -31,8 +32,7 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
|
||||
<!-- /column -->
|
||||
<div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
|
||||
<figure>
|
||||
<img src="{{ asset('assets/img/photos/devices3.png') }}"
|
||||
srcset="{{ asset('assets/img/photos/devices3@2x.png') }}" alt="hero banner">
|
||||
<img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
@ -56,10 +56,10 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
|
||||
<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="./assets/img/svg/doodle3.svg" class="h-11 position-absolute d-none d-lg-block"
|
||||
style="top: -45%; left: 23%" alt="">
|
||||
<img src="./assets/img/svg/doodle4.svg" class="h-8 position-absolute d-none d-lg-block"
|
||||
style="top: 6%; right: 2%" alt="">
|
||||
<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">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
|
||||
@ -73,56 +73,56 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
|
||||
<div class="row gx-md-8 gy-10 text-center">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/cloud-network-2.svg"
|
||||
src="./assets/images/icons/solid/cloud-network-2.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Tahan Lama</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-green rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/touchscreen.svg"
|
||||
src="./assets/images/icons/solid/touchscreen.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Kualitas Terjamin</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-purple rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/lock.svg" class="svg-inject icon-svg solid text-navy"
|
||||
alt="" /> </div>
|
||||
src="./assets/images/icons/solid/lock.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Bahan Premium</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/rocket.svg"
|
||||
src="./assets/images/icons/solid/rocket.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Ramah Untuk Kulit</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-violet rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/bar-chart.svg"
|
||||
src="./assets/images/icons/solid/bar-chart.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">200+ Aroma</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-orange rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/safe.svg" class="svg-inject icon-svg solid text-navy"
|
||||
alt="" /> </div>
|
||||
src="./assets/images/icons/solid/safe.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Kemasan Elegant</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/controls.svg"
|
||||
src="./assets/images/icons/solid/controls.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Bebas Alkohol</h4>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl mb-4"> <img
|
||||
src="./assets/img/icons/solid/checked.svg"
|
||||
src="./assets/images/icons/solid/checked.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<h4 class="fs-20">Tersertifikasi</h4>
|
||||
</div>
|
||||
@ -135,10 +135,12 @@ class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
||||
<!-- /.row -->
|
||||
<div class="row text-center">
|
||||
<div class="col-md-10 col-lg-7 mx-auto position-relative">
|
||||
<img src="./assets/img/svg/doodle5.svg" class="w-15 position-absolute d-none d-lg-block"
|
||||
data-delay="1800" style="bottom: -60%; right: 10%" alt="">
|
||||
<img src="./assets/img/svg/doodle6.svg" class="h-15 position-absolute d-none d-lg-block"
|
||||
data-delay="1800" style="top: -40%; left: -5%" alt="">
|
||||
<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
|
||||
@ -149,51 +151,41 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
|
||||
<!-- /.row -->
|
||||
<div class="row mb-lg-20 mb-xl-23">
|
||||
<div class="col-xxl-11 mx-auto">
|
||||
<div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
|
||||
<div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
|
||||
<figure class="mx-auto">
|
||||
<img src="./assets/img/photos/devices4.png"
|
||||
srcset="./assets/img/photos/devices4@2x.png 2x" alt="">
|
||||
</figure>
|
||||
@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>
|
||||
<!-- /column -->
|
||||
<div class="w-100 d-lg-none"></div>
|
||||
<div class="col-md-6 col-lg-4 order-lg-first">
|
||||
<div class="mb-8">
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">01</span>
|
||||
<h4 class="fs-20">Tahan Lama</h4>
|
||||
<p class="mb-0 px-xl-7">Wanginya tetap segar dari pagi hingga malam, membuatmu selalu
|
||||
percaya diri.</p>
|
||||
</div>
|
||||
<!-- /div -->
|
||||
<div>
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">02</span>
|
||||
<h4 class="fs-20">Bahan Premium</h4>
|
||||
<p class="mb-0 px-xl-7">Hanya menggunakan bahan berkualitas tinggi untuk aroma yang
|
||||
elegan dan mewah.</p>
|
||||
</div>
|
||||
<!-- /div -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="mb-8">
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">03</span>
|
||||
<h4 class="fs-20">Ramah untuk Kulit</h4>
|
||||
<p class="mb-0 px-xl-7">Formulasi lembut, aman, dan nyaman dipakai setiap hari tanpa
|
||||
menimbulkan iritasi.</p>
|
||||
</div>
|
||||
<!-- /div -->
|
||||
<div>
|
||||
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">04</span>
|
||||
<h4 class="fs-20">Kemasan Elegan & Praktis</h4>
|
||||
<p class="mb-0 px-xl-7">Desain botol modern dan mudah dibawa, cocok untuk koleksi atau
|
||||
hadiah.</p>
|
||||
</div>
|
||||
<!-- /div -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
@endif
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
@ -203,7 +195,7 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
|
||||
data-image-src="./assets/img/photos/bg23.png">
|
||||
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">
|
||||
@ -211,179 +203,69 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
|
||||
<div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="165101721"></div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<img src="./assets/img/svg/doodle7.svg" class="h-7 position-absolute d-none d-lg-block"
|
||||
data-delay="1800" style="top: -90%; right: -3%" alt="">
|
||||
<img src="./assets/img/svg/doodle8.svg" class="h-14 position-absolute d-none d-lg-block"
|
||||
data-delay="1800" style="top: -20%; left: -12%" alt="">
|
||||
<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">If you don't see an <span
|
||||
class="text-gradient gradient-7">answer</span> to your question, you can send
|
||||
us an email from our contact form.</h3>
|
||||
<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">
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-1-1">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-1-1" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-1-1">Can I cancel my
|
||||
subscription?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-1-1" class="collapse"
|
||||
aria-labelledby="accordion-heading-1-1" data-bs-target="#accordion-1">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
@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>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-1-2">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-1-2" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-1-2">Which payment methods do you
|
||||
accept?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-1-2" class="collapse"
|
||||
aria-labelledby="accordion-heading-1-2" data-bs-target="#accordion-1">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
<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>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-1-3">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-1-3" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-1-3">How can I manage my
|
||||
Account?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-1-3" class="collapse"
|
||||
aria-labelledby="accordion-heading-1-3" data-bs-target="#accordion-1">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /.accordion-wrapper -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div id="accordion-2" class="accordion-wrapper">
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-2-1">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-2-1" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-2-1">How do I get my
|
||||
subscription receipt?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-2-1" class="collapse"
|
||||
aria-labelledby="accordion-heading-2-1" data-bs-target="#accordion-2">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
@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>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-2-2">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-2-2" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-2-2">Are there any discounts for
|
||||
people in need?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-2-2" class="collapse"
|
||||
aria-labelledby="accordion-heading-2-2" data-bs-target="#accordion-2">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
<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>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<div class="card accordion-item shadow-lg">
|
||||
<div class="card-header" id="accordion-heading-2-3">
|
||||
<button class="collapsed" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-2-3" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-2-3">Do you offer a free trial
|
||||
edit?</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-2-3" class="collapse"
|
||||
aria-labelledby="accordion-heading-2-3" data-bs-target="#accordion-2">
|
||||
<div class="card-body">
|
||||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus. Cras
|
||||
mattis consectetur purus sit amet fermentum. Praesent commodo
|
||||
cursus magna, vel scelerisque nisl consectetur et. Cum sociis
|
||||
natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
|
||||
facilisis.</p>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.accordion-wrapper -->
|
||||
@endforeach
|
||||
</div>
|
||||
<!--/column -->
|
||||
<!-- /.accordion-wrapper -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@ -391,10 +273,12 @@ class="text-gradient gradient-7">answer</span> to your question, you can send
|
||||
<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="./assets/img/svg/doodle3.svg" class="h-11 position-absolute d-none d-lg-block"
|
||||
style="top: -20%; right: -12%" alt="">
|
||||
<img src="./assets/img/svg/doodle9.svg" class="h-17 position-absolute d-none d-lg-block"
|
||||
style="bottom: 5%; left: -17%" alt="">
|
||||
<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
|
||||
@ -405,102 +289,40 @@ class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa ha
|
||||
<!-- /.row -->
|
||||
<div class="row d-flex align-items-start mb-19">
|
||||
<div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
|
||||
<figure><img src="./assets/img/photos/devices5.png"
|
||||
srcset="./assets/img/photos/devices5@2x.png 2x" alt=""></figure>
|
||||
<figure>
|
||||
<img src="{{ asset('assets/images/devices5.png') }}" alt="image">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-lg-5 ms-auto">
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-grape rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/calendar.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
@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>
|
||||
<div>
|
||||
<h4 class="fs-20">Scheduled Transactions</h4>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||
mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
|
||||
commodo cursus magna.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-green rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/currency.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fs-20">Multiple Currencies</h4>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a
|
||||
pharetra augue. Maecenas faucibus mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/server.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fs-20">Database Management</h4>
|
||||
<p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a
|
||||
ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/devices.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fs-20">Sync Between Devices</h4>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||
mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
|
||||
commodo cursus magna.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/search.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fs-20">Smart Search</h4>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a
|
||||
pharetra augue. Maecenas faucibus mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl me-5"><img
|
||||
src="./assets/img/icons/solid/compare.svg"
|
||||
class="svg-inject icon-svg solid text-navy" alt="" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fs-20">Detailed Reports</h4>
|
||||
<p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a
|
||||
ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes.</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="row">
|
||||
<div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
|
||||
<img src="./assets/img/svg/doodle1.svg" class="h-9 position-absolute d-none d-lg-block"
|
||||
style="top: 2%; left: 9%" alt="">
|
||||
<img src="./assets/img/svg/doodle10.svg" class="h-7 position-absolute d-none d-lg-block"
|
||||
style="top: -45%; left: -17%" alt="">
|
||||
<img src="./assets/img/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">Happy Customers</h2>
|
||||
<h3 class="display-3 mb-11 px-xl-10 px-xxl-13">Don't take our word for it. See what <span
|
||||
class="text-gradient gradient-7">customers</span> are saying about us.</h3>
|
||||
<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>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
@ -639,7 +461,7 @@ class="text-gradient gradient-7">customers</span> are saying about us.</h3>
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
|
||||
data-image-src="./assets/img/photos/bg23.png">
|
||||
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">
|
||||
@ -653,25 +475,28 @@ class="text-gradient gradient-7">customers</span> are saying about us.</h3>
|
||||
<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="./assets/img/svg/doodle2.svg" class="h-15 position-absolute d-none d-lg-block"
|
||||
style="bottom: 36%; right: -25%" alt="">
|
||||
<img src="./assets/img/svg/doodle6.svg" class="h-14 position-absolute d-none d-lg-block"
|
||||
data-delay="1800" style="top: -20%; left: -25%" alt="">
|
||||
<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/img/photos/button-appstore.svg"
|
||||
class="h-11 rounded-xl" alt=""></a></span>
|
||||
<span><a href="#"><img src="./assets/img/photos/button-google-play.svg"
|
||||
<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>
|
||||
<!-- /column -->
|
||||
<div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
|
||||
<figure><img src="./assets/img/photos/devices6.png"
|
||||
srcset="./assets/img/photos/devices6@2x.png 2x" alt=""></figure>
|
||||
<figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user