510 lines
29 KiB
PHP
510 lines
29 KiB
PHP
<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>
|
|
<!-- /column -->
|
|
<div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
|
|
<figure>
|
|
<img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
|
|
</figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden" style="z-index:1;">
|
|
<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>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light">
|
|
<div class="container pt-18 pt-md-20 pb-14 pb-md-16">
|
|
<div class="row text-center">
|
|
<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">Keunggulan Kami</h2>
|
|
<h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
|
|
class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
|
|
setiap hari.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row mb-20">
|
|
<div class="col-xxl-11 mx-auto">
|
|
<div class="row gx-md-8 gy-10 text-center">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/cloud-network-2.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Tahan Lama</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-green rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/touchscreen.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Kualitas Terjamin</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-purple rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/lock.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Bahan Premium</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/rocket.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Ramah Untuk Kulit</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-violet rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/bar-chart.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">200+ Aroma</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-orange rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/safe.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Kemasan Elegant</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/controls.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Bebas Alkohol</h4>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl mb-4"> <img
|
|
src="./assets/images/icons/solid/checked.svg"
|
|
class="svg-inject icon-svg solid text-navy" alt="" /> </div>
|
|
<h4 class="fs-20">Tersertifikasi</h4>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row text-center">
|
|
<div class="col-md-10 col-lg-7 mx-auto position-relative">
|
|
<img src="{{ asset('assets/images/svg/doodle5.svg') }}"
|
|
class="w-15 position-absolute d-none d-lg-block" data-delay="1800"
|
|
style="bottom: -60%; right: 10%" alt="">
|
|
<img src="{{ asset('assets/images/svg/doodle6.svg') }}"
|
|
class="h-15 position-absolute d-none d-lg-block" data-delay="1800"
|
|
style="top: -40%; left: -5%" alt="">
|
|
<h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
|
|
<h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
|
|
class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
|
|
setiap hari.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row mb-lg-20 mb-xl-23">
|
|
<div class="col-xxl-11 mx-auto">
|
|
@if (!empty($perfumeFeatures))
|
|
<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>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
|
|
data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
|
|
<div class="container py-14 pt-md-16 pt-lg-0 pb-md-17 position-relative" style="z-index: 2;">
|
|
<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 -->
|
|
<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>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row d-flex align-items-start mb-19">
|
|
<div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
|
|
<figure>
|
|
<img src="{{ asset('assets/images/devices5.png') }}" alt="image">
|
|
</figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-5 ms-auto">
|
|
@foreach ($whyChooseUs as $item)
|
|
<div class="d-flex flex-row mb-8">
|
|
<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>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row">
|
|
<div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
|
|
<img src="{{ asset('assets/images/svg/doodle1.svg') }}"
|
|
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>
|
|
<!-- /.row -->
|
|
<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>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid-view -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
|
|
data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
|
|
<div class="overflow-hidden" style="z-index:1;">
|
|
<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>
|
|
<!-- /.overflow-hidden -->
|
|
<div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
|
|
<div class="row gx-0 gy-10">
|
|
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
|
|
<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>
|
|
<!-- /column -->
|
|
<div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
|
|
<figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
|
|
</div>
|