VvebOIDC/public/themes/solutry/sections/hero.html

546 lines
20 KiB
HTML
Raw Permalink 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.

<html data-vvvebjs-editor><head><base src="../"><link href="../css/style.bundle.css" rel="stylesheet"><link href="../css/screenshots.css" rel="stylesheet"><style>[data-reveal] {
opacity: 1;
transform: translate(0);
}</style><link href="../css/screenshots.css" rel="stylesheet"></head><body><header class="hero-1" aria-label="hero-1">
<div class="container">
<div class="heading">
<h1 class="display-3">Open Source CMS Reinvented</h1>
<h2 class="fs-4">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>
<div class="btns">
<a class="btn btn-primary btn-shadow" href="/download.php" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</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>
</div>
</div>
<div class="overlay">
</div>
<div class="background-container">
<!-- <img src="demo/img//background.svg" alt="Hero background" loading="lazy"> -->
</div>
</header><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-white">
<span>&#9889;</span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn text-white">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/video-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>
</header><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><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-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>Free Download</span>
<span>&#9889;</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><header class="hero-4" aria-label="hero-4">
<div class="container">
<div class="row align-items-center justify-content-center text-center">
<div class="col-lg-8" 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="350" src="demo/img/video-1.webp" class="shadow img-thumbnail">
<div class="buttons">
<a href="https://www.vvveb.com" class="btn btn-success 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><header class="hero-5" aria-label="hero-5">
<div class="container" style="z-index:2">
<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-flex mt-3 mb-1">
<a class="btn btn-primary btn-lg mt-md-3 " href="https://www.vvveb.com" role="button">Download Now</a>
</div>
</div>
<div class="col-12 col-md-6 order-sm-1 order-md-2 ">
<div class="icon-wrap text-primary d-flex justify-content-md-center my-3">
<button class="icon d-flex border-0 align-items-center justify-content-center bg-white text-dark shadow-lg rounded-circle " style="width:70px; height:70px">
<i class="la la-play la-lg ms-1"></i>
</button>
</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><header class="hero-6" aria-label="hero-6">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start">
<div class="col-lg-7">
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</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-success 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 class="col-lg-5">
<img src="demo/img/video-1.webp" class="shadow img-thumbnail" 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><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/video-1.webp" class="shadow img-thumbnail">
</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-success 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><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-7">
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</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 text-white btn-lg">
<span></span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
</div>
</div>
<div class="col-lg-5">
<img src="demo/img/video-1.webp" class="shadow img-thumbnail" 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>
<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs,
<br> presentation 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 text-white btn-lg">
<span></span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">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-5">
<img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
</div>
<div class="col-lg-7">
<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,
<br> 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 text-white btn-lg">
<span></span>
<span>Free Download</span>
<b></b>
</a>
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">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></body></html>