This commit is contained in:
2026-05-17 21:09:32 +08:00
commit 1870400c47
1564 changed files with 544713 additions and 0 deletions

View File

@@ -0,0 +1,7 @@
<section title="one column" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,18 @@
<section title="twelve columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,8 @@
<section title="two columns ratio" class="py-4">
<div class="container">
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,8 @@
<section title="two columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,9 @@
<section title="two columns ratio" class="py-4">
<div class="container">
<div class="row">
<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-3"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,9 @@
<section title="three columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,13 @@
<section title="three grid left" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,11 @@
<section title="three grid" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,10 @@
<section title="four columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section title="four grid masonry" class="py-4">
<div class="container">
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section title="four grid" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section title="six columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,14 @@
<section title="six grid" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,14 @@
<section title="eight columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

View File

@@ -0,0 +1,5 @@
<section title="blank" class="py-4">
<div class="container">
<h1>Blank container</h1>
</div>
</section>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,124 @@
<section class="contact-form-9" aria-label="contact-form-9">
<div class="container py-5 my-5">
<div class="row py-5">
<div class="col py-5">
<div>
<div class="row text-center justify-content-center">
<div class="col-12 col-md-9 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="row justify-content-center pt-4" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<div class="col-12 col-md-8">
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col-12 col-md">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col text-center">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,161 @@
<section title="contact-form-10" class="contact-form-10 border-top">
<div class="container">
<div class="row my-5">
<div class="col-12 col-md-6 col-lg-5">
<h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
<p class="lead">
Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
</p>
<p class="lead">
The html for sections blocks and components and this template are built using Bootstrap 5.
</p>
<div data-v-component-site>
<p class="mt-5">
<b>
<i class="la la-lg la-envelope opacity-50"></i> Email:
</b>
<span data-v-if="site.contact-email">
<a href="mailto:contact@mysite.com" data-v-site-contact-email>
<span data-v-site-contact-email>contact@mysite.com</span>
</a>
</span>
</p>
<p class="">
<b>
<i class="la la-lg la-phone opacity-50"></i> Phone:
</b>
<a href="tel:5511112377" data-v-site-description-phone-number>
<span data-v-site-description-phone-number>+55 (111) 123 777</span>
</a>
</p>
</div>
</div>
<div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" name="first_name" required>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" name="last_name" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Email" name="email" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="text" class="form-control" placeholder="Subject" name="subject" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Submitting</span> ...
</span>
<span class="button-text">
<span>Submit</span>
<i class="la la-lg la-envelope opacity-50 ms-2"></i>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,123 @@
<section class="contact-form-11 pt-0" aria-label="contact-form-11">
<div class="container-fluid p-0 pb-5">
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
</div>
<div class="container">
<div class="row pt-5">
<div class="col-12" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col-12 col-md">
<label>First Name</label>
<input type="text" class="form-control">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<label>Last Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Your Email</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Subject (optional but helpful)</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>How can we help?</label>
<textarea class="form-control" name="message" rows="3"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4 text-center">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,123 @@
<section class="contact-form-12 py-0" aria-label="contact-form-12">
<div class="container py-5">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="row-50">
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-7" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col">
<label>Your Email Address</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Subject</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>How can we help?</label>
<textarea class="form-control" name="message" rows="3"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col text-end">
<button type="submit" class="btn btn-dark">Send</button>
</div>
</div>
</form>
</div>
</div>
<div class="row-100"></div>
</div>
<div class="container-fluid p-0">
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
</div>
</section>

View File

@@ -0,0 +1,125 @@
<section class="contact-form-13" aria-label="contact-form-13">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="row-70"></div>
<div class="row">
<div class="col-12 col-md-8 col-lg m-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-md-8 col-lg pt-5 m-auto pt-lg-0">
<iframe loading="lazy" class="mb-4" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="200" frameborder="0"></iframe>
<p>
<strong>Showroom</strong>
</p>
<p>
71 Pilgrim Avenue
<br>Chevy Chase, MD 20815
</p>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,125 @@
<section class="contact-form-2 container-fluid px-5 my-5" aria-label="contact-form-2">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card border-0 rounded-3 shadow-lg ">
<div class="card-body p-0">
<div class="row g-0">
<div class="col-sm-6 d-none d-sm-block bg-image">
<img alt="image" src="demo/img/team-1.jpg" alt="happy cat" loading="lazy" class="img-fluid">
</div>
<div class="col-sm-6 p-4" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<div class="text-center">
<div class="h3 fw-light">Contact Form</div>
<p class="mb-4 text-muted">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
<form id="contactForm" action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class=" mb-3">
<input class="form-control" id="name" type="text" placeholder="Name" required />
<label for="name">Name</label>
</div>
<div class=" mb-3">
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" required />
<label for="emailAddress">Email Address</label>
</div>
<div class=" mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Message" style="height: 10rem;" required></textarea>
<label for="message">Message</label>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="d-grid">
<button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,167 @@
<section title="contact-form-6" class="contact-form-6">
<div class="container-fluid g-0">
<div style="height:300px" data-component-maps>
<iframe loading="lazy" frameborder="0" title="map" src="https://maps.google.com/maps?q=Bucharest&z=15&t=q&key=&output=embed" width="100%" height="100%" style="width:100%;height:100%;left:0px">
</iframe>
</div>
</div>
<div class="container">
<div class="row my-5">
<div class="col-12 col-md-6 col-lg-5">
<h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
<p class="lead">
Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
</p>
<p class="lead">
The html for sections blocks and components and this template are built using Bootstrap 5.
</p>
<div data-v-component-site>
<p class="mt-5">
<b>
<i class="la la-lg la-envelope opacity-50"></i> Email:
</b>
<span data-v-if="site.contact-email">
<a href="mailto:contact@mysite.com" data-v-site-contact-email>
<span data-v-site-contact-email>contact@mysite.com</span>
</a>
</span>
</p>
<p class="">
<b>
<i class="la la-lg la-phone opacity-50"></i> Phone:
</b>
<a href="tel:5511112377" data-v-site-description-phone-number>
<span data-v-site-description-phone-number>+55 (111) 123 777</span>
</a>
</p>
</div>
</div>
<div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success>
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" name="first_name" required>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" name="last_name" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Email" name="email" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="text" class="form-control" placeholder="Subject" name="subject" required>
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Submitting</span> ...
</span>
<span class="button-text">
<span>Submit</span>
<i class="la la-lg la-envelope opacity-50 ms-2"></i>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,118 @@
<section class="contact-form-8" aria-label="contact-form-8">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-12 col-md-6">
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
</div>
<div class="col-12 col-md-6 pt-5" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,164 @@
<section class="contact-form-8 pt-0" aria-label="contact-form-8">
<div class="container-fluid p-0 pb-3">
<iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
</div>
<div class="container">
<div class="row text-center justify-content-center pt-5">
<div class="col-12 col-md-7">
<h1>Contact Us</h1>
</div>
</div>
<div class="row justify-content-center pt-4">
<div class="col-12 col-md-7" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="row mt-4">
<div class="col text-center">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</form>
</div>
</div>
<div class="row-100"></div>
</div>
<div class="">
<div class="container">
<div class="row-50"></div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md me-auto ms-auto">
<p class="lead">+55 (111) 123 777</p>
</div>
<div class="col-12 col-md pt-4 me-auto ms-auto">
<p class="lead">7th St.
<br>New York, NY 12345
</p>
</div>
<div class="col-12 col-md pt-4 me-auto ms-auto">
<p class="lead">support@vvveb.com</p>
</div>
</div>
<div class="row-50"></div>
</div>
</div>
<div class="container">
<div class="row-70"></div>
<div class="row text-center">
<div class="col">
<p class="h2">
<a class="mx-2">
<i class="la la-facebook"></i>
</a>
<a class="mx-2">
<i class="la la-twitter"></i>
</a>
<a class="mx-2">
<i class="la la-instagram"></i>
</a>
<a class="mx-2">
<i class="la la-google"></i>
</a>
<a class="mx-2">
<i class="la la-pinterest"></i>
</a>
</p>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,165 @@
<section class="contact-form-3 py-5" aria-label="contact-form-3">
<div class="row no-gutters">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="card-shadow">
<img alt="image" src="demo/img/team-1.jpg" alt="happy cat" loading="lazy" class="img-fluid">
</div>
</div>
<div class="col-lg-6">
<div class="contact-box ms-3" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-us-home">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<h1 class=" mt-2">Quick Contact</h1>
<form class="mt-4" action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
<input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>
<input type="hidden" class="form-control" name="form-name" value="contact-us-home">
<div class="row">
<div class="col-lg-12">
<div class="form-group mt-2">
<input class="form-control" type="text" placeholder="name">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-2">
<input class="form-control" type="email" placeholder="email address">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-2">
<input class="form-control" type="text" placeholder="phone">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mt-2">
<textarea class="form-control" rows="3" placeholder="message"></textarea>
</div>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="col-lg-12">
<button type="submit" class="btn btn-success mt-3 text-white border-0 px-3 py-2">
<span> Submit</span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-12">
<div class="card mt-4 border-0 mb-4">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="card-body d-flex align-items-center c-detail pl-0">
<div class="me-3 align-self-center">
<i class="la la-map la-lg"></i>
</div>
<div>
<h6>Address</h6>
<p>708 Picadilly Ave.
<br> New York
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="card-body d-flex align-items-center c-detail">
<div class="me-3 align-self-center">
<i class="la la-phone la-lg"></i>
</div>
<div>
<h6>Phone</h6>
<p>555 111 333</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="card-body d-flex align-items-center c-detail">
<div class="me-3 align-self-center">
<i class="la la-email la-lg"></i>
</div>
<div>
<h6>Email</h6>
<p>
hello@vvveb.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,60 @@
<section class="py-5" aria-label="counter-1">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
<h2 class="mb-4 display-5 text-center fw-bold">Some of our achievments</h2>
<p class="text-secondary mb-5 text-center lead fs-4">Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-5 gy-md-6 gy-lg-0">
<div class="col-6 col-lg-3">
<div class="text-center">
<div class="d-inline-block bg-primary mb-3 mx-auto rounded-circle p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-people text-white" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
</svg>
</div>
<h5 class="display-6 fw-bold m-1">150K</h5>
<p class="text-secondary m-0">Happy Customers</p>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-center">
<div class="d-inline-block bg-primary mb-3 mx-auto rounded-circle p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-activity text-white" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z" />
</svg>
</div>
<h5 class="display-6 fw-bold m-1">1200+</h5>
<p class="text-secondary m-0">Issues Solved</p>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-center">
<div class="d-inline-block bg-primary mb-3 mx-auto rounded-circle p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-briefcase text-white" viewBox="0 0 16 16">
<path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z" />
</svg>
</div>
<h5 class="display-6 fw-bold m-1">30K</h5>
<p class="text-secondary m-0">Finished Projects</p>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-center">
<div class="d-inline-block bg-primary mb-3 mx-auto rounded-circle p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-award text-white" viewBox="0 0 16 16">
<path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z" />
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z" />
</svg>
</div>
<h5 class="display-6 fw-bold m-1">12+</h5>
<p class="text-secondary m-0">Awards Winned</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,54 @@
<section class="py-5" aria-label="counter-2">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-6">
<h2 class="mb-2 display-5 text-center fw-bold">Some of our achievments</h2>
<p class="text-secondary mb-5 text-center lead fs-4">Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</div>
<div class="container">
<div class="row gy-4 gy-lg-0 align-items-lg-center">
<div class="col-12 col-lg-6">
<img class="img-fluid rounded-4" loading="lazy" src="demo/img/team-1.jpg" alt="Team 1">
</div>
<div class="col-12 col-lg-6">
<div class="row justify-content-xl-end">
<div class="col-12 col-xl-11">
<div class="row gy-4 gy-sm-0 overflow-hidden">
<div class="col-12 col-sm-6">
<div class="card border-0 border-bottom border-primary shadow mb-4">
<div class="card-body text-center p-4 p-5">
<h3 class="display-2 fw-bold mb-2">60</h3>
<p class="fs-5 mb-0 text-secondary">Finished Projects</p>
</div>
</div>
<div class="card border-0 border-bottom border-primary shadow">
<div class="card-body text-center p-4 p-5">
<h3 class="display-2 fw-bold mb-2">10k+</h3>
<p class="fs-5 mb-0 text-secondary">Issues Solved</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card border-0 border-bottom border-primary shadow mt-5 mb-4">
<div class="card-body text-center p-4 p-5">
<h3 class="display-2 fw-bold mb-2">3k+</h3>
<p class="fs-5 mb-0 text-secondary">Happy Customers</p>
</div>
</div>
<div class="card border-0 border-bottom border-primary shadow">
<div class="card-body text-center p-4 p-5">
<h3 class="display-2 fw-bold mb-2">7</h3>
<p class="fs-5 mb-0 text-secondary">Awards</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,27 @@
<section class="cta-1" aria-label="cta-1" data-bs-theme="dark">
<div class="container">
<div class="row justify-content-center">
<div class="col text-center">
<h2 class="display-3 fw-bold text-body mb-3">Ready to take the next step?</h2>
<p class="text-body h4 fw-normal">Our specialists are ready to work on your next awesome project</p>
<p class="text-body h4 fw-normal">Contact us today to get started!</p>
<a href="https://www.vvveb.com" class="btn btn-lg btn-primary mt-5">
<span>Contact us</span>
</a>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="background-container parallax">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</section>

View File

@@ -0,0 +1,20 @@
<section class="cta-2 m-5" aria-label="cta-1" data-bs-theme="dark">
<div class="container rounded-4">
<img src="demo/img/hero-3.webp" alt="Team 1" class="w-100 rounded-4">
<div class="position-absolute top-0 h-100 container">
<div class="row align-items-center h-100 mx-auto">
<div class="col text-center">
<h2 class="display-3 fw-bold text-body mb-3">Ready to take the next step?</h2>
<p class="text-body h4 fw-normal">Our specialists are ready to work on your next awesome project</p>
<p class="text-body h4 fw-normal">Contact us today to get started!</p>
<a href="https://www.vvveb.com" class="btn btn-lg btn-primary mt-5">
<span>Contact us</span>
</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,28 @@
<section class="cta-3 p-5" aria-label="cta-1" data-bs-theme="dark">
<div class="container">
<div class="row">
<div class="col-8">
<h2 class="display-4 fw-bold text-body mb-3">Ready to take the next step?</h2>
<p class="text-body h4 fw-normal">Our specialists are ready to work on your next awesome project</p>
<p class="text-body h4 fw-normal">Contact us today to get started!</p>
<a href="https://www.vvveb.com" class="btn btn-lg btn-light mt-5">
<span>Contact us</span>
</a>
</div>
</div>
<div class="col-4"></div>
</div>
<div class="overlay">
</div>
<div class="background-container parallax">
<img src="demo/img/team-1.jpg" alt="Team 1">
</div>
</section>

View File

