nudoragon/vvveb-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
nudoragon
2026-05-17 21:09:32 +08:00
commit 1870400c47
1564 changed files with 544713 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
static/Vvvebjs/demo/landing/sections/hero/hero-1.html Normal file
View File

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

43
static/Vvvebjs/demo/landing/sections/hero/hero-10.html Normal file
View File

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

48
static/Vvvebjs/demo/landing/sections/hero/hero-11.html Normal file
View File

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

30
static/Vvvebjs/demo/landing/sections/hero/hero-12.html Normal file
View File

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

31
static/Vvvebjs/demo/landing/sections/hero/hero-13.html Normal file
View File

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

130
static/Vvvebjs/demo/landing/sections/hero/hero-14.html Normal file
View File

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

48
static/Vvvebjs/demo/landing/sections/hero/hero-2.html Normal file
View File

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

48
static/Vvvebjs/demo/landing/sections/hero/hero-3-full.html Normal file
View File

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

48
static/Vvvebjs/demo/landing/sections/hero/hero-3.html Normal file
View File

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

47
static/Vvvebjs/demo/landing/sections/hero/hero-4.html Normal file
View File

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

57
static/Vvvebjs/demo/landing/sections/hero/hero-5.html Normal file
View File

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

45
static/Vvvebjs/demo/landing/sections/hero/hero-6.html Normal file
View File

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

52
static/Vvvebjs/demo/landing/sections/hero/hero-7.html Normal file
View File

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

65
static/Vvvebjs/demo/landing/sections/hero/hero-8.html Normal file
View File

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

40
static/Vvvebjs/demo/landing/sections/hero/hero-9.html Normal file
View File

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

163
static/Vvvebjs/demo/landing/sections/hero/hero-slider.html Normal file
View File

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