Files
vvveb-cms/static/Vvvebjs/demo/landing/sections/sections.js
2026-05-17 21:09:32 +08:00

19975 lines
1.0 MiB
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
Vvveb.Sections.add("hero/hero-1", {
name: "Hero 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-2", {
name: "Hero 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-2-thumb.webp",
html: `<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.webp" 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.webp">
</div>
</header>`
});Vvveb.Sections.add("hero/hero-3-full", {
name: "Hero 3 full",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-3-full-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-3", {
name: "Hero 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-4", {
name: "Hero 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-4-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-5", {
name: "Hero 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-5-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-6", {
name: "Hero 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-6-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-7", {
name: "Hero 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-7-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-8", {
name: "Hero 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-8-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-9", {
name: "Hero 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-9-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-10", {
name: "Hero 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-10-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-11", {
name: "Hero 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-11-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-12", {
name: "Hero 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-12-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("hero/hero-13", {
name: "Hero 13",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-13-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-14", {
name: "Hero 14",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-14-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("hero/hero-slider", {
name: "Hero slider",
image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-slider-thumb.webp",
html: `<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.webp" 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.webp" 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>`
});
Vvveb.SectionsGroup["Hero"] = ["hero/hero-1","hero/hero-2","hero/hero-3-full","hero/hero-3","hero/hero-4","hero/hero-5","hero/hero-6","hero/hero-7","hero/hero-8","hero/hero-9","hero/hero-10","hero/hero-11","hero/hero-12","hero/hero-13","hero/hero-14","hero/hero-slider"];
Vvveb.Sections.add("features/features-1", {
name: "Features 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-1-thumb.webp",
html: `<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.webp" 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.webp" 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>`
});Vvveb.Sections.add("features/features-2", {
name: "Features 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-2-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-3", {
name: "Features 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-3-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-4", {
name: "Features 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-5", {
name: "Features 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-5-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-6", {
name: "Features 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-6-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-7", {
name: "Features 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-7-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-8", {
name: "Features 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-8-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-9", {
name: "Features 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-9-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-10", {
name: "Features 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-10-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-11", {
name: "Features 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-11-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-12", {
name: "Features 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-12-thumb.webp",
html: `<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.webp" 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.webp" 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>`
});Vvveb.Sections.add("features/features-13", {
name: "Features 13",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-13-thumb.webp",
html: `<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.webp" alt="Macbook" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("features/features-14", {
name: "Features 14",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-14-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-15", {
name: "Features 15",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-15-thumb.webp",
html: ` <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>`
});Vvveb.Sections.add("features/features-16", {
name: "Features 16",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-16-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("features/features-17", {
name: "Features 17",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-17-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("features/features-18", {
name: "Features 18",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-18-thumb.webp",
html: `<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.webp">
</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.webp">
</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.webp">
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("features/features-19", {
name: "Features 19",
image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-19-thumb.webp",
html: `<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.webp" 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>`
});
Vvveb.SectionsGroup["Features"] = ["features/features-1","features/features-2","features/features-3","features/features-4","features/features-5","features/features-6","features/features-7","features/features-8","features/features-9","features/features-10","features/features-11","features/features-12","features/features-13","features/features-14","features/features-15","features/features-16","features/features-17","features/features-18","features/features-19"];
Vvveb.Sections.add("services/services-1", {
name: "Services 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-1-thumb.webp",
html: `<section class="py-5 services-1" aria-label="services-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-2 text-center fw-bold">Services</h2>
<p class="text-secondary text-center lead mb-5">Our specialists are ready to work on your next awesome project</p>
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-5 gx-md-4 gy-lg-0 gx-xxl-5 justify-content-center">
<div class="col-11 col-sm-6 col-lg-3">
<div class="badge bg-primary p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="la la-pie-chart" viewBox="0 0 16 16">
<path d="M7.5 1.018a7 7 0 0 0-4.79 11.566L7.5 7.793V1.018zm1 0V7.5h6.482A7.001 7.001 0 0 0 8.5 1.018zM14.982 8.5H8.207l-4.79 4.79A7 7 0 0 0 14.982 8.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z" />
</svg>
</div>
<h4 class="mb-3">Market Research</h4>
<p class="mb-3 text-secondary">We can help you to understand your target market and identify new opportunities for growth. We offer a variety of market research services, interviews, and focus groups.</p>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
<div class="col-11 col-sm-6 col-lg-3">
<div class="badge bg-primary p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="la la-aspect-ratio" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z" />
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z" />
</svg>
</div>
<h4 class="mb-3">Web Design</h4>
<p class="mb-3 text-secondary">We can help you to create a visually appealing and user-friendly website. We take into account your brand identity and target audience when designing your website.</p>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
<div class="col-11 col-sm-6 col-lg-3">
<div class="badge bg-primary p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="la la-airplane-engines" viewBox="0 0 16 16">
<path d="M8 0c-.787 0-1.292.592-1.572 1.151A4.347 4.347 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272.313.937a.5.5 0 0 0 .948 0l.405-1.214 2.21-.369.375 2.253-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318.375-2.253 2.21.369.405 1.214a.5.5 0 0 0 .948 0l.313-.937 1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0ZM7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1c.213 0 .458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7V3Z" />
</svg>
</div>
<h4 class="mb-3">SEO Services</h4>
<p class="mb-3 text-secondary">We can help you to improve your website's visibility in search engine results pages (SERPs). This can lead to more traffic to your website and more conversions.</p>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
<div class="col-11 col-sm-6 col-lg-3">
<div class="badge bg-primary p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="la la-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z" />
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z" />
</svg>
</div>
<h4 class="mb-3">Content Marketing</h4>
<p class="mb-3 text-secondary">We can help you to promote your business online through a variety of digital marketing channels, including SEO, PPC, social media marketing, and email marketing..</p>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-2", {
name: "Services 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-2-thumb.webp",
html: `<section class="py-5 services-2" aria-label="services-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-xxl-6">
<h2 class="mb-4 display-2 text-center fw-bold">Services</h2>
<p class="text-secondary text-center lead mb-5">Our specialists are ready to work on your next awesome project</p>
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-5 gx-md-5 justify-content-center">
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-command text-primary" viewBox="0 0 16 16">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">Market Research</h4>
<p class="mb-3 text-secondary">We can help you to understand your target market and identify new opportunities for growth. We offer a variety of market research services including surveys.</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-laptop text-primary" viewBox="0 0 16 16">
<path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">Web Design</h4>
<p class="mb-3 text-secondary">We can help you to create a visually appealing website. We take into account your brand identity and target audience when designing your website.</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-credit-card-2-front text-primary" viewBox="0 0 16 16">
<path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z" />
<path d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">Secure Payments</h4>
<p class="mb-3 text-secondary">We offer a variety of secure payment solutions to help you accept payments. We also offer fraud protection to help protect your business from fraud.</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-cup-hot text-primary" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6H.5ZM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5ZM2.64 13.825 1.123 7h11.754l-1.517 6.825A1.5 1.5 0 0 1 9.896 15H4.104a1.5 1.5 0 0 1-1.464-1.175Z" />
<path d="m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8Zm3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8Zm3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8Z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">Daily Updates</h4>
<p class="mb-3 text-secondary">We provide our clients with daily updates on their business performance. This includes data on website traffic, sales, blog posts, and other key metrics.</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">Digital Marketing</h4>
<p class="mb-3 text-secondary">We can help you to promote your business online through a variety of digital marketing channels, including search engine optimization (SEO).</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-10 col-md-5 col-xl-4 overflow-hidden">
<div class="row gy-4">
<div class="col-12 col-lg-2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="la la-telephone-inbound text-primary" viewBox="0 0 16 16">
<path d="M15.854.146a.5.5 0 0 1 0 .708L11.707 5H14.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793L15.146.146a.5.5 0 0 1 .708 0zm-12.2 1.182a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
</svg>
</div>
<div class="col-12 col-lg-10">
<h4 class="mb-3">24/7 Support</h4>
<p class="mb-3 text-secondary">We offer 24/7 support to our clients. This means that you can always get help when you need it, no matter what time of day or night it is.</p>
<div>
<a href="#" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="la la-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-3", {
name: "Services 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-3-thumb.webp",
html: `<section class="py-5 services-3" aria-label="services-3">
<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">Features</span>
<h2 class="display-5 fw-bold">Our Features</h2>
<p class="lead">Our specialists are ready to work on your next awesome project</p>
</div>
</div>
<div class="row g-4 g-md-5">
<div class="col-md-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-3 fw-bold">Responsive Design</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris .</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-emoji-wink" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-3 fw-bold">Easy-To-Use</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris .</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"></path>
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-3 fw-bold">100+ Components</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris .</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="text-primary me-4">
<svg class="bi bi-clipboard-check" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</div>
<div>
<h5 class="mb-2 mb-lg-3 fw-bold">Copy & Paste</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris .</p>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-4", {
name: "Services 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-4-thumb.webp",
html: `<section class="py-5 services-4" aria-label="services-4">
<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">Features</span>
<h2 class="display-5 fw-bold">Our Features</h2>
<p class="lead">Our specialists are ready to work on your next awesome project</p>
</div>
</div>
<div class="row g-4 g-md-5">
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">Responsive Design</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-emoji-wink" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">Easy-To-Use</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"></path>
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">100+ Components</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-clipboard-check" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">Copy & Paste</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-speedometer2" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path>
<path d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" fill-rule="evenodd"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">Unlimited Usage</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
<div class="col-md-6 col-xl-4">
<div class="d-flex align-items-center mb-3 mb-md-4">
<div class="text-primary">
<svg class="bi bi-pencil-square" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" fill-rule="evenodd"></path>
</svg>
</div>
<h5 class="fw-bold ms-4 mb-0">100% Customizable</h5>
</div>
<p>Lorem ipsum dolor sit amet consectetur elit dolor sit amet.</p>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-5", {
name: "Services 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-5-thumb.webp",
html: `<section class="py-5 services-5" aria-label="services-5">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-primary">Services</span>
<h2 class="display-5 fw-bold">Our Features</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 align-items-center">
<div class="col-md-4 order-2 order-md-1">
<div class="text-center">
<div class="text-primary">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">Responsive Design</h5>
</div>
<div class="my-5 text-center">
<div class="text-primary">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">Easy-To-Use</h5>
</div>
<div class="text-center">
<div class="text-primary">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"></path>
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">100+ Components</h5>
</div>
</div>
<div class="col-md-4 order-1 order-md-2">
<div class="mb-4 mb-md-0">
<img alt="" class="img-fluid rounded mx-auto" src="demo/img/video-1.webp">
</div>
</div>
<div class="col-md-4 order-3 order-md-3">
<div class="text-center">
<div class="text-primary">
<svg class="bi bi-clipboard-check" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">Drag and drop</h5>
</div>
<div class="my-5 text-center">
<div class="text-primary">
<svg class="bi bi-speedometer2" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path>
<path d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" fill-rule="evenodd"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">Unlimited Usage</h5>
</div>
<div class="text-center">
<div class="text-primary">
<svg class="bi bi-pencil-square" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" fill-rule="evenodd"></path>
</svg>
</div>
<h5 class="fw-bold mt-3">100% Customizable</h5>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-6", {
name: "Services 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-6-thumb.webp",
html: `<section class="py-5 services-6" aria-label="services-6">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<span class="text-primary">Services</span>
<h2 class="display-6 fw-bold">Our Features</h2>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia totam recusandae voluptatibus quam!</p>
<div class="row pt-3 pt-lg-4">
<div class="col-sm-6">
<div class="mb-sm-0 mb-3">
<div class="text-primary">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"></path>
</svg>
</div>
<h5 class="my-3">Responsive Design</h5>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-sm-6">
<div class="mb-sm-0 mb-3">
<div class="text-primary">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"></path>
</svg>
</div>
<h5 class="my-3">Easy-To-Use</h5>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img alt="" class="img-fluid rounded" src="demo/img/video-1.webp">
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("services/services-7", {
name: "Services 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/services/services-7-thumb.webp",
html: `<section class="py-5 services-7" aria-label="services-7">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center">
<div class="pe-lg-5">
<img alt="" class="img-fluid rounded" src="demo/img/video-1.webp">
</div>
</div>
<div class="col-md-6">
<div class="ps-lg-5 mt-4 mt-lg-0">
<span class="text-primary">Features</span>
<h2 class="display-6 fw-bold">Our Features</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Mollitia totam recusandae voluptatibus quam!</p>
<div class="row">
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-primary">
<svg class="bi bi-aspect-ratio" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
<path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"></path>
</svg>
</div>
<h5 class="mt-3">Responsive Design</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-primary">
<svg class="bi bi-emoji-wink" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"></path>
</svg>
</div>
<h5 class="mt-3">Easy-To-Use</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-primary">
<svg class="bi bi-layout-text-window-reverse" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"></path>
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"></path>
</svg>
</div>
<h5 class="mt-3">100+ Components</h5>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="py-4">
<div class="text-primary">
<svg class="bi bi-clipboard-check" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" xmlns="http://www.w3.org/2000/svg">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z" fill-rule="evenodd"></path>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
</svg>
</div>
<h5 class="mt-3">Copy & Paste</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Services"] = ["services/services-1","services/services-2","services/services-3","services/services-4","services/services-5","services/services-6","services/services-7"];
Vvveb.Sections.add("base/1-column", {
name: "1 column",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/1-column-thumb.webp",
html: `<section title="one column" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
</div>
</div>
</section>`
});Vvveb.Sections.add("base/2-columns-ratio", {
name: "2 columns ratio",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/2-columns-ratio-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/2-columns", {
name: "2 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/2-columns-thumb.webp",
html: `<section title="two columns" class="py-4">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>`
});Vvveb.Sections.add("base/3-columns-ratio", {
name: "3 columns ratio",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/3-columns-ratio-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/3-columns", {
name: "3 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/3-columns-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/3-grid-left", {
name: "3 grid left",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/3-grid-left-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/3-grid", {
name: "3 grid",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/3-grid-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/4-columns", {
name: "4 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/4-columns-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/4-grid-masonry", {
name: "4 grid masonry",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/4-grid-masonry-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/4-grid", {
name: "4 grid",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/4-grid-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/6-columns", {
name: "6 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/6-columns-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/6-grid", {
name: "6 grid",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/6-grid-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/8-columns", {
name: "8 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/8-columns-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/12-columns", {
name: "12 columns",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/12-columns-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("base/blank", {
name: "Blank",
image: Vvveb.themeBaseUrl + "/screenshots/sections/base/blank-thumb.webp",
html: `<section title="blank" class="py-4">
<div class="container">
<h1>Blank container</h1>
</div>
</section>`
});
Vvveb.SectionsGroup["Base"] = ["base/1-column","base/2-columns-ratio","base/2-columns","base/3-columns-ratio","base/3-columns","base/3-grid-left","base/3-grid","base/4-columns","base/4-grid-masonry","base/4-grid","base/6-columns","base/6-grid","base/8-columns","base/12-columns","base/blank"];
Vvveb.Sections.add("clients/clients-1", {
name: "Clients 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/clients/clients-1-thumb.webp",
html: `<section class="py-3 py-md-5 py-xl-8" aria-label="clients-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-2 text-center fw-bold">Clients</h2>
<p class="text-secondary mb-5 text-center">Our trusted partners.</p>
<hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="65" viewBox="0 0 125 65" fill="currentColor" class="text-dark">
<path d="M0,20.32v10.16H25.5c2.96,0,6.75-3.19,6.75-8.48,0-2.13,.7-3.51-1.45-6.32l-3.26-4.51c-1.87-2.03,.22-2.03,1.79-2.03h10.76V30.48h8.54V9.14h11.51V0H22.88C18.35,0,16.13,5.07,16.26,7.72c.13,2.64,.54,5.97,4.31,9.96,3.44,3.64-1.7,2.64-2.22,2.64H0ZM79.02,0h-13.77l-7.72,30.48h8.59l1.39-4.27h9.06l1.35,4.27h8.42L79.02,0h0Zm-9.59,18.9l2.96-11.18,2.79,11.18h-5.75Zm44.1,1.42c-3.31,0-3.31-1.42-3.31-1.42,2.84,0,5.35-4.82,5.35-9.76S111.44,0,108.13,0h-18.53V30.48h9.41v-10.16s4.01,5.49,6.1,7.72c2.09,2.24,2.27,2.44,5.11,2.44h14.78v-10.16s-8.15,0-11.47,0h0Zm-8.54-7.11h-5.98V7.72h5.98c2.74,0,3.21,5.49,0,5.49ZM0,34.34H9.63l2.44,10.16,2.27-10.16h10.11l2.61,10.16,2.62-10.16h8.37l-7.67,30.49h-7.67l-3.36-14.43-3.79,14.43H7.71L0,34.34Zm57.81,.18h-13.77l-7.72,30.48h8.59l1.39-4.27h9.07l1.35,4.27h8.42l-7.32-30.48Zm-9.59,18.9l2.96-11.18,2.79,11.18h-5.75Zm65.48-9.92c-1.57,0-3.28,.21-1.41,2.25l3.26,4.51c2.14,2.81,2.11,3.98,2.11,6.11,0,5.28-4.48,8.48-7.45,8.48l-20.6,.16c-2.84,0-3.01-.2-5.1-2.44-2.09-2.24-6.1-7.72-6.1-7.72v10.16h-9.41v-30.48h18.53c3.31,0,7.45,4.2,7.45,9.14s-2.52,9.76-5.36,9.76c0,0,1.25,1.46,3.34,1.46s10.15,0,10.15,0c.52,0,5.65,1,2.22-2.64-3.77-3.99-4.18-7.32-4.31-9.96s1.83-7.94,6.37-7.94h17.62v9.15h-11.3Zm-29.31,4.23h-5.98v-5.49h5.98c2.74,0,3.21,5.49,0,5.49Z" fill-rule="evenodd" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="105" height="65" viewBox="0 0 105 65" fill="currentColor" class="text-dark">
<path d="M88.47,64.54v-13.95h-5.75v13.95h5.75Zm-30.46-5.79v-7.95h-5.58v6.07c0,1.77-.07,2.26-.18,2.72-.39,1.27-1.73,1.84-3.11,1.84-1.91,0-2.79-.74-3.14-1.91-.11-.39-.14-.81-.18-1.24-.04-.46,0-.95,0-1.48v-6h-5.65v7.98c0,1.8,.6,3.14,1.59,4.06,1.69,1.66,4.55,2.15,7.2,2.15,3.21,0,5.68-.46,7.45-2.19,.92-.88,1.59-2.05,1.59-4.06h0Zm-27.38-.99c-.28-.05-.56-.07-.85-.07h-6.35c-.32,0-.67,.04-.85,.07,.11-.11,.32-.32,.53-.6l2.86-4.73c.39-.63,.56-1.06,.64-1.24,.07,.18,.25,.6,.64,1.27l2.93,4.77c.14,.21,.35,.42,.46,.53h0Zm10.66,6.78l-12.7-19.07h-7.13l1.87,2.22s.11,.07,.18,.11c-.07,.04-.14,.07-.18,.11l-11.08,16.63h6.42l1.73-2.86c.07-.14,.11-.28,.11-.35,.07,0,.25,.07,.42,.07h11.47c.18,0,.32-.04,.39-.07,0,.1,.02,.2,.07,.28l1.8,2.93h6.63Zm39.88-7.17c0-1.55-.64-3.36-2.61-5.86l-4.76-6.04h-6.63l3.78,4.24c.64,.71,1.45,1.34,1.45,1.34-.92-.53-2.08-.74-3-.74-2.19,0-4.41,.46-6.39,1.55-2.12,1.16-3.53,3.11-3.53,5.69,0,1.98,.88,3.5,2.01,4.66,2.54,2.54,7.16,2.79,8.86,2.79,2.51,0,6.42-.57,8.65-2.58,1.31-1.2,2.19-2.86,2.19-5.05h0Zm-5.51,.18c0,1.45-.95,2.54-2.15,3.14-.99,.53-2.15,.67-3.18,.67s-2.22-.21-3.21-.71c-1.2-.6-2.12-1.77-2.12-3.04,0-1.52,1.16-2.72,2.54-3.32,.85-.39,1.87-.53,2.68-.53s1.91,.11,2.79,.46c1.59,.67,2.65,1.94,2.65,3.32h0ZM86.64,0c-4.13,0-8.14,1.39-11.38,3.96C72.03,1.39,68.01,0,63.88,0c-4.13,0-8.14,1.39-11.38,3.96C49.26,1.39,45.25,0,41.12,0c-4.13,0-8.14,1.39-11.38,3.96C26.5,1.39,22.49,0,18.36,0,8.22,0,0,8.22,0,18.37s8.22,18.37,18.36,18.37c4.13,0,8.14-1.39,11.38-3.96,3.24,2.57,7.25,3.96,11.38,3.96,4.13,0,8.14-1.39,11.38-3.96,3.24,2.57,7.25,3.96,11.38,3.96,4.13,0,8.14-1.39,11.38-3.96,3.24,2.57,7.25,3.96,11.38,3.96,10.14,0,18.36-8.22,18.36-18.37S96.78,0,86.64,0ZM26.73,29.78c-2.34,1.71-5.26,2.75-8.38,2.75-7.82,0-14.15-6.33-14.15-14.16S10.53,4.21,18.36,4.21c3.12,0,6.04,1.04,8.38,2.75-2.58,3.24-3.98,7.27-3.97,11.41,0,4.14,1.4,8.16,3.97,11.41Zm3-3c-1.8-2.43-2.78-5.38-2.77-8.41,0-3.03,.96-5.98,2.77-8.41,1.81,2.43,2.78,5.38,2.77,8.41,0,3.03-.97,5.98-2.77,8.41Zm19.76,3c-2.43,1.79-5.37,2.75-8.39,2.75-3.01,0-5.95-.96-8.37-2.75,2.57-3.25,3.97-7.27,3.97-11.41,0-4.14-1.39-8.17-3.97-11.41,2.42-1.79,5.36-2.75,8.37-2.75,3.14,0,6.04,1.02,8.39,2.75-2.58,3.24-3.98,7.27-3.97,11.41,0,4.14,1.4,8.16,3.97,11.41Zm3-3c-1.8-2.43-2.78-5.38-2.77-8.41,0-3.03,.96-5.98,2.77-8.41,1.81,2.43,2.78,5.38,2.77,8.41,0,3.03-.97,5.98-2.77,8.41Zm19.76,3c-2.35,1.73-5.25,2.75-8.39,2.75s-6.02-1.02-8.37-2.75c2.57-3.25,3.97-7.27,3.97-11.41,0-4.14-1.39-8.17-3.97-11.41,2.35-1.73,5.23-2.75,8.37-2.75s6.04,1.02,8.39,2.75c-2.58,3.24-3.98,7.27-3.97,11.41,0,4.14,1.4,8.16,3.97,11.41Zm3-3c-1.8-2.43-2.78-5.38-2.77-8.41,0-3.03,.96-5.98,2.77-8.41,1.81,2.43,2.78,5.38,2.77,8.41,0,3.03-.97,5.98-2.77,8.41Zm11.38,5.75c-3.12,0-6.04-1.04-8.38-2.75,2.57-3.25,3.97-7.27,3.97-11.41,0-4.14-1.39-8.17-3.97-11.41,2.34-1.71,5.26-2.75,8.38-2.75,7.82,0,14.15,6.33,14.15,14.16s-6.33,14.16-14.15,14.16Z" fill-rule="evenodd" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="65" viewBox="0 0 150 65" fill="currentColor" class="text-dark">
<path d="M75.46,7.09c1.02,.05,1.99,.46,2.77,1.16,1.05,1.04,1.33,2.78,.83,4.18-1.94,4.17-6.54,6.96-9.68,7.89-1.88,.46-4.26,.46-5.98-.23-.83,.52-1.53,2.21-2.55,1.51-1.47-1.2-.2-3.08-1.04-4.42-.17-.27-.61-.29-.84-.74-1.16-2.67,.28-5.22,1.88-7.25,2.67-3.13,10.35-6.61,14.61-2.09h0Zm-8.91,2.09c-1.49,.29-3.18,.97-4.09,2.09-.91,1.12-1.49,2.2-.94,3.36,1.94-1.51,2.88-3.59,5.04-4.87,0-.23,.33-.41,0-.58Zm9.02,.58c-3.82-.35-6.7,2.67-9.41,5.57-.17,.46-1.16,.99-.39,1.51,3.65,.35,7.14-.75,9.79-3.3,.78-.75,1.33-1.74,.94-2.78-.17-.4-.56-.81-.94-.98Zm33.09,17.28c1.77,4.52,3.26,11.65,0,16-.89,1.04-2.43,2.01-3.43,1.22-3.65-3.07-5.2-7.48-7.47-11.42-.33-.17-.33,.29-.5,.46-.83,4,.72,9.22-1.88,12.35-1,.17-1.93-.36-2.27-1.39-1.27-4.12,.05-8.41,.39-12.52,.78-2.09,1.11-4.52,2.82-6.09,2.77,1.16,4.09,4.41,5.7,6.78,1.16,1.8,2.1,3.83,3.43,5.45,1.16-.52,.59-2.11,.55-3.07-.44-3.77-1.44-7.25-2.38-10.84-.05-.93-.55-2.49,.39-3.07,2.49,1.16,3.54,3.88,4.65,6.15Zm-16.71-1.39c0,.87-.66,1.96-1.22,2.09-5.31,.87-11.23,.35-16.21,2.09-.17,.64,.55,.75,.94,.93,4.26,.7,8.74,.87,12.89,1.97,2.19,.58,2.99,3.31,3.15,5.57,.1,1.78-.55,3.94-2.21,5.16-4.09,2.73-10.35,2.61-14.5,.12-1.59-.93-3.1-2.43-3.21-4.29,0-1.47,.61-2.63,1.61-3.19,3.98-1.68,8.91-.75,12.34,1.39,.22,1.16-.98,1.1-1.55,1.51-3.82,2.32-6.7-2.61-10.24-.81-.5,.35-.86,1.32-.28,1.62,4.37,2.03,9.24,.58,13.56-.7,.5-.17,1.11-.7,1.16-1.22-.17-1.86-2.16-2.26-3.43-2.78-3.76-.99-7.91-.99-11.95-1.39-.77-.17-1.76-.74-1.99-1.39-.44-1.39-.44-3.3,.55-4.46,5.15-4.75,12.95-4.35,19.48-3.07,.44,.17,.94,.34,1.11,.87h0Zm-24.18,2.2c.5,5.57,.77,10.73,.66,16.58-.11,.75-.94,.93-1.49,1.22-.89,.17-2.03-.02-2.38-.52-1.27-2.15-.83-5.04-.94-7.65,.17-4.12,.11-8.58,1.22-12.41,.21-.56,.83-1.04,1.33-.7,1.33,.7,1.55,2.09,1.6,3.48h0Zm61.48-.81c.27,.47,.54,1.19,0,1.51-2.49,1.16-5.86,.64-8.74,.99-.77,.7-1.38,1.85-1.11,2.9,.28,.17,.53,.44,.83,.4,1.77,.12,4.43-.87,5.59,.87,.28,.52-.04,2.45-.83,2.49-2.16,.29-5.71-.28-6.75,.29-1.33,.93-1.22,2.72-1.72,4.18,.94,.64,1.93-.02,3.04-.17,2.05-.35,4.32-.99,6.36-.52,.39,.75,.94,1.57,.55,2.49-3.49,2.9-7.99,5.87-12.78,3.77-1.8-.85-2.6-3.71-1.99-6.14,.39-1.74,2.1-3.42,1.05-5.28-.17-.81,.28-1.51,.94-1.68,1.83,0,1.44-2.38,2.38-3.48-1.05-1.22-3.71-1.16-3.43-3.59,1.27-.7,2.82-.46,4.26-.7,3.26-.7,6.92-1.1,10.24-.7,.66,.14,1.55,1.51,2.1,2.38ZM50.23,13.82c5.11,4.37,11.73,11.83,10.9,20.41-1,6.78-7.86,11.89-13.67,13.51-5.64,1.74-12.73,1.57-18.48,.17-.39,1.1-.77,2.43-1.99,2.9-.77,.29-1.77,.12-2.38-.41-1.71-1.68-.33-4.93-2.82-5.97-4.87-2.15-10.13-6.38-12.62-11.6-.33-1.04,.06-2.09,.66-2.9,3.82-3.19,8.63-4.46,13.45-5.45,.28,.12,.17-.29,.39-.41,.28-3.48,.39-7.02,1.44-10.15,.24-.44,.83-.58,1.22-.29,3.04,2.43,1.6,7.02,2.93,10.32,5.81,.29,11.62,.58,16.21,4,1.55,1.33,1.93,3.88,1.44,5.33-.49,1.45-2.1,2.49-3.6,2.61-1,0-2.88,.1-2.77-.69,.11-.8,3.38-2.1,2.38-3.19-1.45-1.56-8.68-2.49-13.16-3.07-.55-.12-1.06,.06-1.06,.7-.11,4.41-.44,9.28,.28,13.51,.06,.29,.39,.64,.66,.69,7.91,1.33,16.27,.58,22.47-4.17,2.88-2.43,3.82-5.86,3.32-9.62-2.49-10.49-12.95-16.82-21.52-20.87C25.55,5.35,16.31,3.38,6.4,3.9c-1.58,.12-4.08,.69-4.09,1.28-.02,.58,2.83,.4,2.49,1.51-.34,1.11-3.24,.45-4.09,.17C-.16,6.59-.07,5.3,.15,4.48,2.31,.48,8.33,.16,11.05,.02c15.05-.41,29.6,5.6,39.18,13.8h0Zm-27.11,15.54c-3.82,.06-7.86,.46-11.4,1.85-.72,.29-1.61,1.1-1.05,2.09,1.44,2.03,3.5,3.69,5.42,4.87,1.93,1.17,4.48,2.67,6.81,3.02,.55-3.77,.55-7.48,.5-11.36-.22-.12,0-.35-.28-.46h0Zm114.37-5.28c-.17,5.04-4.65,8.18-4.65,13.22,.17,.17,.28,.41,.5,.29,3.6-4.12,7.14-9.97,12.4-11.71,1.39-.12,2.64,1.15,3.15,2.09,1.83,3.83,1.39,9.22-1.16,12.7-2.63,3.41-7.19,6.84-12.39,6.26-2.16,5.57-3.65,11.42-4.48,17.51-.44,1.22-1.49,.12-2.16-.12-4.48-3.71-.8-13.53-.5-14.79,.3-1.25,1.5-4.2,2.38-6.67-2.1-3.94-.78-8.7,.94-12.35,1.33-2.44,3.16-4.87,5.31-6.73,.27,0,.5,.06,.66,.29h0Zm8.91,6.26c-.66-.12-.94,.81-1.49,.99-2.54,3.02-5.09,6.03-6.36,9.62,1.72,.23,3.15-.93,4.65-1.57,2.54-1.68,4.15-4.46,3.98-7.65-.11-.52-.55-.93-.78-1.39h0Z" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="65" viewBox="0 0 125 65" fill="currentColor" class="text-dark mt-xl-5">
<path d="M67.37,.18c-.41,.05-.8,1.32-1.59,1.98-.58,.47-1.3,.45-1.68,1.03-.15,.22-.1,.59-.26,.95-.32,.72-1.46,.78-1.46,1.57,0,.85,.95,1.01,1.77,1.61,.64,.48,.7,.82,1.48,1.05,.66,.19,1.65-.43,2.54-.21,.73,.18,1.43,.31,1.6,.94,.14,.58-.01,1.48-.9,1.38-.3-.03-1.6-.39-3.19-.25-1.92,.18-4.11,.71-4.33,2.51-.12,1,1.36,2.19,2.79,1.95,.99-.16,.52-1.14,1.06-1.62,.7-.61,4.7,2.13,8.42,2.13,1.56,0,2.73-.33,3.89-1.35,.11-.08,.24-.24,.41-.25,.16,.01,.43,.14,.52,.2,2.99,2.02,5.26,6.08,16.26,6.12,1.55,0,3.31,.63,4.75,1.73,1.28,1,2.04,2.55,2.77,4.12,1.1,2.36,3.07,4.66,6.07,7.22,.16,.14,2.63,1.75,2.82,1.87,.03,.02,.21,.38,.15,.58-.07,1.53-.34,5.99,3.62,6.19,.96,.04,.71-.53,.71-.92,0-.78-.17-1.55,.32-2.34,.67-1.09-1.41-1.6-1.35-3.96,.05-1.76-1.72-1.46-2.61-2.8-.52-.78-.97-1.19-.94-2.14,.2-5.35-1.36-8.87-2.13-9.74-.61-.65-1.11-.91-.55-1.21,3.3-1.83,4.05-3.54,4.05-3.54,1.76-3.47,3.33-6.63,5.51-8.03,.44-.29,1.56-.99,2.25-1.27,2.03-.8,3.1-1.29,3.69-1.77,.93-.76,1.67-2.36,.78-3.32-1.11-1.19-3.04-.25-3.89,.18-6.07,3.03-6.96,8.36-9.07,11.43-1.68,2.45-4.4,4.25-6.84,4.4-1.83,.11-3.8-.2-5.76-.92-4.77-1.76-7.38-4.03-8-4.43-1.28-.83-11.23-9.04-19.29-9.37,0,0-1-1.68-1.25-1.71-.59-.06-1.19,1-1.62,1.13-.41,.11-1.09-1.16-1.5-1.1h0ZM31.88,49.16c-.76-.02-1.4-.54-1.4-1.19V26.85h-8.29v23.29c0,1.14,1.1,2.07,2.45,2.07h14.49c1.36,0,2.45-.93,2.45-2.07V26.85h-8.28v21.13c0,.65-.65,1.17-1.41,1.19Zm27.75-22.31h-12.54c-1.49,0-2.7,1.02-2.69,2.27h0v23.09h8.3V31.03c0-.65,.63-1.17,1.4-1.16h0c.77,0,1.4,.5,1.41,1.15v21.2h8.26V31.01c.01-.64,.63-1.15,1.41-1.15s1.4,.51,1.41,1.16v21.18h8.3V29.12c0-1.25-1.2-2.27-2.69-2.27h-12.55ZM16.66,45.84H8.28v6.37H0V26.85H16.71c1.5,0,2.66,1.02,2.66,2.28v14.42c0,1.26-1.21,2.28-2.71,2.29h-.01Zm-5.56-14.76c.01-.66-.62-1.2-1.4-1.21h-1.41v12.83h1.41c.73,0,1.41-.49,1.4-1.19v-10.43h0Zm95.93,18.13c0,1.72-1.64,3.12-3.68,3.12-2.04,0-3.7-1.39-3.71-3.11,0,0,0-.01,0-.02,0-1.7,1.65-3.12,3.65-3.12,2.09,0,3.74,1.38,3.74,3.12Zm-3.73-2.67c-1.67,0-3.06,1.21-3.06,2.67s1.4,2.67,3.11,2.67,3.09-1.2,3.09-2.67-1.38-2.67-3.09-2.67h-.05Zm1.79,4.47h-.99l-1.27-1.42v1.42h-.81v-3.6h.85c1.16,0,1.77,.37,1.77,1.07,0,.47-.36,.88-.87,1.01l-.06,.02,1.38,1.5h0Zm-2.12-2.01c.57,0,.88-.17,.88-.51,0-.31-.3-.46-.86-.46h-.17v.98h.14Zm-14.19,3.2v-6.37h-2.82v6.37h-8.28V29.12c0-1.26,1.21-2.27,2.69-2.27h13.99c1.49,0,2.7,1.02,2.7,2.27h0v23.09h-8.28Zm0-9.51v-11.68c-.02-.65-.64-1.14-1.41-1.14-.77,0-1.39,.52-1.41,1.16v11.66h2.82ZM.23,65v-6.97h.92v.65c.22-.26,.46-.45,.74-.58,.27-.13,.61-.19,1-.19,.51,0,.96,.11,1.35,.33,.39,.22,.69,.54,.89,.94,.2,.4,.3,.85,.3,1.33,0,.51-.11,.98-.33,1.39-.22,.41-.54,.73-.96,.95-.4,.21-.85,.33-1.32,.33-.34,0-.64-.06-.91-.18-.26-.11-.48-.27-.66-.46v2.45H.23Zm.92-4.42c0,.65,.16,1.13,.47,1.44,.31,.31,.69,.46,1.13,.46s.84-.16,1.16-.48c.32-.32,.48-.82,.48-1.49s-.16-1.12-.47-1.44c-.31-.32-.69-.48-1.13-.48s-.82,.17-1.15,.51c-.33,.34-.5,.84-.5,1.48h0Zm15.22,2.49v-.74c-.47,.57-1.1,.85-1.9,.85-.35,0-.68-.06-.99-.17-.31-.11-.53-.26-.68-.43-.16-.19-.27-.41-.31-.63-.04-.17-.06-.43-.06-.8v-3.12h1.02v2.79c0,.45,.02,.75,.06,.9,.07,.22,.2,.4,.41,.53,.21,.13,.46,.19,.77,.19s.59-.07,.86-.2c.27-.13,.46-.31,.57-.54,.11-.23,.17-.56,.17-.98v-2.7h1.02v5.04h-.91Zm8.28,0v-5.04h.91v.71c.19-.25,.45-.45,.75-.59,.31-.15,.67-.23,1.07-.23,.44,0,.81,.08,1.09,.23,.29,.16,.49,.37,.6,.65,.48-.59,1.09-.88,1.85-.88,.6,0,1.05,.14,1.37,.42,.32,.28,.48,.7,.48,1.28v3.46h-1.01v-3.17c0-.34-.03-.59-.1-.74-.07-.15-.19-.28-.36-.36-.18-.09-.4-.14-.61-.14-.42,0-.77,.12-1.05,.35-.28,.24-.42,.61-.42,1.13v2.93h-1.02v-3.27c0-.38-.08-.67-.25-.85-.17-.19-.44-.28-.81-.28-.29,0-.55,.06-.79,.19-.24,.13-.42,.31-.53,.55-.11,.24-.16,.59-.16,1.05v2.61h-1.02Zm19.32-.62c-.38,.27-.74,.46-1.09,.57-.36,.11-.74,.17-1.12,.17-.66,0-1.16-.13-1.52-.4-.35-.27-.53-.62-.53-1.04,0-.25,.07-.47,.2-.68,.13-.2,.31-.36,.52-.49,.22-.12,.46-.22,.73-.28,.3-.06,.6-.1,.9-.13,.82-.08,1.43-.18,1.81-.3,0-.12,0-.19,0-.22,0-.35-.1-.59-.29-.73-.26-.19-.65-.29-1.16-.29-.48,0-.83,.07-1.06,.21-.23,.14-.39,.39-.5,.75l-.99-.12c.09-.35,.24-.64,.45-.86,.21-.22,.51-.39,.9-.51,.39-.12,.84-.18,1.36-.18s.93,.05,1.25,.15c.32,.1,.56,.23,.71,.38,.15,.15,.25,.35,.32,.58,.03,.14,.05,.41,.05,.79v1.14c0,.79,.02,1.3,.07,1.51,.04,.21,.13,.41,.26,.61h-1.06c-.11-.19-.18-.41-.2-.62h0Zm-.09-1.91c-.37,.13-.92,.23-1.66,.32-.42,.05-.71,.11-.89,.17-.16,.06-.3,.15-.4,.28-.09,.12-.14,.25-.14,.4,0,.23,.1,.42,.31,.57,.2,.15,.5,.23,.9,.23s.74-.07,1.04-.21c.29-.13,.53-.34,.67-.59,.11-.19,.16-.48,.16-.85v-.31h0Zm8.67,2.53v-.97h1.16v.97h-1.16Zm12.62-1.85l1,.11c-.11,.58-.39,1.03-.84,1.36-.45,.33-1,.49-1.66,.49-.82,0-1.48-.22-1.98-.67-.5-.45-.75-1.1-.75-1.94,0-.54,.11-1.02,.32-1.43,.22-.41,.54-.71,.98-.92,.44-.2,.93-.31,1.43-.31,.65,0,1.19,.14,1.6,.42,.41,.28,.68,.67,.8,1.18l-.99,.13c-.1-.34-.26-.59-.5-.76-.24-.17-.53-.26-.87-.26-.51,0-.93,.15-1.25,.46-.32,.31-.48,.8-.48,1.46s.16,1.17,.46,1.48c.31,.31,.71,.46,1.21,.46,.4,0,.73-.1,1-.31,.27-.2,.44-.52,.51-.95h0Zm7.27-.67c0-.93,.31-1.62,.93-2.07,.52-.37,1.14-.56,1.88-.56,.83,0,1.5,.23,2.02,.68,.52,.45,.78,1.08,.78,1.88,0,.65-.12,1.16-.35,1.53-.23,.37-.58,.67-1.01,.87-.44,.21-.94,.31-1.45,.31-.84,0-1.52-.22-2.04-.68-.52-.45-.78-1.1-.78-1.95h0Zm1.05,0c0,.64,.17,1.13,.5,1.45,.33,.32,.76,.48,1.26,.48s.92-.16,1.26-.48c.33-.32,.5-.81,.5-1.48,0-.62-.17-1.1-.5-1.42-.34-.32-.76-.48-1.26-.48s-.93,.16-1.26,.48c-.34,.32-.5,.8-.5,1.45Zm11.54,2.52v-5.04h.91v.71c.19-.25,.45-.45,.75-.59,.31-.15,.67-.23,1.07-.23,.44,0,.81,.08,1.09,.23,.29,.16,.49,.37,.6,.65,.48-.59,1.09-.88,1.85-.88,.59,0,1.05,.14,1.37,.42,.32,.28,.48,.7,.48,1.28v3.46h-1.01v-3.17c0-.34-.03-.59-.1-.74-.07-.15-.19-.27-.36-.36-.18-.09-.39-.14-.61-.14-.42,0-.77,.12-1.05,.35-.28,.24-.42,.61-.42,1.13v2.93h-1.02v-3.27c0-.38-.08-.67-.25-.85-.17-.19-.44-.28-.81-.28-.29,0-.55,.06-.79,.19-.24,.13-.42,.31-.53,.55-.11,.24-.16,.59-.16,1.05v2.61h-1.02Z" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65" fill="currentColor" class="text-dark mt-xl-5">
<path d="M32.5,0c17.9,0,32.5,14.6,32.5,32.5s-14.6,32.5-32.5,32.5S0,50.4,0,32.5,14.6,0,32.5,0h0Zm0,5.86c14.67,0,26.64,11.97,26.64,26.64s-11.97,26.64-26.64,26.64S5.86,47.17,5.86,32.5,17.83,5.86,32.5,5.86h0Zm15.61,44.09h-12.99V24.44h6.21v20.32h6.78v5.2Zm-15.48-16.37c0,4.65-3.1,7.18-7.53,7.18h-.91c-4.4,0-7.59-2.26-7.59-6.98V14.85h6.21v19.26c0,1.35,.54,2.02,1.62,2.02h.34c1.38,0,1.65-1.32,1.65-2.43V14.85h6.21v18.73h0Zm-11.67,12.39c0,2,1.63,3.62,3.62,3.62s3.62-1.63,3.62-3.62-1.61-3.62-3.62-3.62c-2,0-3.62,1.63-3.62,3.62h0Zm.68,0c0-1.71,1.33-3.07,2.94-3.07s2.94,1.37,2.94,3.07-1.3,3.07-2.94,3.07c-1.62,0-2.94-1.38-2.94-3.07Zm1.62,1.78h.67v-1.5h.55c.77,0,.79,.34,.8,.67,.02,.6,.01,.68,.13,.83h.69c-.14-.2-.11-.3-.14-.86-.02-.36-.05-.78-.52-.87v-.02c.54-.22,.61-.58,.61-.83,0-.94-.81-1.05-1.19-1.05h-1.61v3.62h0Zm.67-3.13h.7c.43,0,.74,.11,.74,.55,0,.26-.1,.58-.66,.58h-.78v-1.13h0Z" fill-rule="evenodd" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="65" viewBox="0 0 125 65" fill="currentColor" class="text-dark">
<path d="M31.75,14.84c15.02,2.84,29.72,.88,35.7,.55-10.07,9.01-10.28,27.63-22.14,27.72-1.82,.01-3.91-.41-6.35-1.36,8.43-19.24-4.19-24.25-7.21-26.9h0Zm-4.65,1.64c5.54-.19,12.32,6.08,12.62,12.62,.43,9.34-4.89,13.45-4.84,16.65,.05,3.01,2.54,5.76,3.5,7.72h-7.71c-.43-1.49-1.53-2.14-1.56-2.25-.46-1.57,.56-2.81,.53-5.22-.1-6.93-10.64-7.36-10.93-20.45-.1-4.72,2.78-8.88,8.39-9.08h0Zm44.76,14.38c-3.05,.07-4.92,3.29-8.04,6.73-1.68,2.72-3.07,11.4-3.52,15.88h8.19c.43-3.59-1.94-2.8-1.79-4.25,.51-5,3.48-4.41,4.02-9.03,3.63-.33,5.44-2.48,5.54-4.75,.14-3.32-2.78-4.61-4.38-4.57h0Zm3.45,9.86c-.46,.22-1.32,1.18-3.14,1.19-1.13,3.17-3.01,3.26-3.93,6.41-.31,.51,1.47,1.39,.98,2.36,.24,.33,1.27,1,1.34,2.79h6.06c-.9-4.36-4.19-4.23-4.21-5.69-.05-3.14,2.36-5.35,2.89-7.06h0Zm-37.43,1.07c.22,1.43-1.69,1.83-1.59,5.04,.04,1.16,2.41,4.65,3.89,6.64h5.31c-2.53-4.38-6.12-5.5-6.14-6.78-.03-1.34,1.25-3.26-1.46-4.89h0Zm-19.79-12.41c.88,1,1.63,3.54,1.49,6.05-.13,2.51-1.46,3.35-2.02,4.34-1.08-1.42-1.59-2.98-1.59-5.15s1.46-4.35,2.12-5.24h0Zm57.96-14.97c3.82-.37,5.48,2.34,5.62,4.89,.26,4.8-3.21,4.87-3.29,8.63-.04,2.22,.69,1.34,.87,6.41,.13,3.64-2.31,5.17-3.38,5.86-.03-.46,1.4-3.12,1.13-6.47-.24-2.93-3.06-4.19-5.01-4.2-5.21-.02-8.73,9.68-15.36,12.5-.78,.33-3.01,.25-3.32-.17,8.84-7.17,7.76-26,22.74-27.45h0Zm11.6-.91c.04,1.01,.16,2.7-1.09,4.12s-2.98,1.5-3.8,1.66c.02-1.36,.51-2.47,1.53-3.75s2.57-1.82,3.37-2.03h0Zm-.22,10.65c.99,4.6,9.12,9.62,8.84,11.54-.3,2.12,.84,5.85-1.94,6.36-.26-1.32-.78-1.89-1.53-1.87-1.03,.03-1.34,2.5-1.18,4.01-1.9,.42-3.84-1.59-5.69-2.91-2.04-1.47-4.11-2.88-5.73-4.72,.98-3.81-.89-10.1,.19-11.33,.91-1.03,4.46,.44,7.03-1.09h0Zm12.25-.37c2.03,4.23-1.66,8.76-4.59,8.48-.83-.08-1.89-1.51-1.58-2.49,2.86-1.81,5.18-4.67,6.16-5.99h0Zm-9.28-8.46c.78,3.89-1.88,8.98-8.23,8.54,.71-1.02,.16-2.73,.68-3.71,2.79-.31,6.26-3.21,7.55-4.83Zm18.78,6.77c2.22,5.42-7.65,15.37-10.59,15.84-1.75,.28-1.52-3.14-1.38-4.31,2.86-1.81,10.26-7.29,11.98-11.52h0Zm-20.12,9.95c.07,1.6-.84,2.38-1.75,2.22-.95-.17-1.4-1.66-1.23-2.75,.92,.72,2.28,.74,2.98,.53h0ZM8.63,59.58H106.17c1.31,0,2.61-.56,3.64-1.46h0c1.06-.93,1.83-2.16,2.06-3.5l7.73-45.17c.04-.25,.06-.51,.06-.77,0-.84-.26-1.58-.71-2.14-.45-.55-1.1-.94-1.88-1.07-.24-.04-.48-.06-.71-.06H18.82c-1.31,0-2.61,.56-3.64,1.46-1.06,.91-1.83,2.15-2.06,3.49L5.39,55.54c-.04,.25-.06,.51-.06,.77,0,.84,.26,1.58,.72,2.14,.45,.55,1.1,.94,1.88,1.07,.21,.04,.45,.06,.71,.06h0Zm0,5.42c-.54,0-1.08-.05-1.61-.14-2.09-.37-3.85-1.42-5.08-2.93-1.23-1.51-1.94-3.45-1.94-5.61,0-.54,.05-1.1,.15-1.68L7.87,9.46c.45-2.62,1.89-4.99,3.85-6.68,1.98-1.71,4.51-2.77,7.1-2.77H116.37c.54,0,1.08,.05,1.61,.14,2.09,.37,3.84,1.42,5.08,2.93,1.23,1.51,1.94,3.45,1.94,5.61,0,.54-.05,1.1-.15,1.68l-7.73,45.17c-.45,2.63-1.89,5-3.85,6.7h0c-1.98,1.69-4.5,2.76-7.1,2.76H8.63Z" fill-rule="evenodd" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="65" viewBox="0 0 125 65" fill="currentColor" class="text-dark mt-xl-5">
<path d="M122.61,13.9c-1.32,0-2.4,1.13-2.4,2.52s1.07,2.52,2.4,2.52c1.32,0,2.39-1.13,2.39-2.52h0c0-1.4-1.07-2.52-2.39-2.52Zm0,4.74c-1.16,0-2.11-.99-2.11-2.22h0c0-1.23,.94-2.22,2.11-2.22h0c1.16,0,2.1,.99,2.1,2.21,0,1.22-.93,2.22-2.09,2.22h0Zm1.23-2.88c0-.24-.1-.49-.3-.61-.2-.13-.43-.14-.65-.14h-1.17v2.82h.33v-1.3h.6l.77,1.3h.39l-.81-1.3c.48-.01,.85-.22,.85-.77h0Zm-1.29,.5h-.5v-1h.77c.33,0,.7,.05,.7,.49,0,.57-.58,.51-.96,.51ZM42.33,58.01l-15.62-8.02c-.34-.19-.52-.66-.51-.98l.04-4.43c0-.31,.06-.63,.45-.93,1.67-1.12,6.84-4.13,12.19-12.33,7.12-10.93,0-20.1-11.12-17.61-9.88,2.22-19.94,7.85-24.3,10.9C-.43,27.34,.11,30.64,0,33.59c.22,1.25,.65,1.14,1.62-.11,7.24-7.04,18.25-12.38,20.3-13.29s6.91-3.98,12.64-2.61c5.5,1.31,4.16,9.17,2.48,12.49-1.84,3.63-7.07,8.92-9.45,10.22-.9,.5-1.24,0-1.24-.8l.38-17.1c0-1.14-.49-1.65-1.57-1.25l-1.73,.91c-1.19,.74-1.13,1.02-1.24,1.93l-.26,19.71c0,.43-.2,.77-.42,.87l-5.64,3.33c-1.3,.68-.97,1.7,0,2.05l4.54,2.27c1.08,.45,1.4,.79,1.4,1.93l-.16,9.54c4.05-.85,4.32-2.9,4.43-4.26v-2.9c.11-.68,.49-.91,1.03-.79l13.18,6.7c1.19,.57,1.84,.34,2.7-1.25,.86-1.59,.97-2.38-.65-3.18h0Zm23.02-24.07c-1.83,1.11-2.68,3.19-1.96,4.51,.72,1.31,2.9,1.53,4.73,.42,1.83-1.11,2.62-3.14,1.9-4.45-.72-1.31-2.84-1.59-4.68-.48Zm-6.76,1.41c-.5,.64-1.46,2.58-2,3.78-.54,1.19-1.67,3.89-2.81,3.89-1.2,0-1.35-3.12-1.35-4.26s-.65-1.31-.97-1.25-1.24,.4-1.51,1.59c-.27,1.19-1.73,6.36-3.35,6.36-1.03,0-1.78-3.12-1.84-4.09-.05-.96-.49-1.76-1.4-1.76-.65,0-1.46,.34-1.78,.74s-.38,1.02-2.11,.62c-1.57-.06-3.08,.8-4.91,4.03-1.11,1.95-2,5.58-.32,7.04,1.57,1.36,4.32-1.08,5.13-2.1,.81-1.02,1.51-1.76,1.84-2.33,.32-.57,.65-.51,.81,.06,.16,.57,1.08,2.78,2.27,2.73,1.19-.06,2.7-1.02,4.48-4.32,.32-.68,.81-.62,.92-.06,.11,.57,.81,2.44,2,2.44s2.4-1.89,3.02-3.01c.43-.77,1.08-.4,1.08,.34s-.32,18.17-.32,18.17c0,.79,.3,1.02,.84,1.02h2.35c.43,0,.81-.4,.81-1.02l.49-28.26c0-.68-.73-1.16-1.35-.37h0Zm-18.36,11.13c-.49,.85-1.78,3.12-2.92,2.73-.59-.34,.2-2.61,.59-3.41,.59-1.19,2.34-3.09,3.13-2.61,.76,.45-.32,2.44-.81,3.29h0ZM122.52,29.06c-.22,.2-.57,.54-1.35,.17-1.35-.57-1.46-3.24-2.16-5.68-.63-2.19-2.15-2.06-2.7-1.05l-1.65,2.78c-.3,.57-.94,1.87-1.59,1.87-.76,0-.42-1.14-.38-2.27,.03-.77-.43-1.73-1.19-1.73-.86,0-1.78,1.39-2.48,2.98-.49,1.11-1.76,5.37-3.35,5.37-1.03,0-1.13-3.12-1.19-4.09s-.38-2.16-1.3-2.16c-.62,0-1.03,.34-1.35,.74-.32,.4-.38,.74-1.51,.57-1.57-.06-4.16,1.48-5.99,4.71-1.11,1.95-2.44,6.04-.76,7.5,1.57,1.36,4.37-1.82,5.18-2.84,.81-1.02,1.51-1.76,1.84-2.33,.32-.57,.65-.51,.81,.06,.16,.57,1.08,2.78,2.27,2.73,1.19-.06,2.16-.34,3.94-3.64,.32-.68,.92-.77,1.03-.2s.22,2.07,1.35,2.07c1.94,0,4.15-4.97,4.7-6.13,.49-1.02,1.27-.74,1.54,.03,.39,1.1,.73,4.63,2.83,4.63s3.54-2.36,3.97-3.1c.49-.74,.23-1.68-.51-.99h0Zm-22.89,3.41c-.49,.85-1.57,2.73-2.7,2.33-.59-.34,.14-1.99,.54-2.78,.59-1.19,2.33-3.12,3.13-2.64,.75,.45-.49,2.24-.97,3.1h0Zm-10.43-2.98s-4.59-3.52-5.89-5.11c-.87-1.07-.27-1.87,.27-2.33,3.24-2.27,8.31-5.79,10.31-11.25,1.92-5.26-1.08-9.83-3.24-10.56-2.96-1.01-9.23,1.02-12.37,7.16-2.03,3.97-2.97,5.28-3.24,16.07-.05,2.04-.11,4.37-.11,6.93s-.27,9.48-.54,10.79c-1.03,3.07,2.05,1.25,3.46,.06,1.4-1.19,1.3-2.98,1.3-3.75,0-.97,.05-18,.54-21.81,.3-2.37,.65-6.76,3.02-10.56,2.38-3.81,4.81-2.27,5.45-1.65,.65,.62,1.57,2.22,1.08,5.45-.75,5.02-6.26,10.51-7.67,12.21-1.4,1.7-1.08,3.18-.27,4.37,.58,.85,2,2.5,3.46,4.03,1.46,1.53,1.3,2.9,1.08,3.92-.76,3.07-8.64,11.36-8.64,11.36-1.67,1.87,.05,4.94,.65,5.96,.6,1.02,1.35,.68,1.84-.17,1.94-3.8,10.31-13.01,10.31-13.01,2.43-3.24,1.41-6.36-.81-8.12h0Z" fill-rule="evenodd" />
</svg>
</div>
<div class="col-6 col-md-3 align-self-center text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="65" viewBox="0 0 150 65" fill="currentColor" class="text-dark mt-xl-5">
<path d="M76.42,3.33c-3.06,3.64-11.77,15.4-12.77,16.92-1.91,2.92-2.08,4.33-2.14,5.27-.06,.92-.06,2.59,1.5,3.95,2.61,2.25,6.26,1.88,9.51,1.88h26.72c1.14,0,1.48-.33,2.1-1.12,2.14-3.15,3.09-6.58,3.09-9.64,0-6.56-4.41-14.82-15.56-18.55l-1.26,1.74c8.85,4.06,12.51,9.37,12.51,16.79,.06,1.99-.49,4.15-1.84,6.14h-25.99c-1.56,0-1.78-1.7-1.22-2.66,2.23-3.83,4.71-7.52,7.44-11.03,2.63-3.39,5.21-6.56,7.93-9.87,.73-.92,.24-1.81-1.22-2.1-3.04-.62-6.21-1.05-10.05-1.05-21.32,0-29.12,11.83-29.12,20.6,0,9.51,7.86,20.54,29.18,20.54,11.83,0,19.58-3.68,24.06-8.41h-4.52c-3.92,3.5-10.65,5.98-19.54,5.98-18.06,0-24.71-9.8-24.71-18.24,.13-7.54,7.27-17.93,25.16-18.28,.68-.02,1.2,.58,.73,1.14h0Zm64.13,54.29c1.07,.15,1.89,.96,1.89,1.92,0,1.09-1.01,1.96-2.25,1.96h-22.91v-14.47h-6.75v14.51h-12.41c-3.36,0-4.05-1.97-4.05-3.79v-10.81h-11.19c-1.11,.72-2.18,1.52-3.32,2.19l-6.64,3.95-8.62-6.09h-13.43v3.64h4.86v-1.99l11.42,7.92-7.8,4.73h-8.48v3.64h9.81c1.05-.69,2.04-1.41,3.13-2.05l6.82-4,8.66,5.98h9.86l-13.03-9.47,6.69-4.22c1.43-.91,2.93-1.67,4.39-2.5v9.53c0,4.02,1.07,6.81,9.45,6.81l47.34-.11c3.66,.05,6-2.39,6-5.34s-2.7-5.35-6-5.35h-17.1c.23-2.01,2.02-3.69,3.84-3.69h17.31l-.05-3.5h-18.36c-5.81,0-10.46,4.66-10.59,10.07-.02,.38,.24,.62,.68,.62l20.83-.08h0Zm-89.68-.05v-3.71h3.34v3.71h-3.34Zm0-10.58h-12.68c-3.43,0-6.08,.87-8.02,2.35-3.51,2.68-4.63,5.51-4.59,6.78h4.57c-2.01,1.45-3.36,3.19-4.07,5.2H11.08c-2.7,0-4.44-1.85-4.44-3.64v-10.81H0v11.23c0,4.04,3.98,6.83,10.35,6.83H50.87v-3.64h-16.09c.08-1.85,2.12-3.71,3.97-3.71h12.11v-3.71h-16.28c-.22-1.09,1.88-3.22,3.49-3.22h12.79v-3.64h0Z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Clients"] = ["clients/clients-1"];
Vvveb.Sections.add("contact-form/contact-form-1", {
name: "Contact form 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-2", {
name: "Contact form 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-3", {
name: "Contact form 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-4", {
name: "Contact form 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-5", {
name: "Contact form 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-5-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("contact-form/contact-form-6", {
name: "Contact form 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-6-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-7", {
name: "Contact form 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-7-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-8", {
name: "Contact form 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-8-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("contact-form/contact-form-9", {
name: "Contact form 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-9-thumb.webp",
html: `<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.webp" 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>`
});Vvveb.Sections.add("contact-form/contact-form-10", {
name: "Contact form 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-10-thumb.webp",
html: `<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>`
});
Vvveb.SectionsGroup["Contact form"] = ["contact-form/contact-form-1","contact-form/contact-form-2","contact-form/contact-form-3","contact-form/contact-form-4","contact-form/contact-form-5","contact-form/contact-form-6","contact-form/contact-form-7","contact-form/contact-form-8","contact-form/contact-form-9","contact-form/contact-form-10"];
Vvveb.Sections.add("counter/counter-1", {
name: "Counter 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/counter/counter-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("counter/counter-2", {
name: "Counter 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/counter/counter-2-thumb.webp",
html: `<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.webp" 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>`
});
Vvveb.SectionsGroup["Counter"] = ["counter/counter-1","counter/counter-2"];
Vvveb.Sections.add("cta/cta-1", {
name: "Cta 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/cta/cta-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("cta/cta-2", {
name: "Cta 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/cta/cta-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("cta/cta-3", {
name: "Cta 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/cta/cta-3-thumb.webp",
html: `<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.webp" alt="Team 1">
</div>
</section>`
});
Vvveb.SectionsGroup["Cta"] = ["cta/cta-1","cta/cta-2","cta/cta-3"];
Vvveb.Sections.add("faq/faq-1", {
name: "Faq 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-2", {
name: "Faq 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-3", {
name: "Faq 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-4", {
name: "Faq 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-5", {
name: "Faq 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-5-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-6", {
name: "Faq 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-6-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("faq/faq-7", {
name: "Faq 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/faq/faq-7-thumb.webp",
html: `<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>`
});
Vvveb.SectionsGroup["Faq"] = ["faq/faq-1","faq/faq-2","faq/faq-3","faq/faq-4","faq/faq-5","faq/faq-6","faq/faq-7"];
Vvveb.Sections.add("footer/footer-1", {
name: "Footer 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-2", {
name: "Footer 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-3", {
name: "Footer 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-4", {
name: "Footer 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-5", {
name: "Footer 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-5-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-6", {
name: "Footer 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-6-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-7", {
name: "Footer 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-7-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-8", {
name: "Footer 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-8-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-9", {
name: "Footer 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-9-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-10", {
name: "Footer 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-10-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-11", {
name: "Footer 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-11-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-12", {
name: "Footer 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-12-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-13", {
name: "Footer 13",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-13-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-14", {
name: "Footer 14",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-14-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("footer/footer-15", {
name: "Footer 15",
image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-15-thumb.webp",
html: `<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>`
});
Vvveb.SectionsGroup["Footer"] = ["footer/footer-1","footer/footer-2","footer/footer-3","footer/footer-4","footer/footer-5","footer/footer-6","footer/footer-7","footer/footer-8","footer/footer-9","footer/footer-10","footer/footer-11","footer/footer-12","footer/footer-13","footer/footer-14","footer/footer-15"];
Vvveb.Sections.add("how-it-works/how-it-works-1", {
name: "How it works 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/how-it-works/how-it-works-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("how-it-works/how-it-works-2", {
name: "How it works 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/how-it-works/how-it-works-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("how-it-works/how-it-works-3", {
name: "How it works 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/how-it-works/how-it-works-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("how-it-works/how-it-works-4", {
name: "How it works 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/how-it-works/how-it-works-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("how-it-works/how-it-works-5", {
name: "How it works 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/how-it-works/how-it-works-5-thumb.webp",
html: `<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>`
});
Vvveb.SectionsGroup["How it works"] = ["how-it-works/how-it-works-1","how-it-works/how-it-works-2","how-it-works/how-it-works-3","how-it-works/how-it-works-4","how-it-works/how-it-works-5"];
Vvveb.Sections.add("navigation/navigation-1", {
name: "Navigation 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-1-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("navigation/navigation-2", {
name: "Navigation 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-2-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("navigation/navigation-3", {
name: "Navigation 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-3-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("navigation/navigation-4", {
name: "Navigation 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-4-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("navigation/navigation-5", {
name: "Navigation 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-5-thumb.webp",
html: `<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>`
});Vvveb.Sections.add("navigation/navigation-6", {
name: "Navigation 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-6-thumb.webp",
html: `<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>`
});
Vvveb.SectionsGroup["Navigation"] = ["navigation/navigation-1","navigation/navigation-2","navigation/navigation-3","navigation/navigation-4","navigation/navigation-5","navigation/navigation-6"];
Vvveb.Sections.add("portfolio/portfolio-1", {
name: "Portfolio 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/portfolio/portfolio-1-thumb.webp",
html: `<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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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>`
});Vvveb.Sections.add("portfolio/portfolio-2", {
name: "Portfolio 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/portfolio/portfolio-2-thumb.webp",
html: `<section class="portfolio-2 my-5" aria-label="portfolio-2">
<div class="container">
<div class="row justify-content-center pb-2">
<div class="col-md-7 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 has-shadow hover-effect" data-component-gallery="portfolio-1" id="gallery-RANDOM_ID">
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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>
</div>
</section>`
});Vvveb.Sections.add("portfolio/portfolio-3", {
name: "Portfolio 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/portfolio/portfolio-3-thumb.webp",
html: `<section class="portfolio-2 my-5" aria-label="portfolio-3">
<div class="container">
<div class="row justify-content-center pb-2">
<div class="col-md-7 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 has-shadow hover-effect" data-component-gallery="portfolio-3" style="column-count: 2;" id="gallery-RANDOM_ID">
<div class="item">
<figure>
<img class="img-fluid" src="demo/img/team-1.webp" 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.webp" 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.webp" 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.webp" 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>
</div>
</section>`
});
Vvveb.SectionsGroup["Portfolio"] = ["portfolio/portfolio-1","portfolio/portfolio-2","portfolio/portfolio-3"];
Vvveb.Sections.add("posts/posts-1", {
name: "Posts 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-1-thumb.webp",
html: `<section class="posts-1" aria-label="latest-post-1">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Latest Posts</h2>
<p class="lead text-center text-muted mb-4">Fresh updates from the industry.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div data-v-component-posts="posts-1" data-v-limit="3" data-v-image_size="medium">
<div class="row">
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<article class="card post h-100 shadow-sm border">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<ul class="post-meta text-start mb-3 small">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<i class="la la-user"></i>
</span>
<span class="meta-text">
By <a href="content/post.html" data-v-post-author-url>
<span data-v-post-display_name>admin</span>
</a>
</span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<i class="la la-calendar"></i>
</span>
<span class="meta-text">
<a href="content/post.html" data-v-post-url>
<!-- <span data-v-post-created_at data-filter-friendly_date>December 31, 2020</span> -->
<span data-v-post-created_at_formatted>December 31, 2020</span>
</a>
</span>
</li>
<!--
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<i class="la la-comment"></i>
</span>
<span class="meta-text">
<a href="#comments" data-v-post-comments-url><span data-v-post-comment_text>0 Comments</span></a>
</span>
</li>
-->
</ul>
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<article class="card post h-100 shadow-sm border">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<ul class="post-meta text-start mb-3 small">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<i class="la la-user"></i>
</span>
<span class="meta-text">
By <a href="content/post.html" data-v-post-author-url>
<span data-v-post-display_name>admin</span>
</a>
</span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<i class="la la-calendar"></i>
</span>
<span class="meta-text">
<a href="content/post.html" data-v-post-url>
<!-- <span data-v-post-created_at data-filter-friendly_date>December 31, 2020</span> -->
<span data-v-post-created_at_formatted>December 31, 2020</span>
</a>
</span>
</li>
<!--
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<i class="la la-comment"></i>
</span>
<span class="meta-text">
<a href="#comments" data-v-post-comments-url><span data-v-post-comment_text>0 Comments</span></a>
</span>
</li>
-->
</ul>
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
<div class="col-12 col-lg-4 mb-2" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<article class="card post h-100 shadow-sm border">
<div class="card-img-top" data-v-if="post.image">
<img src="demo/img/video-1.webp" alt="" class="w-100" loading="lazy" data-v-size="thumb" data-v-post-image>
</div>
<!-- Post Title -->
<a data-v-post-url>
<div class="card-body p-4">
<div class="post-title card-title">
<h3 class="h4" data-v-post-name>
Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
</h3>
</div>
<ul class="post-meta text-start mb-3 small">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<i class="la la-user"></i>
</span>
<span class="meta-text">
By <a href="content/post.html" data-v-post-author-url>
<span data-v-post-display_name>admin</span>
</a>
</span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<i class="la la-calendar"></i>
</span>
<span class="meta-text">
<a href="content/post.html" data-v-post-url>
<!-- <span data-v-post-created_at data-filter-friendly_date>December 31, 2020</span> -->
<span data-v-post-created_at_formatted>December 31, 2020</span>
</a>
</span>
</li>
<!--
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<i class="la la-comment"></i>
</span>
<span class="meta-text">
<a href="#comments" data-v-post-comments-url><span data-v-post-comment_text>0 Comments</span></a>
</span>
</li>
-->
</ul>
<p class="card-text text-muted" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
<button title="{$post.name}" role="button" class="btn btn-link px-0">
<span>Read more</span>
<i class="la la-angle-right"></i>
</button>
</div>
</a>
</article>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-2", {
name: "Posts 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-2-thumb.webp",
html: `<section class="pt-5 pb-5" aria-label="posts-2">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">News sections</h3>
</div>
<div class="col-6 text-end">
<a class="btn btn-outline-primary mb-3 me-1" href="#carouselPosts2" role="button" data-bs-slide="prev">
<i class="la la-arrow-left"></i>
</a>
<a class="btn btn-outline-primary mb-3 " href="#carouselPosts2" role="button" data-bs-slide="next">
<i class="la la-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselPosts2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-v-component-posts="slide1" data-v-limit="3" data-v-page="1" data-v-image_size="medium">
<div class="row">
<div class="col-md-4 mb-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day67-dog" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day22-owl" src="demo/img/team-2.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day68-happy-cat" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-v-component-posts="slide2" data-v-limit="3" data-v-page="2">
<div class="row">
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day79-coffee" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="109-map-location" src="demo/img/team-2.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="107-healthy" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-v-component-posts="slide3" data-v-limit="3" data-v-page="3">
<div class="row">
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="126-namaste-no-hand-shake" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="104-dumbbell" src="demo/img/team-2.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3" data-v-post>
<div class="card">
<img class="img-fluid" loading="lazy" alt="day50-pirahna" src="demo/img/team-1.webp" data-v-post-image>
<div class="card-body">
<a href="content/post.html" data-v-post-url>
<h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-3", {
name: "Posts 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-3-thumb.webp",
html: `<section class="posts-3 py-5" aria-label="posts-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h2 class="text-center display-6 mb-1 fw-bold">From Our Blog</h2>
<p class="lead text-center text-muted mb-4">Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada.</p>
</div>
</div>
<div data-v-component-posts="posts-3" data-v-limit="3" data-v-page="1" data-v-image_size="medium">
<div class="row mt-4">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small" data-v-post-created_at_formatted>Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small" data-v-post-created_at_formatted>Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
<img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
<div class="card-img-overlay overflow-hidden">
<div class="d-flex align-items-center">
<span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
<div class="ms-2">
<span class="ms-2 small" data-v-post-created_at_formatted>Jan 21, 2024</span>
</div>
</div>
<a href="content/post.html" class="text-body" data-v-post-url>
<h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
</a>
<p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-4", {
name: "Posts 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-4-thumb.webp",
html: `<section class="posts-4 py-5" aria-label="posts-4">
<div class="container">
<div class="row justify-content-center text-center mb-4 mb-md-5">
<div class="col-xl-9 col-xxl-8">
<span class="text-muted">Read More</span>
<h2 class="display-5 fw-bold">Our Blog</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div data-v-component-posts="posts-4" data-v-limit="5" data-v-page="1" data-v-categories="1" data-v-image_size="large">
<div class="row">
<div class="col-md-6">
<div data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0" data-v-if="index = 0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold my-2">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
<p data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post data-v-if="index > 0">
<div class="card border-0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
</div>
</div>
</div>
<div class="col-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="">
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0">
<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
<h3 class="fw-semibold">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
</div>
</div>
</div>
<div class="col-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="">
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0">
<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
<h3 class="fw-semibold">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
</div>
</div>
</div>
<div class="col-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="">
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0">
<a class="text-primary fw-semibold text-decoration-none" href="">Category</a>
<h3 class="fw-semibold">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-5", {
name: "Posts 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-5-thumb.webp",
html: `<section class="posts-5 py-5" aria-label="posts-5">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-md-3">
<div class="col-xl-9 col-xxl-8">
<span class="text-muted">Read More</span>
<h2 class="display-5 fw-bold">Our Blog</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div data-v-component-posts="posts-5" data-v-limit="3" data-v-page="1" data-v-categories="1" data-v-image_size="large">
<div class="row align-items-center gy-md-5 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="col-md-6">
<img alt="" class="img-fluid rounded my-md-0 my-4" src="demo/img/team-1.webp" data-v-post-image>
</div>
<div class="col-md-6">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h2 class="fw-semibold my-1">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h2>
<div class="text-muted" data-v-post-created_at_formatted>
10.10.2026
</div>
<p class="my-4" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
<a class="btn-link" href="" data-v-post-url>
<span>Read more</span>
</a>
</div>
</div>
<div class="row align-items-center gy-md-5 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="col-md-6">
<img alt="" class="img-fluid rounded my-md-0 my-4" src="demo/img/team-1.webp" data-v-post-image>
</div>
<div class="col-md-6">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h2 class="fw-semibold my-1">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h2>
<div class="text-muted" data-v-post-created_at_formatted>
10.10.2026
</div>
<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
<a class="btn-link" href="">Read more</a>
</div>
</div>
<div class="row align-items-center gy-md-5 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="col-md-6">
<img alt="" class="img-fluid rounded my-md-0 my-4" src="demo/img/team-1.webp" data-v-post-image>
</div>
<div class="col-md-6">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h2 class="fw-semibold my-1">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h2>
<div class="text-muted" data-v-post-created_at_formatted>
10.10.2026
</div>
<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
<a class="btn-link" href="">Read more</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-6", {
name: "Posts 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-6-thumb.webp",
html: `<section class="posts-6 py-5" aria-label="posts-6">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-md-3">
<div class="col-xl-9 col-xxl-8">
<span class="text-muted">Read More</span>
<h2 class="display-5 fw-bold">Our Blog</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div data-v-component-posts="posts-6" data-v-limit="2" data-v-page="1" data-v-categories="1" data-v-image_size="large">
<div data-v-post>
<div class="row align-items-center gy-md-5 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="{$index}00" data-v-if="index % 2 = 0">
<div class="col-md-6">
<img alt="" class="img-fluid rounded my-md-0 my-4" src="demo/img/team-1.webp" data-v-post-image>
</div>
<div class="col-md-6">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h2 class="fw-semibold my-1">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h2>
<div class="text-muted" data-v-post-created_at_formatted>
10.10.2026
</div>
<p class="my-4" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
<a class="btn-link" href="" data-v-post-url>
<span>Read more</span>
</a>
</div>
</div>
<div class="row align-items-center gy-md-5 mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="{$index}00" data-v-if="index % 2 = 1">
<div class="col-md-6">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h2 class="fw-semibold my-1">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h2>
<div class="text-muted" data-v-post-created_at_formatted>
10.10.2026
</div>
<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at. Sed ultrices, ante vitae maximus laoreet, magna quam tincidunt ex, non faucibus justo dui commodo libero.</p>
<a class="btn-link" href="">Read more</a>
</div>
<div class="col-md-6">
<img alt="" class="img-fluid rounded my-md-0 my-4" src="demo/img/team-1.webp" data-v-post-image>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("posts/posts-7", {
name: "Posts 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-7-thumb.webp",
html: `<section class="posts-7 py-5" aria-label="posts-7">
<div class="container">
<div class="row justify-content-center text-center mb-4 mb-md-5">
<div class="col-xl-9 col-xxl-8">
<span class="text-muted">Read More</span>
<h2 class="display-5 fw-bold">Our Blog</h2>
<p class="lead">
<p data-v-post-excerpt> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div data-v-component-posts="posts-7" data-v-limit="4" data-v-page="1" data-v-categories="1" data-v-image_size="large">
<div class="row">
<div class="col-md-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0 mb-3">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold my-2">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
<p data-v-post-excerpt> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0 mb-3">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold my-2">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
<p data-v-post-excerpt> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0 mb-3">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold my-2">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
<p data-v-post-excerpt> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="{$index}00" data-v-post>
<div class="card border-0">
<a href="" data-v-post-url>
<img alt="" class="img-fluid rounded" src="demo/img/team-1.webp" data-v-post-image>
</a>
<div class="card-body px-0 mb-3">
<div data-v-categories>
<div data-v-categories-cat>
<a class="text-primary fw-semibold text-decoration-none" href="" data-v-categories-cat-url>
<span data-v-categories-cat-name>Category</span>
</a>
</div>
</div>
<h3 class="fw-semibold my-2">
<a class="text-decoration-none text-dark" href="" data-v-post-url>
<span data-v-post-name>Lorem ipsum dolor sit amet</span>
</a>
</h3>
<p data-v-post-excerpt> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec sapien vel bibendum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="d-grid col-md-2 mx-auto">
<a class="btn btn-outline-primary" href="/blog">Read more</a>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Posts"] = ["posts/posts-1","posts/posts-2","posts/posts-3","posts/posts-4","posts/posts-5","posts/posts-6","posts/posts-7"];
Vvveb.Sections.add("pricing-table/pricing-table-3", {
name: "Pricing table 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-3-thumb.webp",
html: `<section class="pricing-table-3 my-3" aria-label="pricing-table-3">
<div class="container">
<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">Choose your plan</h2>
<p class="lead text-center text-muted mb-4">14-day free trial no credit card required.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up">
<!--
<div class="img"><img src="demo/img/illustrations.co/104-dumbbell.svg" alt="104-dumbbell" loading="lazy" class="img-fluid" /></div>
-->
<div class="text-center p-5">
<span class="excerpt d-block">Personal</span>
<span class="price my-5">
<sup>$</sup>
<span class="number">49</span>
<sub>/mos</sub>
</span>
<ul class="pricing-text mb-5">
<li>
<span class="la la-check me-2"></span>5 Dog Walk
</li>
<li>
<span class="la la-check me-2"></span>3 Vet Visit
</li>
<li>
<span class="la la-check me-2"></span>3 Pet Spa
</li>
<li>
<span class="la la-check me-2"></span>Free Support
</li>
</ul>
<a href="/page/pricing" class="btn btn-primary">
<span>Get Started</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up" data-aos-delay="200">
<!--
<div class="img"><img src="demo/img/illustrations.co/107-healthy.svg" alt="107-healthy" loading="lazy" class="img-fluid" /></div>
-->
<div class="text-center p-5">
<span class="excerpt d-block">Business</span>
<span class="price my-5">
<sup>$</sup>
<span class="number">79</span>
<sub>/mos</sub>
</span>
<ul class="pricing-text mb-5">
<li>
<span class="la la-check me-2"></span>5 Dog Walk
</li>
<li>
<span class="la la-check me-2"></span>3 Vet Visit
</li>
<li>
<span class="la la-check me-2"></span>3 Pet Spa
</li>
<li>
<span class="la la-check me-2"></span>Free Support
</li>
</ul>
<a href="/page/pricing" class="btn btn-primary">
<span>Get Started</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up" data-aos-delay="400">
<!--
<div class="img"><img src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" alt="126-namaste-no-hand-shake" loading="lazy" class="img-fluid" /></div>
-->
<div class="text-center p-5">
<span class="excerpt d-block">Ultimate</span>
<span class="price my-5">
<sup>$</sup>
<span class="number">109</span>
<sub>/mos</sub>
</span>
<ul class="pricing-text mb-5">
<li>
<span class="la la-check me-2"></span>5 Dog Walk
</li>
<li>
<span class="la la-check me-2"></span>3 Vet Visit
</li>
<li>
<span class="la la-check me-2"></span>3 Pet Spa
</li>
<li>
<span class="la la-check me-2"></span>Free Support
</li>
</ul>
<a href="/page/pricing" class="btn btn-primary">
<span>Get Started</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-4", {
name: "Pricing table 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-4-thumb.webp",
html: `<section class="pricing-table-4 my-3" aria-label="pricing-table-4">
<div class="container py-4 py-lg-6">
<div class="row g-4 ">
<div class="col-lg-4 col-xl-5">
<div class=" card h-100 px-xl-3 border-0 py-lg-4 " style="" id="">
<div class=" mb-2">
<div editable="rich">
<h1 class="fw-bolder">Our Plans</h1>
</div>
</div>
<div class="">
<div editable="rich">
<p class="lead text-dark">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="">
<div editable="rich">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quasi, blanditiis sed!
<br>Facere laborum debitis veritatis vel ex enim, eligendi distinctio, quidem esse accusantium amet facilis dolore ea impedit alias..
</p>
</div>
</div>
<div class=" bg-primary">
<img style="mix-blend-mode:overlay" class="img-fluid" src="demo/img/team-1.webp" alt="Team 2" loading="lazy">
</div>
</div>
</div>
<div class="col-lg-4 col-xl-3 ms-auto text-center my-lg-auto">
<div class=" card px-xl-3 border py-lg-4" style="" id="">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class=" mb-4">
<div editable="rich">
<h3>Basic</h3>
</div>
</div>
<div class=" mb-4 bg-body-tertiary text-dark rounded py-3 ">
<h3 editable="inline" class="fw-bolder d-inline small">$</h3>
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">19</h3>
<span class="opacity-50" editable="inline">/ Year</span>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
</div>
<div class=" d-grid">
<a class="btn btn-primary" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-3 text-center">
<div class=" card h-100 px-xl-3 border py-lg-5" style="" id="">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class=" mb-4">
<div editable="rich">
<h3>Professional</h3>
</div>
</div>
<div class=" mb-4 bg-body-tertiary text-dark rounded py-3 ">
<h3 editable="inline" class="fw-bolder d-inline small">$</h3>
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">149</h3>
<span class="opacity-50" editable="inline">/ Year</span>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
<div class=" mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div editable="rich">
<p class="text-start">Consectetur similique</p>
</div>
</div>
</div>
</div>
<div class=" d-grid">
<a class="btn btn-primary" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-5", {
name: "Pricing table 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-5-thumb.webp",
html: `<section class="pricing-table-5 my-3" aria-label="pricing-table-5">
<div class="container py-4">
<div class="row mb-4 align-items-center">
<div class="col-lg-6 col-xl-5">
<div class=" ">
<div>
<h2 class="fw-bolder">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</div>
</div>
</div>
<div class="col-lg-6 offset-xl-1">
<div class=" opacity-50">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
</div>
</div>
</div>
</div>
<div class="row g-4 g-xxl-5">
<div class="col-lg-4">
<div class=" card h-100 p-4 py-xl-6 shadow border-0">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class=" mb-2">
<div>
<p class="opacity-50 mb-0 ls-3">Basic</p>
</div>
</div>
<div class=" mb-4">
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$29</h3>
<span class="opacity-50" editable="inline">/ month</span>
</div>
<div class=" mb-2">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Aliquam erat volutpat.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p class="text-decoration-line-through"> In pellentesque scelerisque auctor.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
</div>
</div>
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 ">
<div class=" card h-100 p-4 py-xl-6 shadow border-0 bg-dark text-light">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class=" mb-2">
<div>
<p class="opacity-50 mb-0 ls-3">Standard</p>
</div>
</div>
<div class=" mb-4">
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$59</h3>
<span class="opacity-50" editable="inline">/ month</span>
</div>
<div class=" mb-2">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Aliquam erat volutpat.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> In pellentesque scelerisque auctor.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
</div>
</div>
</div>
<div class=" d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class=" card h-100 p-4 py-xl-6 shadow border-0">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class=" mb-2">
<div>
<p class="opacity-50 mb-0 ls-3">Premium</p>
</div>
</div>
<div class=" mb-4">
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$199</h3>
<span class="opacity-50" editable="inline">/ month</span>
</div>
<div class=" mb-2">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Aliquam erat volutpat.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> In pellentesque scelerisque auctor.&nbsp;</p>
</div>
</div>
<div class=" mb-2">
<div>
<p> Ut porta lacus eget nisi fermentum lobortis.</p>
</div>
</div>
</div>
<div class=" d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-6", {
name: "Pricing table 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-6-thumb.webp",
html: `<section class="pricing-table-6 my-3" aria-label="pricing-table-6">
<div class="container py-4">
<div class="row g-4 g-xxl-5">
<div class="col-lg-4 text-center">
<div class="card h-100 p-4" style="">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class="border-bottom border-4 mb-4">
<div>
<p class="opacity-50 mb-0 ls-3">SINGLE</p>
<h2 class="fw-bolder h4">Basic plan</h2>
</div>
</div>
<div class="mb-4">
<div>
<h3 class="fw-bolder rfs-40">
<span class="h2 align-top">$</span>29
</h3>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="card h-100 p-4">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class="border-bottom border-4 mb-4">
<div>
<p class="opacity-50 mb-0 ls-3">TEAM</p>
<h2 class="fw-bolder h4">Pro plan</h2>
</div>
</div>
<div class="mb-4">
<div>
<h3 class="fw-bolder rfs-40">
<span class="h2 align-top">$</span>99
</h3>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="card h-100 p-4">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<div class="border-bottom border-4 mb-4">
<div>
<p class="opacity-50 mb-0 ls-3">ENTERPRISE</p>
<h2 class="fw-bolder h4">Pro plan</h2>
</div>
</div>
<div class="mb-4">
<div>
<h3 class="fw-bolder rfs-40">
<span class="h2 align-top">$</span>219
</h3>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start ">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start">Cupiditate, quidem magnam quaerat molestiae.</p>
</div>
</div>
</div>
<div class="mb-2">
<div class="d-inline-flex w-100 gap-2 ">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
</svg>
</div>
<div>
<p class="text-start ">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
</div>
</div>
</div>
</div>
<div class="d-grid">
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-7", {
name: "Pricing table 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-7-thumb.webp",
html: `<section class="pricing-table-7 my-3" aria-label="pricing-table-7">
<div class="container py-5 overflow-hidden">
<div class="row mb-5 pb-2">
<div class="col-md-12 text-center">
<div class="mb-4">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">Pricing</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row justify-content-center pt-2 pb-4">
<div class="col-12 col-lg-4">
<div class="text-center rounded border shadow-sm py-5 mb-5">
<div class="text-center">
<img src="demo/img/team-1.webp" alt="Team 1" style="" loading="lazy" class="w-50 mb-2 rounded-4">
</div>
<div class="text-center">
<div editable="rich">
<h2>Personal</h2>
</div>
</div>
<div class="text-center small">
<div editable="rich">
<p>Perfect for
<strong>designers</strong>
</p>
</div>
</div>
<div class="text-center text-primary display-4">
<p>
<span>
<b>$79</b>
</span>
<span class="lead">/ per year</span>
</p>
</div>
<div class="">
<ul class="list-unstyled mt-3 mb-4">
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Build Unlimited Websites</span>
</li>
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Updates for 1 Year</span>
</li>
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Support for 1 Year</span>
</li>
</ul>
</div>
<div class="" style="z-index:4">
<a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
</div>
</div>
</div>
<!-- Single Price Plan Area -->
<div class="col-12 col-lg-4" style="z-index: 5;">
<div class="text-center mb-5 py-5 shadow bg-white shadow-lg text-dark" style="border-radius: 12px;z-index: 2;transform: scale(1.2);">
<div class="text-center">
<img src="demo/img/team-2.webp" alt="Team 2" style="" loading="lazy" class="w-50 mb-2 rounded-4">
</div>
<div class="text-center">
<div editable="rich">
<h2>Business</h2>
</div>
</div>
<div class="text-center small">
<div editable="rich">
<p>Perfect for
<strong>agency</strong>
</p>
</div>
</div>
<div class="text-center text-primary display-4">
<p>
<span>
<b>$199</b>
</span>
<span class="lead">/ per year</span>
</p>
</div>
<div class="">
<ul class="list-unstyled mt-3 mb-4">
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Build Unlimited Websites</span>
</li>
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Updates for 1 Year</span>
</li>
<li class="py-2">
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
<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>
<span>Support for 1 Year</span>
</li>
</ul>
</div>
<div class="" style="z-index:4">
<a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-8", {
name: "Pricing table 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-8-thumb.webp",
html: `<section class="pricing-table-8 my-3" aria-label="pricing-table-8">
<div class="container py-4">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<div>
<h2>Pricing</h2>
<p class="lead">We offer flexible pricing options for freelancers and design teams.</p>
</div>
</div>
</div>
</div>
<div class="row align-items-start g-0">
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<h2>Free</h2>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Forever Free</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-center">
<div>
<p>$</p>
</div>
<div>
<p class="display-1">0</p>
</div>
</div>
</div>
<div class="">
<a class="btn mb-4 btn-outline-primary" href="#" role="button">Start for free</a>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p> 1 GB of Space
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<h2>Starter</h2>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Basic</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-center">
<div>
<p>$</p>
</div>
<div>
<p class="display-1">9</p>
</div>
</div>
</div>
<div class="">
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>5 GB of Space
</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>Unlimited Projects&nbsp;</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>1 Users&nbsp;</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<h2>Pro</h2>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Best value</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-center">
<div>
<p>$</p>
</div>
<div>
<p class="display-1">29</p>
</div>
</div>
</div>
<div class="">
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>20 GB of Space
</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p> Unlimited Projects
</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>5 Users
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 text-center border">
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<h2>Agency</h2>
</div>
</div>
<div class="mb-5">
<div>
<p class="lead">Enterprise</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-center">
<div>
<p>$</p>
</div>
<div>
<p class="display-1">199</p>
</div>
</div>
</div>
<div class="">
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>Unlimited Space</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p> Unlimited Projects
</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p> Unlimited Users</p>
</div>
</div>
</div>
<div class="pt-4 px-md-4 border-bottom">
<div class="">
<div>
<p>Access to Cloud</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-9", {
name: "Pricing table 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-9-thumb.webp",
html: `<section class="pricing-table-9 my-3" aria-label="pricing-table-9">
<div class="container py-4">
<div class="row">
<div class="col-md-12 text-center">
<div class="mb-4">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Pricing</b>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row mt-4">
<div class="text-center col-md-6 py-5 bg-body-tertiary text-dark">
<div class="">
<div editable="rich">
<h2>
<strong>Basic</strong>
</h2>
<p>
<em>1 USER</em>
</p>
</div>
</div>
<div class="">
<div editable="rich">
<h2 class="display-3">$59</h2>
<p>/month</p>
</div>
</div>
<div class="px-4 mb-4">
<div editable="rich">
<p>&nbsp;Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
vulputate eu tellus ac, mattis cursus nunc.</p>
</div>
</div>
<div class="">
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
</div>
</div>
<div class="text-center col-md-6 py-5 shadow-lg">
<div class="">
<div editable="rich">
<h2>
<strong>Business</strong>
</h2>
<p>
<em>100 USERs</em>
</p>
</div>
</div>
<div class="">
<div editable="rich">
<h2 class="display-3">$199</h2>
<p>/month</p>
</div>
</div>
<div class="px-4 mb-4">
<div editable="rich">
<p>&nbsp;Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
vulputate eu tellus ac, mattis cursus nunc.</p>
</div>
</div>
<div class="">
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-10", {
name: "Pricing table 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-10-thumb.webp",
html: `<section class="pricing-table-1 my-3" aria-label="pricing-table-10">
<div class="container py-4">
<div class="row mb-5">
<div class="col-12">
<div class="text-center">
<div>
<h2 class="">Our menu</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est.
</div>
</div>
</div>
</div>
<!-- Menu Items -->
<div class="row row-cols-1 row-cols-lg-2 g-4 g-xxl-5">
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex d-sm-block flex-shrink-0 col-sm-3">
<img class="position-relative img-fluid" src="demo/img/team-1.webp" alt="Team 1">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Caesar Salad</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$10</strong>
</div>
</div>
<div class="opacity-50">
Classic Caesar with romaine lettuce, parmesan cheese, croutons, and creamy dressing.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex d-sm-block flex-shrink-0 col-sm-3">
<img class="position-relative img-fluid" src="demo/img/team-2.webp" alt="Team 2">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Margherita Pizza</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$15</strong>
</div>
</div>
<div class="opacity-50">
Traditional Italian pizza with tomato, mozzarella, fresh basil, and extra virgin olive oil.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-1.webp" alt="Team 1">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">BBQ Ribs</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$24</strong>
</div>
</div>
<div class="opacity-50">
Slow-cooked pork ribs glazed with our signature BBQ sauce, served with fries and coleslaw.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-2.webp" alt="Team 2">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Pasta Primavera</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$14</strong>
</div>
</div>
<div class="opacity-50">
Fresh garden vegetables tossed with penne pasta in a light garlic and olive oil sauce.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-1.webp" alt="Team 1">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Chocolate Cake</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$7</strong>
</div>
</div>
<div class="opacity-50">
Rich and moist chocolate cake with a smooth chocolate ganache frosting.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-2.webp" alt="Team 2">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Craft Beer</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$5</strong>
</div>
</div>
<div class="opacity-50">
A selection of local and imported craft beers, served chilled.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-1.webp" alt="Team 1">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Mushroom Risotto with truffle cream.</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$16</strong>
</div>
</div>
<div class="opacity-50">
Creamy risotto enriched with porcini mushrooms and finished with black truffle.
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
<img class="position-relative img-fluid" src="demo/img/team-2.webp" alt="Team 2">
</div>
<div class="w-100">
<div class="d-flex gap-2 align-items-baseline">
<div>
<h3 class="h5 fw-bold">Panna Cotta</h3>
</div>
<div class="flex-grow-1 border-dashed opacity-25"></div>
<div>
<strong class="h5">$9</strong>
</div>
</div>
<div class="opacity-50">
Light and creamy spoon dessert with berry coulis.
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-11", {
name: "Pricing table 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-11-thumb.webp",
html: `<section class="pricing-table-11 my-3" aria-label="pricing-table-11">
<div class="container pb-5">
<div class="row">
<div class="col-md-12 text-center">
<div class=" mb-4">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Pricing</b>
</h2>
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row mt-4 text-center">
<div class="col-lg-3 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0 " editable="inline">Free</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$0</b>
</span>
<span class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li editable="inline">10 users included</li>
<li editable="inline">2 GB of storage</li>
<li editable="inline">Email support</li>
<li editable="inline">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-outline-primary">Sign up for free</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0" editable="inline">Pro</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$15</b>
</span>
<span class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li class="">20 users included</li>
<li class="">10 GB of storage</li>
<li class="">Priority email support</li>
<li class="">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0" editable="inline">Enterprise</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$29</b>
</span>
<span class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li class="">30 users included</li>
<li class="">15 GB of storage</li>
<li class="">Phone and email support</li>
<li class="">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0" editable="inline">Exclusive</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$49</b>
</span>
<span class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li class="">50 users included</li>
<li class="">45 GB of storage</li>
<li class="">Phone and email support</li>
<li editable="inline">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-12", {
name: "Pricing table 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-12-thumb.webp",
html: `<section class="pricing-table-12 my-3" aria-label="pricing-table-12">
<div class="container py-4">
<div class="row">
<div class="col-md-12 text-center">
<div class=" mb-4">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Pricing</b>
</h2>
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row mt-4">
<div class="text-center col-md-3 py-4 shadow-sm">
<div class="">
<div>
<h2>
<strong>Basic</strong>
</h2>
<p>
<em>1 USER</em>
</p>
</div>
</div>
<div class="">
<div>
<h2 class="display-3">$59</h2>
<p>/month</p>
</div>
</div>
<div class=" px-4 mb-4">
<div>
<p>&nbsp;Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
vulputate eu tellus ac, mattis cursus nunc.</p>
</div>
</div>
<div class="">
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
</div>
</div>
<div class="text-center col-md-4 offset-md-1 pb-4 pt-2 shadow-lg">
<div class=" text-end pb-2 ">
<span class="badge bg-dark" editable="inline">Popular</span>
</div>
<div class="">
<div>
<h2 class="display-3">
<strong>Pro</strong>
</h2>
<p>
<em>100 USER</em>
</p>
</div>
</div>
<div class="">
<div>
<h2 class="display-3">$79</h2>
<p>/month</p>
</div>
</div>
<div class=" px-4 mb-4">
<div>
<p>&nbsp;Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
vulputate eu tellus ac, mattis cursus nunc.</p>
</div>
</div>
<div class="">
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
</div>
</div>
<div class="text-center col-md-3 offset-md-1 py-4 shadow-sm">
<div class="">
<div>
<h2>
<strong>Business</strong>
</h2>
<p>
<em>UNLIMITED</em>
</p>
</div>
</div>
<div class="">
<div>
<h2 class="display-3">$199</h2>
<p>/month</p>
</div>
</div>
<div class=" px-4 mb-4">
<div>
<p>&nbsp;Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
vulputate eu tellus ac, mattis cursus nunc.</p>
</div>
</div>
<div class="">
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-13", {
name: "Pricing table 13",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-13-thumb.webp",
html: `<section class="pricing-table-13 my-3" aria-label="pricing-table-13">
<div class="container pb-5">
<div class="row">
<div class="col-md-12 text-center">
<div class="mb-4">
<span editable="inline" class="small mt-4 d-block">LOREM IPSUM</span>
<h2 editable="inline" class="display-2 mb-0">
<b>Pricing</b>
</h2>
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row mt-4 text-center">
<div class="col-lg-4 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0 " editable="inline">Free</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$0</b>
</span>
<span editable="inline" class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li editable="inline">10 users included</li>
<li editable="inline">2 GB of storage</li>
<li editable="inline">Email support</li>
<li editable="inline">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-outline-primary">Sign up for free</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0" editable="inline">Pro</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$15</b>
</span>
<span editable="inline" class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li editable="inline" class="">20 users included</li>
<li editable="inline" class="">10 GB of storage</li>
<li editable="inline" class="">Priority email support</li>
<li editable="inline" class="">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 text-dark my-2">
<div class="card">
<div class="card-header">
<h4 class="my-0" editable="inline">Enterprise</h4>
</div>
<div class="card-body">
<h5 class="card-title">
<span class="display-4" editable="inline">
<b>$29</b>
</span>
<span editable="inline" class="lead">/mo</span>
</h5>
<div class="card-text my-4 ">
<div editable="rich">
<ul class="list-unstyled">
<li editable="inline" class="">30 users included</li>
<li editable="inline" class="">15 GB of storage</li>
<li editable="inline" class="">Phone and email support</li>
<li editable="inline" class="">Help center access</li>
</ul>
</div>
</div>
<div class="d-grid ">
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("pricing-table/pricing-table-14", {
name: "Pricing table 14",
image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-14-thumb.webp",
html: `<section class="pricing-table-14 my-3" aria-label="pricing-table-14">
<div class="container py-4">
<div class="row">
<div class="col-md-12 text-center">
<div class="mb-4">
<span editable="inline" class="mt-4 d-block lead">OUR PRICING PLANS</span>
<h2 editable="inline" class="display-2 mb-3">
<b>Find the Right Tier.</b>
</h2>
<p editable="inline" class="text-secondary">Flexible pricing options for freelancers and design teams. No Credit Card required!
<br>
</p>
</div>
</div>
</div>
<div class="row mt-4" id="pricing">
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="py-3 shadow-sm bg-dark text-white rounded">
<div class="mb-4 text-left px-4">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"></path>
</svg>
<span editable="inline" class="ml-2 fw-light">Individual</span>
</div>
<div class="mb-5 px-4">
<div editable="rich">
<h2 class="text-light">Professional</h2>
<p class="h5">$19.99 <span class="text-secondary fw-light">/month</span>
</p>
</div>
</div>
<div class="mb-5 text-left">
<div editable="rich">
<ul>
<li>1 users</li>
<li>20 TB of secure storage</li>
<li>Premium productivity features and simple, secure file sharing</li>
</ul>
</div>
</div>
<div class="mb-4 text-center">
<a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="py-3 rounded shadow">
<div class="mb-4 text-left px-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
<path d="M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M7.34 8.92L8.5 10.33L3.75 15.08L1 12.08L2.16 10.92L3.75 12.5L7.34 8.92"></path>
</svg>
<span editable="inline" class="ml-2 fw-light">Small Team</span>
</div>
<div class="mb-5 px-4">
<div editable="rich">
<h2 class=" ">Standard</h2>
<p class="h5 text-primary">$39.99 <span class="text-secondary fw-light">/month</span>
</p>
</div>
</div>
<div class="mb-5 text-left">
<div editable="rich">
<ul>
<li> 2 users</li>
<li> 20 TB of secure storage</li>
<li> Premium productivity features and simple, secure file sharing</li>
</ul>
</div>
</div>
<div class="mb-4 text-center">
<a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
</div>
</div>
</div>
<div class="col-lg-4 ">
<div class="py-3 rounded border">
<div class="mb-4 text-left px-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
<path d="M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z"></path>
</svg>
<span editable="inline" class="ml-2 fw-light">Large Team</span>
</div>
<div class="mb-5 px-4">
<div editable="rich">
<h2 class=" ">Ultimate</h2>
<p class="h5 text-primary">$99.99 <span class="text-secondary fw-lighter">/month</span>
</p>
</div>
</div>
<div class="mb-5 text-left">
<div editable="rich">
<ul>
<li>+20 users</li>
<li>100 TB of secure storage</li>
<li> Premium productivity features and simple, secure file sharing</li>
</ul>
</div>
</div>
<div class="mb-4 text-center">
<a class="btn btn-outline-primary" href="#" role="button">Try free for 30 days</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Pricing table"] = ["pricing-table/pricing-table-3","pricing-table/pricing-table-4","pricing-table/pricing-table-5","pricing-table/pricing-table-6","pricing-table/pricing-table-7","pricing-table/pricing-table-8","pricing-table/pricing-table-9","pricing-table/pricing-table-10","pricing-table/pricing-table-11","pricing-table/pricing-table-12","pricing-table/pricing-table-13","pricing-table/pricing-table-14"];
Vvveb.Sections.add("products/products-1", {
name: "Products 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/products/products-1-thumb.webp",
html: `<section class="products-1" aria-label="products-1">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Latest Products</h2>
<p class="lead text-center text-muted mb-4">Best quality at the lowest price.</p>
</div>
</div>
</div>
</div>
<div class="container" data-v-component-products="latest" data-v-limit="8" data-v-variant_price="true" data-v-image_size="medium">
<div class="row">
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-md-3" data-aos="fade-up" data-aos-delay="{$index}00" data-v-product>
<article class="single-product-wrapper">
<!-- Product Image -->
<a href="product/product.html" data-v-product-url> </a>
<div class="product-image">
<a href="product/product.html" data-v-product-url>
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
<!-- Hover Thumb -->
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
</a>
<!-- Favourite -->
<div class="product-favourite">
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
<span></span>
</a>
</div>
<!-- Compare -->
<div class="product-compare">
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
<span></span>
</a>
</div>
<div class="badges">
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
</div>
</div>
<!-- Product Description -->
<div class="product-content">
<a href="product/product.html" class="text-body" data-v-product-url>
<span data-v-product-name>Product 8</span>
</a>
<p data-v-if="prod.min_price > 0">
<span class="text-muted small">From</span>
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
</p>
<div data-v-if-not="prod.min_price">
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
</div>
<!-- Hover Content -->
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
<!-- Add to Cart -->
<div class="add-to-cart-btn">
<input type="hidden" name="product_id" value="" data-v-product-product_id />
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
<span class="button-text">
Out of stock
</span>
</a>
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
<span>Add to cart</span>
</span>
<span class="button-text">
<i class="la la-lg la-shopping-bag"></i>
<span>Add to cart</span>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Products"] = ["products/products-1"];
Vvveb.Sections.add("showcase/showcase-1", {
name: "Showcase 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-1-thumb.webp",
html: `<section class="d-flex showcase-1" aria-label="showcase-1">
<div class="container">
<div class="row align-items-center w-100">
<div class="col-md-6 col-sm-12">
<h3>Drag and drop builder</h3>
<p class="lead">Unlimited design powers with an easy to use interface, change anything on your website with a few clicks.</p>
<a href="content/post.html">
<span>Learn more</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
<div class="col-md-6 col-sm-12 col-img">
<img class="img-fluid" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" alt="namaste">
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-2", {
name: "Showcase 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-2-thumb.webp",
html: `<section class="d-flex showcase-2" aria-label="showcase-2">
<div class="container">
<div class="row align-items-center w-100">
<div class="col-md-6 col-sm-12 col-img">
<img class="img-fluid" src="demo/img/illustrations.co/107-healthy.svg" alt="healthy">
</div>
<div class="col-md-6 col-sm-12">
<h3>Drag and drop builder</h3>
<p class="lead">Unlimited design powers with an easy to use interface, change anything on your website with a few clicks.</p>
<a href="content/post.html">
<span>Learn more</span>
<i class="la la-long-arrow-alt-right ms-1"></i>
</a>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-3", {
name: "Showcase 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-3-thumb.webp",
html: `<section class="showcase-3" aria-label="showcase-3">
<div class="container">
<div class="row g-1 justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="feature" data-aos="fade-up" data-aos-delay="100">
<div class="font-container text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="64" height="64" color="#1064ea" fill="#1064ea">
<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>
</div>
<h3>
Better Security
</h3>
<p class="text-center">Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="feature" data-aos="fade-up" data-aos-delay="200">
<div class="font-container text-center">
<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="64" height="64" color="#1064ea" fill="#1064ea">
<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>
<h3>
Unlimited customization
</h3>
<p class="text-center">Vvveb uses only html for templating for maximum flexibility.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="feature" data-aos="fade-up" data-aos-delay="300">
<div class="font-container text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" width="64" height="64" color="#1064ea" fill="#1064ea" 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>
</div>
<h3>
Advanced Ecommerce
</h3>
<p class="text-center">Vvveb is a full featured ecommerce platform with advanced functionality.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
<div class="feature" data-aos="fade-up" data-aos-delay="400">
<div class="font-container text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="64" height="64" color="#1064ea" fill="#1064ea">
<path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"></path>
</svg>
</div>
<h3>
Full Localization
</h3>
<p class="text-center">Publish content in multiple languages or sell in different currencies.</p>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-4", {
name: "Showcase 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-4-thumb.webp",
html: `<section class="showcase-4" aria-label="showcase-4">
<div class="container">
<div class="row g-1 justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shield-alt"></i>
</div>
<h3>
<a>Security</a>
</h3>
<p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-praying-hands"></i>
</div>
<h3>
<a>Unlimited theme flexibility</a>
</h3>
<p>Vvveb uses only html for templating for maximum flexibility.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shopping-cart"></i>
</div>
<h3>
<a>Ecommerce</a>
</h3>
<p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-globe-europe"></i>
</div>
<h3>
<a>Localization</a>
</h3>
<p>Publish content in multiple languages or sell in different currencies.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-5", {
name: "Showcase 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-5-thumb.webp",
html: `<section class="showcase-5" aria-label="showcase-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shield-alt"></i>
</div>
<h3>
<a>Security</a>
</h3>
<p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
<!-- a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a-->
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-praying-hands"></i>
</div>
<h3>
<a>Unlimited flexibility</a>
</h3>
<p>Vvveb uses only html for templating for maximum flexibility.</p>
<!-- a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a-->
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shopping-cart"></i>
</div>
<h3>
<a>Ecommerce</a>
</h3>
<p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
<!-- a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a-->
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-globe-europe"></i>
</div>
<h3>
<a>Localization</a>
</h3>
<p>Publish content in multiple languages or sell in different currencies.</p>
<!-- a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a-->
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-6", {
name: "Showcase 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-6-thumb.webp",
html: `<section class="showcase-6" aria-label="showcase-6">
<div class="separator top">
<svg class="pricing-divider-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" fill="currentColor" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<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="currentColor" 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="currentColor" 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="currentColor" 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="currentColor"></path>
</svg>
</div>
<div class="background-container"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-shield-alt"></i>
</div>
<div class="text">
<h3>
<a>Security</a>
</h3>
<p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-praying-hands"></i>
</div>
<div class="text">
<h3>
<a>Unlimited flexibility</a>
</h3>
<p>Vvveb uses only html for templating for maximum flexibility.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-shopping-cart"></i>
</div>
<div class="text">
<h3>
<a>Ecommerce</a>
</h3>
<p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="separator bottom">
<svg class="pricing-divider-img" enable-background="new 0 0 300 100" height="100px" fill="currentColor" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<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="currentColor" 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="currentColor" 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="currentColor" 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="currentColor"></path>
</svg>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-7", {
name: "Showcase 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-7-thumb.webp",
html: `<section class="showcase-7" aria-label="showcase-7">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-shield-alt"></i>
</div>
<div class="text">
<h3>
<a>Security</a>
</h3>
<p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-praying-hands"></i>
</div>
<div class="text">
<h3>
<a>Unlimited theme flexibility</a>
</h3>
<p>Vvveb uses only html for templating for maximum flexibility.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-shopping-cart"></i>
</div>
<div class="text">
<h3>
<a>Ecommerce</a>
</h3>
<p>Vvveb is a full featured ecommerce platform with advanced functionality and internationalization.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-8", {
name: "Showcase 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-8-thumb.webp",
html: `<section class="showcase-8" aria-label="showcase-8">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-robot"></i>
</div>
<div class="text">
<h3>
<a>The next generation website builder</a>
</h3>
<p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-9", {
name: "Showcase 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-9-thumb.webp",
html: `<section class="showcase-8" aria-label="showcase-9">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-robot"></i>
</div>
<div class="text">
<h3>
<a>The next generation website builder</a>
</h3>
<p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-10", {
name: "Showcase 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-10-thumb.webp",
html: `<section class="showcase-10" aria-label="showcase-10">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container">
<i class="font-icon la la-robot la-2x"></i>
</div>
<div class="text">
<h3>
<a>The next generation website builder</a>
</h3>
<p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
<a class="more d-block">
Read more
<i class="font-icon la la-chevron-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-11", {
name: "Showcase 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-11-thumb.webp",
html: `<section class="pt-5 pb-5">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-6 mt-4 mt-md-0 order-md-1 order-2">
<img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
</div>
<div class="col-12 col-md-4 order-1 order-md-2">
<h2>Nice Heading</h2>
<p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
<div class="row align-items-center justify-content-center pt-5 pb-5">
<div class="col-12 col-md-4 offset-md-1">
<h2>Nice Heading</h2>
<p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0">
<img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-6 mt-4 mt-md-0 order-md-1 order-2">
<img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
</div>
<div class="col-12 col-md-4 order-1 order-md-2">
<h2>Nice Heading</h2>
<p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("showcase/showcase-12", {
name: "Showcase 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-12-thumb.webp",
html: `<section class="showcase-12" aria-label="showcase-12">
<div class="container">
<div class="row g-1 justify-content-center">
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shield-alt"></i>
</div>
<h3>
<a>Security</a>
</h3>
<p class="text-center">Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-praying-hands"></i>
</div>
<h3>
<a>Unlimited theme flexibility</a>
</h3>
<p class="text-center">Vvveb uses only html for templating for maximum flexibility.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-shopping-cart"></i>
</div>
<h3>
<a>Ecommerce</a>
</h3>
<p class="text-center">Vvveb is a full featured ecommerce platform with advanced functionality.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="feature">
<div class="font-container text-center">
<i class="font-icon la la-globe-europe"></i>
</div>
<h3>
<a>Localization</a>
</h3>
<p class="text-center">Publish content in multiple languages or sell in different currencies.</p>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Showcase"] = ["showcase/showcase-1","showcase/showcase-2","showcase/showcase-3","showcase/showcase-4","showcase/showcase-5","showcase/showcase-6","showcase/showcase-7","showcase/showcase-8","showcase/showcase-9","showcase/showcase-10","showcase/showcase-11","showcase/showcase-12"];
Vvveb.Sections.add("subscribe/subscribe-1", {
name: "Subscribe 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/subscribe/subscribe-1-thumb.webp",
html: `<section class="subscribe-1 text-white" aria-label="subscribe-1" data-bs-theme="dark">
<div class="container">
<div data-v-component-plugin-newsletter-form data-v-storage="database" data-v-name="contact-us-home">
<div class="row h-100 d-flex justify-content-center align-items-center">
<div class="col-md-12">
<h4 class="text-center">Stay Informed with Early Updates!</h4>
<p class="text-muted text-center">Subscribe to our newsletter and receive the latest updates and important news directly to your inbox.</p>
<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>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-newsletter-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="col-md-6 mx-auto mt-5">
<div class="search position-relative">
<input class="form-control rounded-5" name="email" placeholder="Your email address">
<button type="submit" class="btn btn-primary position-absolute rounded-5">
<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>
<label class="small mt-2 text-muted form-check">
<input type="checkbox" class="form-check-input" value="1" name="optin" required>
<span class="form-check-label">I agree to receive your newsletters and accept the data privacy statement.</span>
</label>
</div>
<input type="text" class="form-control d-none" placeholder="Contact form" name="newsletter">
<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">
</form>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("subscribe/subscribe-2", {
name: "Subscribe 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/subscribe/subscribe-2-thumb.webp",
html: `<section class="subscribe-2" aria-label="subscribe-2">
<div class="container">
<div data-v-component-plugin-newsletter-form data-v-storage="database" data-v-name="subscribe-footer" data-v-list="footer">
<div class="row h-100 d-flex justify-content-center align-items-center">
<div class="col-md-6">
<h5 class="mb-3">Stay Informed with Early Updates!</h5>
<p class="text-muted">Subscribe to our newsletter and receive the latest updates and important news directly to your inbox.</p>
</div>
<div class="col-md-6">
<div class="notifications" data-v-notifications>
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="subscribe-footer">
<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="subscribe-footer">
<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="subscribe-footer">
<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-newsletter-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="subscribe-footer">
<div class="search position-relative">
<input class="form-control" name="email" placeholder="Your email address">
<button type="submit" class="btn btn-primary position-absolute">
<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>
<label class="small mt-2 text-muted form-check">
<input type="checkbox" class="form-check-input" value="1" name="optin" required>
<span class="form-check-label">I agree to receive your newsletters and accept the data privacy statement.</span>
</label>
<input type="text" class="form-control d-none" placeholder="Contact form" name="newsletter">
<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">
</form>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("subscribe/subscribe-3", {
name: "Subscribe 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/subscribe/subscribe-3-thumb.webp",
html: `<section class="subscribe-3 text-white" aria-label="subscribe-1" data-bs-theme="dark">
<div class="container">
<div data-v-component-plugin-newsletter-form data-v-storage="database" data-v-name="contact-us-home">
<div class="row h-100 d-flex justify-content-center align-items-center">
<div class="col-md-6">
<h5 class="mb-3">Stay Informed with Early Updates!</h5>
<p class="text-muted">Subscribe to our newsletter and receive the latest updates and important news directly to your inbox.</p>
</div>
<div class="col-md-6">
<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>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-newsletter-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="search position-relative">
<input class="form-control" name="email" placeholder="Your email address">
<button type="submit" class="btn btn-primary position-absolute">
<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>
<label class="small mt-2 text-muted form-check">
<input type="checkbox" class="form-check-input" value="1" name="optin" required>
<span class="form-check-label">I agree to receive your newsletters and accept the data privacy statement.</span>
</label>
<input type="text" class="form-control d-none" placeholder="Contact form" name="newsletter">
<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">
</form>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("subscribe/subscribe-4", {
name: "Subscribe 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/subscribe/subscribe-4-thumb.webp",
html: `<section class="subscribe-4" aria-label="subscribe-4">
<div class="container">
<div data-v-component-plugin-newsletter-form data-v-storage="database" data-v-name="contact-us-home">
<div class="row h-100 d-flex justify-content-center align-items-center">
<div class="col-md-12">
<h4 class="text-center">Stay Informed with Early Updates!</h4>
<p class="text-muted text-center">Subscribe to our newsletter and receive the latest updates and important news directly to your inbox.</p>
<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>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-newsletter-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="col-md-6 mx-auto mt-5">
<div class="search position-relative">
<input class="form-control" name="email" placeholder="Your email address">
<button type="submit" class="btn btn-primary position-absolute">
<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>
<label class="small mt-2 text-muted form-check">
<input type="checkbox" class="form-check-input" value="1" name="optin" required>
<span class="form-check-label">I agree to receive your newsletters and accept the data privacy statement.</span>
</label>
</div>
<input type="text" class="form-control d-none" placeholder="Contact form" name="newsletter">
<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">
</form>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("subscribe/subscribe-5", {
name: "Subscribe 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/subscribe/subscribe-5-thumb.webp",
html: `<section class="subscribe-5 text-white" aria-label="subscribe-5" data-bs-theme="dark">
<div class="container">
<div data-v-component-plugin-newsletter-form data-v-storage="database" data-v-name="contact-us-home">
<div class="row h-100 d-flex justify-content-center align-items-center">
<div class="col-md-12">
<h4 class="text-center">Stay Informed with Early Updates!</h4>
<p class="lead text-muted text-center">Subscribe to our newsletter and receive the latest updates and important news directly to your inbox.</p>
<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>
<form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-newsletter-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="col-md-6 mx-auto mt-5">
<div class="search position-relative">
<input class="form-control" placeholder="Your email address">
<button type="submit" class="btn btn-primary position-absolute">
<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>
<label class="small mt-2 text-muted form-check">
<input type="checkbox" class="form-check-input" value="1" name="optin" required>
<span class="form-check-label">I agree to receive your newsletters and accept the data privacy statement.</span>
</label>
</div>
<input type="text" class="form-control d-none" placeholder="Contact form" name="newsletter">
<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">
</form>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Subscribe"] = ["subscribe/subscribe-1","subscribe/subscribe-2","subscribe/subscribe-3","subscribe/subscribe-4","subscribe/subscribe-5"];
Vvveb.Sections.add("team/team-1", {
name: "Team 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-1-thumb.webp",
html: `<section class="py-5" aria-label="team-1">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Meet Our Team</h2>
<p class="lead text-center text-muted mb-4">We are a group of professionals dedicated to their work</p>
</div>
</div>
<div class="row">
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<img alt="image" loading="lazy" src="demo/img/sections/team/1.webp" class="img-fluid p-4 rounded-circle">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h3 class="mt-4 mb-0">John Doe</h3>
<h4 class="text-muted mb-3">CTO - Founder</h4>
<p class="text-muted">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<img alt="image" loading="lazy" src="demo/img/sections/team/2.webp" class="img-fluid p-4 rounded-circle">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h3 class="mt-4 mb-0">John Doe</h3>
<h4 class="text-muted mb-3">CTO - Tech</h4>
<p class="text-muted">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<img alt="image" loading="lazy" src="demo/img/sections/team/3.webp" class="img-fluid p-4 rounded-circle">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h3 class="mt-4 mb-0">John Doe</h3>
<h4 class="text-muted mb-3">CSO - Financial</h4>
<p class="text-muted">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<img alt="image" loading="lazy" src="demo/img/sections/team/4.webp" class="img-fluid p-4 rounded-circle">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h3 class="mt-4 mb-0">John Doe</h3>
<h4 class="text-muted mb-3">CMO - Operations</h4>
<p class="text-muted">You can relay on our amazing features list and also our user services will be great experience.</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-2", {
name: "Team 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-2-thumb.webp",
html: `<section class="py-5 team-2" aria-label="team-2">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h3 class="mb-3">Meet Our Team</h3>
<h5 class="lead text-muted">We are a group of professionals dedicated to their work</h5>
</div>
</div>
<div class="row justify-content-center py-5">
<div class="card col-md-3">
<div class="card-content">
<div class="card-body p-0">
<div class="profile">
<img src="demo/img/sections/team/1.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>Jane Doe</h4>
<small>CEO - Founder</small>
</div>
<div class="card-subtitle">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
</div>
<div class="card-footer">
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card col-md-3">
<div class="card-content">
<div class="card-body p-0">
<div class="profile">
<img src="demo/img/sections/team/2.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>John Doe</h4>
<small>CTO - Co-Founder</small>
</div>
<div class="card-subtitle">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
</div>
<div class="card-footer">
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card col-md-3">
<div class="card-content">
<div class="card-body p-0">
<div class="profile">
<img src="demo/img/sections/team/3.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>Jane Doe</h4>
<small>CSO - Financial</small>
</div>
<div class="card-subtitle">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
</div>
<div class="card-footer">
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-3", {
name: "Team 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-3-thumb.webp",
html: `<section class="py-5" aria-label="team-3">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h3 class="mb-3">Meet Our Team</h3>
<h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
</div>
</div>
<div class="row">
<div class="col-lg-3 mb-4">
<div class="row no-gutters">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4" loading="lazy">
<ul class="mb-0 list-inline mt-3 px-4">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row no-gutters">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4" loading="lazy">
<ul class="mb-0 list-inline mt-3 px-4">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row no-gutters">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4" loading="lazy">
<ul class="mb-0 list-inline mt-3 px-4">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row no-gutters">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid p-4" loading="lazy">
<ul class="mb-0 list-inline mt-3 px-4">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-4", {
name: "Team 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-4-thumb.webp",
html: `<section class="py-5" aria-label="team-4">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h3 class="mb-3">Meet Our Team</h3>
<h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="row">
<div class="col-md-12">
<img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4" loading="lazy">
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="row">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4" loading="lazy">
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="row">
<div class="col-md-12 pro-pic">
<img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4" loading="lazy">
</div>
<div class="col-md-12">
<div class="px-4">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
<p class="mt-3">We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-5", {
name: "Team 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-5-thumb.webp",
html: `<section class="py-5" aria-label="team-5">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h3 class="mb-3">Meet Our Team</h3>
<h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card shadow-sm border-1 mb-4 p-0">
<div class="row no-gutters">
<div class="col-md-5">
<img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid" loading="lazy">
</div>
<div class="col-md-7">
<div class="p-4">
<h4 class="mb-3">John Doe</h4>
<p>We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card shadow-sm border-1 mb-4 p-0">
<div class="row no-gutters">
<div class="col-md-5">
<img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid" loading="lazy">
</div>
<div class="col-md-7">
<div class="p-4">
<h4 class="mb-3">John Doe</h4>
<p>We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card shadow-sm border-1 mb-4 p-0">
<div class="row no-gutters">
<div class="col-md-5">
<img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid" loading="lazy">
</div>
<div class="col-md-7">
<div class="p-4">
<h4 class="mb-3">John Doe</h4>
<p>We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card shadow-sm border-1 mb-4 p-0">
<div class="row no-gutters">
<div class="col-md-5">
<img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid" loading="lazy">
</div>
<div class="col-md-7">
<div class="p-4">
<h4 class="mb-3">John Doe</h4>
<p>We are a group of professionals dedicated to their work</p>
<ul class="mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-6", {
name: "Team 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-6-thumb.webp",
html: `<section class="p-4" aria-label="team-6">
<div class="container">
<div class="row text-center">
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4">
<img src="demo/img/sections/team/1.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">
<h5>John Doe</h5>
<span class="small text-uppercase text-muted">CEO - Founder</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4">
<img src="demo/img/sections/team/2.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">
<h5>Jane Doe</h5>
<span class="small text-uppercase text-muted">CTO - Co-Founder</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4">
<img src="demo/img/sections/team/3.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">
<h5>John Doe</h5>
<span class="small text-uppercase text-muted">CMO - Operations</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4">
<img src="demo/img/sections/team/4.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">
<h5>Jane Doe</h5>
<span class="small text-uppercase text-muted">CCO - Financial</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-facebook-f"></i>
<span class="visually-hidden">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-twitter"></i>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-instagram"></i>
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a class="social-link">
<i class="lab la-linkedin"></i>
<span class="visually-hidden">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-7", {
name: "Team 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-7-thumb.webp",
html: `<section class="p-4" aria-label="team-7">
<div class="container">
<div class="row text-center pb-5 pt-3">
<div class="col-md-12 text-center">
<div class="lc-block">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Our Team</b>
</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br>ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row pb-4">
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/1.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Benjamin Lawrence</h4>
<p class="small">Founder &amp; CEO</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/2.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Robert Greene</h4>
<p class="small">UX Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/3.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Paul Mackenzie</h4>
<p class="small">Full Stack Developer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/4.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Faith Watson</h4>
<p class="small">Illustrator Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-8", {
name: "Team 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-8-thumb.webp",
html: `<section class="p-4" aria-label="team-8">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="lc-block mb-4">
<span editable="inline" class="small mt-4 d-block">LOREM IPSUM</span>
<h2 editable="inline" class="display-2 mb-0">
<b>Team</b>
</h2>
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br> ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 py-4">
<div>
<img alt="" class="rounded-circle float-start me-4" src="demo/img/sections/team/1.webp" style="width:10vh;" loading="lazy">
<div>
<h5>
<strong>Neil Amstrong</strong>
</h5>
</div>
<small editable="inline" class="text-secondary" style="letter-spacing:1px">SOME LIPSUM</small>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
<div class="lc-block float-end ms-3 py-4">
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="" lc-helper="svg-icon" fill="currentColor" width="1em" height="1em">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
</div>
</div>
<div class="col-md-6 py-4">
<div>
<img alt="" class="rounded-circle float-start me-4" src="demo/img/sections/team/2.webp" style="width:10vh;" loading="lazy">
<div>
<h5>
<strong>Neil Amstrong</strong>
</h5>
</div>
<small editable="inline" class="text-secondary" style="letter-spacing:1px">SOME LIPSUM</small>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
<div class="lc-block float-end ms-3 py-4">
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" lc-helper="svg-icon" fill="currentColor" width="1em" height="1em">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 py-4">
<div>
<img alt="" class="rounded-circle float-start me-4" src="demo/img/sections/team/3.webp" style="width:10vh;" loading="lazy">
<div>
<h5>
<strong>Neil Amstrong</strong>
</h5>
</div>
<small editable="inline" class="text-secondary" style="letter-spacing:1px">SOME LIPSUM</small>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
<div class="lc-block float-end ms-3 py-4">
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="" lc-helper="svg-icon" fill="currentColor" width="1em" height="1em">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
</div>
</div>
<div class="col-md-6 py-4">
<div>
<img alt="" class="rounded-circle float-start me-4" src="demo/img/sections/team/4.webp" style="width:10vh;" loading="lazy">
<div>
<h5>
<strong>Neil Amstrong</strong>
</h5>
</div>
<small editable="inline" class="text-secondary" style="letter-spacing:1px">SOME LIPSUM</small>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
<div class="lc-block float-end ms-3 py-4">
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="" lc-helper="svg-icon" fill="currentColor" width="1em" height="1em">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a class="text-dark text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" lc-helper="svg-icon" fill="currentColor">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-9", {
name: "Team 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-9-thumb.webp",
html: `<section class="p-4" aria-label="team-9">
<div class="container">
<div class="row text-center pb-5 pt-3">
<div class="col-md-12 text-center">
<div class="lc-block">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Our Team</b>
</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br>ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row pb-4">
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/1.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Benjamin Lawrence</h4>
<p class="small">Founder &amp; CEO</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/2.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Robert Greene</h4>
<p class="small">UX Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/3.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Paul Mackenzie</h4>
<p class="small">Full Stack Developer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/4.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Faith Watson</h4>
<p class="small">Illustrator Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-10", {
name: "Team 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-10-thumb.webp",
html: `<section class="p-4" aria-label="team-10">
<div class="container">
<div class="row text-center pb-5 pt-3">
<div class="col-md-12 text-center">
<div class="lc-block">
<span class="small mt-4 d-block">LOREM IPSUM</span>
<h2 class="display-2 mb-0">
<b>Our Team</b>
</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
<br>ligula malesuada placerat sit amet quis enim.
</p>
</div>
</div>
</div>
<div class="row pb-4">
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/1.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Benjamin Lawrence</h4>
<p class="small">Founder &amp; CEO</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/2.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Robert Greene</h4>
<p class="small">UX Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/3.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Paul Mackenzie</h4>
<p class="small">Full Stack Developer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 my-2">
<div class="lc-block">
<img src="demo/img/sections/team/4.webp" title="" alt="" loading="lazy" class="img-fluid">
</div>
<div class="position-relative text-center mx-2 mt-n4 py-4 bg-body-tertiary shadow" style="">
<h4>Faith Watson</h4>
<p class="small">Illustrator Designer</p>
<div class="nav justify-content-center">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="me-1">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-11", {
name: "Team 11",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-11-thumb.webp",
html: `<section class="py-5 team-11" aria-label="team-11">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Our Great Team</span>
<h2 class="display-5 fw-bold">Meet the Team</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">
<div class="col-md-4 mb-lg-0 mb-4">
<div class="card text-white border-0 justify-content-end position-relative">
<img class="img-fluid" src="demo/img/sections/team/1.webp">
<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
<h5 class="fw-bold">John Doe</h5>
<div>
Designer
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-lg-0 mb-4">
<div class="card text-white border-0 justify-content-end position-relative">
<img class="img-fluid" src="demo/img/sections/team/2.webp">
<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
<h5 class="fw-bold">John Doe</h5>
<div>
Developer
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white border-0 justify-content-end position-relative">
<img class="img-fluid" src="demo/img/sections/team/3.webp">
<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
<h5 class="fw-bold">John Doe</h5>
<div>
HR Manager
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-12", {
name: "Team 12",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-12-thumb.webp",
html: `<section class="py-5 team-11" aria-label="team-12">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Our Great Team</span>
<h2 class="display-5 fw-bold">Meet the Team</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">
<div class="col-md-4">
<div class="card text-center mb-3">
<div class="card-body p-0 pb-4">
<div class="mb-4">
<img class="img-fluid" src="demo/img/sections/team/1.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CTO
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center mb-3">
<div class="card-body p-0 pb-4">
<div class="mb-4">
<img class="img-fluid" src="demo/img/sections/team/2.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Programmer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center mb-3">
<div class="card-body p-0 pb-4">
<div class="mb-4">
<img class="img-fluid" src="demo/img/sections/team/3.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Designer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-13", {
name: "Team 13",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-13-thumb.webp",
html: `<section class="py-5 team-11" aria-label="team-13">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-2 order-lg-1">
<div class="row g-3">
<div class="col-sm-6">
<div class="card text-center border-0 bg-body-tertiary ">
<div class="card-body px-4 py-4">
<div class="mb-4 mx-2 mx-md-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/1.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CTO
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-center border-0 bg-body-tertiary ">
<div class="card-body px-4 py-4">
<div class="mb-4 mx-2 mx-md-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/2.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CFO
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-center border-0 bg-body-tertiary ">
<div class="card-body px-4 py-4">
<div class="mb-4 mx-2 mx-md-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/3.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Designer
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-center border-0 bg-body-tertiary ">
<div class="card-body px-4 py-4">
<div class="mb-4 mx-2 mx-md-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/4.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Developer
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2">
<div class="ms-lg-5 mb-5">
<span class="text-muted">Our Great Team</span>
<h2 class="display-5 fw-bold mb-3 mb-xl-5">Meet the Team</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
<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>
</div>
</section>`
});Vvveb.Sections.add("team/team-14", {
name: "Team 14",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-14-thumb.webp",
html: `<section class="py-5 team-11" aria-label="team-14">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Our Great Team</span>
<h2 class="display-5 fw-bold">Meet the Team</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">
<div class="col-md-4">
<div class="card text-center border-0 bg-body-tertiary mb-3">
<div class="card-body py-5">
<div class="mb-4 mx-2 mx-lg-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/1.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Developer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center border-0 bg-body-tertiary mb-3">
<div class="card-body py-5">
<div class="mb-4 mx-2 mx-lg-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/2.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
HR Manager
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center border-0 bg-body-tertiary mb-3">
<div class="card-body py-5">
<div class="mb-4 mx-2 mx-lg-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/3.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Graphic Designer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("team/team-15", {
name: "Team 15",
image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-15-thumb.webp",
html: `<section class="py-5 team-15" aria-label="team-15">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Our Great Team</span>
<h2 class="display-5 fw-bold">Meet the Team</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">
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0 mb-3">
<div class="card-body p-3">
<div class="mb-4 mx-lg-3 mx-xxl-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/1.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Developer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0 mb-3">
<div class="card-body p-3">
<div class="mb-4 mx-lg-3 mx-xxl-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/2.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Designer
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0 mb-3">
<div class="card-body p-3">
<div class="mb-4 mx-lg-3 mx-xxl-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/3.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CTO
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card text-center border-0 mb-3">
<div class="card-body p-3">
<div class="mb-4 mx-lg-3 mx-xxl-5">
<img class="img-fluid rounded-circle" src="demo/img/sections/team/4.webp">
</div>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CFO
</div>
<div class="d-flex justify-content-center mt-4">
<a class="link-secondary me-2" href="">
<svg class="bi bi-facebook" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.951z"></path>
</svg>
</a>
<a class="link-secondary me-2" href="">
<svg class="bi bi-twitter" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg>
</a>
<a class="link-secondary" href="">
<svg class="bi bi-linkedin" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<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.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.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-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Team"] = ["team/team-1","team/team-2","team/team-3","team/team-4","team/team-5","team/team-6","team/team-7","team/team-8","team/team-9","team/team-10","team/team-11","team/team-12","team/team-13","team/team-14","team/team-15"];
Vvveb.Sections.add("testimonials/testimonials-1", {
name: "Testimonials 1",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-1-thumb.webp",
html: `<section class="testimonials-1 bg-alternate" aria-label="testimonials-1">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h2 class="text-center display-6 mb-1 fw-bold">Some of our users</h2>
<p class="lead text-center text-muted mb-4">Hear what our users have to say</p>
</div>
</div>
<div class="row text-center">
<div class="col-xl-3 col-sm-6 mb-5">
<div class="rounded border testimonial" data-aos="fade-up">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<img src="demo/img/sections/team/1.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 shadow border rounded-3" loading="lazy">
<h3>John Doe</h3>
<span class="small text-uppercase text-muted">Company Inc.</span>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="rounded border testimonial" data-aos="fade-up" data-aos-delay="100">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<img src="demo/img/sections/team/2.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 shadow border rounded-3" loading="lazy">
<h3>Jane Doe</h3>
<span class="small text-uppercase text-muted">Company Inc.</span>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="rounded border testimonial" data-aos="fade-up" data-aos-delay="200">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<img src="demo/img/sections/team/3.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 shadow border rounded-3" loading="lazy">
<h3>John Doe</h3>
<span class="small text-uppercase text-muted">Company Inc.</span>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-5">
<div class="rounded border testimonial" data-aos="fade-up" data-aos-delay="300">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<img src="demo/img/sections/team/4.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 shadow border rounded-3" loading="lazy">
<h3>Jane Doe</h3>
<span class="small text-uppercase text-muted">Company Inc.</span>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-2", {
name: "Testimonials 2",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-2-thumb.webp",
html: `<section class="py-5" aria-label="testimonials-2">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h2 class="mb-1">Some of our users</h2>
<h3 class="lead text-muted mb-3">Hear what our users have to say</h3>
</div>
</div>
<div class="row text-center">
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CTO - Founder</h6>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CTO - Tech</h6>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CSO - Financial</h6>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="row">
<div class="col-md-12">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
</div>
<div class="col-md-12 text-center">
<div class="pt-2">
<h5 class="mt-4 mb-0">John Doe</h5>
<h6 class="text-muted mb-3">CMO - Operations</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-3", {
name: "Testimonials 3",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-3-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-3">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-md-7 text-center">
<h2 class="mb-1">Some of our users</h2>
<h3 class="lead text-muted mb-3">Hear what our users have to say</h3>
</div>
</div>
<div class="row justify-content-center py-5">
<div class="card col-md-3">
<div class="card-content">
<div class="card-body">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<div class="profile">
<img src="demo/img/sections/team/1.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>Jane Doe</h4>
<small>CEO - Founder</small>
</div>
</div>
</div>
</div>
<div class="card col-md-3">
<div class="card-content">
<div class="card-body">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<div class="profile">
<img src="demo/img/sections/team/2.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>John Doe</h4>
<small>CTO - Co-Founder</small>
</div>
</div>
</div>
</div>
<div class="card col-md-3">
<div class="card-content">
<div class="card-body">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
<div class="card-subtitle mt-3">
<p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
</div>
<div class="profile">
<img src="demo/img/sections/team/3.webp" loading="lazy" class="img-fluid" alt="team">
</div>
<div class="card-title mt-4">
<h4>Jane Doe</h4>
<small>CSO - Financial</small>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-4", {
name: "Testimonials 4",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-4-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row align-items-center">
<div class="col-md-4 mb-4 mb-md-0 order-md-2">
<img alt="" class="img-fluid rounded-circle" src="demo/img/sections/team/1.webp">
</div>
<div class="col-md-8 ps-md-5">
<div class="text-primary mb-4">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente accusantium nulla, sequi cupiditate exercitationem sit incidunt rerum explicabo. Soluta beatae esse praesentiumexercitationem vero harum pariatur adipisci qui veritatis est! sequi cupiditate exercitationem sit incidunt rerum explicabo.</p>
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Multinational CEO
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-5", {
name: "Testimonials 5",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-5-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row align-items-center">
<div class="col-md-4 mb-4 mb-md-0">
<img alt="" class="img-fluid rounded" src="demo/img/sections/team/1.webp">
</div>
<div class="col-md-8 ps-md-5">
<div class="text-primary mb-4">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis cupiditate voluptatum ullam vero aspernatur, repellendus consectetur culpa dolores corporis sed nemo atque iste, voluptatem.</p>
<h5 class="fw-bold pt-3">John Doe</h5>
<div class="text-muted">
Multinational CTO
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-6", {
name: "Testimonials 6",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-6-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-6">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Clients</span>
<h2 class="display-5 fw-bold">Our Testimonials</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 g-5 py-4 justify-content-center">
<div class="col-lg-8">
<div class="d-flex align-items-start mb-4" data-aos="fade-up">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/2.webp" width="96">
<div class="bg-body-tertiary p-3 p-md-4">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<div class="text-end pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CEO
</div>
</div>
</div>
</div>
<div class="d-flex align-items-start" data-aos="fade-up" data-aos-delay="100">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/3.webp" width="96">
<div class="bg-body-tertiary p-3 p-md-4">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
<div class="text-end pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
CTO
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-7", {
name: "Testimonials 7",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-7-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-7">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Clients</span>
<h2 class="display-5 fw-bold">Our Testimonials</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 g-5 py-4">
<div class="col-lg-6 d-flex align-items-start" data-aos="fade-up">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/4.webp" width="96">
<div class="px-3 px-md-2">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetu reli</p>
<div class="text-start pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Multinational CEO
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-start" data-aos="fade-up" data-aos-delay="100">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/3.webp" width="96">
<div class="px-3 px-md-2">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetu reli</p>
<div class="text-start pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Multinational CTO
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-8", {
name: "Testimonials 8",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-8-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-8">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Clients</span>
<h2 class="display-5 fw-bold">Our Testimonials</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 gy-5 py-4">
<div class="col-lg-6 d-flex align-items-start" data-aos="fade-up">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/2.webp" width="96">
<div class="bg-body-tertiary p-3 p-md-5">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetureli</p>
<div class="text-end pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Multinational CEO
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-start" data-aos="fade-up" data-aos-delay="100">
<img alt="" class="img-fluid rounded-circle me-3" height="96" src="demo/img/sections/team/3.webp" width="96">
<div class="bg-body-tertiary p-3 p-md-5">
<div class="text-primary mb-1">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetureli</p>
<div class="text-end pt-2">
<h5 class="fw-bold">John Doe</h5>
<div class="text-muted">
Multinational CFO
</div>
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-9", {
name: "Testimonials 9",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-9-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-9">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Clients</span>
<h2 class="display-5 fw-bold">Our Testimonials</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 py-5">
<div class="col-md-4 py-2 py-md-2">
<div class="bg-body-tertiary mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative" data-aos="fade-up">
<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="demo/img/sections/team/1.webp" width="96">
<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
<h6 class="mt-4 fw-bold">John Doe</h6>
<div class="text-muted">
Multinational CEO
</div>
</div>
</div>
<div class="col-md-4 py-2 py-md-2">
<div class="bg-body-tertiary mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative" data-aos="fade-up" data-aos-delay="100">
<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="demo/img/sections/team/2.webp" width="96">
<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
<h6 class="mt-4 fw-bold">John Woo</h6>
<div class="text-muted">
Multinational CFO
</div>
</div>
</div>
<div class="col-md-4 py-2 py-md-2">
<div class="bg-body-tertiary mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative" data-aos="fade-up" data-aos-delay="200">
<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="demo/img/sections/team/3.webp" width="96">
<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
<h6 class="mt-4 fw-bold">Jane Doe</h6>
<div class="text-muted">
Startup Advisor
</div>
</div>
</div>
</div>
</div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-10", {
name: "Testimonials 10",
image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-10-thumb.webp",
html: `<section class="py-5 team-2" aria-label="testimonials-10">
<div class="container">
<div class="row justify-content-center text-center mb-2 mb-lg-4">
<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
<span class="text-muted">Clients</span>
<h2 class="display-5 fw-bold">Our Testimonials</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 g-xl-5 py-4">
<div class="col-md-4">
<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center" data-aos="fade-up">
<div class="text-primary mb-md-4 mb-2">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<img alt="" class="rounded-circle" height="96" src="demo/img/sections/team/1.webp" width="96">
<h6 class="mt-4 text-muted">John Doe</h6>
</div>
</div>
<div class="col-md-4">
<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center" data-aos="fade-up" data-aos-delay="100">
<div class="text-primary mb-md-4 mb-2">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<img alt="" class="rounded-circle" height="96" src="demo/img/sections/team/2.webp" width="96">
<h6 class="mt-4 text-muted">John Doe</h6>
</div>
</div>
<div class="col-md-4">
<div class="mx-0 mx-xl-3 py-3 py-md-0 text-center" data-aos="fade-up" data-aos-delay="200">
<div class="text-primary mb-md-4 mb-2">
<svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785 c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508 c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786 C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01 c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936 c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508 c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786 C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
</g>
</svg>
</div>
<p class="mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<img alt="" class="rounded-circle" height="96" src="demo/img/sections/team/3.webp" width="96">
<h6 class="mt-4 text-muted">John Doe</h6>
</div>
</div>
</div>
</div>
</section>`
});
Vvveb.SectionsGroup["Testimonials"] = ["testimonials/testimonials-1","testimonials/testimonials-2","testimonials/testimonials-3","testimonials/testimonials-4","testimonials/testimonials-5","testimonials/testimonials-6","testimonials/testimonials-7","testimonials/testimonials-8","testimonials/testimonials-9","testimonials/testimonials-10"];