@@ -0,0 +1,60 @@
<section class="py-5" aria-label="faq-1">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row mt-4 justify-content-center">
<div class="col-md-8">
<div class="accordion faq accordion-flush" id="faqAccordion1">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button aria-controls="collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseOne">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button aria-controls="collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseTwo">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button aria-controls="collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseThree">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,111 @@
<section class="py-5" aria-label="faq-2">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row mt-4 justify-content-center">
<div class="col-md-6">
<div class="accordion faq accordion-flush" id="faqAccordion1">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button aria-controls="collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseOne">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button aria-controls="collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseTwo">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button aria-controls="collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion1" id="collapseThree">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion faq accordion-flush" id="faqAccordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button aria-controls="collapseOne2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseOne2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseOne2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button aria-controls="collapseTwo2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseTwo2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseTwo2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button aria-controls="collapseThree2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseThree2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseThree2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,69 @@
<section class="py-5" aria-label="faq-3">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row mt-4 justify-content-center">
<div class="col-md-5">
<span class="text-muted">Lorem ipsum dolor</span>
<h2 class="fw-bold">Have Any Questions?</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur quidem eius cum voluptatum quasi delectus assumenda culpa.</p>
<a class="btn btn-primary mt-1" href="/page/contact">Contact us</a>
</div>
<div class="col-md-7">
<div class="accordion faq accordion-flush" id="faqAccordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button aria-controls="collapseOne2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseOne2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseOne2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button aria-controls="collapseTwo2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseTwo2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseTwo2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button aria-controls="collapseThree2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapseThree2" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="headingThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2" id="collapseThree2">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,245 @@
<section class="py-5" aria-label="faq-4">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row g-3 g-md-4">
<div class="col-lg-6">
<h6 class="mb-3 mt-3 mt-md-0">Technical</h6>
<div class="accordion faq accordion-flush" id="faq1-accordion accordion-flush">
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq1-headingOne">
<button aria-controls="faq1-collapseOne" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq1-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq1-headingOne" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq1-accordion accordion-flush" id="faq1-collapseOne">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq1-headingTwo">
<button aria-controls="faq1-collapseTwo" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq1-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq1-headingTwo" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq1-accordion accordion-flush" id="faq1-collapseTwo">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq1-headingThree">
<button aria-controls="faq1-collapseThree" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq1-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq1-headingThree" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq1-accordion accordion-flush" id="faq1-collapseThree">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq1-headingFour">
<button aria-controls="faq1-collapseFour" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq1-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq1-headingFour" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq1-accordion accordion-flush" id="faq1-collapseFour">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h6 class="mb-3 mt-3 mt-md-0">Licensing</h6>
<div class="accordion faq accordion-flush" id="faq2-accordion accordion-flush">
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq1-headingOne">
<button aria-controls="faq2-collapseOne" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq2-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq2-headingOne" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq2-accordion accordion-flush" id="faq2-collapseOne">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq2-headingTwo">
<button aria-controls="faq2-collapseTwo" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq2-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq2-headingTwo" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq2-accordion accordion-flush" id="faq2-collapseTwo">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq2-headingThree">
<button aria-controls="faq2-collapseThree" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq2-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq2-headingThree" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq2-accordion accordion-flush" id="faq2-collapseThree">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq2-headingFour">
<button aria-controls="faq2-collapseFour" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq2-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq2-headingFour" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq2-accordion accordion-flush" id="faq2-collapseFour">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h6 class="mb-3 mt-3 mt-md-0">Support</h6>
<div class="accordion faq accordion-flush" id="faq3-accordion accordion-flush">
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq3-headingOne">
<button aria-controls="faq3-collapseOne" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq3-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq3-headingOne" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq3-accordion accordion-flush" id="faq3-collapseOne">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq3-headingTwo">
<button aria-controls="faq3-collapseTwo" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq3-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq3-headingTwo" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq3-accordion accordion-flush" id="faq3-collapseTwo">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq3-headingThree">
<button aria-controls="faq3-collapseThree" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq3-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq3-headingThree" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq3-accordion accordion-flush" id="faq3-collapseThree">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq3-headingFour">
<button aria-controls="faq3-collapseFour" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq3-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq3-headingFour" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq3-accordion accordion-flush" id="faq3-collapseFour">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h6 class="mb-3 mt-3 mt-md-0">Payments</h6>
<div class="accordion faq accordion-flush" id="faq4-accordion accordion-flush">
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq4-headingOne">
<button aria-controls="faq4-collapseOne" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq4-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq4-headingOne" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq4-accordion accordion-flush" id="faq4-collapseOne">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq4-headingTwo">
<button aria-controls="faq4-collapseTwo" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq4-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq4-headingTwo" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq4-accordion accordion-flush" id="faq4-collapseTwo">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq4-headingThree">
<button aria-controls="faq4-collapseThree" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq4-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq4-headingThree" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq4-accordion accordion-flush" id="faq4-collapseThree">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
<div class="accordion faq accordion-item">
<h2 class="accordion faq accordion-header" id="faq4-headingFour">
<button aria-controls="faq4-collapseFour" aria-expanded="false" class="accordion faq accordion-button collapsed" data-bs-target="#faq4-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="faq4-headingFour" class="accordion faq accordion-collapse collapse" data-bs-parent="#faq4-accordion accordion-flush" id="faq4-collapseFour">
<div class="accordion faq accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores porro quidem qui recusandae animi eaque id atque, dolorum expedita magnam modi dolores corrupti. Laudantium cumque suscipit voluptas asperiores, et recusandae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,141 @@
<section class="py-5" aria-label="subscribe-5">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row justify-content-center pt-lg-3">
<div class="col-md-3">
<h2 class="mt-3 fw-bold">Payment</h2>
</div>
<div class="col-md-9">
<div class="accordion faq accordion-flush" id="payment-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="payment-headingOne">
<button aria-controls="payment-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#payment-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="payment-headingOne" class="accordion-collapse collapse" data-bs-parent="#payment-accordion" id="payment-collapseOne">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="payment-headingTwo">
<button aria-controls="payment-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#payment-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="payment-headingTwo" class="accordion-collapse collapse" data-bs-parent="#payment-accordion" id="payment-collapseTwo">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="payment-headingThree">
<button aria-controls="payment-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#payment-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="payment-headingThree" class="accordion-collapse collapse" data-bs-parent="#payment-accordion" id="payment-collapseThree">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="payment-headingFour">
<button aria-controls="payment-collapseFour" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#payment-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="payment-headingFour" class="accordion-collapse collapse" data-bs-parent="#payment-accordion" id="payment-collapseFour">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-3">
<h2 class="mt-3 fw-bold">Shipping</h2>
</div>
<div class="col-md-9">
<div class="accordion faq accordion-flush" id="Shipping-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="Shipping-headingOne">
<button aria-controls="Shipping-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Shipping-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="Shipping-headingOne" class="accordion-collapse collapse" data-bs-parent="#Shipping-accordion" id="Shipping-collapseOne">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Shipping-headingTwo">
<button aria-controls="Shipping-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Shipping-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="Shipping-headingTwo" class="accordion-collapse collapse" data-bs-parent="#Shipping-accordion" id="Shipping-collapseTwo">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Shipping-headingThree">
<button aria-controls="Shipping-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Shipping-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="Shipping-headingThree" class="accordion-collapse collapse" data-bs-parent="#Shipping-accordion" id="Shipping-collapseThree">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Shipping-headingFour">
<button aria-controls="Shipping-collapseFour" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Shipping-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
</div>Lorem ipsum dolor sit amet adipisicing ?
</button>
</h2>
<div aria-labelledby="Shipping-headingFour" class="accordion-collapse collapse" data-bs-parent="#Shipping-accordion" id="Shipping-collapseFour">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,107 @@
<section class="py-5" aria-label="faq-6">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row g-3 g-md-4">
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card bg-body-tertiary p-4">
<div class=" d-flex">
<div class="text-muted me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,95 @@
<section class="py-5" aria-label="faq-7">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row g-4 g-md-5">
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-4 fw-bold">Lorem ipsum dolor adipisicing ?</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nihil. Praesentium nostrum fugiat id dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,45 @@
<section class="features-1 bg-alternate my-5" aria-label="features-1">
<div class="container">
<div class="row wrap">
<div class="col-md-6 align-self-center">
<div class="max-box" data-aos="fade-right">
<!--
<span class="badge bg-success rounded-pill px-3">new</span>
-->
<h2 class="display-5 fw-bold">Real time code editor</h2>
<div class="mt-4">
<p class="lead">Code editor with syntax highglighting that updates in real time.</p>
<p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
<p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
</div>
<a tile="Code editor features" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
<div class="col-md-6">
<img src="demo/img/team-1.jpg" alt="Macbook" loading="lazy" class="img-fluid shadow" data-aos="fade-left" />
</div>
</div>
<div class="row g-5 wrap mt-2">
<div class="col-md-6">
<img src="demo/img/team-2.jpg" alt="App development" loading="lazy" class="img-fluid shadow" data-aos="fade-right" />
</div>
<div class="col-md-6 align-self-center">
<div class="max-box ms-auto" data-aos="fade-left">
<!-- <span class="badge bg-success rounded-pill px-3">on sale</span> -->
<h2 class="display-5 fw-bold">Drag and drop page builder</h2>
<div class="mt-4">
<p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
<p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
</div>
<a title="Drag and drop" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,48 @@
<section class="features-10 py-5 bg-alternate" aria-label="features-10">
<div class="container">
<div class="row text-end align-items-center">
<div class="col-12 col-md-6 m-auto">
<img src="demo/img/team-1.jpg" alt="dog" loading="lazy" class="img-fluid">
</div>
<div class="col-12 col-md-7 col-lg-5 m-auto text-start pt-5">
<div class="row pb-lg-5">
<div class="col-3">
<img src="demo/img/illustrations.co/107-healthy.svg" alt="healthy" loading="lazy" class="img-fluid">
</div>
<div class="col-9">
<h3>
<strong>Drag and drop</strong>
</h3>
<p>Even the all-powerful Pointing has no control about the blind texts.</p>
</div>
</div>
<div class="row pt-4 pt-md-5 pb-lg-5">
<div class="col-3">
<img alt="image" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell" loading="lazy" class="img-fluid">
</div>
<div class="col-9">
<h3>
<strong>Live code editor</strong>
</h3>
<p>Duden flows by their place far far away, behind the word mountains.</p>
</div>
</div>
<div class="row pt-4 pt-md-5">
<div class="col-3">
<img alt="image" src="demo/img/illustrations.co/109-map-location.svg" alt="map location" loading="lazy" class="img-fluid">
</div>
<div class="col-9">
<h3>
<strong>Bootstrap 5 Components</strong>
</h3>
<p>A small river named Duden flows by their place and supplies it.</p>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,35 @@
<section class="features-11 py-5 bg-alternate" aria-label="features-11">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-8 col-lg-4">
<div>
<img alt="image" src="demo/img/illustrations.co/109-map-location.svg" alt="map location" loading="lazy" class="img-fluid">
<h3>Drag and drop</h3>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets.</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-md-8 col-lg-4">
<div>
<img alt="image" src="demo/img/illustrations.co/107-healthy.svg" alt="healthy" loading="lazy" class="img-fluid">
<h3>Live code editor</h3>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time.</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-md-8 col-lg-4">
<div>
<img alt="image" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell" loading="lazy" class="img-fluid">
<h3>Bootstrap 5 Components</h3>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootstrap 5.</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,45 @@
<section class="features-1 bg-alternate" aria-label="features-12">
<div class="container-fluid g-0">
<div class="row g-0 wrap">
<div class="col-md-6 align-self-center">
<div class="max-box" data-aos="fade-right">
<!--
<span class="badge bg-success rounded-pill px-3">new</span>
-->
<h2 class="display-6 fw-semibold">Real time code editor</h2>
<div class="mt-4">
<p class="lead">Code editor with syntax highglighting that updates in real time.</p>
<p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
<p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
</div>
<a tile="Code editor features" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
<div class="col-md-6">
<img src="demo/img/team-1.jpg" alt="Macbook" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
</div>
</div>
<div class="row g-0 wrap">
<div class="col-md-6">
<img src="demo/img/team-2.jpg" alt="App development" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
</div>
<div class="col-md-6 align-self-center">
<div class="max-box ms-auto" data-aos="fade-left">
<!-- <span class="badge bg-success rounded-pill px-3">on sale</span> -->
<h2 class="display-6 fw-semibold">Drag and drop page builder</h2>
<div class="mt-4">
<p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
<p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
</div>
<a title="Drag and drop" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,26 @@
<section class="features-1 bg-alternate" aria-label="features-13">
<div class="container">
<div class="row wrap">
<div class="col-md-6 align-self-center">
<div class="max-box" data-aos="fade-right">
<!--
<span class="badge bg-success rounded-pill px-3">new</span>
-->
<h2 class="display-6 fw-semibold">Real time code editor</h2>
<div class="mt-4">
<p class="lead">Code editor with syntax highglighting that updates in real time.</p>
<p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
<p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
</div>
<a tile="Code editor features" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
<div class="col-md-6">
<img src="demo/img/team-1.jpg" alt="Macbook" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,23 @@
<section class="features-1 bg-alternate" aria-label="features-14">
<div class="container">
<div class="row g-0 wrap">
<div class="col-md-6">
<img src="demo/img/team-2.jpg" alt="App development" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
</div>
<div class="col-md-6 align-self-center">
<div class="max-box ms-auto" data-aos="fade-left">
<!-- <span class="badge bg-success rounded-pill px-3">on sale</span> -->
<h2 class="display-6 fw-semibold">Drag and drop page builder</h2>
<div class="mt-4">
<p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
<p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
</div>
<a title="Drag and drop" href="/page/about" role="button">
<span>Learn More</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,422 @@
<section aria-label="features-15">
<div class="container py-6">
<div class="row">
<div class="col-md-12 text-center">
<div class="text-center text-md-start mb-5">
<div>
<h1 class="display-5 fw-bold">Services</h1>
</div>
</div>
</div>
</div>
<div class="row pt-4">
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="3em" height="3em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-white">
<path d="M4,2A2,2 0 0,0 2,4V14H4V4H14V2H4M8,6A2,2 0 0,0 6,8V18H8V8H18V6H8M20,12V20H12V12H20M20,10H12A2,2 0 0,0 10,12V20A2,2 0 0,0 12,22H20A2,2 0 0,0 22,20V12A2,2 0 0,0 20,10Z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-4">
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="m7.788 2.34-.799 1.278A.25.25 0 0 0 7.201 4h1.598a.25.25 0 0 0 .212-.382l-.799-1.279a.25.25 0 0 0-.424 0Zm0 11.32-.799-1.277A.25.25 0 0 1 7.201 12h1.598a.25.25 0 0 1 .212.383l-.799 1.278a.25.25 0 0 1-.424 0ZM3.617 9.01 2.34 8.213a.25.25 0 0 1 0-.424l1.278-.799A.25.25 0 0 1 4 7.201V8.8a.25.25 0 0 1-.383.212Zm10.043-.798-1.277.799A.25.25 0 0 1 12 8.799V7.2a.25.25 0 0 1 .383-.212l1.278.799a.25.25 0 0 1 0 .424Z"></path>
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v3a.5.5 0 0 1-.5.5h-3A1.5 1.5 0 0 0 0 6.5v3A1.5 1.5 0 0 0 1.5 11h3a.5.5 0 0 1 .5.5v3A1.5 1.5 0 0 0 6.5 16h3a1.5 1.5 0 0 0 1.5-1.5v-3a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 0 16 9.5v-3A1.5 1.5 0 0 0 14.5 5h-3a.5.5 0 0 1-.5-.5v-3A1.5 1.5 0 0 0 9.5 0h-3ZM6 1.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3A1.5 1.5 0 0 0 11.5 6h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a1.5 1.5 0 0 0-1.5 1.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3A1.5 1.5 0 0 0 4.5 10h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 0 6 4.5v-3Z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-4">
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6 mb-md-5">
<div class="p-4 card shadow position-relative">
<div class="card-body">
<div class="position-absolute top-0 mt-n4 bg-primary p-3 rounded-3 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"></path>
</svg>
</div>
<div class="pt-5 ">
<div>
<h2 class="fw-bold h3">Custom Feature</h2>
<p class="rfs-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body-tertiary ">
<div class="container py-5">
<div class="row mb-4">
<div class="col-md-12 text-center">
<div class="text-center text-md-end mb-5">
<div>
<h1 class="display-5 fw-bold">Our Loved Testimonials</h1>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Nicolas Horn" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1527980965255-d3b416303d12?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1527980965255-d3b416303d12??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1527980965255-d3b416303d12??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1527980965255-d3b416303d12??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1527980965255-d3b416303d12??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8M3x8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">Mathew Glock</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Leio McLaren" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1628157588553-5eeea00af15c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1628157588553-5eeea00af15c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1628157588553-5eeea00af15c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1628157588553-5eeea00af15c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NHx8YXZhdGFyfGVufDB8Mnx8fDE2Mzg4OTExNTE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">Tahmid William&nbsp;<p></p>
<p></p>
</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Amir Seilsepour" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1595152452543-e5fc28ebc2b8??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfHx8MTYzODg5MTA3MA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">Jarvis Ridley&nbsp;<p></p>
<p></p>
</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Imansyah Muhamad Putera" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1542909168-82c3e7fdca5c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1542909168-82c3e7fdca5c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1542909168-82c3e7fdca5c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1542909168-82c3e7fdca5c??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8MXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">Bronwen Baxter&nbsp;<p></p>
<p></p>
</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Conor OBrien" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1579503841516-e0bd7fca5faa??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8NXx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">
Nadir Chandler
</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-lg-4 mb-4">
<div class="card border-0 shadow">
<div class="card-body py-4">
<div class="d-flex">
<img style="width:48px;height:48px" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080" alt="Photo by Daniil Lobachev" class="rounded-2 shadow" srcset="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080&amp;h=1080 1080w, https://images.unsplash.com/photo-1584308972272-9e4e7685e80f??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=150 150w, https://images.unsplash.com/photo-1584308972272-9e4e7685e80f??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=300 300w, https://images.unsplash.com/photo-1584308972272-9e4e7685e80f??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=768 768w, https://images.unsplash.com/photo-1584308972272-9e4e7685e80f??crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;ixid=MnwzNzg0fDB8MXxzZWFyY2h8Nnx8ZmFjZXxlbnwwfDJ8fHwxNjM4ODkxMDU2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1024 1024w" sizes="(max-width: 1080px) 100vw, 1080px" width="1080" height="1080">
<div class="ps-2">
<h4 editable="inline" class="rfs-7 ms-2">
Samira Goldsmith
</h4>
</div>
</div>
<div class="mt-4 text-muted">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="rating mt-3 text-success">
<div class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container py-5">
<div class="row min-vh-50 align-items-center justify-content-center">
<div class="col-lg-9 col-xl-8 text-center text-white p-5 bg-primary">
<div class="mb-4">
<div>
<h2 class="display-3 fw-bolder">Reach us</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
<br>&nbsp;eiusmod tempor incididunt ut labore et dolore magna aliqua.&nbsp;
</p>
</div>
</div>
<div class="mb-5">
<a class="btn btn-lg btn-light" href="https://goo.gl/maps/zy3NkDKV3x4iyUkL9" role="button">VIEW MAP</a>
</div>
<div class="border-top col-md-6 offset-md-3">
<div>
<h2 class="fw-bolder">
<br>
</h2>
</div>
</div>
<div class="mb-4">
<div>
<h2 class="fw-bolder">Working Hours</h2>
</div>
</div>
<div class="">
<div>
<p>Monday to Friday: 07:00 19:45</p>
<p>Saturday to Sunday: 11:00 17:00</p>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,73 @@
<section aria-label="features-16">
<div class="container py-4 py-lg-6">
<div class="row align-items-center flex-lg-row-reverse">
<div class="col-lg-6 mb-5 mb-lg-0 ">
<div class="px-4">
<div class="position-relative">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark mt-4 ms-4"> </div>
<img class="position-relative img-fluid" src="demo/img/team-1.jpg" alt="Team 1">
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-4">
<div editable="rich">
<h2 class="fw-bold display-5">Lorem ipsum dolor sit amet, consectetur.</h2>
</div>
</div>
<div class="mb-5">
<div editable="rich">
<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet.</p>
</div>
</div>
<div class="d-sm-flex align-items-center mb-4 overflow-hidden position-relative">
<div class="d-inline-flex">
<div>
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" class="text-success">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
</svg>
</div>
<div class="ms-3 align-self-center" editable="rich">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="d-sm-flex align-items-center mb-4">
<div class="d-inline-flex">
<div>
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" class="text-success">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
</svg>
</div>
<div class="ms-3 align-self-center" editable="rich">
<p>Suspendisse a lacus est</p>
</div>
</div>
</div>
<div class="d-sm-flex align-items-center mb-4">
<div class="d-inline-flex">
<div>
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" class="text-success">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
</svg>
</div>
<div class="ms-3 align-self-center" editable="rich">
<p>Etiam diam metus, lobortis non augue at</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,93 @@
<section aria-label="features-17">
<div class="container py-4 py-md-6">
<div class="row mb-4">
<div class="col-md-12">
<div class="text-center mb-4">
<div editable="rich">
<h2 class="display-2 fw-bolder">Features</h2>
</div>
</div>
<div class="text-center">
<div editable="rich">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Suspendisse a lacus est.&nbsp;
</p>
</div>
</div>
<!-- /-->
</div>
<!-- /col -->
</div>
<div class="row">
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="text-center ">
<div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-4 bg-body-tertiary bg-body-tertiary " style="width:72px;
height:72px;
">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" viewBox="0 0 16 16" style="" lc-helper="svg-icon" class="text-primary">
<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-7.839 9.166v.522c0 .256-.039.47-.117.641a.861.861 0 0 1-.322.387.877.877 0 0 1-.469.126.883.883 0 0 1-.471-.126.868.868 0 0 1-.32-.386 1.55 1.55 0 0 1-.117-.642v-.522c0-.257.04-.471.117-.641a.868.868 0 0 1 .32-.387.868.868 0 0 1 .471-.129c.176 0 .332.043.469.13a.861.861 0 0 1 .322.386c.078.17.117.384.117.641Zm.803.519v-.513c0-.377-.068-.7-.205-.972a1.46 1.46 0 0 0-.589-.63c-.254-.147-.56-.22-.917-.22-.355 0-.662.073-.92.22a1.441 1.441 0 0 0-.589.627c-.136.271-.205.596-.205.975v.513c0 .375.069.7.205.973.137.271.333.48.59.627.257.144.564.216.92.216.357 0 .662-.072.916-.216.256-.147.452-.356.59-.627.136-.274.204-.598.204-.973ZM0 11.926v4h1.459c.402 0 .735-.08.999-.238a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.59-.68c-.263-.156-.598-.234-1.004-.234H0Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.141 1.141 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082H.79V12.57Zm7.422.483a1.732 1.732 0 0 0-.103.633v.495c0 .246.034.455.103.627a.834.834 0 0 0 .298.393.845.845 0 0 0 .478.131.868.868 0 0 0 .401-.088.699.699 0 0 0 .273-.248.8.8 0 0 0 .117-.364h.765v.076a1.268 1.268 0 0 1-.226.674c-.137.194-.32.345-.55.454a1.81 1.81 0 0 1-.786.164c-.36 0-.664-.072-.914-.216a1.424 1.424 0 0 1-.571-.627c-.13-.272-.194-.597-.194-.976v-.498c0-.379.066-.705.197-.978.13-.274.321-.485.571-.633.252-.149.556-.223.911-.223.219 0 .421.032.607.097.187.062.35.153.489.272a1.326 1.326 0 0 1 .466.964v.073H9.78a.85.85 0 0 0-.12-.38.7.7 0 0 0-.273-.261.802.802 0 0 0-.398-.097.814.814 0 0 0-.475.138.868.868 0 0 0-.301.398Z"></path>
</svg>
</div>
<div class="">
<div editable="rich">
<h5 class="">Lorem ipsum</h5>
<p class="text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="text-center ">
<div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-4 bg-body-tertiary " style="width:72px;
height:72px;
">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="text-success" viewBox="0 0 16 16" style="" lc-helper="svg-icon">
<path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"></path>
</svg>
</div>
<div class="">
<div editable="rich">
<h5 class="">Lorem ipsum</h5>
<p class="text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="text-center ">
<div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-4 bg-body-tertiary " style="width:72px;
height:72px;
">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="text-danger" viewBox="0 0 16 16" style="" lc-helper="svg-icon">
<path d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707zm2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708zm5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708zm2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8z"></path>
</svg>
</div>
<div class="">
<div editable="rich">
<h5 class="">Lorem ipsum</h5>
<p class="text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<div class="text-center ">
<div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-4 bg-body-tertiary " style="width:72px;
height:72px;
">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="text-info" viewBox="0 0 16 16" style="" lc-helper="svg-icon">
<path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"></path>
</svg>
</div>
<div class="">
<div editable="rich">
<h5 class="">Lorem ipsum</h5>
<p class="text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,66 @@
<section aria-label="features-18">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg position-relative">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1 z-2">
<div class="pt-5 mt-5 mb-4">
<div>
<h2 class="display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
<p>Quickly design and customize responsive mobile-first sites with Bootstrap.</p>
</div>
</div>
<ul class="d-flex list-unstyled mt-auto ms-auto">
<a class="btn btn-link btn-sm text-white " href="#" role="button">Read more</a>
</ul>
</div>
<div class="overlay z-1"></div>
<div class="background-container z-0">
<img src="demo/img/team-1.jpg">
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg position-relative">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1 z-2">
<div class="pt-5 mt-5 mb-4">
<div>
<h2 class="display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
<p>Quickly design and customize responsive mobile-first sites with Bootstrap.</p>
</div>
</div>
<ul class="d-flex list-unstyled mt-auto ms-auto">
<a class="btn btn-link btn-sm text-white " href="#" role="button">Read more</a>
</ul>
</div>
<div class="overlay z-1"></div>
<div class="background-container z-0">
<img src="demo/img/team-2.jpg">
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg position-relative">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1 z-2">
<div class="pt-5 mt-5 mb-4">
<div>
<h2 class="display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
<p>Quickly design and customize responsive mobile-first sites with Bootstrap.</p>
</div>
</div>
<ul class="d-flex list-unstyled mt-auto ms-auto">
<a class="btn btn-link btn-sm text-white " href="#" role="button">Read more</a>
</ul>
</div>
<div class="overlay z-1"></div>
<div class="background-container z-0">
<img src="demo/img/team-1.jpg">
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,36 @@
<section aria-label="features-19">
<div class="container py-5">
<div class="row mb-3">
<div class="col-lg-8 mx-auto text-center">
<div class="mb-4">
<div>
<p>MARKETING</p>
<h1 class="display-2 fw-semibold">Get more clients</h1>
</div>
</div>
<div>
<div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam velit temporibus impedit maxime repellendus esse tempore odio voluptatum iusto consectetur voluptates.</p>
</div>
</div>
</div>
</div>
<div class="row mb-4 ">
<div class="col-lg-10 mx-auto text-center">
<div class="rounded-4 position-relative overflow-hidden">
<img class="img-fluid w-100 shadow" src="demo/img/team-1.jpg" alt="Team 1">
<a class="position-absolute top-50 start-50 translate-middle glightbox d-flex justify-content-center align-items-center z-2" href="https://www.youtube.com/watch?v=rPbrR6b6ZYs">
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" fill="currentColor" class="" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
</svg>
</a>
<div class="overlay z-1"></div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,35 @@
<section class="features-2 py-5 bg-alternate" aria-label="features-2">
<div class="row no-gutters">
<div class="col-lg-6">
<img alt="image" src="demo/img/team-1.jpg" alt="happy cat" loading="lazy" class="img-fluid">
</div>
<div class="col-lg-6 bg-primary bg-gradient text-white d-flex">
<div class="text-box align-self-center">
<h3 class="text-white mb-3">Code editor with syntax highlighting that updates in real time</h3>
<p>The html for sections blocks and components and this template are built using Bootstrap 5</p>
<ul class="list-block">
<li class="my-2">
<span>Intuitive building with simple drag and drop for sections, components and blocks/snippets.</span>
</span>
</li>
<li class="my-2">
<span>Code editor with syntax highglighting that updates in real time.</span>
</li>
<li class="my-2">
<span>Search and insert CCO images directly into the page. </span>
</li>
<li class="my-2">
<span>The html for sections blocks and components and this template are built using bootstrap 5.</span>
</li>
</ul>
<a class="btn btn-outline-light mt-3">
<span>Learn More</span>
</a>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,72 @@
<section class="features-3 py-5 bg-alternate" aria-label="features-3">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex align-items-center">
<div class="row">
<div class="col-md-12 mb-4">
<div class="d-flex align-items-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="72" height="72" color="#1064ea" fill="#fff">
<polyline points="336 176 225.2 304 176 255.8" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline>
<path d="M463.1,112.37C373.68,64.33,336.71,84.45,256,48,175.29,84.45,138.32,64.33,48.9,112.37,32.7,369.13,240.58,457.79,256,464,271.42,457.79,479.3,369.13,463.1,112.37Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path>
</svg>
</div>
<div class="p-4">
<h6 class="text-muted">
<a class="linking">Live code edit</a>
</h6>
<p class="mt-3">Code editor with syntax highglighting for html css and javascript that updates in real time.</p>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="d-flex align-items-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="72" height="72" color="#1064ea" fill="#fff">
<path d="M419.1,337.45a3.94,3.94,0,0,0-6.1,0c-10.5,12.4-45,46.55-45,77.66,0,27,21.5,48.89,48,48.89h0c26.5,0,48-22,48-48.89C464,384,429.7,349.85,419.1,337.45Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
<path d="M387,287.9,155.61,58.36a36,36,0,0,0-51,0l-5.15,5.15a36,36,0,0,0,0,51l52.89,52.89,57-57L56.33,263.2a28,28,0,0,0,.3,40l131.2,126a28.05,28.05,0,0,0,38.9-.1c37.8-36.6,118.3-114.5,126.7-122.9,5.8-5.8,18.2-7.1,28.7-7.1h.3A6.53,6.53,0,0,0,387,287.9Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
</svg>
</div>
<div class="p-4">
<h6 class="text-muted">
<a class="linking">Drag and drop</a>
</h6>
<p class="mt-3">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="d-flex align-items-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" width="72" height="72" color="#1064ea" fill="#fff" stroke-width="28">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M80,176a16,16,0,0,0-16,16V408c0,30.24,25.76,56,56,56H392c30.24,0,56-24.51,56-54.75V192a16,16,0,0,0-16-16Z"></path>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M160,176V144a64,64,0,0,1,64-64h0a64,64,0,0,1,64,64v32"></path>
</svg>
</div>
<div class="p-4">
<h6 class="text-muted">
<a class="linking">Bootstrap 5</a>
</h6>
<p class="mt-3">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="demo/img/team-1.jpg" alt="dog" loading="lazy" class="img-fluid" />
</div>
<div class="col-md-12 mt-3 text-center">
<a class="btn btn-primary ">View Details</a>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,66 @@
<section class="features-4 py-5 bg-primary bg-gradient text-white" aria-label="features-4">
<div class="container">
<div class="row">
<div class="col text-center">
<h2>Our product features</h2>
</div>
</div>
<div class="row text-center justify-content-sm-center no-gutters">
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="96" height="96" color="#fff" fill="#fff">
<polyline points="336 176 225.2 304 176 255.8" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline>
<path d="M463.1,112.37C373.68,96.33,336.71,84.45,256,48,175.29,84.45,138.32,96.33,48.9,112.37,32.7,369.13,240.58,457.79,256,464,271.42,457.79,479.3,369.13,463.1,112.37Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path>
</svg>
<h3 class="mt-3">Drag and drop</h3>
<p class="mt-2">Intuitive building with simple drag and drop for sections, components and blocks/snippets.</p>
<p class="mt-4">
<a>Learn More <i class="la la-angle-right"></i>
</a>
</p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="96" height="96" color="#fff" fill="#fff">
<path d="M419.1,337.45a3.94,3.94,0,0,0-6.1,0c-10.5,12.4-45,46.55-45,77.66,0,27,21.5,48.89,48,48.89h0c26.5,0,48-22,48-48.89C464,384,429.7,349.85,419.1,337.45Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
<path d="M387,287.9,155.61,58.36a36,36,0,0,0-51,0l-5.15,5.15a36,36,0,0,0,0,51l52.89,52.89,57-57L56.33,263.2a28,28,0,0,0,.3,40l131.2,126a28.05,28.05,0,0,0,38.9-.1c37.8-36.6,118.3-114.5,126.7-122.9,5.8-5.8,18.2-7.1,28.7-7.1h.3A6.53,6.53,0,0,0,387,287.9Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
</svg>
<h3 class="mt-3">Live code edit</h3>
<p class="mt-2">Code editor with syntax highglighting that updates in real time.</p>
<p class="mt-4">
<a>Learn More <i class="la la-angle-right"></i>
</a>
</p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" width="96" height="96" color="#fff" fill="#fff" stroke-width="28">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M80,176a16,16,0,0,0-16,16V408c0,30.24,25.76,56,56,56H392c30.24,0,56-24.51,56-54.75V192a16,16,0,0,0-16-16Z"></path>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M160,176V144a96,96,0,0,1,96-96h0a96,96,0,0,1,96,96v32"></path>
</svg>
<h3 class="mt-3">Bootstrap 5</h3>
<p class="mt-2">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
<p class="mt-4">
<a>Learn More <i class="la la-angle-right"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,44 @@
<section class="features-5 py-5 bg-alternate" aria-label="features-5">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-8 col-lg-6 m-md-auto ms-lg-0 me-lg-auto">
<img src="demo/img/team-1.jpg" alt="dog" loading="lazy" class="img-fluid" />
</div>
<div class="col-12 col-lg-6 col-xl-5 ms-sm-auto pt-5 pt-lg-0">
<h2>Open Source CMS Reinvented</h2>
<div class="row pt-4 pt-xl-5">
<div class="col-12 col-sm-6 col-xl-5">
<h4>
<strong>Drag and drop</strong>
</h4>
<p>Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
</div>
<div class="col-12 col-sm-6 col-xl-5 m-auto pt-3 pt-sm-0">
<h4>
<strong>Live code edit</strong>
</h4>
<p>Code editor with syntax highglighting that updates in real time.</p>
</div>
</div>
<div class="row pt-3">
<div class="col-12 col-sm-6 col-xl-5">
<h4>
<strong>Bootstrap 5</strong>
</h4>
<p>The html for sections blocks and components and this template are built using bootstrap 5</p>
</div>
<div class="col-12 col-sm-6 col-xl-5 m-auto pt-3 pt-sm-0">
<h4>
<strong>Google fonts</strong>
</h4>
<p>Use any of the hundreds fonts from google fonts for your design</p>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,40 @@
<section class="features-6 py-5 bg-alternate" aria-label="features-6">
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2>Our product features</h2>
</div>
</div>
<div class="row text-center justify-content-center">
<div class="col-12 col-sm-4 col-xl-3 m-md-auto">
<div>
<img loading="lazy" src="demo/img/illustrations.co/109-map-location.svg" alt="map location">
<h3>Drag and drop</h3>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-sm-4 col-xl-3 m-md-auto">
<div>
<img loading="lazy" src="demo/img/illustrations.co/107-healthy.svg" alt="dumbbell">
<h3>Live code editor</h3>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-sm-4 col-xl-3 m-md-auto">
<div>
<img loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell">
<h3>Bootstrap 5</h3>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,50 @@
<section class="features-7 py-5 bg-alternate" aria-label="features-7">
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2>Our product features</h2>
</div>
</div>
<div class="row text-center justify-content-center">
<div class="col-12 col-md-6 col-lg-3">
<div>
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
<h3>Drag and drop</h3>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div>
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
<h3>Live code editor</h3>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div>
<img alt="dumbbell" loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg">
<h3>Bootstrap 5</h3>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using Bootstrap 5</p>
<a>Learn More</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div>
<img alt="namaste" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg">
<h3>Google fonts</h3>
<p class="lead text-muted mt-4">Use any of the hundreds fonts from google fonts for your design</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,90 @@
<section class="features-8 py-5 bg-alternate" aria-label="features-8">
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2>Our product features</h2>
</div>
</div>
<div class="row text-start mt-5">
<div class="col-12 col-md-4">
<div class="row">
<div class="col-3">
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
</div>
<div class="col-9">
<h4>Drag and drop</h4>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-3 pt-sm-4">
<div class="row">
<div class="col-3">
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
</div>
<div class="col-9">
<h4>Live code editor</h4>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-3 pt-sm-4">
<div class="row">
<div class="col-3">
<img alt="dumbbell" loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg">
</div>
<div class="col-9">
<h4>Bootstrap 5</h4>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
<div class="row text-start pt-3 pt-sm-4 pt-md-5">
<div class="col-12 col-md-4">
<div class="row">
<div class="col-3">
<img alt="namaste" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg">
</div>
<div class="col-9">
<h4>Google fonts</h4>
<p class="lead text-muted mt-4">Use any of the hundreds fonts from google fonts for your design</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-3 pt-sm-4">
<div class="row">
<div class="col-3">
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
</div>
<div class="col-9">
<h4>Drag and drop</h4>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-3 pt-sm-4">
<div class="row">
<div class="col-3">
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
</div>
<div class="col-9">
<h4>Bootstrap 5</h4>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,111 @@
<section class="features-9 py-5 bg-alternate" aria-label="features-9">
<div class="container">
<div class="row text-center">
<div class="col-12">
<h2>Our product features</h2>
</div>
</div>
<div class="row text-start mt-5">
<div class="col-12 col-sm-6 col-lg-3">
<div class="row">
<div class="col-3">
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
</div>
<div class="col-9">
<h4>Drag and drop</h4>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-sm-0">
<div class="row">
<div class="col-3">
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
</div>
<div class="col-9">
<h4>Live code editor</h4>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
<div class="row">
<div class="col-3">
<img alt="dumbbell" loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg">
</div>
<div class="col-9">
<h4>Bootstrap 5</h4>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
<div class="row">
<div class="col-3">
<img alt="namaste" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg">
</div>
<div class="col-9">
<h4>Google fonts</h4>
<p class="lead text-muted mt-4">Use any of the hundreds fonts from google fonts for your design</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
<div class="row text-start pt-3 pt-lg-5">
<div class="col-12 col-sm-6 col-lg-3">
<div class="row">
<div class="col-3">
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
</div>
<div class="col-9">
<h4>Drag and drop</h4>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-sm-0">
<div class="row">
<div class="col-3">
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
</div>
<div class="col-9">
<h4>Bootstrap 5</h4>
<p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
<div class="row">
<div class="col-3">
<img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
</div>
<div class="col-9">
<h4>Drag and drop</h4>
<p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
<a>Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
<div class="row">
<div class="col-3">
<img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
</div>
<div class="col-9">
<h4>Live code editor</h4>
<p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
<a>Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,121 @@
<footer class="footer-1" title="footer-1" data-v-save-global="index.html,.footer-1">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Vvveb</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Resources</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Contact</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" href="contact.html">Contact us</a>
<a href="" href="portfolio.html">Portfolio</a>
<a href="" href="about.html">About us</a>
<a href="" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>My account</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" href="user/order-tracking.html">Order tracking</a>
<a href="" href="user/wishlist.html">Wishlist</a>
<a href="" href="user/orders.html">Orders</a>
<a href="" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
<!--
<div class="row justify-content-end">
<div class="col-md-3 text-muted text-small mt-5">
&copy; <span data-v-global-current_year>2025</span> <span data-v-sitename>Vvveb</span>. Powered by <a href="https://vvveb.com" target="_blank">Vvveb</a>
</div>
</div>
-->
</div>
<div class="footer-copyright">
<div class="container">
<div class="d-flex flex-column flex-md-row">
<div class="text-muted flex-grow-1">
<a class="btn-link text-muted" href="/page/terms-conditions">Terms and conditions</a> |
<a class="btn-link text-muted" href="/page/privacy-policy">Privacy Policy</a>
</div>
<div class="text-muted">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>. <span>Powered by</span>
<a href="https://vvveb.com" class="btn-link text-muted" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,290 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-10" aria-label="footer-10" data-v-save-global="index.html,.footer-10" data-bs-theme="dark">
<div>
<div class="container border-bottom pb-3 pb-md-4">
<div class="row gy-3 align-items-center">
<div class="col-12 col-sm-6x col-md-4 col-xl-3">
<div class="footer-logo-wrapper">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6x col-md-8 col-xl-9">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex gap-2 gap-sm-3 gap-md-4">
<li>
<a href="#" class="fw-bold link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75">
Platform
</a>
</li>
<li>
<a href="#" class="fw-bold link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75">
Solutions
</a>
</li>
<li>
<a href="#" class="fw-bold link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75">
Resources
</a>
</li>
<li>
<a href="#" class="fw-bold link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75">
Pricing
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<section class="py-4 py-md-5 py-xl-6 py-xxl-8">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-3 fw-bold fs-6">Platform</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Overview
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Framer
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Extensions
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Connected
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Building
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Data
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-3 fw-bold fs-6">Solutions</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Operations
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Marketing
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Documents
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Product
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Finance
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Sales
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-3 fw-bold fs-6">Learn</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Events
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Integrations
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Learning
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Webinars
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Customer
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Webinars
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-3 fw-bold fs-6">Company</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
About
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Blog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Careers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Services
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Newsroom
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Developers
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="pb-4">
<div class="container">
<div class="row align-items-sm-center gy-3">
<div class="col-12 col-sm-6">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex gap-3 gap-xl-4">
<li>
<a href="#" class="fs-8 link-light text-decoration-none link-opacity-75-hover">
Legal
</a>
</li>
<li>
<a href="#" class="fs-8 link-light text-decoration-none link-opacity-75-hover">
Status
</a>
</li>
<li>
<a href="#" class="fs-8 link-light text-decoration-none link-opacity-75-hover">
Security
</a>
</li>
<li>
<a href="#" class="fs-8 link-light text-decoration-none link-opacity-75-hover">
Cookies
</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-3 gap-xl-4">
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container border-top pt-3 pt-md-4">
<div class="row">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,371 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-11" aria-label="footer-11" data-v-save-global="index.html,.footer-11" data-bs-theme="dark">
<div class="py-3 py-md-4 py-xl-5 border-bottom">
<div class="container">
<div class="row gy-3 gy-sm-0 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-3">
<li>
<a href="#" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-50-hover link-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<section class="py-4 py-md-5 py-xl-6">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Product</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
AI
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Docs
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Wikis
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Projects
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
What's New
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Solutions</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Enterprise
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Startups
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Education
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Nonprofits
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Managers
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Download</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
iOS & Android
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Mac & Windows
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Calendar
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Web Clipper
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
What's New
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Build</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Integrations
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Templates
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
API Docs
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Guides & Tutorials
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Hire a Consultant
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Get started</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Miro
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Sketch
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Framer
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Adobe XD
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Invision Studio
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Resources</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Pricing
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
About Us
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Careers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Media kit
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Email Us
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper mb-3 mb-md-4 mb-xl-5">
<h4 class="mb-2 fw-bold fs-6">Learn</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Customer Stories
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Help Center
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Webinars
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Blog
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Community
</a>
</li>
</ul>
</div>
<div class="link-wrapper">
<h4 class="mb-2 fw-bold fs-6">Explore</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-secondary">
Blog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Best practice
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Color wheel
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Support
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1
link-secondary">
Developers
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="py-3 py-md-4 py-xl-5 border-top">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,205 @@
<footer class="py-4 py-md-5 footer-12" aria-label="footer-12" data-v-save-global="index.html,.footer-12">
<div>
<div class="container">
<div class="row gy-3 align-items-center">
<div class="col-12 col-sm-5 col-md-4 col-lg-3">
<div class="footer-logo-wrapper text-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-7 col-md-8 col-lg-9">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-start gap-4">
<li>
<a href="#" class="link-opacity-75-hover link-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<section class="py-4 py-md-5 py-xl-6">
<div class="container">
<div class="row gy-3">
<div class="col-12 col-lg-7 col-xl-6">
<div class="widget">
<h4 class="mb-3">Subscribe to Our Newsletter</h4>
<p class="mb-4">
Don't miss out on the opportunity to be part of something great.
<br>
Subscribe now and let the journey begin!
</p>
<form action="#">
<div class="row gy-4">
<div class="col-12 col-md-8">
<div class="input-group">
<span class="input-group-text" id="email-newsletter-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
</svg>
</span>
<input type="email" class="form-control" id="email-newsletter" value="" placeholder="Email Address" aria-label="email-newsletter" aria-describedby="email-newsletter-addon" required>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="d-grid mb-3 mb-lg-0">
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-6 col-lg-2 col-xl-2">
<div class="link-wrapper">
<ul class="m-0 list-unstyled">
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Our Values
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Sustainability Efforts
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
CSR Initiatives
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Environmental Impact
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Community Outreach
</a>
</li>
<li>
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Diversity & Inclusion
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3 col-xl-4">
<div class="link-wrapper">
<ul class="m-0 list-unstyled">
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Shipping & Returns
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Refund Policy
</a>
</li>
<li class="mb-3">
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Warranty Information
</a>
</li>
<li>
<a href="#" class="link-secondary text-decoration-none link-opacity-75-hover">
Privacy Practices
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="py-3 py-md-4 py-xl-5 bg-body-tertiary ">
<div class="container">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-secondary text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6 order-0 order-lg-1">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-center justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,198 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-13" aria-label="footer-13" data-v-save-global="index.html,.footer-13" data-bs-theme="dark">
<div class="container border-bottom border-dark pb-4">
<div class="row gy-3 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper text-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="30" fill="currentColor" class="bi bi-facebook text-lightx" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-4 py-md-5">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Vvveb</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Resources</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Contact</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="contact.html">Contact us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="portfolio.html">Portfolio</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="about.html">About us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>My account</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/order-tracking.html">Order tracking</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/wishlist.html">Wishlist</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/orders.html">Orders</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container border-top border-dark pt-4">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-centerX justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,198 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-14" aria-label="footer-14" data-v-save-global="index.html,.footer-14" data-bs-theme="dark">
<div class="container border-bottom border-dark pb-4">
<div class="row gy-3 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper text-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="30" fill="currentColor" class="bi bi-facebook text-lightx" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-4 py-md-5">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Vvveb</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Resources</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Contact</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="contact.html">Contact us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="portfolio.html">Portfolio</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="about.html">About us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>My account</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/order-tracking.html">Order tracking</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/wishlist.html">Wishlist</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/orders.html">Orders</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container border-top border-dark pt-4">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-centerX justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,198 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-15" aria-label="footer-15" data-v-save-global="index.html,.footer-15" data-bs-theme="dark">
<div class="container border-bottom border-dark pb-4">
<div class="row gy-3 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper text-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="30" fill="currentColor" class="bi bi-facebook text-lightx" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-4 py-md-5">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Vvveb</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Resources</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Contact</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="contact.html">Contact us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="portfolio.html">Portfolio</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="about.html">About us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>My account</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/order-tracking.html">Order tracking</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/wishlist.html">Wishlist</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/orders.html">Orders</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container border-top border-dark pt-4">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-centerX justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,90 @@
<footer class="footer-2" title="footer-2" data-v-save-global="index.html,.footer-2">
<div class="container py-5">
<div class="row py-4">
<div class="col-md">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
<p class="font-italic text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<ul class="list-inline mt-4">
<li class="list-inline-item">
<a target="_blank" title="twitter">
<i class="la la-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="facebook">
<i class="la la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="instagram">
<i class="la la-instagram"></i>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="pinterest">
<i class="la la-pinterest"></i>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="vimeo">
<i class="la la-vimeo"></i>
</a>
</li>
</ul>
</div>
<div class="col-md">
<h6 class="text-uppercase font-weight-bold mb-4">Shop</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="text-muted">For Women</a>
</li>
<li class="mb-2">
<a class="text-muted">For Men</a>
</li>
<li class="mb-2">
<a class="text-muted">Stores</a>
</li>
<li class="mb-2">
<a class="text-muted">Our Blog</a>
</li>
</ul>
</div>
<div class="col-md">
<h6 class="text-uppercase font-weight-bold mb-4">Company</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="text-muted">Login</a>
</li>
<li class="mb-2">
<a class="text-muted">Register</a>
</li>
<li class="mb-2">
<a class="text-muted">Wishlist</a>
</li>
<li class="mb-2">
<a class="text-muted">Our Products</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-6 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Newsletter</h6>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.</p>
<div class="p-1 rounded border">
<div class="input-group">
<input type="email" placeholder="Enter your email address" aria-describedby="button-addon1" class="form-control border-0 shadow-0">
<div class="input-group-append">
<button id="button-addon1" type="submit" class="btn btn-link">
<i class="la la-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,122 @@
<footer class="footer-3 bg-dark text-white" title="footer-3" data-v-save-global="index.html,.footer-3" data-bs-theme="dark">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Vvveb</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Resources</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>Contact</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" href="contact.html">Contact us</a>
<a href="" href="portfolio.html">Portfolio</a>
<a href="" href="about.html">About us</a>
<a href="" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<div class="h6" data-v-menu-item-name>My account</div>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" href="user/order-tracking.html">Order tracking</a>
<a href="" href="user/wishlist.html">Wishlist</a>
<a href="" href="user/orders.html">Orders</a>
<a href="" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
<!--
<div class="row justify-content-end">
<div class="col-md-3 text-muted text-small mt-5">
&copy; <span data-v-global-current_year>2025</span> <span data-v-sitename>Vvveb</span>. Powered by <a href="https://vvveb.com" target="_blank">Vvveb</a>
</div>
</div>
-->
</div>
<div class="footer-copyright">
<div class="container">
<div class="d-flex flex-column flex-md-row">
<div class="text-muted flex-grow-1">
<a class="btn-link text-muted" href="/page/terms-conditions">Terms and conditions</a> |
<a class="btn-link text-muted" href="/page/privacy-policy">Privacy Policy</a>
</div>
<div class="text-muted">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>. <span>Powered by</span>
<a href="https://vvveb.com" class="btn-link text-muted" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,198 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-4" aria-label="footer-4" data-v-save-global="index.html,.footer-4" data-bs-theme="dark">
<div class="container border-bottom border-dark pb-4">
<div class="row gy-3 align-items-sm-center">
<div class="col-12 col-sm-6">
<div class="footer-logo-wrapper text-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="30" fill="currentColor" class="bi bi-facebook text-lightx" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-outline-lightbtn btn-outline-secondary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-4 py-md-5">
<div class="container" data-v-component-menu="footer" data-v-slug="main-footer">
<div class="row" data-v-menu-items>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Vvveb</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://themes.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Themes</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://plugins.vvveb.com/" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Plugins</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="content/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="product/index.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Shop</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Resources</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>User documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="https://github.com/givanz/VvvebJs/wiki" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Developer documentation</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="pricing.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Pricing</span>
</a>
</div>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="services.html" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" data-v-menu-item-url>
<span data-v-menu-item-name>Services</span>
</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>Contact</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="contact.html">Contact us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="portfolio.html">Portfolio</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="about.html">About us</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/return-form.html">Return form</a>
</div>
</nav>
</div>
<div class="col-md" data-v-menu-item data-v-if="category.children > 0">
<h6 class="mb-3 fw-bold text-light" data-v-menu-item-name>My account</h6>
<nav data-v-menu-item-recursive>
<div data-v-menu-item data-v-if="category.children == 0">
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/order-tracking.html">Order tracking</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/wishlist.html">Wishlist</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="user/orders.html">Orders</a>
<a href="" class="link-opacity-75 link-opacity-100-hover text-decoration-none link-light" href="cart/compare.html">Compare</a>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container border-top border-dark pt-4">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-centerX justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-offset-1 link-light d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,175 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-5" aria-label="footer-5" data-v-save-global="index.html,.footer-5" data-bs-theme="dark">
<div class="py-3 py-md-5 py-xl-8 py-xxl-10">
<div class="container">
<div class="row gy-4 gy-md-0">
<div class="col-12 col-md-6">
<div class="links">
<ul class="m-0 list-unstyled">
<li>
<a href="#" class="link-opacity-75-hover text-decoration-none link-light fs-1 lh-sm">
Shop
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover text-decoration-none link-light fs-1 lh-sm">
Products
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover text-decoration-none link-light fs-1 lh-sm">
Offers
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover text-decoration-none link-light fs-1 lh-sm">
Deals
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover text-decoration-none link-light fs-1 lh-sm">
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<section class="mb-4 mb-lg-5 mb-xl-7">
<div class="row">
<div class="col-6">
<div class="address">
<h4 class="mb-3 h5 text-white">Head Office</h4>
<address class="mb-3 fs-7 text-light opacity-75">
West 21st Street Brooklyn NY
<br>
West 21st Street Brooklyn NY
</address>
<p class="m-0">
<a class="fs-7 link-light link-opacity-75 link-opacity-100-hover text-decoration-none" href="tel:+1-479-589-0693">
1-479-589-0693
</a>
</p>
</div>
</div>
<div class="col-6">
<div class="address">
<h4 class="mb-3 h5 text-white">Branch Office</h4>
<address class="mb-3 fs-7 text-light opacity-75">
West 21st Street Brooklyn NY
<br>
West 21st Street Brooklyn NY
</address>
<p class="m-0">
<a class="fs-7 link-light link-opacity-75 link-opacity-100-hover text-decoration-none" href="tel:+540-284-4036">
550 550 505
</a>
</p>
</div>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-6">
<div class="address">
<h4 class="mb-3 h5 text-white">Warehouse</h4>
<address class="m-0 fs-7 text-light opacity-75">
West 21st Street Brooklyn NY
<br>
West 21st Street Brooklyn NY
</address>
</div>
</div>
<div class="col-6">
<div class="social-media">
<h4 class="mb-3 h5 text-white">Connect</h4>
<ul class="m-0 list-unstyled d-flex justify-content-start gap-3">
<li>
<a href="#" class="link-opacity-75 link-opacity-100-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-opacity-100-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-opacity-100-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-opacity-100-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div>
<div class="container border-top border-dark py-3 py-md-5 py-xl-8 py-xxl-10">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link">
<ul class="m-0 list-unstyled d-flex justify-content-center justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light fs-8 d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light fs-8 d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light fs-8 d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light fs-8 d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light fs-8 d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,325 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-6" aria-label="footer-6" data-v-save-global="index.html,.footer-6" data-bs-theme="dark">
<section class="pb-5 pb-md-6 pb-xl-8">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Mission</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Our Values
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Sustainability Efforts
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
CSR Initiatives
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Environmental Impact
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Community Outreach
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Diversity & Inclusion
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Products</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Product Catalog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
New Arrivals
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Best Sellers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Product Reviews
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Product Comparison
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Request a Demo
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Services</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Offerings
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Packages
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Service Areas
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Pricing
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Testimonials
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Request a Quote
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Information</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Blog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Resources
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Case Studies
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Whitepapers
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Guides & Tutorials
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Infographics
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Support</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Help Center
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
FAQ
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Troubleshooting
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Report a Problem
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div>
<h4 class="mb-3 fw-bold fs-6">Connect</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Social Media
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Live Chat
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light">
Feedback
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
Newsletter
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="pb-3">
<div class="container">
<div class="row gy-3 align-items-center">
<div class="col-12 col-sm-6">
<div class="footer-logo text-center text-sm-start">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="social-media">
<ul class="m-0 list-unstyled d-flex justify-content-center justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16">
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dribbble" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container pt-3 border-top border-light-subtle">
<div class="row gy-3 align-items-lg-center">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-12 col-lg-6 order-0 order-lg-1">
<div>
<ul class="m-0 list-unstyled d-flex justify-content-center justify-content-lg-end gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Shipping
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Refund
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Warranty
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center">
Security
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,216 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-7" aria-label="footer-7" data-v-save-global="index.html,.footer-7" data-bs-theme="dark">
<div>
<div class="container">
<div class="row gy-3">
<div class="col-12">
<div class="footer-logo-wrapper">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="py-4 pb-md-6 pb-xl-7 pb-xxl-10">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary">Company</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
About Us
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Our Team
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Company Culture
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Contact Us
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Careers
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary">Products</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Product Catalog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
New Arrivals
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Best Sellers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Product Reviews
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Sample products
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary">Information</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Blog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Resources
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Documentation
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Tutorials
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary">Support</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Feedback
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Help Desk
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Support center
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="pb-3">
<div class="container">
<div class="row gy-2">
<div class="col-12 col-sm-9">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-start gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Terms
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Disclaimer
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center">
Compliance
</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-3">
<div class="social-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-start justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container border-top border-light-subtle pt-3">
<div class="row">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,221 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-8" aria-label="footer-8" data-v-save-global="index.html,.footer-8" data-bs-theme="dark">
<div>
<div class="container">
<div class="row gy-3">
<div class="col-12">
<div class="footer-logo-wrapper">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="py-4 pb-md-6 pb-xl-7 pb-xxl-10">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase">Company</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
About Us
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Our Team
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Mission & Values
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Company Culture
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Contact Us
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Careers
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase">Products</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Product Catalog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
New Arrivals
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Best Sellers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Product Reviews
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Request a Demo
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase">Information</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Blog
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Resources
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Whitepapers
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Infographics
</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md-3">
<div class="link-wrapper">
<h4 class="mb-2 fs-10 fw-light text-secondary text-uppercase">Support</h4>
<ul class="m-0 list-unstyled">
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-50-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Feedback
</a>
</li>
<li class="mb-1">
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Help Desk
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light fw-medium">
Live Chat
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="pb-3">
<div class="container">
<div class="row gy-2">
<div class="col-12 col-sm-9">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-start gap-2 gap-md-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Privacy
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Terms
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center pe-2 pe-md-3">
Disclaimer
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-secondary fs-8 d-flex align-items-center">
Compliance
</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-3">
<div class="social-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-start justify-content-sm-end gap-2">
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
</svg>
</a>
</li>
<li>
<a href="#" class="btn btn-dark rounded-circle rounded-circle-xs link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container border-top border-light-subtle pt-3">
<div class="row">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,87 @@
<footer class="py-4 py-md-5 bg-dark text-white footer-9" aria-label="footer-9" data-v-save-global="index.html,.footer-9" data-bs-theme="dark">
<div class="py-6 py-md-8 py-xl-10">
<div class="container">
<div class="row gy-3">
<div class="col-12">
<div class="footer-logo-wrapper text-center">
<div data-v-component-site>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
</div>
</div>
</div>
<div class="col-12">
<div class="link-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-center gap-3">
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75 fs-7">
Platform
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75 fs-7">
Solutions
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75 fs-7">
Resources
</a>
</li>
<li>
<a href="#" class="link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light link-opacity-75 fs-7">
Pricing
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row gy-3 gy-sm-0 align-items-sm-center">
<div class="col-sm-6">
<div class="small d-block mb-1 text-body">
&copy; <span data-v-global-current_year>2025</span>
<span data-v-global-site.description.title>Vvveb</span>
</div>
<div class="small d-block text-body">
<span>Powered by</span>
<a href="https://vvveb.com" class="link-opacity-0 link-opacity-75-hover link-light text-decoration-none" target="_blank">Vvveb</a>
</div>
</div>
<div class="col-sm-6">
<div class="social-media-wrapper">
<ul class="m-0 list-unstyled d-flex justify-content-center justify-content-sm-end gap-3">
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
</a>
</li>
<li>
<a href="#" class="link-opacity-75-hover link-light">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,49 @@
<header class="hero-1" aria-label="hero-1">
<div class="container">
<div class="heading">
<h1 class="display-1">Open Source CMS Reinvented</h1>
<h2 class="fs-3 text-muted">Powerful and easy to use drag and drop website builder for blogs, websites or ecommerce stores.</h2>
<div class="btns">
<a class="btn btn-primary btn-lg btn-shadow" href="/page/download" role="button">
<span>Create website</span>
<i class="la la-caret-right"></i>
</a>
<a class="btn btn-outline-secondary btn-lg btn-shadow" href="/download.php" role="button">
<span>Free Download</span>
<i class="la la-arrow-down"></i>
</a>
<!--
<div class="nav-item dropdown">
<a class="btn btn-outline-primary nav-link dropdown-toggle" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/" role="button">Live demo <b></b></a>
<div class="dropdown-menu">
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/">Page builder</a>
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin">Admin dashboard</a>
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com">Frontend</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" target="_blank" href="https://vercel-vvveb-commerce.vercel.app/">Next.js Frontend GraphQL</a>
</div>
</div>
-->
</div>
</div>
<div class="frame mx-auto">
<!--
<video loading="lazy" src="video/intro.mp4" width="1280" muted="true" playsinline="true" loop="true" controls="true" poster="https://www.vvveb.com/img/dark-theme.webp"></video> -->
<img src="https://www.vvveb.com/img/dark-theme.webp" class="img-fluid">
</div>
</div>
<div class="overlay">
</div>
<div class="background-container">
<!-- <img src="demo/img//background.svg" alt="Hero background" loading="lazy"> -->
</div>
</header>

