Files

2400 lines
104 KiB
HTML
Raw Permalink Normal View History

2026-05-17 21:09:32 +08:00
<!DOCTYPE html>
<html lang="en">
<head data-v-save-global="index.html,head">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<base href="">
<title>Vvveb Landing - Homepage</title>
<meta name="description" content="" />
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="canonical" href="">
<link id="landing-css" href="css/style.bundle.css" rel="stylesheet" media="screen">
<link id="fonts-css" href="css/fonts.css" rel="stylesheet" media="screen">
<link id="vvvebjs-css" href="css/custom.css" rel="stylesheet" media="screen">
<style>
:root {
/*--bs-font-headings:'Inter';*/
}
.hero-3 {
//height:80vh; //background-position:bottom center; } .showcase-3 { margin-top:-200px; z-index:3; }
</style>
<link rel="sitemap" type="application/xml" title="Sitemap" href="/feed/index">
<link rel="alternate" type="application/rss+xml" title="Feed" href="/feed/posts" />
<link rel="alternate" type="application/rss+xml" title="Feed" href="/feed/pages" />
<link rel="alternate" type="application/rss+xml" title="Products" href="/feed/products" />
<link rel="alternate" type="application/rss+xml" title="Comments Feed" href="/feed/comments" />
<link rel="icon" type="image/x-icon" href="media/favicon.ico" data-v-global-site.favicon>
<link rel="manifest" href="/manifest.webmanifest">
<link rel="alternate" hreflang="" href="" />
</head>
<body class="home">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="bg-image"></div>
<div class="alert alert-light alert-dismissible fade alert-top" role="alert" style="display:none">
<div class="container">
<div class="message">
Product was added to cart.
</div>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content shadow">
<div class="modal-body p-0">
<form action="/search" method="get">
<input type="hidden" name="route" value="search" />
<div class="d-flex">
<div class="input-group">
<input type="search" name="search" class="form-control border-0 p-3 px-4" id="headerSearch" placeholder="Start typing to search" data-v-vvveb-action="search" data-selector=".search-results" data-v-vvveb-on="keyup" />
<button class="btn btn-outline-primary 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>
</div>
<div class="loading d-none d-flex justify-content-center m-5">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</form>
<div class="search-results">
</div>
</div>
</div>
<button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="cart-offcanvas" aria-labelledby="cart-offcanvas">
<div class="offcanvas-header pb-0">
<h5 class="offcanvas-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column pt-2" data-v-component-cart="offcanvas">
<div class="table-responsive flex-grow-1">
<table class="table cart-table align-middle mb-0">
<tbody>
<tr data-v-cart-product>
<td class="text-center">
<a href="#40" data-v-cart-product-url>
<img src="demo/img/product.webp" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
</a>
</td>
<td class="text-start small">
<a href="#40" class="d-block" data-v-cart-product-url>
<span data-v-cart-product-name>Product name</span>
</a>
<span data-v-cart-product-quantity>1</span>
<i class="la la-times text-muted"></i>
<span data-v-cart-product-price_tax_formatted>$123.20</span>
<div class="option" data-v-if="product.option">
<div class="" data-v-product-option>
<span data-v-product-option-option>Color</span>: <span data-v-product-option-name>Red</span>
<span data-v-if="value.price > 0">(<span data-v-product-option-price></span>)</span>
</div>
<div class="" data-v-product-option>
<span data-v-product-option-option>Size</span>: <span data-v-product-option-name>XL</span>
<span data-v-if="value.price > 0">(<span data-v-product-option-price></span>)</span>
</div>
<div class="" data-v-product-option>
<span data-v-product-option-option>Material</span>: <span data-v-product-option-name>Wool</span>
<span data-v-if="value.price > 0">(<span data-v-product-option-price></span>)</span>
</div>
</div>
<div class="subscription" data-v-if="product.subscription">
<span>Subscription plan</span>:
<span data-v-cart-product-subscription_name>Subscription plan</span>
</div>
</td>
<td class="text-end">
<a class="btn btn-remove btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
<i class="la la-times-circle la-lg"></i>
</a>
</td>
</tr>
<tr data-v-cart-product>
<td class="text-center">
<a href="#40" data-v-cart-product-url>
<img src="demo/img/product.webp" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
</a>
</td>
<td class="text-start">
<a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
Product name
</a>
<span data-v-cart-product-quantity>1</span>
<i class="la la-times text-muted"></i>
<span data-v-cart-product-price_tax_formatted>$123.20</span>
</td>
<td class="text-end">
<a class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
<i class="la la-times"></i>
</a>
</td>
</tr>
<tr data-v-if-not="cart.total_items">
<td colspan="100">
<div class="d-flex p-2">
<div class="text-center p-2 opacity-75">
<!-- <img src="demo/img/bag.svg" width="20" alt> -->
<i class="la la-2x la-shopping-bag"></i>
</div>
<div class="p-2">
<strong>Empty cart</strong>
<br>
<span class="text-muted">No products added yet!</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-3 pt-0 border-top" data-v-if="cart.total_items">
<div class="table-responsive mb-2" data-v-cart-totals>
<table class="table mb-0 cart-table cart-total" cellspacing="0">
<tfoot>
<tr data-v-cart-total>
<td colspan="5" class="text-end">
<small data-v-cart-total-title>Sub-Total</small>:
</td>
<td class="text-end">
<span data-v-cart-total-text data-v-if="total.text"> - </span>
<span data-v-cart-total-value_formatted data-v-if="total.value > 0">$101.00</span>
</td>
</tr>
<tr data-v-cart-total>
<td colspan="5" class="text-end">
<small>Eco Tax (2.00):</small>
</td>
<td class="text-end">$2.00</td>
</tr>
<tr data-v-cart-total>
<td colspan="5" class="text-end">
<small>VAT (19%):</small>
</td>
<td class="text-end">$20.20</td>
</tr>
<tr data-v-cart-total>
<td colspan="5" class="text-end">
<small>Total:</small>
</td>
<td class="text-end">$123.20</td>
</tr>
<tr>
<td colspan="5" class="text-end">Total:</td>
<td class="text-end" data-v-grand-total_formatted>$0</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row mt-2 g-2 px-3 pb-2" data-v-if="cart.total_items">
<div class="col-6">
<a href="" class="btn btn-light btn-sm border w-100" data-v-url="cart/cart/index" data-url>
<i class="la la-shopping-cart la-lg"></i>
<span>View cart</span>
</a>
</div>
<div class="col-6">
<a href="" class="btn btn-primary btn-sm w-100" data-v-url="checkout/checkout/index">
<span>Checkout</span>
<i class="la la-arrow-right la-lg"></i>
</a>
</div>
</div>
</div>
</div>
<div id="page-loading-status" class="progress progress-bar"></div>
<!-- Vvveb Common Js -->
<script id="popper-js" src="js/popper.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<!-- <script src="js/bootstrap.bundle.min.js"></script> -->
<script id="bootstrap-js" src="js/bootstrap.min.js"></script>
<!-- Vvveb Ajax Common Js -->
<script id="app-js" src="/js/app.js"></script>
<!-- Animation -->
<link rel="stylesheet" href="js/aos.css" />
<noscript>
<style type="text/css">
[data-aos] {
opacity: 1 !important;
transform: translate(0) scale(1) !important;
}
</style>
</noscript>
<script src="js/aos.js"></script>
<script>
AOS.init();
</script>
<script id="cart-js" src="/js/app/cart.js"></script>
<link id="glightbox-css" rel="stylesheet" href="/js/libs/glightbox/glightbox.css" />
<script id="glightbox-js" src="/js/libs/glightbox/glightbox.min.js"></script>
<script id="theme-js" src="/js/app/theme.js"></script>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/public\/*","\/themes\/*","\/plugins\/*","\/cart\/*","\/checkout\/*","\/user\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
</body>
</html>