feat(home): templating blade
- route baru - halaman depan
This commit is contained in:
Yoga Pangestu
parent
c63245bf68
commit
078b7fa7b5
19
app/Livewire/Home/Index.php
Normal file
19
app/Livewire/Home/Index.php
Normal file
@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
namespace App\Livewire\Home;
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Component;
|
||||
|
||||
#[Layout('components.layouts.home', [
|
||||
'title' => 'Beranda',
|
||||
])]
|
||||
class Index extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.home.index', [
|
||||
'pageTitle' => 'Beranda',
|
||||
]);
|
||||
}
|
||||
}
|
||||
1
public/assets/css/colors/aqua.css
Normal file
1
public/assets/css/colors/aqua.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/fuchsia.css
Normal file
1
public/assets/css/colors/fuchsia.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/grape.css
Normal file
1
public/assets/css/colors/grape.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/green.css
Normal file
1
public/assets/css/colors/green.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/leaf.css
Normal file
1
public/assets/css/colors/leaf.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/navy.css
Normal file
1
public/assets/css/colors/navy.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/orange.css
Normal file
1
public/assets/css/colors/orange.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/pink.css
Normal file
1
public/assets/css/colors/pink.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/purple.css
Normal file
1
public/assets/css/colors/purple.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/red.css
Normal file
1
public/assets/css/colors/red.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/sky.css
Normal file
1
public/assets/css/colors/sky.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/violet.css
Normal file
1
public/assets/css/colors/violet.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/colors/yellow.css
Normal file
1
public/assets/css/colors/yellow.css
Normal file
File diff suppressed because one or more lines are too long
99
public/assets/css/fonts/dm.css
Normal file
99
public/assets/css/fonts/dm.css
Normal file
@ -0,0 +1,99 @@
|
||||
@import url(https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1);
|
||||
.counter-wrapper .counter,
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4,
|
||||
.display-5,
|
||||
.display-6,
|
||||
.ff-serif,
|
||||
.post-title {
|
||||
font-family: "DM Serif Display";
|
||||
font-weight: 400 !important;
|
||||
word-spacing: normal !important;
|
||||
letter-spacing: normal !important
|
||||
}
|
||||
.display-1 {
|
||||
font-size: calc(1.385rem + 1.62vw);
|
||||
line-height: 1.1
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-1 {
|
||||
font-size: 2.6rem
|
||||
}
|
||||
}
|
||||
.display-2 {
|
||||
font-size: calc(1.365rem + 1.38vw);
|
||||
line-height: 1.15
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-2 {
|
||||
font-size: 2.4rem
|
||||
}
|
||||
}
|
||||
.display-3 {
|
||||
font-size: calc(1.355rem + 1.26vw);
|
||||
line-height: 1.15
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-3 {
|
||||
font-size: 2.3rem
|
||||
}
|
||||
}
|
||||
.display-4 {
|
||||
font-size: calc(1.325rem + .9vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-4 {
|
||||
font-size: 2rem
|
||||
}
|
||||
}
|
||||
.display-5 {
|
||||
font-size: calc(1.305rem + .66vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-5 {
|
||||
font-size: 1.8rem
|
||||
}
|
||||
}
|
||||
.display-6 {
|
||||
font-size: calc(1.285rem + .42vw);
|
||||
line-height: 1.25
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-6 {
|
||||
font-size: 1.6rem
|
||||
}
|
||||
}
|
||||
.h2.post-title,
|
||||
h2.post-title {
|
||||
font-size: calc(1.265rem + .18vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.h2.post-title,
|
||||
h2.post-title {
|
||||
font-size: 1.4rem
|
||||
}
|
||||
}
|
||||
.h3.post-title,
|
||||
h3.post-title {
|
||||
font-size: 1.2rem
|
||||
}
|
||||
.counter-wrapper .counter {
|
||||
font-size: calc(1.335rem + 1.02vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter {
|
||||
font-size: 2.1rem
|
||||
}
|
||||
}
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: calc(1.355rem + 1.26vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: 2.3rem
|
||||
}
|
||||
}
|
||||
172
public/assets/css/fonts/space.css
Normal file
172
public/assets/css/fonts/space.css
Normal file
@ -0,0 +1,172 @@
|
||||
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@1,300;1,400;1,500;1,600;1,700);
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url(../../fonts/space/SpaceGrotesk-SemiBold.woff2) format('woff2'), url(../../fonts/space/SpaceGrotesk-SemiBold.woff) format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url(../../fonts/space/SpaceGrotesk-Light.woff2) format('woff2'), url(../../fonts/space/SpaceGrotesk-Light.woff) format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url(../../fonts/space/SpaceGrotesk-Bold.woff2) format('woff2'), url(../../fonts/space/SpaceGrotesk-Bold.woff) format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url(../../fonts/space/SpaceGrotesk-Medium.woff2) format('woff2'), url(../../fonts/space/SpaceGrotesk-Medium.woff) format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url(../../fonts/space/SpaceGrotesk-Regular.woff2) format('woff2'), url(../../fonts/space/SpaceGrotesk-Regular.woff) format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
* {
|
||||
word-spacing: normal !important
|
||||
}
|
||||
body {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
font-size: .85rem
|
||||
}
|
||||
em {
|
||||
font-family: "IBM Plex Serif", serif
|
||||
}
|
||||
.counter-wrapper p,
|
||||
.lead,
|
||||
.nav-tabs.nav-tabs-bg .nav-link p,
|
||||
blockquote,
|
||||
body {
|
||||
font-weight: 400
|
||||
}
|
||||
.accordion-wrapper .card-header button,
|
||||
.badge,
|
||||
.btn,
|
||||
.btn.btn-circle .number,
|
||||
.collapse-link,
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4,
|
||||
.display-5,
|
||||
.display-6,
|
||||
.dropdown-item,
|
||||
.filter:not(.basic-filter),
|
||||
.filter:not(.basic-filter) ul li a,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
.meta,
|
||||
.more,
|
||||
.nav-link,
|
||||
.post-category,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600
|
||||
}
|
||||
.btn .more,
|
||||
.dropdown-item,
|
||||
.nav-link {
|
||||
letter-spacing: normal
|
||||
}
|
||||
.btn,
|
||||
.lg-sub-html p,
|
||||
.nav-link,
|
||||
.nav-link p,
|
||||
.navbar .btn-sm {
|
||||
font-size: .85rem
|
||||
}
|
||||
.dropdown-menu {
|
||||
font-size: .8rem
|
||||
}
|
||||
.btn-group-sm>.btn,
|
||||
.btn-sm,
|
||||
.post-meta,
|
||||
.share-dropdown .dropdown-menu .dropdown-item {
|
||||
font-size: .75rem
|
||||
}
|
||||
.accordion-wrapper .card-header button,
|
||||
.collapse-link,
|
||||
.nav-tabs .nav-link {
|
||||
font-size: .9rem !important
|
||||
}
|
||||
.btn {
|
||||
padding-top: .55rem;
|
||||
padding-bottom: .45rem
|
||||
}
|
||||
.btn-group-sm>.btn,
|
||||
.btn-sm {
|
||||
padding-top: .45rem;
|
||||
padding-bottom: .35rem
|
||||
}
|
||||
.btn-group-lg>.btn,
|
||||
.btn-lg {
|
||||
padding-top: .7rem;
|
||||
padding-bottom: .6rem
|
||||
}
|
||||
blockquote.icon:before {
|
||||
top: -.9rem
|
||||
}
|
||||
.counter-wrapper p {
|
||||
font-size: .85rem
|
||||
}
|
||||
.counter-wrapper .counter {
|
||||
font-size: calc(1.33rem + .96vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter {
|
||||
font-size: 2.05rem
|
||||
}
|
||||
}
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: calc(1.35rem + 1.2vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
}
|
||||
.lead {
|
||||
font-size: .95rem;
|
||||
line-height: 1.6
|
||||
}
|
||||
.lead.fs-lg {
|
||||
line-height: 1.55
|
||||
}
|
||||
.display-1 {
|
||||
line-height: 1.15
|
||||
}
|
||||
.display-2 {
|
||||
line-height: 1.2
|
||||
}
|
||||
.display-3 {
|
||||
line-height: 1.2
|
||||
}
|
||||
.display-4 {
|
||||
line-height: 1.25
|
||||
}
|
||||
.display-5 {
|
||||
line-height: 1.25
|
||||
}
|
||||
.display-6 {
|
||||
line-height: 1.3
|
||||
}
|
||||
204
public/assets/css/fonts/thicccboi.css
Normal file
204
public/assets/css/fonts/thicccboi.css
Normal file
@ -0,0 +1,204 @@
|
||||
@font-face {
|
||||
font-family: THICCCBOI;
|
||||
src: url(../../fonts/thicccboi/THICCCBOI-Regular.woff2) format('woff2'), url(../../fonts/thicccboi/THICCCBOI-Regular.woff) format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: THICCCBOI;
|
||||
src: url(../../fonts/thicccboi/THICCCBOI-Medium.woff2) format('woff2'), url(../../fonts/thicccboi/THICCCBOI-Medium.woff) format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: THICCCBOI;
|
||||
src: url(../../fonts/thicccboi/THICCCBOI-Bold.woff2) format('woff2'), url(../../fonts/thicccboi/THICCCBOI-Bold.woff) format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
* {
|
||||
word-spacing: normal !important
|
||||
}
|
||||
body {
|
||||
font-family: THICCCBOI, sans-serif;
|
||||
font-size: .85rem
|
||||
}
|
||||
.btn,
|
||||
.dropdown-item,
|
||||
.nav-link {
|
||||
letter-spacing: normal
|
||||
}
|
||||
.btn,
|
||||
.lg-sub-html p,
|
||||
.nav-link,
|
||||
.nav-link p,
|
||||
.navbar .btn-sm {
|
||||
font-size: .85rem
|
||||
}
|
||||
.dropdown-menu {
|
||||
font-size: .8rem
|
||||
}
|
||||
.btn-group-sm>.btn,
|
||||
.btn-sm,
|
||||
.post-meta,
|
||||
.share-dropdown .dropdown-menu .dropdown-item {
|
||||
font-size: .75rem
|
||||
}
|
||||
.filter,
|
||||
.filter ul li a,
|
||||
.meta,
|
||||
.post-category {
|
||||
font-size: .7rem
|
||||
}
|
||||
.post-header .post-meta {
|
||||
font-size: .85rem
|
||||
}
|
||||
.accordion-wrapper .card-header button,
|
||||
.collapse-link,
|
||||
.nav-tabs .nav-link {
|
||||
font-size: .9rem
|
||||
}
|
||||
blockquote {
|
||||
font-size: .9rem
|
||||
}
|
||||
.blockquote-footer {
|
||||
font-size: .65rem
|
||||
}
|
||||
.blockquote-details p {
|
||||
font-size: .85rem
|
||||
}
|
||||
.counter-wrapper p {
|
||||
font-size: .85rem
|
||||
}
|
||||
.counter-wrapper .counter {
|
||||
font-size: calc(1.33rem + .96vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter {
|
||||
font-size: 2.05rem
|
||||
}
|
||||
}
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: calc(1.35rem + 1.2vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
}
|
||||
.icon-list.bullet-bg i {
|
||||
top: .25rem
|
||||
}
|
||||
.accordion-wrapper .card-header button:before {
|
||||
margin-top: -.2rem
|
||||
}
|
||||
.form-floating>label {
|
||||
padding-top: .65rem
|
||||
}
|
||||
.h1,
|
||||
h1 {
|
||||
font-size: calc(1.275rem + .3vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.h1,
|
||||
h1 {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
}
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: calc(1.26rem + .12vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: 1.35rem
|
||||
}
|
||||
}
|
||||
.h3,
|
||||
h3 {
|
||||
font-size: 1.15rem
|
||||
}
|
||||
.h4,
|
||||
h4 {
|
||||
font-size: 1rem
|
||||
}
|
||||
.h5,
|
||||
h5 {
|
||||
font-size: .95rem
|
||||
}
|
||||
.h6,
|
||||
h6 {
|
||||
font-size: .9rem
|
||||
}
|
||||
.fs-sm {
|
||||
font-size: .75rem !important
|
||||
}
|
||||
.fs-lg {
|
||||
font-size: 1.05rem !important
|
||||
}
|
||||
.lead {
|
||||
font-size: .95rem;
|
||||
line-height: 1.6
|
||||
}
|
||||
.lead.fs-lg {
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.55
|
||||
}
|
||||
.display-1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
line-height: 1.15
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-1 {
|
||||
font-size: 2.5rem
|
||||
}
|
||||
}
|
||||
.display-2 {
|
||||
font-size: calc(1.355rem + 1.26vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-2 {
|
||||
font-size: 2.3rem
|
||||
}
|
||||
}
|
||||
.display-3 {
|
||||
font-size: calc(1.335rem + 1.02vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-3 {
|
||||
font-size: 2.1rem
|
||||
}
|
||||
}
|
||||
.display-4 {
|
||||
font-size: calc(1.315rem + .78vw);
|
||||
line-height: 1.25
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-4 {
|
||||
font-size: 1.9rem
|
||||
}
|
||||
}
|
||||
.display-5 {
|
||||
font-size: calc(1.295rem + .54vw);
|
||||
line-height: 1.25
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-5 {
|
||||
font-size: 1.7rem
|
||||
}
|
||||
}
|
||||
.display-6 {
|
||||
font-size: calc(1.275rem + .3vw);
|
||||
line-height: 1.3
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-6 {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
}
|
||||
299
public/assets/css/fonts/urbanist.css
Normal file
299
public/assets/css/fonts/urbanist.css
Normal file
@ -0,0 +1,299 @@
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-BoldItalic.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-BoldItalic.woff) format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-SemiBoldItalic.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-SemiBoldItalic.woff) format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-Medium.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-Medium.woff) format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-MediumItalic.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-MediumItalic.woff) format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-SemiBold.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-SemiBold.woff) format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-Italic.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-Italic.woff) format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-Regular.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-Regular.woff) format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-LightItalic.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-LightItalic.woff) format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-Light.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-Light.woff) format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url(../../fonts/urbanist/Urbanist-Bold.woff2) format('woff2'), url(../../fonts/urbanist/Urbanist-Bold.woff) format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: block
|
||||
}
|
||||
* {
|
||||
word-spacing: normal !important
|
||||
}
|
||||
body {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: .85rem
|
||||
}
|
||||
.accordion-wrapper .card-header button,
|
||||
.badge,
|
||||
.btn,
|
||||
.btn.btn-circle .number,
|
||||
.collapse-link,
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4,
|
||||
.display-5,
|
||||
.display-6,
|
||||
.dropdown-item,
|
||||
.filter:not(.basic-filter),
|
||||
.filter:not(.basic-filter) ul li a,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
.meta,
|
||||
.more,
|
||||
.nav-link,
|
||||
.post-category,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600
|
||||
}
|
||||
.avatar,
|
||||
.btn,
|
||||
.dropdown-item,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
.more,
|
||||
.nav-link,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: normal
|
||||
}
|
||||
.btn,
|
||||
.lg-sub-html p,
|
||||
.nav-link,
|
||||
.nav-link p,
|
||||
.navbar .btn-sm {
|
||||
font-size: .85rem
|
||||
}
|
||||
.dropdown-menu {
|
||||
font-size: .8rem
|
||||
}
|
||||
.btn-group-sm>.btn,
|
||||
.btn-sm,
|
||||
.post-meta,
|
||||
.share-dropdown .dropdown-menu .dropdown-item {
|
||||
font-size: .75rem
|
||||
}
|
||||
.filter,
|
||||
.filter ul li a,
|
||||
.meta,
|
||||
.post-category {
|
||||
font-size: .7rem
|
||||
}
|
||||
.post-header .post-meta {
|
||||
font-size: .85rem
|
||||
}
|
||||
.accordion-wrapper .card-header button,
|
||||
.collapse-link,
|
||||
.nav-tabs .nav-link {
|
||||
font-size: .9rem
|
||||
}
|
||||
blockquote {
|
||||
font-size: .9rem
|
||||
}
|
||||
.blockquote-footer {
|
||||
font-size: .65rem
|
||||
}
|
||||
.blockquote-details p {
|
||||
font-size: .85rem
|
||||
}
|
||||
.counter-wrapper p {
|
||||
font-size: .85rem
|
||||
}
|
||||
.counter-wrapper .counter {
|
||||
font-size: calc(1.33rem + .96vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter {
|
||||
font-size: 2.05rem
|
||||
}
|
||||
}
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: calc(1.35rem + 1.2vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.counter-wrapper .counter.counter-lg {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
}
|
||||
.icon-list.bullet-bg i {
|
||||
top: .25rem
|
||||
}
|
||||
.accordion-wrapper .card-header button:before {
|
||||
margin-top: -.2rem
|
||||
}
|
||||
.form-floating>label {
|
||||
padding-top: .65rem
|
||||
}
|
||||
.h1,
|
||||
h1 {
|
||||
font-size: calc(1.275rem + .3vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.h1,
|
||||
h1 {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
}
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: calc(1.26rem + .12vw)
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.h2,
|
||||
h2 {
|
||||
font-size: 1.35rem
|
||||
}
|
||||
}
|
||||
.h3,
|
||||
h3 {
|
||||
font-size: 1.15rem
|
||||
}
|
||||
.h4,
|
||||
h4 {
|
||||
font-size: 1rem
|
||||
}
|
||||
.h5,
|
||||
h5 {
|
||||
font-size: .95rem
|
||||
}
|
||||
.h6,
|
||||
h6 {
|
||||
font-size: .9rem
|
||||
}
|
||||
.fs-sm {
|
||||
font-size: .75rem !important
|
||||
}
|
||||
.fs-lg {
|
||||
font-size: 1.05rem !important
|
||||
}
|
||||
.lead {
|
||||
font-size: .95rem;
|
||||
line-height: 1.6
|
||||
}
|
||||
.lead.fs-lg {
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.55
|
||||
}
|
||||
.display-1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
line-height: 1.15
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-1 {
|
||||
font-size: 2.5rem
|
||||
}
|
||||
}
|
||||
.display-2 {
|
||||
font-size: calc(1.355rem + 1.26vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-2 {
|
||||
font-size: 2.3rem
|
||||
}
|
||||
}
|
||||
.display-3 {
|
||||
font-size: calc(1.335rem + 1.02vw);
|
||||
line-height: 1.2
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-3 {
|
||||
font-size: 2.1rem
|
||||
}
|
||||
}
|
||||
.display-4 {
|
||||
font-size: calc(1.315rem + .78vw);
|
||||
line-height: 1.25
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-4 {
|
||||
font-size: 1.9rem
|
||||
}
|
||||
}
|
||||
.display-5 {
|
||||
font-size: calc(1.295rem + .54vw);
|
||||
line-height: 1.25
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-5 {
|
||||
font-size: 1.7rem
|
||||
}
|
||||
}
|
||||
.display-6 {
|
||||
font-size: calc(1.275rem + .3vw);
|
||||
line-height: 1.3
|
||||
}
|
||||
@media (min-width:1200px) {
|
||||
.display-6 {
|
||||
font-size: 1.5rem
|
||||
}
|
||||
}
|
||||
13
public/assets/css/plugins.css
Normal file
13
public/assets/css/plugins.css
Normal file
File diff suppressed because one or more lines are too long
7
public/assets/css/style.css
Normal file
7
public/assets/css/style.css
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/css/style.css.map
Normal file
1
public/assets/css/style.css.map
Normal file
File diff suppressed because one or more lines are too long
BIN
public/assets/fonts/custom/Custom.woff
Normal file
BIN
public/assets/fonts/custom/Custom.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/custom/Custom.woff2
Normal file
BIN
public/assets/fonts/custom/Custom.woff2
Normal file
Binary file not shown.
1
public/assets/fonts/custom/selection.json
Normal file
1
public/assets/fonts/custom/selection.json
Normal file
File diff suppressed because one or more lines are too long
BIN
public/assets/fonts/space/SpaceGrotesk-Bold.woff
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Bold.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Bold.woff2
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Bold.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Light.woff
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Light.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Light.woff2
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Light.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Medium.woff
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Medium.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Medium.woff2
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Medium.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Regular.woff
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Regular.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-Regular.woff2
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-Regular.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-SemiBold.woff
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-SemiBold.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/space/SpaceGrotesk-SemiBold.woff2
Normal file
BIN
public/assets/fonts/space/SpaceGrotesk-SemiBold.woff2
Normal file
Binary file not shown.
45
public/assets/fonts/space/space.css
Normal file
45
public/assets/fonts/space/space.css
Normal file
@ -0,0 +1,45 @@
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url('SpaceGrotesk-SemiBold.woff2') format('woff2'),
|
||||
url('SpaceGrotesk-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url('SpaceGrotesk-Light.woff2') format('woff2'),
|
||||
url('SpaceGrotesk-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url('SpaceGrotesk-Bold.woff2') format('woff2'),
|
||||
url('SpaceGrotesk-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url('SpaceGrotesk-Medium.woff2') format('woff2'),
|
||||
url('SpaceGrotesk-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Grotesk';
|
||||
src: url('SpaceGrotesk-Regular.woff2') format('woff2'),
|
||||
url('SpaceGrotesk-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
BIN
public/assets/fonts/thicccboi/THICCCBOI-Bold.woff
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Bold.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/thicccboi/THICCCBOI-Bold.woff2
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Bold.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/thicccboi/THICCCBOI-Medium.woff
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Medium.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/thicccboi/THICCCBOI-Medium.woff2
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Medium.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/thicccboi/THICCCBOI-Regular.woff
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Regular.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/thicccboi/THICCCBOI-Regular.woff2
Normal file
BIN
public/assets/fonts/thicccboi/THICCCBOI-Regular.woff2
Normal file
Binary file not shown.
24
public/assets/fonts/thicccboi/thicccboi.css
Normal file
24
public/assets/fonts/thicccboi/thicccboi.css
Normal file
@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: 'THICCCBOI';
|
||||
src: url('THICCCBOI-Regular.woff2') format('woff2'),
|
||||
url('THICCCBOI-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'THICCCBOI';
|
||||
src: url('THICCCBOI-Medium.woff2') format('woff2'),
|
||||
url('THICCCBOI-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'THICCCBOI';
|
||||
src: url('THICCCBOI-Bold.woff2') format('woff2'),
|
||||
url('THICCCBOI-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
BIN
public/assets/fonts/unicons/Unicons.woff
Normal file
BIN
public/assets/fonts/unicons/Unicons.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/unicons/Unicons.woff2
Normal file
BIN
public/assets/fonts/unicons/Unicons.woff2
Normal file
Binary file not shown.
1
public/assets/fonts/unicons/selection.json
Normal file
1
public/assets/fonts/unicons/selection.json
Normal file
File diff suppressed because one or more lines are too long
BIN
public/assets/fonts/urbanist/Urbanist-Bold.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Bold.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Bold.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Bold.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-BoldItalic.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-BoldItalic.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-BoldItalic.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Italic.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Italic.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Italic.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Italic.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Light.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Light.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Light.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Light.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-LightItalic.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-LightItalic.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-LightItalic.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-LightItalic.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Medium.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Medium.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Medium.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Medium.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-MediumItalic.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-MediumItalic.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-MediumItalic.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-MediumItalic.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Regular.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Regular.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-Regular.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-Regular.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-SemiBold.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-SemiBold.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-SemiBold.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-SemiBoldItalic.woff
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-SemiBoldItalic.woff
Normal file
Binary file not shown.
BIN
public/assets/fonts/urbanist/Urbanist-SemiBoldItalic.woff2
Normal file
BIN
public/assets/fonts/urbanist/Urbanist-SemiBoldItalic.woff2
Normal file
Binary file not shown.
80
public/assets/fonts/urbanist/urbanist.css
Normal file
80
public/assets/fonts/urbanist/urbanist.css
Normal file
@ -0,0 +1,80 @@
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-BoldItalic.woff2') format('woff2'),
|
||||
url('Urbanist-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-SemiBoldItalic.woff2') format('woff2'),
|
||||
url('Urbanist-SemiBoldItalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-Medium.woff2') format('woff2'),
|
||||
url('Urbanist-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-MediumItalic.woff2') format('woff2'),
|
||||
url('Urbanist-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-SemiBold.woff2') format('woff2'),
|
||||
url('Urbanist-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-Italic.woff2') format('woff2'),
|
||||
url('Urbanist-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-Regular.woff2') format('woff2'),
|
||||
url('Urbanist-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-LightItalic.woff2') format('woff2'),
|
||||
url('Urbanist-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-Light.woff2') format('woff2'),
|
||||
url('Urbanist-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Urbanist';
|
||||
src: url('Urbanist-Bold.woff2') format('woff2'),
|
||||
url('Urbanist-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
5
public/assets/js/plugins.js
Normal file
5
public/assets/js/plugins.js
Normal file
File diff suppressed because one or more lines are too long
913
public/assets/js/theme.js
Normal file
913
public/assets/js/theme.js
Normal file
@ -0,0 +1,913 @@
|
||||
'use strict';
|
||||
var theme = {
|
||||
/**
|
||||
* Theme's components/functions list
|
||||
* Comment out or delete the unnecessary component.
|
||||
* Some components have dependencies (plugins).
|
||||
* Do not forget to remove dependency from src/js/vendor/ and recompile.
|
||||
*/
|
||||
init: function () {
|
||||
theme.stickyHeader();
|
||||
theme.subMenu();
|
||||
theme.offCanvas();
|
||||
theme.isotope();
|
||||
theme.onepageHeaderOffset();
|
||||
theme.spyScroll();
|
||||
theme.anchorSmoothScroll();
|
||||
theme.svgInject();
|
||||
theme.backgroundImage();
|
||||
theme.backgroundImageMobile();
|
||||
theme.imageHoverOverlay();
|
||||
theme.rellax();
|
||||
theme.scrollCue();
|
||||
theme.swiperSlider();
|
||||
theme.lightbox();
|
||||
theme.plyr();
|
||||
theme.progressBar();
|
||||
theme.loader();
|
||||
theme.pageProgress();
|
||||
theme.counterUp();
|
||||
theme.bsTooltips();
|
||||
theme.bsPopovers();
|
||||
theme.bsModal();
|
||||
theme.iTooltip();
|
||||
theme.forms();
|
||||
theme.passVisibility();
|
||||
theme.pricingSwitcher();
|
||||
theme.textRotator();
|
||||
theme.codeSnippet();
|
||||
},
|
||||
/**
|
||||
* Sticky Header
|
||||
* Enables sticky behavior on navbar on page scroll
|
||||
* Requires assets/js/vendor/headhesive.min.js
|
||||
*/
|
||||
stickyHeader: () => {
|
||||
var navbar = document.querySelector(".navbar");
|
||||
if (navbar == null) return;
|
||||
var options = {
|
||||
offset: 350,
|
||||
offsetSide: 'top',
|
||||
classes: {
|
||||
clone: 'navbar-clone fixed',
|
||||
stick: 'navbar-stick',
|
||||
unstick: 'navbar-unstick',
|
||||
},
|
||||
onStick: function() {
|
||||
var navbarClonedClass = this.clonedElem.classList;
|
||||
if (navbarClonedClass.contains('transparent') && navbarClonedClass.contains('navbar-dark')) {
|
||||
this.clonedElem.className = this.clonedElem.className.replace("navbar-dark","navbar-light");
|
||||
}
|
||||
}
|
||||
};
|
||||
var banner = new Headhesive('.navbar', options);
|
||||
},
|
||||
/**
|
||||
* Sub Menus
|
||||
* Enables multilevel dropdown
|
||||
*/
|
||||
subMenu: () => {
|
||||
(function($bs) {
|
||||
const CLASS_NAME = 'has-child-dropdown-show';
|
||||
$bs.Dropdown.prototype.toggle = function(_original) {
|
||||
return function() {
|
||||
document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {
|
||||
e.classList.remove(CLASS_NAME);
|
||||
});
|
||||
let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
|
||||
for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
|
||||
dd.classList.add(CLASS_NAME);
|
||||
}
|
||||
return _original.call(this);
|
||||
}
|
||||
}($bs.Dropdown.prototype.toggle);
|
||||
document.querySelectorAll('.dropdown').forEach(function(dd) {
|
||||
dd.addEventListener('hide.bs.dropdown', function(e) {
|
||||
if (this.classList.contains(CLASS_NAME)) {
|
||||
this.classList.remove(CLASS_NAME);
|
||||
e.preventDefault();
|
||||
}
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
})(bootstrap);
|
||||
},
|
||||
/**
|
||||
* Offcanvas
|
||||
* Enables offcanvas-nav, closes offcanvas on anchor clicks, focuses on input in search offcanvas
|
||||
*/
|
||||
offCanvas: () => {
|
||||
var navbar = document.querySelector(".navbar");
|
||||
if (navbar == null) return;
|
||||
const navOffCanvasBtn = document.querySelectorAll(".offcanvas-nav-btn");
|
||||
const navOffCanvas = document.querySelector('.navbar:not(.navbar-clone) .offcanvas-nav');
|
||||
const bsOffCanvas = new bootstrap.Offcanvas(navOffCanvas, {scroll: true});
|
||||
const scrollLink = document.querySelectorAll('.onepage .navbar li a.scroll');
|
||||
const searchOffcanvas = document.getElementById('offcanvas-search');
|
||||
navOffCanvasBtn.forEach(e => {
|
||||
e.addEventListener('click', event => {
|
||||
bsOffCanvas.show();
|
||||
})
|
||||
});
|
||||
scrollLink.forEach(e => {
|
||||
e.addEventListener('click', event => {
|
||||
bsOffCanvas.hide();
|
||||
})
|
||||
});
|
||||
if(searchOffcanvas != null) {
|
||||
searchOffcanvas.addEventListener('shown.bs.offcanvas', function () {
|
||||
document.getElementById("search-form").focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Isotope
|
||||
* Enables isotope grid layout and filtering
|
||||
* Requires assets/js/vendor/isotope.pkgd.min.js
|
||||
* Requires assets/js/vendor/imagesloaded.pkgd.min.js
|
||||
*/
|
||||
isotope: () => {
|
||||
var grids = document.querySelectorAll('.grid');
|
||||
if(grids != null) {
|
||||
grids.forEach(g => {
|
||||
var grid = g.querySelector('.isotope');
|
||||
var filtersElem = g.querySelector('.isotope-filter');
|
||||
var buttonGroups = g.querySelectorAll('.isotope-filter');
|
||||
var iso = new Isotope(grid, {
|
||||
itemSelector: '.item',
|
||||
layoutMode: 'masonry',
|
||||
masonry: {
|
||||
columnWidth: grid.offsetWidth / 12
|
||||
},
|
||||
percentPosition: true,
|
||||
transitionDuration: '0.7s'
|
||||
});
|
||||
imagesLoaded(grid).on("progress", function() {
|
||||
iso.layout({
|
||||
masonry: {
|
||||
columnWidth: grid.offsetWidth / 12
|
||||
}
|
||||
})
|
||||
}),
|
||||
window.addEventListener("resize", function() {
|
||||
iso.arrange({
|
||||
masonry: {
|
||||
columnWidth: grid.offsetWidth / 12
|
||||
}
|
||||
});
|
||||
}, true);
|
||||
if(filtersElem != null) {
|
||||
filtersElem.addEventListener('click', function(event) {
|
||||
if(!matchesSelector(event.target, '.filter-item')) {
|
||||
return;
|
||||
}
|
||||
var filterValue = event.target.getAttribute('data-filter');
|
||||
iso.arrange({
|
||||
filter: filterValue
|
||||
});
|
||||
});
|
||||
for(var i = 0, len = buttonGroups.length; i < len; i++) {
|
||||
var buttonGroup = buttonGroups[i];
|
||||
buttonGroup.addEventListener('click', function(event) {
|
||||
if(!matchesSelector(event.target, '.filter-item')) {
|
||||
return;
|
||||
}
|
||||
buttonGroup.querySelector('.active').classList.remove('active');
|
||||
event.target.classList.add('active');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Onepage Header Offset
|
||||
* Adds an offset value to anchor point equal to sticky header height on a onepage
|
||||
*/
|
||||
onepageHeaderOffset: () => {
|
||||
var navbar = document.querySelector(".navbar");
|
||||
if (navbar == null) return;
|
||||
const header_height = document.querySelector(".navbar").offsetHeight;
|
||||
const shrinked_header_height = 75;
|
||||
const sections = document.querySelectorAll(".onepage section");
|
||||
sections.forEach(section => {
|
||||
section.style.paddingTop = shrinked_header_height + 'px';
|
||||
section.style.marginTop = '-' + shrinked_header_height + 'px';
|
||||
});
|
||||
const first_section = document.querySelector(".onepage section:first-of-type");
|
||||
if(first_section != null) {
|
||||
first_section.style.paddingTop = header_height + 'px';
|
||||
first_section.style.marginTop = '-' + header_height + 'px';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Spy Scroll
|
||||
* Highlights the active nav link while scrolling through sections
|
||||
*/
|
||||
spyScroll: () => {
|
||||
let section = document.querySelectorAll('section[id]');
|
||||
let navLinks = document.querySelectorAll('.nav-link.scroll');
|
||||
window.onscroll = () => {
|
||||
section.forEach(sec => {
|
||||
let top = window.scrollY; //returns the number of pixels that the document is currently scrolled vertically.
|
||||
let offset = sec.offsetTop - 0; //returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent, the closest positioned ancestor element
|
||||
let height = sec.offsetHeight; //returns the height of an element, including vertical padding and borders, as an integer
|
||||
let id = sec.getAttribute('id'); //gets the value of an attribute of an element
|
||||
if (top >= offset && top < offset + height) {
|
||||
navLinks.forEach(links => {
|
||||
links.classList.remove('active');
|
||||
document.querySelector(`.nav-link.scroll[href*=${id}]`).classList.add('active');
|
||||
//[att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Anchor Smooth Scroll
|
||||
* Adds smooth scroll animation to links with .scroll class
|
||||
* Requires assets/js/vendor/smoothscroll.js
|
||||
*/
|
||||
anchorSmoothScroll: () => {
|
||||
const links = document.querySelectorAll(".scroll");
|
||||
for(const link of links) {
|
||||
link.addEventListener("click", clickHandler);
|
||||
}
|
||||
function clickHandler(e) {
|
||||
e.preventDefault();
|
||||
this.blur();
|
||||
const href = this.getAttribute("href");
|
||||
const offsetTop = document.querySelector(href).offsetTop;
|
||||
scroll({
|
||||
top: offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* SVGInject
|
||||
* Replaces an img element with an inline SVG so you can apply colors to your SVGs
|
||||
* Requires assets/js/vendor/svg-inject.min.js
|
||||
*/
|
||||
svgInject: () => {
|
||||
SVGInject.setOptions({
|
||||
onFail: function(img, svg) {
|
||||
img.classList.remove('svg-inject');
|
||||
}
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
SVGInject(document.querySelectorAll('img.svg-inject'), {
|
||||
useCache: true
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Background Image
|
||||
* Adds a background image link via data attribute "data-image-src"
|
||||
*/
|
||||
backgroundImage: () => {
|
||||
var bg = document.querySelectorAll(".bg-image");
|
||||
for(var i = 0; i < bg.length; i++) {
|
||||
var url = bg[i].getAttribute('data-image-src');
|
||||
bg[i].style.backgroundImage = "url('" + url + "')";
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Background Image Mobile
|
||||
* Adds .mobile class to background images on mobile devices for styling purposes
|
||||
*/
|
||||
backgroundImageMobile: () => {
|
||||
var isMobile = (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)) ? true : false;
|
||||
if(isMobile) {
|
||||
document.querySelectorAll(".image-wrapper").forEach(e => {
|
||||
e.classList.add("mobile")
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Image Hover Overlay
|
||||
* Adds span.bg inside .overlay for simpler markup and styling purposes
|
||||
*/
|
||||
imageHoverOverlay: () => {
|
||||
var overlay = document.querySelectorAll('.overlay > a, .overlay > span');
|
||||
for(var i = 0; i < overlay.length; i++) {
|
||||
var overlay_bg = document.createElement('span');
|
||||
overlay_bg.className = "bg";
|
||||
overlay[i].appendChild(overlay_bg);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Rellax.js
|
||||
* Adds parallax animation to shapes and elements
|
||||
* Requires assets/js/vendor/rellax.min.js
|
||||
*/
|
||||
rellax: () => {
|
||||
if(document.querySelector(".rellax") != null) {
|
||||
window.onload = function() {
|
||||
var rellax = new Rellax('.rellax', {
|
||||
speed: 2,
|
||||
center: true,
|
||||
breakpoints: [576, 992, 1201]
|
||||
});
|
||||
var projects_overflow = document.querySelectorAll('.projects-overflow');
|
||||
imagesLoaded(projects_overflow, function() {
|
||||
rellax.refresh();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* scrollCue.js
|
||||
* Enables showing elements by scrolling
|
||||
* Requires assets/js/vendor/scrollCue.min.js
|
||||
*/
|
||||
scrollCue: () => {
|
||||
scrollCue.init({
|
||||
interval: -400,
|
||||
duration: 700,
|
||||
percentage: 0.8
|
||||
});
|
||||
scrollCue.update();
|
||||
},
|
||||
/**
|
||||
* Swiper Slider
|
||||
* Enables carousels and sliders
|
||||
* Requires assets/js/vendor/swiper-bundle.min.js
|
||||
*/
|
||||
swiperSlider: function() {
|
||||
var carousel = document.querySelectorAll('.swiper-container');
|
||||
for(var i = 0; i < carousel.length; i++) {
|
||||
var slider1 = carousel[i];
|
||||
slider1.classList.add('swiper-container-' + i);
|
||||
var controls = document.createElement('div');
|
||||
controls.className = "swiper-controls";
|
||||
var pagi = document.createElement('div');
|
||||
pagi.className = "swiper-pagination";
|
||||
var navi = document.createElement('div');
|
||||
navi.className = "swiper-navigation";
|
||||
var prev = document.createElement('div');
|
||||
prev.className = "swiper-button swiper-button-prev";
|
||||
var next = document.createElement('div');
|
||||
next.className = "swiper-button swiper-button-next";
|
||||
slider1.appendChild(controls);
|
||||
controls.appendChild(navi);
|
||||
navi.appendChild(prev);
|
||||
navi.appendChild(next);
|
||||
controls.appendChild(pagi);
|
||||
var sliderEffect = slider1.getAttribute('data-effect') ? slider1.getAttribute('data-effect') : 'slide';
|
||||
if (slider1.getAttribute('data-items-auto') === 'true') {
|
||||
var slidesPerViewInit = "auto";
|
||||
var breakpointsInit = null;
|
||||
} else {
|
||||
var sliderItems = slider1.getAttribute('data-items') ? slider1.getAttribute('data-items') : 3; // items in all devices
|
||||
var sliderItemsXs = slider1.getAttribute('data-items-xs') ? slider1.getAttribute('data-items-xs') : 1; // start - 575
|
||||
var sliderItemsSm = slider1.getAttribute('data-items-sm') ? slider1.getAttribute('data-items-sm') : Number(sliderItemsXs); // 576 - 767
|
||||
var sliderItemsMd = slider1.getAttribute('data-items-md') ? slider1.getAttribute('data-items-md') : Number(sliderItemsSm); // 768 - 991
|
||||
var sliderItemsLg = slider1.getAttribute('data-items-lg') ? slider1.getAttribute('data-items-lg') : Number(sliderItemsMd); // 992 - 1199
|
||||
var sliderItemsXl = slider1.getAttribute('data-items-xl') ? slider1.getAttribute('data-items-xl') : Number(sliderItemsLg); // 1200 - end
|
||||
var sliderItemsXxl = slider1.getAttribute('data-items-xxl') ? slider1.getAttribute('data-items-xxl') : Number(sliderItemsXl); // 1500 - end
|
||||
var slidesPerViewInit = sliderItems;
|
||||
var breakpointsInit = {
|
||||
0: {
|
||||
slidesPerView: Number(sliderItemsXs)
|
||||
},
|
||||
576: {
|
||||
slidesPerView: Number(sliderItemsSm)
|
||||
},
|
||||
768: {
|
||||
slidesPerView: Number(sliderItemsMd)
|
||||
},
|
||||
992: {
|
||||
slidesPerView: Number(sliderItemsLg)
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: Number(sliderItemsXl)
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: Number(sliderItemsXxl)
|
||||
}
|
||||
}
|
||||
}
|
||||
var sliderSpeed = slider1.getAttribute('data-speed') ? slider1.getAttribute('data-speed') : 500;
|
||||
var sliderAutoPlay = slider1.getAttribute('data-autoplay') !== 'false';
|
||||
var sliderAutoPlayTime = slider1.getAttribute('data-autoplaytime') ? slider1.getAttribute('data-autoplaytime') : 5000;
|
||||
var sliderAutoHeight = slider1.getAttribute('data-autoheight') === 'true';
|
||||
var sliderResizeUpdate = slider1.getAttribute('data-resizeupdate') !== 'false';
|
||||
var sliderAllowTouchMove = slider1.getAttribute('data-drag') !== 'false';
|
||||
var sliderReverseDirection = slider1.getAttribute('data-reverse') === 'true';
|
||||
var sliderMargin = slider1.getAttribute('data-margin') ? slider1.getAttribute('data-margin') : 30;
|
||||
var sliderLoop = slider1.getAttribute('data-loop') === 'true';
|
||||
var sliderCentered = slider1.getAttribute('data-centered') === 'true';
|
||||
var swiper = slider1.querySelector('.swiper:not(.swiper-thumbs)');
|
||||
var swiperTh = slider1.querySelector('.swiper-thumbs');
|
||||
var sliderTh = new Swiper(swiperTh, {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 10,
|
||||
loop: false,
|
||||
threshold: 2,
|
||||
slideToClickedSlide: true
|
||||
});
|
||||
if (slider1.getAttribute('data-thumbs') === 'true') {
|
||||
var thumbsInit = sliderTh;
|
||||
var swiperMain = document.createElement('div');
|
||||
swiperMain.className = "swiper-main";
|
||||
swiper.parentNode.insertBefore(swiperMain, swiper);
|
||||
swiperMain.appendChild(swiper);
|
||||
slider1.removeChild(controls);
|
||||
swiperMain.appendChild(controls);
|
||||
} else {
|
||||
var thumbsInit = null;
|
||||
}
|
||||
var slider = new Swiper(swiper, {
|
||||
on: {
|
||||
beforeInit: function() {
|
||||
if(slider1.getAttribute('data-nav') !== 'true' && slider1.getAttribute('data-dots') !== 'true') {
|
||||
controls.remove();
|
||||
}
|
||||
if(slider1.getAttribute('data-dots') !== 'true') {
|
||||
pagi.remove();
|
||||
}
|
||||
if(slider1.getAttribute('data-nav') !== 'true') {
|
||||
navi.remove();
|
||||
}
|
||||
},
|
||||
init: function() {
|
||||
if(slider1.getAttribute('data-autoplay') !== 'true') {
|
||||
this.autoplay.stop();
|
||||
}
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
autoplay: {
|
||||
delay: sliderAutoPlayTime,
|
||||
disableOnInteraction: false,
|
||||
reverseDirection: sliderReverseDirection,
|
||||
pauseOnMouseEnter: false
|
||||
},
|
||||
allowTouchMove: sliderAllowTouchMove,
|
||||
speed: parseInt(sliderSpeed),
|
||||
slidesPerView: slidesPerViewInit,
|
||||
loop: sliderLoop,
|
||||
centeredSlides: sliderCentered,
|
||||
spaceBetween: Number(sliderMargin),
|
||||
effect: sliderEffect,
|
||||
autoHeight: sliderAutoHeight,
|
||||
grabCursor: true,
|
||||
resizeObserver: false,
|
||||
updateOnWindowResize: sliderResizeUpdate,
|
||||
breakpoints: breakpointsInit,
|
||||
pagination: {
|
||||
el: carousel[i].querySelector('.swiper-pagination'),
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
prevEl: slider1.querySelector('.swiper-button-prev'),
|
||||
nextEl: slider1.querySelector('.swiper-button-next'),
|
||||
},
|
||||
thumbs: {
|
||||
swiper: thumbsInit,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* GLightbox
|
||||
* Enables lightbox functionality
|
||||
* Requires assets/js/vendor/glightbox.js
|
||||
*/
|
||||
lightbox: () => {
|
||||
const lightbox = GLightbox({
|
||||
selector: '*[data-glightbox]',
|
||||
touchNavigation: true,
|
||||
loop: false,
|
||||
zoomable: false,
|
||||
autoplayVideos: true,
|
||||
moreLength: 0,
|
||||
slideExtraAttributes: {
|
||||
poster: ''
|
||||
},
|
||||
plyr: {
|
||||
css: '',
|
||||
js: '',
|
||||
config: {
|
||||
ratio: '',
|
||||
fullscreen: {
|
||||
enabled: false,
|
||||
iosNative: false
|
||||
},
|
||||
youtube: {
|
||||
noCookie: true,
|
||||
rel: 0,
|
||||
showinfo: 0,
|
||||
iv_load_policy: 3
|
||||
},
|
||||
vimeo: {
|
||||
byline: false,
|
||||
portrait: false,
|
||||
title: false,
|
||||
transparent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Plyr
|
||||
* Enables media player
|
||||
* Requires assets/js/vendor/plyr.js
|
||||
*/
|
||||
plyr: () => {
|
||||
var players = Plyr.setup('.player', {
|
||||
loadSprite: true,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Progressbar
|
||||
* Enables animated progressbars
|
||||
* Requires assets/js/vendor/progressbar.min.js
|
||||
* Requires assets/js/vendor/noframework.waypoints.min.js
|
||||
*/
|
||||
progressBar: () => {
|
||||
const pline = document.querySelectorAll(".progressbar.line");
|
||||
const pcircle = document.querySelectorAll(".progressbar.semi-circle");
|
||||
pline.forEach(e => {
|
||||
var line = new ProgressBar.Line(e, {
|
||||
strokeWidth: 6,
|
||||
trailWidth: 6,
|
||||
duration: 3000,
|
||||
easing: 'easeInOut',
|
||||
text: {
|
||||
style: {
|
||||
color: 'inherit',
|
||||
position: 'absolute',
|
||||
right: '0',
|
||||
top: '-30px',
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
transform: null
|
||||
},
|
||||
autoStyleContainer: false
|
||||
},
|
||||
step: (state, line) => {
|
||||
line.setText(Math.round(line.value() * 100) + ' %');
|
||||
}
|
||||
});
|
||||
var value = e.getAttribute('data-value') / 100;
|
||||
new Waypoint({
|
||||
element: e,
|
||||
handler: function() {
|
||||
line.animate(value);
|
||||
},
|
||||
offset: 'bottom-in-view',
|
||||
})
|
||||
});
|
||||
pcircle.forEach(e => {
|
||||
var circle = new ProgressBar.SemiCircle(e, {
|
||||
strokeWidth: 6,
|
||||
trailWidth: 6,
|
||||
duration: 2000,
|
||||
easing: 'easeInOut',
|
||||
step: (state, circle) => {
|
||||
circle.setText(Math.round(circle.value() * 100));
|
||||
}
|
||||
});
|
||||
var value = e.getAttribute('data-value') / 100;
|
||||
new Waypoint({
|
||||
element: e,
|
||||
handler: function() {
|
||||
circle.animate(value);
|
||||
},
|
||||
offset: 'bottom-in-view',
|
||||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Loader
|
||||
*
|
||||
*/
|
||||
loader: () => {
|
||||
var preloader = document.querySelector('.page-loader');
|
||||
if(preloader != null) {
|
||||
document.body.onload = function(){
|
||||
setTimeout(function() {
|
||||
if( !preloader.classList.contains('done') )
|
||||
{
|
||||
preloader.classList.add('done');
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Page Progress
|
||||
* Shows page progress on the bottom right corner of pages
|
||||
*/
|
||||
pageProgress: () => {
|
||||
var progressWrap = document.querySelector('.progress-wrap');
|
||||
if(progressWrap != null) {
|
||||
var progressPath = document.querySelector('.progress-wrap path');
|
||||
var pathLength = progressPath.getTotalLength();
|
||||
var offset = 50;
|
||||
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
|
||||
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
|
||||
progressPath.style.strokeDashoffset = pathLength;
|
||||
progressPath.getBoundingClientRect();
|
||||
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
|
||||
window.addEventListener("scroll", function(event) {
|
||||
var scroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
var progress = pathLength - (scroll * pathLength / height);
|
||||
progressPath.style.strokeDashoffset = progress;
|
||||
var scrollElementPos = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
if(scrollElementPos >= offset) {
|
||||
progressWrap.classList.add("active-progress")
|
||||
} else {
|
||||
progressWrap.classList.remove("active-progress")
|
||||
}
|
||||
});
|
||||
progressWrap.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Counter Up
|
||||
* Counts up to a targeted number when the number becomes visible
|
||||
* Requires assets/js/vendor/counterup.min.js
|
||||
* Requires assets/js/vendor/noframework.waypoints.min.js
|
||||
*/
|
||||
counterUp: () => {
|
||||
var counterUp = window.counterUp["default"];
|
||||
const counters = document.querySelectorAll(".counter");
|
||||
counters.forEach(el => {
|
||||
new Waypoint({
|
||||
element: el,
|
||||
handler: function() {
|
||||
counterUp(el, {
|
||||
duration: 1000,
|
||||
delay: 50
|
||||
})
|
||||
this.destroy()
|
||||
},
|
||||
offset: 'bottom-in-view',
|
||||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Bootstrap Tooltips
|
||||
* Enables Bootstrap tooltips
|
||||
* Requires Poppers library
|
||||
*/
|
||||
bsTooltips: () => {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, {
|
||||
trigger: 'hover'
|
||||
})
|
||||
});
|
||||
var tooltipTriggerWhite = [].slice.call(document.querySelectorAll('[data-bs-toggle="white-tooltip"]'))
|
||||
var tooltipWhite = tooltipTriggerWhite.map(function(tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, {
|
||||
customClass: 'white-tooltip',
|
||||
trigger: 'hover',
|
||||
placement: 'left'
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Bootstrap Popovers
|
||||
* Enables Bootstrap popovers
|
||||
* Requires Poppers library
|
||||
*/
|
||||
bsPopovers: () => {
|
||||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Bootstrap Modal
|
||||
* Enables Bootstrap modal popup
|
||||
*/
|
||||
bsModal: () => {
|
||||
if(document.querySelector(".modal-popup") != null) {
|
||||
var myModalPopup = new bootstrap.Modal(document.querySelector('.modal-popup'));
|
||||
setTimeout(function() {
|
||||
myModalPopup.show();
|
||||
}, 200);
|
||||
}
|
||||
// Fixes jumping of page progress caused by modal
|
||||
var innerWidth = window.innerWidth;
|
||||
var clientWidth = document.body.clientWidth;
|
||||
var scrollSize = innerWidth - clientWidth;
|
||||
var myModalEl = document.querySelectorAll('.modal');
|
||||
var navbarFixed = document.querySelector('.navbar.fixed');
|
||||
var pageProgress = document.querySelector('.progress-wrap');
|
||||
function setPadding() {
|
||||
if(navbarFixed != null) {
|
||||
navbarFixed.style.paddingRight = scrollSize + 'px';
|
||||
}
|
||||
if(pageProgress != null) {
|
||||
pageProgress.style.marginRight = scrollSize + 'px';
|
||||
}
|
||||
}
|
||||
function removePadding() {
|
||||
if(navbarFixed != null) {
|
||||
navbarFixed.style.paddingRight = '';
|
||||
}
|
||||
if(pageProgress != null) {
|
||||
pageProgress.style.marginRight = '';
|
||||
}
|
||||
}
|
||||
myModalEl.forEach(myModalEl => {
|
||||
myModalEl.addEventListener('show.bs.modal', function(e) {
|
||||
setPadding();
|
||||
})
|
||||
myModalEl.addEventListener('hidden.bs.modal', function(e) {
|
||||
removePadding();
|
||||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* iTooltip
|
||||
* Enables custom tooltip style for image hover docs/elements/hover.html
|
||||
* Requires assets/js/vendor/itooltip.min.js
|
||||
*/
|
||||
iTooltip: () => {
|
||||
var tooltip = new iTooltip('.itooltip')
|
||||
tooltip.init({
|
||||
className: 'itooltip-inner',
|
||||
indentX: 15,
|
||||
indentY: 15,
|
||||
positionX: 'right',
|
||||
positionY: 'bottom'
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Form Validation and Contact Form submit
|
||||
* Bootstrap validation - Only sends messages if form has class ".contact-form" and is validated and shows success/fail messages
|
||||
*/
|
||||
forms: () => {
|
||||
(function() {
|
||||
"use strict";
|
||||
window.addEventListener("load", function() {
|
||||
var forms = document.querySelectorAll(".needs-validation");
|
||||
var inputRecaptcha = document.querySelector("input[data-recaptcha]");
|
||||
window.verifyRecaptchaCallback = function (response) {
|
||||
inputRecaptcha.value = response;
|
||||
inputRecaptcha.dispatchEvent(new Event("change"));
|
||||
}
|
||||
window.expiredRecaptchaCallback = function () {
|
||||
var inputRecaptcha = document.querySelector("input[data-recaptcha]");
|
||||
inputRecaptcha.value = "";
|
||||
inputRecaptcha.dispatchEvent(new Event("change"));
|
||||
}
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener("submit", function(event) {
|
||||
if(form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add("was-validated");
|
||||
if(form.checkValidity() === true) {
|
||||
event.preventDefault();
|
||||
form.classList.remove("was-validated");
|
||||
// Send message only if the form has class .contact-form
|
||||
var isContactForm = form.classList.contains('contact-form');
|
||||
if(isContactForm) {
|
||||
var data = new FormData(form);
|
||||
var alertClass = 'alert-danger';
|
||||
fetch("assets/php/contact.php", {
|
||||
method: "post",
|
||||
body: data
|
||||
}).then((data) => {
|
||||
if(data.ok) {
|
||||
alertClass = 'alert-success';
|
||||
}
|
||||
return data.text();
|
||||
}).then((txt) => {
|
||||
var alertBox = '<div class="alert ' + alertClass + ' alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' + txt + '</div>';
|
||||
if(alertClass && txt) {
|
||||
form.querySelector(".messages").insertAdjacentHTML('beforeend', alertBox);
|
||||
form.reset();
|
||||
grecaptcha.reset();
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
},
|
||||
/**
|
||||
* Password Visibility Toggle
|
||||
* Toggles password visibility in password input
|
||||
*/
|
||||
passVisibility: () => {
|
||||
let pass = document.querySelectorAll('.password-field');
|
||||
for (let i = 0; i < pass.length; i++) {
|
||||
let passInput = pass[i].querySelector('.form-control');
|
||||
let passToggle = pass[i].querySelector('.password-toggle > i');
|
||||
passToggle.addEventListener('click', (e) => {
|
||||
if (passInput.type === "password") {
|
||||
passInput.type = "text";
|
||||
passToggle.classList.remove('uil-eye');
|
||||
passToggle.classList.add('uil-eye-slash');
|
||||
} else {
|
||||
passInput.type = "password";
|
||||
passToggle.classList.remove('uil-eye-slash');
|
||||
passToggle.classList.add('uil-eye');
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Pricing Switcher
|
||||
* Enables monthly/yearly switcher seen on pricing tables
|
||||
*/
|
||||
pricingSwitcher: () => {
|
||||
if(document.querySelector(".pricing-switchers") != null) {
|
||||
const wrapper = document.querySelectorAll(".pricing-wrapper");
|
||||
wrapper.forEach(wrap => {
|
||||
const switchers = wrap.querySelector(".pricing-switchers");
|
||||
const switcher = wrap.querySelectorAll(".pricing-switcher");
|
||||
const price = wrap.querySelectorAll(".price");
|
||||
switchers.addEventListener("click", (e) => {
|
||||
switcher.forEach(s => {
|
||||
s.classList.toggle("pricing-switcher-active");
|
||||
});
|
||||
price.forEach(p => {
|
||||
p.classList.remove("price-hidden");
|
||||
p.classList.toggle("price-show");
|
||||
p.classList.toggle("price-hide");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* ReplaceMe.js
|
||||
* Enables text rotator
|
||||
* Requires assets/js/vendor/replaceme.min.js
|
||||
*/
|
||||
textRotator: () => {
|
||||
if(document.querySelector(".rotator-zoom") != null) {
|
||||
var replace = new ReplaceMe(document.querySelector('.rotator-zoom'), {
|
||||
animation: 'animate__animated animate__zoomIn',
|
||||
speed: 2500,
|
||||
separator: ',',
|
||||
clickChange: false,
|
||||
loopCount: 'infinite'
|
||||
});
|
||||
}
|
||||
if(document.querySelector(".rotator-fade") != null) {
|
||||
var replace = new ReplaceMe(document.querySelector('.rotator-fade'), {
|
||||
animation: 'animate__animated animate__fadeInDown',
|
||||
speed: 2500,
|
||||
separator: ',',
|
||||
clickChange: false,
|
||||
loopCount: 'infinite'
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Clipboard.js
|
||||
* Enables clipboard on docs
|
||||
* Requires assets/js/vendor/clipboard.min.js
|
||||
*/
|
||||
codeSnippet: () => {
|
||||
var btnHtml = '<button type="button" class="btn btn-sm btn-white rounded-pill btn-clipboard">Copy</button>'
|
||||
document.querySelectorAll('.code-wrapper-inner').forEach(function(element) {
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
})
|
||||
var clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: function(trigger) {
|
||||
return trigger.nextElementSibling
|
||||
}
|
||||
})
|
||||
clipboard.on('success', event => {
|
||||
event.trigger.textContent = 'Copied!';
|
||||
event.clearSelection();
|
||||
setTimeout(function () {
|
||||
event.trigger.textContent = 'Copy';
|
||||
}, 2000);
|
||||
});
|
||||
var copyIconCode = new ClipboardJS('.btn-copy-icon');
|
||||
copyIconCode.on('success', function(event) {
|
||||
event.clearSelection();
|
||||
event.trigger.textContent = 'Copied!';
|
||||
window.setTimeout(function() {
|
||||
event.trigger.textContent = 'Copy';
|
||||
}, 2300);
|
||||
});
|
||||
},
|
||||
}
|
||||
theme.init();
|
||||
24
resources/views/components/layouts/home.blade.php
Normal file
24
resources/views/components/layouts/home.blade.php
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
5
resources/views/components/partials/home/_css.blade.php
Normal file
5
resources/views/components/partials/home/_css.blade.php
Normal file
@ -0,0 +1,5 @@
|
||||
<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'">
|
||||
90
resources/views/components/partials/home/_footer.blade.php
Normal file
90
resources/views/components/partials/home/_footer.blade.php
Normal file
@ -0,0 +1,90 @@
|
||||
<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 -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</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>
|
||||
<!-- /.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>
|
||||
<!-- /.newsletter-wrapper -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</footer>
|
||||
110
resources/views/components/partials/home/_header.blade.php
Normal file
110
resources/views/components/partials/home/_header.blade.php
Normal file
@ -0,0 +1,110 @@
|
||||
<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/img/logo-dark.png') }}" alt="logo" />
|
||||
</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 -->
|
||||
</div>
|
||||
<!-- /.offcanvas -->
|
||||
</header>
|
||||
2
resources/views/components/partials/home/_js.blade.php
Normal file
2
resources/views/components/partials/home/_js.blade.php
Normal file
@ -0,0 +1,2 @@
|
||||
<script src="{{ asset('assets/js/plugins.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/theme.js') }}"></script>
|
||||
8
resources/views/components/partials/home/_meta.blade.php
Normal file
8
resources/views/components/partials/home/_meta.blade.php
Normal file
@ -0,0 +1,8 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description"
|
||||
content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords"
|
||||
content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>{{ $title }} - {{ config('app.name') }}</title>
|
||||
684
resources/views/livewire/home/index.blade.php
Normal file
684
resources/views/livewire/home/index.blade.php
Normal file
@ -0,0 +1,684 @@
|
||||
<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') }}">
|
||||
<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') }}"
|
||||
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/img/photos/devices3.png') }}"
|
||||
srcset="{{ asset('assets/img/photos/devices3@2x.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="./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="">
|
||||
<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/img/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"
|
||||
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>
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
<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"
|
||||
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"
|
||||
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="./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="">
|
||||
<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">
|
||||
<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>
|
||||
</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 -->
|
||||
</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="./assets/img/photos/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="./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="">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<!-- /.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 -->
|
||||
</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>
|
||||
</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>
|
||||
<!-- /.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 -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /.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="./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="">
|
||||
<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="./assets/img/photos/devices5.png"
|
||||
srcset="./assets/img/photos/devices5@2x.png 2x" alt=""></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>
|
||||
</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>
|
||||
</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>
|
||||
</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="./assets/img/photos/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="./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="">
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
|
||||
</div>
|
||||
6
routes/pages/home.php
Normal file
6
routes/pages/home.php
Normal file
@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Home\Index as HomeComponent;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', HomeComponent::class)->name('homepage');
|
||||
@ -1,11 +1,6 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
require __DIR__.'/pages/customer.php';
|
||||
require __DIR__.'/pages/studio.php';
|
||||
require __DIR__.'/pages/auth.php';
|
||||
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
})->name('homepage');
|
||||
require __DIR__.'/pages/home.php';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user