View File

@@ -0,0 +1,43 @@
<header class="hero-10 pt-5" aria-label="hero-10">
<div class="container py-5">
<div class="row mb-4 align-items-center flex-lg-row-reverse">
<div class="col-md-6 col-xl-7 mb-4 mb-lg-0 " style="">
<div class="rounded-4 position-relative overflow-hidden">
<img class="img-fluid w-100 shadow" src="demo/img/team-1.jpg" alt="Team 1">
<a class="position-absolute top-50 start-50 translate-middle glightbox d-flex justify-content-center align-items-center z-2" href="https://www.youtube.com/watch?v=rPbrR6b6ZYs">
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
</svg>
</a>
<div class="overlay z-1"></div>
</div>
</div>
<div class="col-md-6 col-xl-5">
<div class="mb-3">
<div>
<h1 class="fw-bolder display-2">Next generation website builder</h1>
</div>
</div>
<div class="mb-4">
<div>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-outline-primary btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,48 @@
<header class="hero-11 py-5" aria-label="hero-11">
<div class="container-fluid pt-5">
<div class="row mb-4 mb-lg-5 justify-content-lg-between">
<div class="col-3 col-md-1 col-lg-2 d-none d-md-flex align-items-center">
<div class="bg-dark ratio ratio-1x1 opacity-25"> </div>
</div>
<div class="col-4 col-md-3 col-lg-2 d-flex flex-column justify-content-between">
<div class="bg-primary ratio ratio-1x1 opacity-25"> </div>
<div>
<img class="img-fluid" src="demo/img/product-2.webp" alt="Team 1">
</div>
</div>
<div class="col-4 col-md-4 col-lg-3">
<img class="img-fluid" src="demo/img/product.webp" alt="Team 1">
</div>
<div class="col-4 col-md-3 col-lg-2 d-flex flex-column justify-content-between">
<div>
<img class="img-fluid" src="demo/img/product-2.webp" alt="Team 1">
</div>
<div class="bg-primary ratio ratio-1x1 opacity-25"> </div>
</div>
<div class="col-3 col-md-1 col-lg-2 d-none d-md-flex align-items-center">
<div class="bg-dark ratio ratio-1x1 opacity-25"> </div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="text-center col-md-8">
<div>
<h1 class="display-2 fw-bold">Next generation website builder</h1>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="text-center col-xxl-6 col-md-8">
<div>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">Free download</a>
<a class="btn btn-outline-primary btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,30 @@
<header class="hero-12 py-5" aria-label="hero-12">
<div class="container-fluid col-xxl-8">
<div class="row flex-lg-nowrap align-items-center g-5">
<div class="order-lg-1 w-100">
<img style="clip-path: polygon(25% 0%, 100% 0%, 100% 99%, 0% 100%);" class="w-100" src="demo/img/team-1.jpg" alt="Team 1">
</div>
<div class="col-lg-6 col-xl-5 text-center text-lg-start pt-lg-5 mt-xl-4">
<div class="mb-4">
<div>
<h1 class="display-2 fw-bold">Next generation website builder</h1>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">Free download</a>
<a class="btn btn-outline-primary btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,31 @@
<header class="hero-13 py-5" aria-label="hero-13">
<div class="container-fluid col-xxl-8">
<div class="row flex-lg-nowrap align-items-center g-5">
<div class="order-lg-1 w-100">
<video class="min-vh-100" autoplay="true" preload="true" muted="true" loop="true" playsinline="true" style="object-fit: cover; object-position: 50% 50%;" src="../../media/demo/sample.webm" poster="demo/img/video-1.webp" type="video/mp4">
</video>
</div>
<div class="col-lg-6 col-xl-5 text-center text-lg-start pt-lg-5 mt-xl-4">
<div class="mb-4">
<div>
<h1 class="display-2 fw-bold">Next generation website builder</h1>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">Free download</a>
<a class="btn btn-outline-primary btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,130 @@
<header class="hero-14 py-5" aria-label="hero-14">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="pe-lg-3">
<h1 class="display-3 fw-bold mb-2 mb-md-3">The next generation <span class="text-primary">website builder</span>
</h1>
<p class="lead mb-4">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="text-primary">
<svg class="bi bi-chat-right-fill" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M14 0a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"></path>
</svg>
</div>
</div>
<div class="ms-3">
<h6 class="mb-0">24/7</h6>
<p>Customer Support</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex">
<div class="text-primary">
<svg class="bi bi-shield-fill-check" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647z" fill-rule="evenodd"></path>
</svg>
</div>
<div class="ms-3">
<h6 class="mb-0">99.99%</h6>
<p>Uptime Guarantee</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ps-lg-5">
<div class="card shadow-lg border border-primary text-white text-left h-100">
<div class="card-body bg-primary p-4 p-xl-5">
<h2 class="pb-3 text-center">Start Today!</h2>
<form action="/user/signup" method="post" enctype="multipart/form-data" id="signup-form">
<input type="hidden" name="csrf" data-v-csrf>
<label class="form-label" for="username">Username</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1">
<i class="la la-user"></i>
</span>
<input name="username" id="username" class="form-control form-control-lg border-start-0 border-start-0" placeholder="Username" type="text" required>
</div>
<!--
<label class="form-label" for="first-name">First name</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1"> <i class="la la-user"></i> </span>
<input name="first_name" id="first-name" class="form-control form-control-lg border-start-0 border-start-0" placeholder="First Name" type="text" required>
</div>
<label class="form-label" for="last-name">Last name</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1"> <i class="la la-user"></i> </span>
<input name="last_name" id="last-name" class="form-control form-control-lg border-start-0 border-start-0" placeholder="Last Name" type="text" required>
</div>
-->
<label class="form-label" for="email">Email address</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1">
<i class="la la-envelope"></i>
</span>
<input name="email" id="email" class="form-control form-control-lg border-start-0 border-start-0" placeholder="Email address" type="email" required>
</div>
<label class="form-label" for="password">Password</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1">
<i class="la la-lock"></i>
</span>
<input type="password" minlength="6" autocorrect="off" class="form-control form-control-lg border-start-0 border-start-0" placeholder="Password" id="password" name="password" autocomplete="new-password" value="" aria-label="Password" required>
<button class="btn px-3 border border-start-0 bg-body" type="button" onclick="togglePasswordInput(this, 'password')">
<i class="la la-eye-slash"></i>
</button>
</div>
<label class="form-label" for="new-password">Repeat password</label>
<div class="mb-3 input-group">
<span class="input-group-text bg-body pe-1">
<i class="la la-lock"></i>
</span>
<input type="password" minlength="6" autocorrect="off" autocomplete="new-password" class="form-control form-control-lg border-start-0 border-start-0" placeholder="Repeat password" id="confirm_password" name="confirm_password" value="" aria-label="Repeat Password" required>
<button class="btn px-3 border border-start-0 bg-body" type="button" onclick="togglePasswordInput(this, 'confirm_password')">
<i class="la la-eye-slash"></i>
</button>
</div>
<!-- if these hidden inputs are filled then ignore, robots -->
<input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
<div class="mb-3">
<div class="form-check mb-1">
<input type="checkbox" class="form-check-input" id="terms" name="terms" required>
<label class="form-check-label" for="terms">
</span>I agree to</span>
<a href="page/terms-conditions" target="_blank" data-v-url="content/page/index" data-v-url-params='{"slug":"terms-conditions"}'>Terms and conditions</a>
</label>
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-dark btn-signup btn-lg my-3">Get started</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,48 @@
<header class="hero-2" aria-label="hero-2">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 mb-5 ms-5" data-aos="fade-up" data-aos-delay="0">
<h1 class="heading">The next generation website builder</h1>
<p class="subheading mb-5">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<p>
<a href="https://www.vvveb.com" class="btn btn-light">
<span>&#9889;</span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-outline-light">Live Demo</a>
</p>
</div>
<div class="col-lg-5" data-aos="fade-up" data-aos-delay="100">
<a href="https://www.youtube.com/watch?v=3xsP3u-CVO4" class="video-wrap glightbox">
<span class="play-button">
<i class="la la-play"></i>
</span>
<img src="demo/img/team-1.jpg" loading="lazy" alt="Video image" class="img-fluid">
</a>
</div>
</div>
</div>
<div class="separator bottom">
<svg height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" fill="var(--bs-body-bg)" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px" width="100%" height="250">
<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/team-2.jpg">
</div>
</header>

View File

@@ -0,0 +1,48 @@
<header class="hero-3" aria-label="hero-3">
<div class="container vh-100">
<div>
<div class="row align-items-center justify-content-center text-center">
<div class="col-lg-12">
<h1 class="heading mb-4 display-3" data-aos="fade-up" data-aos-delay="100">Next generation website builder</h1>
<div class="col-lg-8 mx-auto">
<h2 class="h4 lh-base fw-normal" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h2>
</div>
<div class="buttons" data-aos="fade-up" data-aos-delay="300">
<a href="https://www.vvveb.com" class="btn btn-primary">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a href="https://demo.vvveb.com" class="btn btn-light">Live Demo</a>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="100" fill="var(--bs-body-bg)" preserveAspectRatio="none"><defs></defs><title>rough-edges-bottom</title><path d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
</div>
-->
<!--
<div class="separator top">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="200" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
</div>
-->
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,48 @@
<header class="hero-3" aria-label="hero-3">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-center">
<div class="col-lg-12">
<h1 class="heading mb-4 display-2" data-aos="fade-up" data-aos-delay="100">Next generation website builder</h1>
<div class="col-lg-8 mx-auto">
<h2 class="h3 lh-base fw-normal" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h2>
</div>
<div class="buttons" data-aos="fade-up" data-aos-delay="300">
<a href="https://www.vvveb.com" class="btn btn-primary btn-lg">
<span>Free Download</span>
<span>&#9889;</span>
</a>
<a href="https://demo.vvveb.com" class="btn btn-light btn-lg">Live Demo</a>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="100" fill="var(--bs-body-bg)" preserveAspectRatio="none"><defs></defs><title>rough-edges-bottom</title><path d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
</div>
<div class="separator top">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="200" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
</div>
-->
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,47 @@
<header class="hero-4" aria-label="hero-4">
<div class="container">
<div class="row align-items-center justify-content-center text-center">
<div class="" data-aos="fade-up" data-aos-delay="100">
<h1 class="heading mb-3 display-4">The next generation website builder</h1>
<h4 class="subheading mb-5">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h4>
<img width="480" src="demo/img/team-1.jpg" class="img-fluid shadow rounded-4">
<div class="buttons">
<a href="https://www.vvveb.com" class="btn btn-primary btn-lg">
<span></span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-white btn-lg">Live Demo</a>
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,57 @@
<header class="hero-5" aria-label="hero-5">
<div class="container">
<div class="row align-items-center d-flex justify-content-between">
<div class="col-12 col-md-6 pb-5 order-2 order-sm-2 ">
<h1 class="fw-bold mb-3 mt-5 display-3">The next generation website builder.</h1>
<p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
<div class="col-12 col-md-6 order-sm-1 order-md-2">
<div class="rounded-4 position-relative overflow-hidden">
<img class="img-fluid w-100 shadow" src="demo/img/team-1.jpg" alt="Team 1">
<a class="position-absolute top-50 start-50 translate-middle glightbox d-flex justify-content-center align-items-center z-2" href="https://www.youtube.com/watch?v=rPbrR6b6ZYs">
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
</svg>
</a>
<div class="overlay z-1"></div>
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,45 @@
<header class="hero-6" aria-label="hero-6">
<div class="container">
<div class="row align-items-center d-flex justify-content-between">
<div class="col-12 col-md-6 pb-5 order-2 order-sm-2 ">
<h1 class="fw-bold mb-3 mt-5 display-3">The next generation website builder.</h1>
<p class="lead text-white">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2 mt-4">
<a class="btn btn-primary btn-lg ms-0" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
<div class="col-12 col-md-6 order-sm-1 order-md-2">
<img src="demo/img/team-1.jpg" class="shadow img-fluid rounded-4" loading="lazy">
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
</div>
</header>

View File

@@ -0,0 +1,52 @@
<header class="hero-7" aria-label="hero-7">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start g-5">
<div class="col-lg-5">
<img src="demo/img/team-1.jpg" class="img-fluid shadow">
</div>
<div class="col-lg-7">
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
<h2 class="h3 col-lg-8" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>
<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
<a href="https://www.vvveb.com" class="btn btn-primary btn-lg">
<span></span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-white btn-lg">Live Demo</a>
</div>
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,65 @@
<header class="hero-8 pt-5" aria-label="hero-8">
<div class="container py-5">
<div class="row mb-4 mb-lg-5">
<div class="col-lg-9 mx-auto text-center">
<div class="mb-4">
<div>
<h1 class="display-2 fw-bold text-white">Next generation website builder</h1>
</div>
</div>
<div class="mb-4">
<div>
<p class="h4 lh-base fw-normal aos-init aos-animate text-white">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">Free download</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
<div class="row mb-4 ">
<div class="col-lg-10 mx-auto text-center">
<div class="rounded-4 position-relative overflow-hidden">
<img class="img-fluid w-100 shadow" src="demo/img/team-1.jpg" alt="Team 1">
<a class="position-absolute top-50 start-50 translate-middle glightbox d-flex justify-content-center align-items-center z-2" href="https://www.youtube.com/watch?v=rPbrR6b6ZYs">
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
</svg>
</a>
<div class="overlay z-1"></div>
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="overlay">
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background">
</div>
</header>

View File

@@ -0,0 +1,40 @@
<header class="hero-9 pt-5" aria-label="hero-9">
<div class="container py-5">
<div class="row mb-4 mb-lg-5">
<div class="col-lg-9 mx-auto text-center">
<div class="mb-4">
<div>
<h1 class="display-2 fw-bold">Next generation website builder</h1>
</div>
</div>
<div class="mb-4">
<div>
<p class="h4 lh-base fw-normal">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="d-grid d-lg-block gap-2">
<a class="btn btn-primary btn-lg" href="#" role="button">Free download</a>
<a class="btn btn-outline-primary btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
<div class="row mb-4 ">
<div class="col-lg-10 mx-auto text-center">
<div class="rounded-4 position-relative overflow-hidden">
<img class="img-fluid w-100 shadow" src="demo/img/team-1.jpg" alt="Team 1">
<a class="position-absolute top-50 start-50 translate-middle glightbox d-flex justify-content-center align-items-center z-2" href="https://www.youtube.com/watch?v=rPbrR6b6ZYs">
<svg xmlns="http://www.w3.org/2000/svg" width="5em" height="5em" fill="currentColor" class="text-white" viewBox="0 0 16 16" lc-helper="svg-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
</svg>
</a>
<div class="overlay z-1"></div>
</div>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,163 @@
<header class="hero-slider" aria-label="hero-slider">
<div class="swiper" data-slides-per-view="1" data-draggable="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start">
<div class="col-lg-6">
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
<div class="col-lg-6">
<img src="demo/img/team-1.jpg" class="shadow" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-center">
<div class="col-lg-12">
<h1 class="heading text-white mb-3 display-4 fw-bold" data-aos="fade-up" data-aos-delay="100">The fastest and leanest CMS</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start g-5">
<div class="col-lg-6">
<img src="demo/img/team-2.jpg" class="shadow" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
</div>
<script id="swiper-js" src="/js/libs/swiper/swiper-bundle.min.js"></script>
<link id="swiper-css" href="/js/libs/swiper/swiper-bundle.min.css" rel="stylesheet">
<script>
var swiper = [];
function initSwiper(onlyNew = false) {
var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
list.forEach(el => {
//el.dataset
let params = {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
};
for (i in el.dataset) {
let param = el.dataset[i];
if (param[0] = '{') {
param = JSON.parse(param);
}
params[i] = param;
}
swiper.push(new Swiper(el, params))
//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))
});
}
initSwiper();
</script>
</header>

View File

@@ -0,0 +1,89 @@
<section class="py-5" aria-label="how-it-works-1">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width:120px;height:120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<circle cx="176" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<circle cx="400" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M48 80h64l48 272h256" />
<path d="M160 288h249.44a8 8 0 007.85-6.43l28.8-144a8 8 0 00-7.85-9.57H128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 1</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="position-absolute d-none d-lg-block" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<path d="M320 96H88a40 40 0 00-40 40v240a40 40 0 0040 40h334.73a40 40 0 0040-40V239" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 160l144 112 87-65.67" />
<circle cx="431.95" cy="128.05" r="47.95" />
<path d="M432 192a63.95 63.95 0 1163.95-63.95A64 64 0 01432 192zm0-95.9a32 32 0 1031.95 32 32 32 0 00-31.95-32z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 2</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<rect x="336" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="272" y="272" width="48" height="64" rx="8" ry="8" />
<rect x="416" y="416" width="48" height="64" rx="8" ry="8" />
<rect x="432" y="272" width="48" height="48" rx="8" ry="8" />
<rect x="272" y="432" width="48" height="48" rx="8" ry="8" />
<rect x="336" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="288" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="288" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 3</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#fff" fill="#999" viewBox="0 0 512 512">
<rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60" d="M48 192h416M128 300h48v20h-48z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 4</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,89 @@
<section class="py-5" aria-label="how-it-works-2">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width:120px;height:120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<circle cx="176" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<circle cx="400" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M48 80h64l48 272h256" />
<path d="M160 288h249.44a8 8 0 007.85-6.43l28.8-144a8 8 0 00-7.85-9.57H128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 1</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="position-absolute d-none d-lg-block" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<path d="M320 96H88a40 40 0 00-40 40v240a40 40 0 0040 40h334.73a40 40 0 0040-40V239" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 160l144 112 87-65.67" />
<circle cx="431.95" cy="128.05" r="47.95" />
<path d="M432 192a63.95 63.95 0 1163.95-63.95A64 64 0 01432 192zm0-95.9a32 32 0 1031.95 32 32 32 0 00-31.95-32z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 2</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<rect x="336" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="272" y="272" width="48" height="64" rx="8" ry="8" />
<rect x="416" y="416" width="48" height="64" rx="8" ry="8" />
<rect x="432" y="272" width="48" height="48" rx="8" ry="8" />
<rect x="272" y="432" width="48" height="48" rx="8" ry="8" />
<rect x="336" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="288" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="96" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="48" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<rect x="96" y="336" width="80" height="80" rx="8" ry="8" />
<rect x="48" y="288" width="176" height="176" rx="16" ry="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 3</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
<div class="d-none d-lg-block position-absolute" style="top:50px; right:-25px">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="32" stroke="#000" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" />
</svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-center position-relative">
<div class="mx-auto border border-2 border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="48" color="#333" fill="#999" viewBox="0 0 512 512">
<rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60" d="M48 192h416M128 300h48v20h-48z" />
</svg>
</div>
<h4 class="mt-3 fs-5">Step 4</h4>
<p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Lorem ipsum dolor sit ame consectetur.</p>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,44 @@
<section class="py-5" aria-label="how-it-works-3">
<div class="container">
<div class="row text-center mb-4">
<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
<p class="text-muted mb-0 fw-light">Steps</p>
<h2>How It Works</h2>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top:-3.5rem;">
1
</div>
<h5 class="mt-3 mb-4">Step 1</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
2
</div>
<h5 class="mt-3 mb-4">Step 2</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card rounded-0 text-center p-3 px-5 mb-5 mb-lg-0">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
3
</div>
<h5 class="mt-3 mb-4">Step 3</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,42 @@
<section class="py-5" aria-label="how-it-works-4">
<div class="container">
<div class="row text-center mb-4">
<div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
<p class="text-muted mb-0 fw-light">Steps</p>
<h2>How It Works</h2>
<p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-lg-9">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top:-3.5rem;">
1
</div>
<h5 class="mt-3 mb-4">Step 1</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
2
</div>
<h5 class="mt-3 mb-4">Step 2</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card rounded-0 text-center p-3 px-5 mb-5">
<div class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4" style="width: 4rem; height:4rem; margin-top: -3.5rem;">
3
</div>
<h5 class="mt-3 mb-4">Step 3</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,63 @@
<section class="py-5" aria-label="how-it-works-5">
<div class="container">
<div class="row justify-content-center text-center mb-4">
<div class="col-lg-8 col-xxl-7">
<span class="text-muted">Steps</span>
<h2 class="display-5 fw-bold">How it Works</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
1
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
2
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-auto text-center">
<div class="d-flex rounded-circle align-items-center justify-content-center bg-primary text-white fs-3 fw-bold border border-white border-4 me-1" style="width: 4rem; height:4rem;">
3
</div>
<div class="text-muted fw-light mt-1">
Step
</div>
</div>
<div class="col">
<div class="card rounded-0 py-4 px-5 mb-5">
<h5>Headline</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing .</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,475 @@
<nav class="navigation-1 clearfix" data-v-save-global="blank.html,.navigation-1">
<div class="navbar navbar-expand-md">
<div class="container">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
<a class="nav-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
<span data-v-menu-item-content data-v-if="category.content">
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
<span data-v-menu-item-content data-v-if="category.content">
<div class="row">
<div class="col-6 align-self-center">
<img src="demo/img/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
</div>
<div class="col-6">
<h4>Features</h4>
<p class="text-muted">Just a few mentions, but there is more</p>
<ul class="list-unstyled">
<li class="text-primary">Page builder</li>
<li class="text-primary">Mega menu</li>
<li class="text-primary">Multi language</li>
<li class="text-primary">Advanced SEO</li>
<li class="text-primary">Ecommerce</li>
</ul>
</div>
</div>
</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown" data-v-menu-item>
<a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart="offcanvas">
<a class="dropdown-toggle cart-info nav-link" role="button" id="cart-dropdown" data-bs-toggle="offcanvas" href="#cart-offcanvas" role="button" aria-controls="cart-offcanvas">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<!--
<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
-->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<strong class="badge bg-primary" data-v-total_items data-v-if="cart.total_items > 0"></strong>
</a>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <img src="" data-v-language-info-img> -->
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<li>
<hr class="dropdown-divider">
</li>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span class="small text-muted" data-v-currency-sign_start>$</span>
<span class="small text-muted" data-v-currency-sign_end>$</span>
<span data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link px-1" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
<!--
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<img src="" data-v-language-info-img>
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>Romanian</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<span class="" data-v-currency-info-sign_start>$</span>
<span class="" data-v-currency-info-sign_end>$</span>
</a>
<div class="dropdown-menu">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>€</span>
<span data-v-currency-sign_end>€</span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
-->
</ul>
<button class="btn btn-outline-secondary btn-sm border-0 shadow-none" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
</div>
</div>
</div>
</nav>

View File

@@ -0,0 +1,478 @@
<nav class="navigation-2 clearfix fixed-top transparent" title="navigation-2" data-v-save-global="index.html,.navigation-2">
<div class="container">
<div class="navbar navbar-expand-md navbar-dark">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
<a class="nav-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
<span data-v-menu-item-content data-v-if="category.content">
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
<span data-v-menu-item-content data-v-if="category.content">
<div class="row">
<div class="col-6 align-self-center">
<img src="demo/img/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
</div>
<div class="col-6">
<h4>Features</h4>
<p class="text-muted">Just a few mentions, but there is more</p>
<ul class="list-unstyled">
<li class="text-primary">Page builder</li>
<li class="text-primary">Mega menu</li>
<li class="text-primary">Multi language</li>
<li class="text-primary">Advanced SEO</li>
<li class="text-primary">Ecommerce</li>
</ul>
</div>
</div>
</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown" data-v-menu-item>
<a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart="offcanvas">
<a class="dropdown-toggle cart-info nav-link" role="button" id="cart-dropdown" data-bs-toggle="offcanvas" href="#cart-offcanvas" role="button" aria-controls="cart-offcanvas">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<!--
<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
-->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<strong class="badge bg-primary" data-v-total_items data-v-if="cart.total_items > 0"></strong>
</a>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <img src="" data-v-language-info-img> -->
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<li>
<hr class="dropdown-divider">
</li>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span class="small text-muted" data-v-currency-sign_start>$</span>
<span class="small text-muted" data-v-currency-sign_end>$</span>
<span data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link px-1" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
<!--
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<img src="" data-v-language-info-img>
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>Romanian</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<span class="" data-v-currency-info-sign_start>$</span>
<span class="" data-v-currency-info-sign_end>$</span>
</a>
<div class="dropdown-menu">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>€</span>
<span data-v-currency-sign_end>€</span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
-->
</ul>
<button class="btn btn-outline-secondary btn-sm border-0 shadow-none" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
</div>
</div>
</div>
</nav>

View File

@@ -0,0 +1,510 @@
<nav class="navigation-3 clearfix fixed-top transparent" title="navigation-3" data-v-save-global="index.html,.navigation-3">
<div class="navbar navbar-expand-md navbar-dark">
<div class="container">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
<a class="nav-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
<span data-v-menu-item-content data-v-if="category.content">
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
<span data-v-menu-item-content data-v-if="category.content">
<div class="row">
<div class="col-6 align-self-center">
<img src="demo/img/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
</div>
<div class="col-6">
<h4>Features</h4>
<p class="text-muted">Just a few mentions, but there is more</p>
<ul class="list-unstyled">
<li class="text-primary">Page builder</li>
<li class="text-primary">Mega menu</li>
<li class="text-primary">Multi language</li>
<li class="text-primary">Advanced SEO</li>
<li class="text-primary">Ecommerce</li>
</ul>
</div>
</div>
</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown" data-v-menu-item>
<a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart="offcanvas">
<a class="dropdown-toggle cart-info nav-link" role="button" id="cart-dropdown" data-bs-toggle="offcanvas" href="#cart-offcanvas" role="button" aria-controls="cart-offcanvas">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<!--
<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
-->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<strong class="badge bg-primary" data-v-total_items data-v-if="cart.total_items > 0"></strong>
</a>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <img src="" data-v-language-info-img> -->
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<li>
<hr class="dropdown-divider">
</li>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span class="small text-muted" data-v-currency-sign_start>$</span>
<span class="small text-muted" data-v-currency-sign_end>$</span>
<span data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link px-1" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
<!--
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<img src="" data-v-language-info-img>
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>Romanian</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<span class="" data-v-currency-info-sign_start>$</span>
<span class="" data-v-currency-info-sign_end>$</span>
</a>
<div class="dropdown-menu">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>€</span>
<span data-v-currency-sign_end>€</span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
-->
</ul>
<button class="btn btn-outline-secondary btn-sm border-0 shadow-none" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
</div>
<!--
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.vvveb.com">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://plugins.vvveb.com">Plugins</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">User Documentation</a>
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">Developer Documentation</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/givanz/VvvebJs">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://vvveb.com/download.php">Download for free</a>
</li>
</ul>
</div>
-->
</div>
</div>
</nav>

View File

@@ -0,0 +1,351 @@
<nav class="navigation-4 clearfix" data-v-save-global="index.html,.navigation-4">
<div class="navbar navbar-expand-md">
<div class="container">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0">
<a class="nav-link" data-v-class-if-dropdown-toggle="category.children > 0" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name>Resources</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>User Documentation</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name>Developer Documentation</span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/" role="button">Demo</a>
<div class="dropdown-menu">
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/">Page builder</a>
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin">Admin dashboard</a>
<a class="dropdown-item" target="_blank" href="//demo.vvveb.com">Frontend</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" target="_blank" href="https://vercel-vvveb-commerce.vercel.app/">Next.js Frontend GraphQL</a>
</div>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<button class="btn btn-outline-secondary btn-sm border-0" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
</ul>
</div>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
<!-- </div> -->
<!--
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.vvveb.com">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://plugins.vvveb.com">Plugins</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">User Documentation</a>
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">Developer Documentation</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/givanz/VvvebJs">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://vvveb.com/download.php">Download for free</a>
</li>
</ul>
</div>
-->
</div>
</div>
</nav>

View File

@@ -0,0 +1,604 @@
<nav class="navigation-1 clearfix" data-v-save-global="blank.html,.navigation-1">
<div id="top" class="top-nav clearfix">
<div class="container">
<div class="d-flex justify-content-between flex-md-row d-flex flex-column flex-md-row">
<div class="nav">
<ul class="list-inline" data-v-component-site>
<li class="list-inline-item" data-v-if="site.description.phone-number">
<a href="tel:5511112377" class="p-2 p-md-0" title="Phone" data-v-site-description-phone-number>
<i class="la la-phone"></i>
<span class=" text-muted" data-v-site-description-phone-number>+55 (111) 123 777</span>
</a>
</li>
<!--
<li class="list-inline-item" data-v-if="site.contact-email">
<a href="mailto:contact@mysite.com" class="p-2 p-md-0" title="Email" data-v-site-contact-email>
<i class="la la-envelope"></i>
<span class=" text-muted" data-v-site-contact-email>contact@mysite.com</span></a>
</li>
-->
</ul>
</div>
<div class="nav">
<ul class="list-inline">
<!--
<li class="list-inline-item"><a id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="">Favorites</span></a></li>
<li class="list-inline-item"><a title="Checkout"><i class="la la-share"></i> <span class="">Checkout</span></a></li>
<li class="list-inline-item">
<div class="dropdown">
<a href="" class="dropdown-toggle" data-bs-toggle="dropdown" role="button"><i class="la la-user"></i> <span class="">My Account</span></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item">Register</a></li>
<li><a class="dropdown-item">Login</a></li>
</ul>
</div>
</li>
-->
<li class="list-inline-item">
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<!-- <i class="la la-dollar-sign me-1"></i> -->
<span class="" data-v-currency-info-name>USD</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start></span>
<span data-v-currency-sign_end></span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="list-inline-item">
<div data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <i class="la la-flag me-1"></i> -->
<!--
<img src="" data-v-language-info-img>
-->
<span class="" data-v-language-info-name>English</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<!-- <i class="la la-flag la-lg me-2"></i> -->
<img src="" loading="lazy" class="me-1" data-v-language-img>
<!-- <a href="" data-v-language-url> -->
<span data-v-language-name>English</span>
<!-- </a> -->
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<!-- <i class="la la-flag la-lg me-2"></i> -->
<img src="" loading="lazy" class="me-1" data-v-language-img>
<!-- <a href="" data-v-language-url> -->
<span data-v-language-name>Romanian</span>
<!-- </a> -->
</button>
</div>
</div>
</form>
</div>
</li>
<li class="list-inline-item">
<a id="color-theme-switch" class="p-2 p-md-0" role="button" title="Switch sidebar color theme">
<i class="la la-sun la-lg"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-md">
<div class="container">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
<a class="nav-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
<span data-v-menu-item-content data-v-if="category.content">
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
<span data-v-menu-item-content data-v-if="category.content">
<div class="row">
<div class="col-6 align-self-center">
<img src="demo/img/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
</div>
<div class="col-6">
<h4>Features</h4>
<p class="text-muted">Just a few mentions, but there is more</p>
<ul class="list-unstyled">
<li class="text-primary">Page builder</li>
<li class="text-primary">Mega menu</li>
<li class="text-primary">Multi language</li>
<li class="text-primary">Advanced SEO</li>
<li class="text-primary">Ecommerce</li>
</ul>
</div>
</div>
</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown" data-v-menu-item>
<a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart="offcanvas">
<a class="dropdown-toggle cart-info nav-link" role="button" id="cart-dropdown" data-bs-toggle="offcanvas" href="#cart-offcanvas" role="button" aria-controls="cart-offcanvas">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<!--
<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
-->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<strong class="badge bg-primary" data-v-total_items data-v-if="cart.total_items > 0"></strong>
</a>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <img src="" data-v-language-info-img> -->
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<li>
<hr class="dropdown-divider">
</li>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span class="small text-muted" data-v-currency-sign_start>$</span>
<span class="small text-muted" data-v-currency-sign_end>$</span>
<span data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link px-1" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
<!--
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<img src="" data-v-language-info-img>
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>Romanian</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<span class="" data-v-currency-info-sign_start>$</span>
<span class="" data-v-currency-info-sign_end>$</span>
</a>
<div class="dropdown-menu">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>€</span>
<span data-v-currency-sign_end>€</span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
-->
</ul>
<button class="btn btn-outline-secondary btn-sm border-0 shadow-none" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
</div>
</div>
</div>
</nav>

View File

@@ -0,0 +1,639 @@
<nav class="navigation-3 clearfix fixed-top transparent" title="navigation-3" data-v-save-global="index.html,.navigation-3">
<div id="top" class="top-nav clearfix" data-bs-theme="dark">
<div class="container">
<div class="d-flex justify-content-between flex-md-row d-flex flex-column flex-md-row">
<div class="nav">
<ul class="list-inline" data-v-component-site>
<li class="list-inline-item" data-v-if="site.description.phone-number">
<a href="tel:5511112377" class="p-2 p-md-0" title="Phone" data-v-site-description-phone-number>
<i class="la la-phone"></i>
<span class=" text-muted" data-v-site-description-phone-number>+55 (111) 123 777</span>
</a>
</li>
<!--
<li class="list-inline-item" class="p-2 p-md-0" data-v-if="site.contact-email">
<a href="mailto:contact@mysite.com" title="Email" data-v-site-contact-email>
<i class="la la-envelope"></i>
<span class=" text-muted" data-v-site-contact-email>contact@mysite.com</span></a>
</li>
-->
</ul>
</div>
<div class="nav">
<ul class="list-inline">
<!--
<li class="list-inline-item"><a id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="">Favorites</span></a></li>
<li class="list-inline-item"><a title="Checkout"><i class="la la-share"></i> <span class="">Checkout</span></a></li>
<li class="list-inline-item">
<div class="dropdown">
<a href="" class="dropdown-toggle" data-bs-toggle="dropdown" role="button"><i class="la la-user"></i> <span class="">My Account</span></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item">Register</a></li>
<li><a class="dropdown-item">Login</a></li>
</ul>
</div>
</li>
-->
<li class="list-inline-item">
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<!-- <i class="la la-dollar-sign me-1"></i> -->
<span class="" data-v-currency-info-name>USD</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start></span>
<span data-v-currency-sign_end></span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="list-inline-item">
<div data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <i class="la la-flag me-1"></i> -->
<!--
<img src="" data-v-language-info-img>
-->
<span class="" data-v-language-info-name>English</span>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<!-- <i class="la la-flag la-lg me-2"></i> -->
<img src="" loading="lazy" class="me-1" data-v-language-img>
<!-- <a href="" data-v-language-url> -->
<span data-v-language-name>English</span>
<!-- </a> -->
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<!-- <i class="la la-flag la-lg me-2"></i> -->
<img src="" loading="lazy" class="me-1" data-v-language-img>
<!-- <a href="" data-v-language-url> -->
<span data-v-language-name>Romanian</span>
<!-- </a> -->
</button>
</div>
</div>
</form>
</div>
</li>
<li class="list-inline-item">
<a id="color-theme-switch" class="p-2 p-md-0" role="button" title="Switch sidebar color theme">
<i class="la la-sun la-lg"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-md navbar-dark">
<div class="container">
<div data-v-component-site>
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"*.*.*"}'><span class="visually-hidden">Logo</span> -->
<a class="navbar-brand" href="/" data-v-site-url>
<span class="visually-hidden">Logo</span>
<img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
<img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
<img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
<img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
<ul class="navbar-nav ms-auto" data-v-menu-items>
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
<a class="nav-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
<span data-v-menu-item-content data-v-if="category.content">
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
<span data-v-menu-item-content data-v-if="category.content">
<div class="row">
<div class="col-6 align-self-center">
<img src="demo/img/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
</div>
<div class="col-6">
<h4>Features</h4>
<p class="text-muted">Just a few mentions, but there is more</p>
<ul class="list-unstyled">
<li class="text-primary">Page builder</li>
<li class="text-primary">Mega menu</li>
<li class="text-primary">Multi language</li>
<li class="text-primary">Advanced SEO</li>
<li class="text-primary">Ecommerce</li>
</ul>
</div>
</div>
</span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown" data-v-menu-item>
<a class="nav-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>Blog</span>
</a>
<div class="dropdown-menu" data-v-menu-item-recursive>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
<span data-v-menu-item-content></span>
</a>
</div>
</div>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
<span data-v-menu-item-name>Contact</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
<span data-v-menu-item-name>About us</span>
</a>
</li>
<li class="nav-toggle">
<!-- User Login Info -->
<div class="dropdown nav-item">
<a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="user/index">
<!-- <img src="demo/img/user.svg" loading="lazy" width="20" alt> -->
<!-- <i class="la la-lg la-user"></i> -->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="visually-hidden">User</span>
</a>
<div class="dropdown-menu dropdown-menu-end login-box user-box" aria-labelledby="user-dropdown">
<div data-v-component-user>
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
</div>
<div class="flex-grow-1 align-self-center text-small">
<div>
<div data-v-notification-text>
This is a placeholder for a notification message.
</div>
</div>
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
</div>
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
This is a placeholder for a success message.
</div>
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">
<div class="icon align-middle me-2">
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
</div>
<div class="flex-grow-1 align-self-center" data-v-notification-text>
This is a placeholder for a info message.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<!-- <i class="la la-times"></i> -->
</span>
</button>
</div>
</div>
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
<input type="hidden" name="csrf" data-v-csrf>
<div class="login-form" data-v-if-not="component.user_id">
<div class="mb-3">
<input type="email" name="email" value placeholder=" " id="user-email" class="form-control label-over" data-v-user-email required>
<label class="form-label" for="user-email">E-Mail Address</label>
</div>
<div class="mb-3">
<div class="input-group">
<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" class="form-control label-over" placeholder=" " id="user-password" name="password" value="" aria-label="Password" required>
<label class="form-label" for="user-password">Password</label>
<button class="btn btn-sm px-3 border border-start-0" type="button" onclick="togglePasswordInput(this, 'user-password')">
<i class="la la-eye-slash"></i>
</button>
</div>
</div>
<button type="submit" value="Login" class="btn btn-primary py-2 btn-login w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Authenticating</span>...
</span>
<span class="button-text">
Login <i class="la la-arrow-right ms-2"></i>
</span>
</button>
<div class="my-2"></div>
<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgot your password?</a>
<div class="my-2"></div>
<!--
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-google la-lg"></i>
</span>
</a>
<a>
<span class="btn btn-secondary btn-sm">
<i class="lab la-facebook la-lg"></i>
</span>
</a> -->
<hr class="text-secondary">
<span>Dont have an account?</span>
<br>
<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>
<span class="text-body-tertiary">|</span>
<a href="/user/login" data-v-url="user/login/index">Login</a>
</div>
<div class="user-form" data-v-if="component.user_id">
<div class="text-center" data-v-if="user.first_name">Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
<b data-v-user-last_name data-filter-capitalize>Doe</b>
</div>
<div class="text-center" data-v-if-not="user.first_name">Welcome <b data-v-user-username>johndoe</b>
</div>
<div class="dropdown-divider opacity-50 my-3"></div>
<ul class="m-3 list-unstyled">
<li>
<a href="user" data-v-url="user/index">
<i class="la la-user la-lg text-muted m-1"></i>
<span>My account</span>
</a>
</li>
<li>
<a href="user/comments" data-v-url="user/comments/index">
<i class="la la-comment la-lg text-muted m-1"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="user/orders" data-v-url="user/orders/index">
<i class="la la-shopping-bag la-lg text-muted m-1"></i>
<span>Orders</span>
</a>
</li>
<li>
<a href="user/downloads" data-v-url="user/downloads/index">
<i class="la la-hand-holding-heart la-lg text-muted m-1"></i>
<span>Downloads</span>
</a>
</li>
<li>
<a href="user/wishlist" data-v-url="user/wishlist/index">
<i class="la la-download la-lg text-muted m-1"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user/profile" data-v-url="user/profile/index">
<i class="la la-cogs la-lg text-muted m-1"></i>
<span>Profile</span>
</a>
</li>
</ul>
<input type="hidden" name="logout">
<button type="submit" value="logout" class="btn btn-sm btn-primary w-100">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Loading ...</span>...
</span>
<span class="button-text">
<i class="la la-sign-out-alt la-lg m-1"></i>
<span>Log out</span>
</a>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
<li class="nav-toggle">
<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart="offcanvas">
<a class="dropdown-toggle cart-info nav-link" role="button" id="cart-dropdown" data-bs-toggle="offcanvas" href="#cart-offcanvas" role="button" aria-controls="cart-offcanvas">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<!--
<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
-->
<svg width="20px" viewBox="0 0 24 24" fill="none">
<path d="M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<strong class="badge bg-primary" data-v-total_items data-v-if="cart.total_items > 0"></strong>
</a>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<div data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<!-- <img src="" data-v-language-info-img> -->
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<li>
<hr class="dropdown-divider">
</li>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span class="small text-muted" data-v-currency-sign_start>$</span>
<span class="small text-muted" data-v-currency-sign_end>$</span>
<span data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</div>
</li>
<li class="nav-item">
<a id="color-theme-switch" class="nav-link px-1" role="button" title="Switch sidebar color theme">
<i class="la la-sun"></i>
</a>
</li>
<!--
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-language>
<form method="post" enctype="multipart/form-data" id="form-language">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
<img src="" data-v-language-info-img>
<span class="" data-v-language-info-slug>English</span>
</a>
<div class="dropdown-menu">
<div data-v-language>
<button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>English</span>
</button>
</div>
<div data-v-language>
<button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
<img src="" loading="lazy" class="me-1" data-v-language-img>
<span data-v-language-name>Romanian</span>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-toggle">
<div class="dropdown nav-item" data-v-component-currency>
<form method="post" enctype="multipart/form-data" id="form-currency">
<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
<span class="" data-v-currency-info-sign_start>$</span>
<span class="" data-v-currency-info-sign_end>$</span>
</a>
<div class="dropdown-menu">
<div data-v-currency>
<button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>€</span>
<span data-v-currency-sign_end>€</span>
<span class="ms-1" data-v-currency-name>Euro</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>£</span>
<span data-v-currency-sign_end>£</span>
<span class="ms-1" data-v-currency-name>Pound Sterling</span>
</button>
</div>
<div data-v-currency>
<button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
<span data-v-currency-sign_start>$</span>
<span data-v-currency-sign_end>$</span>
<span class="ms-1" data-v-currency-name>US Dollar</span>
</button>
</div>
</div>
</form>
</div>
</li>
-->
</ul>
<button class="btn btn-outline-secondary btn-sm border-0 shadow-none" type="submit" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
<!--
<div class="search-area toggle-hover">
<form action="/search" method="get" data-v-action="/search">
<input type="hidden" name="route" value="search">
<div class="input-group">
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
<button class="btn border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</form>
</div>
-->
</div>
<!--
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.vvveb.com">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://plugins.vvveb.com">Plugins</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">User Documentation</a>
<a class="dropdown-item" target="_blank" href="https://github.com/givanz/VvvebJs/wiki">Developer Documentation</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/givanz/VvvebJs">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://vvveb.com/download.php">Download for free</a>
</li>
</ul>
</div>
-->
</div>
</div>
</nav>

View File

@@ -0,0 +1,74 @@
<section class="portfolio-1 my-5" aria-label="portfolio-1">
<div class="row justify-content-center pb-2">
<div class="col-md-7 heading-section text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Portfolio</h2>
<p class="lead text-center text-muted mb-4">Some of our work</p>
</div>
</div>
<div class="gallery masonry hover-effect" data-component-gallery="portfolio-1" id="gallery-RANDOM_ID">
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.jpg" data-aos="fade-up">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-2.jpg" data-aos="fade-up" data-aos-delay="100">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.jpg" data-aos="fade-up" data-aos-delay="200">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-2.jpg" data-aos="fade-up" data-aos-delay="300">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.jpg" data-aos="fade-up" data-aos-delay="400">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-2.jpg" data-aos="fade-up" data-aos-delay="500">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.jpg" data-aos="fade-up" data-aos-delay="600">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-2.jpg" data-aos="fade-up" data-aos-delay="700">
<figcaption></figcaption>
<h3 class="title d-none"></h3>
<div class="description d-none"></div>
</figure>
</div>
</div>
</section>

Some files were not shown because too many files have changed in this diff Show More