Vvveb.Sections.add("solutry/blog", {
    name: "Blog",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/solutry/blog-thumb.webp",
    html: `<section class="blog-section">
  <div class="container" id="blog" data-v-limit="3" data-v-component-posts="">

    <p class="section-subtitle">Latest News</p>

    <h2 class="h2 section-title">Our latest articles &amp; resources</h2>

    <ul class="blog-list" data-v-posts="">

      <li data-v-post="">
        <div class="blog-card">

          <figure class="blog-banner">
            <a href="#">
              <img src="images/blog-1.jpg" alt="How is technology working with new things?" loading="lazy" class="w-100" data-v-post-image="">
            </a>
          </figure>

          <div class="blog-content">

            <ul class="blog-meta-list">

              <li class="blog-meta-item">
                <ion-icon name="pricetag-outline"></ion-icon>

                <a href="/blog" class="blog-meta-link">Technology</a>
              </li>

              <li class="blog-meta-item">
                <ion-icon name="calendar-number-outline"></ion-icon>

                <time class="blog-meta-time" datetime="2022-02-25" data-v-post-updated_at="" data-filter-friendly_date="">25 Feb, 2022</time>
              </li>

            </ul>

            <h3 class="h3 blog-title">
              <a href="/blog" data-v-post-url="">
                <span data-v-post-name>How is technology working with new things?</span>
              </a>
            </h3>

          </div>

        </div>
      </li>

      <li data-v-post="">
        <div class="blog-card">

          <figure class="blog-banner">
            <a href="#">
              <img src="images/blog-2.jpg" alt="Top 10 important tips on IT services &amp; design" loading="lazy" class="w-100" data-v-post-image="">
            </a>
          </figure>

          <div class="blog-content">

            <ul class="blog-meta-list">

              <li class="blog-meta-item">
                <ion-icon name="pricetag-outline"></ion-icon>

                <a href="#" class="blog-meta-link">Design</a>
              </li>

              <li class="blog-meta-item">
                <ion-icon name="calendar-number-outline"></ion-icon>

                <time class="blog-meta-time" datetime="2022-02-25" data-v-post-updated_at="" data-filter-friendly_date="">25 Feb, 2022</time>
              </li>

            </ul>

            <h3 class="h3 blog-title">
              <a href="/page/services" data-v-post-url="">Top 10 important tips on IT services &amp; design</a>
            </h3>

          </div>

        </div>
      </li>

      <li data-v-post="">
        <div class="blog-card">

          <figure class="blog-banner">
            <a href="#">
              <img src="images/blog-3.jpg" alt="How our company works in different ways" loading="lazy" class="w-100" data-v-post-image="">
            </a>
          </figure>

          <div class="blog-content">

            <ul class="blog-meta-list">

              <li class="blog-meta-item">
                <ion-icon name="pricetag-outline"></ion-icon>

                <a href="#" class="blog-meta-link">Startup</a>
              </li>

              <li class="blog-meta-item">
                <ion-icon name="calendar-number-outline"></ion-icon>

                <time class="blog-meta-time" datetime="2022-02-25" data-v-post-updated_at="" data-filter-friendly_date="">25 Feb, 2022</time>
              </li>

            </ul>

            <h3 class="h3 blog-title">
              <a href="/shop" data-v-post-url="">How our company works in different ways</a>
            </h3>

          </div>

        </div>
      </li>

    </ul>

  </div>
</section>`
});Vvveb.Sections.add("solutry/features", {
    name: "Features",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/solutry/features-thumb.webp",
    html: `<section class="features" id="features">
  <div class="container">

    <p class="section-subtitle">How Can Help You</p>

    <h2 class="h2 section-title">We’re helping teams do their best work</h2>

    <ul class="features-list">

      <li>
        <div class="features-card">

          <div class="card-icon">
            <img src="images/features-icon-1.png" alt="Illustration icon">
          </div>

          <h3 class="h3 card-title">Zero Configuration</h3>

          <p class="card-text">
            Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis.
          </p>

          <a href="#" class="card-link">
            <span>Learn More</span>

            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>

        </div>
      </li>

      <li>
        <div class="features-card">

          <div class="card-icon">
            <img src="images/features-icon-2.png" alt="Illustration icon">
          </div>

          <h3 class="h3 card-title">Code Security</h3>

          <p class="card-text">
            Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis.
          </p>

          <a href="#" class="card-link">
            <span>Learn More</span>

            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>

        </div>
      </li>

      <li>
        <div class="features-card">

          <div class="card-icon">
            <img src="images/features-icon-3.png" alt="Illustration icon">
          </div>

          <h3 class="h3 card-title">Team Management</h3>

          <p class="card-text">
            Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis.
          </p>

          <a href="#" class="card-link">
            <span>Learn More</span>

            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>

        </div>
      </li>

      <li>
        <div class="features-card">

          <div class="card-icon">
            <img src="images/features-icon-4.png" alt="Illustration icon">
          </div>

          <h3 class="h3 card-title">Access Controlled</h3>

          <p class="card-text">
            Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis.
          </p>

          <a href="#" class="card-link">
            <span>Learn More</span>

            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>

        </div>
      </li>

    </ul>

  </div>
</section>`
});Vvveb.Sections.add("solutry/home", {
    name: "Home",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/solutry/home-thumb.webp",
    html: `<section class="hero" id="home">

  <img src="images/shape1.png" alt="Illustration art" class="shape shape-1">
  <img src="images/shape2.png" alt="Illustration art" class="shape shape-2">
  <img src="images/shape3.png" alt="Illustration art" class="shape shape-3">

  <div class="container">

    <figure class="hero-banner">
      <img src="images/hero-banner.png" alt="Illustration art" loading="lazy" class="w-100">
    </figure>

    <div class="hero-content">

      <h2 class="h1 hero-title">Secure IT solutions for a more secure environment</h2>

      <p class="section-text">
        Velit hendrerit sit auctor tempor sem. Congue mi tempor condimentum felis arcu, non cursus. Nulla pharetra
        porttitor sed
        platea arcu et leo odio.
      </p>

      <button class="btn btn-primary">
        <span>Get Started Now</span>

        <ion-icon name="chevron-forward-outline"></ion-icon>
      </button>

    </div>

  </div>

</section>`
});Vvveb.Sections.add("solutry/newsletter", {
    name: "Newsletter",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/solutry/newsletter-thumb.webp",
    html: `<section class="newsletter" id="newsletter">
  <div class="container">

    <figure class="newsletter-banner">
      <img src="images/newsletter.png" alt="Illustration art" loading="lazy" class="w-100">
    </figure>

    <div class="newsletter-content" data-v-component-plugin-contact-form-form="contact-1" data-v-storage="database" data-v-name="contact-1">

      <p class="section-subtitle">Subscribe Our Newsletter</p>

      <h2 class="h2 section-title">The latest resources, sent to your inbox weekly</h2>

      <form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
        <div>
          <div class="notifications" data-v-notifications>

            <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="contact-1">

              <div class="icon align-middle me-2">
                <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
              </div>

              <div class="flex-grow-1 align-self-center text-small">
                <div>
                  <div data-v-notification-text>
                    This is a placeholder for a notification message.
                  </div>
                </div>
              </div>


              <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                  <!-- <i class="la la-times"></i> -->
                </span>
              </button>
            </div>

            <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="contact-1">

              <div class="icon align-middle me-2">
                <i class="align-middle la la-2x lh-1 la-check-circle"></i>
              </div>

              <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
                This is a placeholder for a success message.
              </div>

              <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                  <!-- <i class="la la-times"></i> -->
                </span>
              </button>
            </div>

            <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="contact-1">

              <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>

            <input type="hidden" class="form-control" placeholder="First name" name="form-name" value="contact-1">

            <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="" value="UZCECiqlitFDmSRR">

            <!-- if these hidden inputs are filled then ignore, robots -->

            <input type="text" class="form-control d-none" placeholder="Subject" 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>
        </div>
        <div class="newsletter-form">
          <input type="email" name="email" required placeholder="Enter your email address" class="input-field">

          <button type="submit" class="btn btn-primary">
            <span>Subscribe Now</span>

            <ion-icon name="chevron-forward-outline"></ion-icon>
          </button>
        </div>
      </form>

    </div>

  </div>
</section>`
});Vvveb.Sections.add("solutry/service", {
    name: "Service",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/solutry/service-thumb.webp",
    html: `<section class="service" id="service">
  <div class="container">

    <figure class="service-banner">
      <img src="images/service-1.png" alt="Illustration art" loading="lazy" class="w-100">
    </figure>

    <div class="service-content">

      <p class="section-subtitle">Services We Offer</p>

      <h2 class="h2 section-title">We are here, to help your startup business</h2>

      <ul class="service-list">

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Cloud Databases</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Website Hosting</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Remote Desktop</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">File Backup</h3>

        </li>

      </ul>

    </div>

    <figure class="service-banner">
      <img src="images/service-2.png" alt="Illustration art" loading="lazy" class="w-100">
    </figure>

    <div class="service-content">

      <p class="section-subtitle">Our Services</p>

      <h2 class="h2 section-title">Best IT &amp; technology service in your area</h2>

      <ul class="service-list">

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Design &amp; Development</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Android Apps Development</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">Laravel Web Development</h3>

        </li>

        <li class="service-item">

          <div class="service-item-icon">
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>

          <h3 class="h3 service-item-title">React Web Development</h3>

        </li>

      </ul>

    </div>

  </div>
</section>`
});
	Vvveb.SectionsGroup["Solutry"] = ["solutry/blog","solutry/features","solutry/home","solutry/newsletter","solutry/service"];
Vvveb.Sections.add("hero/hero-1", {
    name: "Hero 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-1-thumb.webp",
    html: `<header class="hero-1" aria-label="hero-1">

  <div class="container">
    <div class="heading">
      <h1 class="display-3">Open Source CMS Reinvented</h1>

      <h2 class="fs-4">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>

      <div class="btns">
        <a class="btn btn-primary btn-shadow" href="/download.php" role="button">
          <span>&#9889;</span>
          <span>Free Download</span>
        </a>

        <div class="nav-item dropdown">
          <a class="btn btn-outline-primary nav-link dropdown-toggle" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/" role="button">Live demo <b>›</b>
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin/?module=/editor/editor&template=index.html&url=/">Page builder</a>
            <a class="dropdown-item" target="_blank" href="//demo.vvveb.com/admin">Admin dashboard</a>
            <a class="dropdown-item" target="_blank" href="//demo.vvveb.com">Frontend</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" target="_blank" href="https://vercel-vvveb-commerce.vercel.app/">Next.js Frontend GraphQL</a>
          </div>
        </div>
      </div>

    </div>

    <div class="frame mx-auto">
      <video loading="lazy" src="video/intro.mp4" width="1280" muted="true" playsinline="true" loop="true" controls="true" poster="https://www.vvveb.com/img/dark-theme.webp"></video>
    </div>
  </div>

  <div class="overlay">
  </div>

  <div class="background-container">
    <!-- <img src="demo/img//background.svg" alt="Hero background" loading="lazy"> -->
  </div>

</header>`
});Vvveb.Sections.add("hero/hero-2", {
    name: "Hero 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-2-thumb.webp",
    html: `<header class="hero-2" aria-label="hero-2">

  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-6 mb-5 ms-5" data-aos="fade-up" data-aos-delay="0">
        <h1 class="heading">The next generation website builder</h1>
        <p class="subheading mb-5">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
        <p>
          <a href="https://www.vvveb.com" class="btn btn-white">
            <span>&#9889;</span>
            <span>Free Download</span>
            <b>›</b>
          </a>

          <a href="https://demo.vvveb.com" class="btn text-white">Live Demo</a>
        </p>
      </div>
      <div class="col-lg-5" data-aos="fade-up" data-aos-delay="100">
        <a href="https://www.youtube.com/watch?v=3xsP3u-CVO4" class="video-wrap glightbox">
          <span class="play-button">
            <i class="la la-play"></i>
          </span>
          <img src="demo/img/video-1.webp" loading="lazy" alt="Video image" class="img-fluid">
        </a>
      </div>
    </div>
  </div>

  <div class="separator bottom">
    <svg height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" fill="var(--bs-body-bg)" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px" width="100%" height="250">
      <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
		c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
      <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
		c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
      <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
		H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
      <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
		c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
    </svg>
  </div>

  <div class="overlay">
  </div>

</header>`
});Vvveb.Sections.add("hero/hero-3-full", {
    name: "Hero 3 full",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-3-full-thumb.webp",
    html: `<header class="hero-3" aria-label="hero-3">

  <div class="container vh-100">
    <div>
      <div class="row align-items-center justify-content-center text-center">
        <div class="col-lg-12">
          <h1 class="heading mb-4 display-3" data-aos="fade-up" data-aos-delay="100">Next generation website builder</h1>
          <div class="col-lg-8 mx-auto">
            <h2 class="h4 lh-base fw-normal" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h2>
          </div>

          <div class="buttons" data-aos="fade-up" data-aos-delay="300">
            <a href="https://www.vvveb.com" class="btn btn-primary">
              <span>&#9889;</span>
              <span>Free Download</span>
            </a>
            <a href="https://demo.vvveb.com" class="btn btn-light">Live Demo</a>
          </div>


        </div>
      </div>
    </div>
  </div>
  <!--  
    <div class="separator bottom">
		
		<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="100" fill="var(--bs-body-bg)" preserveAspectRatio="none"><defs></defs><title>rough-edges-bottom</title><path d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
		
    </div>   
-->
  <!--
   <div class="separator top">
		
		<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="200" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
		
    </div>
-->
  <div class="overlay">
  </div>

  <div class="background-container">

    <img src="demo/img/hero-3.webp" alt="Hero background">

  </div>

</header>`
});Vvveb.Sections.add("hero/hero-3", {
    name: "Hero 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-3-thumb.webp",
    html: `<header class="hero-3" aria-label="hero-3">

  <div class="container">
    <div>
      <div class="row align-items-center justify-content-center text-center">
        <div class="col-lg-12">
          <h1 class="heading mb-4 display-3" data-aos="fade-up" data-aos-delay="100">Next generation website builder</h1>
          <div class="col-lg-8 mx-auto">
            <h2 class="h4 lh-base fw-normal" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h2>
          </div>

          <div class="buttons" data-aos="fade-up" data-aos-delay="300">
            <a href="https://www.vvveb.com" class="btn btn-primary">
              <span>Free Download</span>
              <span>&#9889;</span>
            </a>
            <a href="https://demo.vvveb.com" class="btn btn-light">Live Demo</a>
          </div>


        </div>
      </div>
    </div>
  </div>

  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="100" fill="var(--bs-body-bg)" preserveAspectRatio="none">
      <defs></defs>
      <title>rough-edges-bottom</title>
      <path d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>
  <!--
   <div class="separator top">
		
		<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="200" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
		
    </div>
-->
  <div class="overlay">
  </div>

  <div class="background-container">

    <img src="demo/img/hero-3.webp" alt="Hero background">

  </div>

</header>`
});Vvveb.Sections.add("hero/hero-4", {
    name: "Hero 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-4-thumb.webp",
    html: `<header class="hero-4" aria-label="hero-4">

  <div class="container">
    <div class="row align-items-center justify-content-center text-center">
      <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
        <h1 class="heading mb-3 display-4">The next generation website builder</h1>
        <h4 class="subheading mb-5">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</h4>

        <img width="350" src="demo/img/video-1.webp" class="shadow img-thumbnail">

        <div class="buttons">

          <a href="https://www.vvveb.com" class="btn btn-success btn-lg">
            <span>⚡</span>
            <span>Free Download</span>
            <b>›</b>
          </a>
          <a href="https://demo.vvveb.com" class="btn btn-white btn-lg">Live Demo</a>

        </div>
      </div>
    </div>
  </div>

  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
      <defs>
        <style>
          .cls-1 {
            fill: var(--bs-body-bg);
          }
        </style>
      </defs>
      <title>rough-edges-bottom</title>
      <path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>

  <div class="overlay">
  </div>

  <div class="background-container">
    <img src="demo/img/hero-3.webp" alt="Hero background">
  </div>
</header>`
});Vvveb.Sections.add("hero/hero-5", {
    name: "Hero 5",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-5-thumb.webp",
    html: `<header class="hero-5" aria-label="hero-5">

  <div class="container" style="z-index:2">
    <div class="row align-items-center d-flex justify-content-between">
      <div class="col-12 col-md-6 pb-5 order-2 order-sm-2 ">
        <h1 class="fw-bold mb-3 mt-5 display-3">The next generation website builder.</h1>
        <p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
        <div class=" d-flex mt-3 mb-1">
          <a class="btn btn-primary btn-lg  mt-md-3 " href="https://www.vvveb.com" role="button">Download Now</a>
        </div>
      </div>
      <div class="col-12 col-md-6 order-sm-1 order-md-2  ">
        <div class="icon-wrap text-primary d-flex justify-content-md-center my-3">
          <button class="icon d-flex border-0 align-items-center justify-content-center bg-white text-dark shadow-lg rounded-circle " style="width:70px; height:70px">
            <i class="la la-play la-lg ms-1"></i>
          </button>
        </div>
      </div>
    </div>
  </div>


  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
      <defs>
        <style>
          .cls-1 {
            fill: var(--bs-body-bg);
          }
        </style>
      </defs>
      <title>rough-edges-bottom</title>
      <path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>

  <div class="overlay">
  </div>

  <div class="background-container">
    <img src="demo/img/hero-3.webp" alt="Hero background">
  </div>

</header>`
});Vvveb.Sections.add("hero/hero-6", {
    name: "Hero 6",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-6-thumb.webp",
    html: `<header class="hero-6" aria-label="hero-6">

  <div class="container">
    <div>
      <div class="row align-items-center justify-content-center text-start">
        <div class="col-lg-7">
          <h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
          <h2 class="h3 col-lg-8" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>


          <div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
            <a href="https://www.vvveb.com" class="btn btn-success btn-lg">
              <span>⚡</span>
              <span>Free Download</span>
              <b>›</b>
            </a>
            <a href="https://demo.vvveb.com" class="btn btn-white btn-lg">Live Demo</a>
          </div>


        </div>
        <div class="col-lg-5">
          <img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
        </div>
      </div>
    </div>
  </div>

  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
      <defs>
        <style>
          .cls-1 {
            fill: var(--bs-body-bg);
          }
        </style>
      </defs>
      <title>rough-edges-bottom</title>
      <path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>

  <div class="overlay">
  </div>

  <div class="background-container">
    <img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
  </div>
</header>`
});Vvveb.Sections.add("hero/hero-7", {
    name: "Hero 7",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-7-thumb.webp",
    html: `<header class="hero-7" aria-label="hero-7">

  <div class="container">
    <div>
      <div class="row align-items-center justify-content-center text-start g-5">
        <div class="col-lg-5">
          <img src="demo/img/video-1.webp" class="shadow img-thumbnail">
        </div>

        <div class="col-lg-7">
          <h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
          <h2 class="h3 col-lg-8" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>


          <div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
            <a href="https://www.vvveb.com" class="btn btn-success btn-lg">
              <span>⚡</span>
              <span>Free Download</span>
              <b>›</b>
            </a>
            <a href="https://demo.vvveb.com" class="btn btn-white btn-lg">Live Demo</a>
          </div>


        </div>
      </div>
    </div>
  </div>

  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
      <defs>
        <style>
          .cls-1 {
            fill: var(--bs-body-bg);
          }
        </style>
      </defs>
      <title>rough-edges-bottom</title>
      <path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>

  <div class="overlay">
  </div>

  <div class="background-container">
    <img src="demo/img/hero-3.webp" alt="Hero background">
  </div>
</header>`
});Vvveb.Sections.add("hero/hero-slider", {
    name: "Hero slider",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/hero/hero-slider-thumb.webp",
    html: `<header class="hero-slider" aria-label="hero-slider">


  <div class="swiper" data-slides-per-view="1" data-draggable="true">
    <div class="swiper-wrapper">


      <div class="swiper-slide">
        <img src="demo/img/hero-3.webp" loading="lazy">
        <div class="content">
          <div class="container">
            <div>
              <div class="row align-items-center justify-content-center text-start">
                <div class="col-lg-7">
                  <h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
                  <h2 class="h3 col-lg-8" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>


                  <div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
                      <span>⚡</span>
                      <span>Free Download</span>
                      <b>›</b>
                    </a>
                    <a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
                  </div>


                </div>
                <div class="col-lg-5">
                  <img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overlay"></div>
      </div>


      <div class="swiper-slide">
        <img src="demo/img/hero-3.webp" loading="lazy">
        <div class="content">
          <div class="container">
            <div>
              <div class="row align-items-center justify-content-center text-center">
                <div class="col-lg-12">
                  <h1 class="heading text-white mb-3 display-4 fw-bold" data-aos="fade-up" data-aos-delay="100">The fastest and leanest CMS</h1>
                  <h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs,
                    <br> presentation or ecommerce stores.
                  </h2>

                  <div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="https://www.vvveb.com" class="btn btn-primary text-white  btn-lg">
                      <span>⚡</span>
                      <span>Free Download</span>
                      <b>›</b>
                    </a>
                    <a href="https://demo.vvveb.com" class="btn btn-white text-white  btn-lg">Live Demo</a>
                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overlay"></div>
      </div>

      <div class="swiper-slide">
        <img src="demo/img/hero-3.webp" loading="lazy">
        <div class="content">
          <div class="container">
            <div>
              <div class="row align-items-center justify-content-center text-start g-5">
                <div class="col-lg-5">
                  <img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
                </div>

                <div class="col-lg-7">
                  <h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
                  <h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,
                    <br> websites or ecommerce stores.
                  </h2>


                  <div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
                      <span>⚡</span>
                      <span>Free Download</span>
                      <b>›</b>
                    </a>
                    <a href="https://demo.vvveb.com" class="btn btn-white text-white  btn-lg">Live Demo</a>
                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="overlay"></div>
      </div>

    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

    <div class="swiper-pagination"></div>
  </div>



  <div class="separator bottom">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
      <defs>
        <style>
          .cls-1 {
            fill: var(--bs-body-bg);
          }
        </style>
      </defs>
      <title>rough-edges-bottom</title>
      <path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
    </svg>

  </div>


  <div class="background-container">
    <img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
  </div>


  <script id="swiper-js" src="/js/libs/swiper/swiper-bundle.min.js"></script>
  <link id="swiper-css" href="/js/libs/swiper/swiper-bundle.min.css" rel="stylesheet">
  <script>
var swiper = [];
function initSwiper(onlyNew = false) {
	var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
	list.forEach(el => {
		//el.dataset
		let params = {      
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},      
			pagination: {
				el: ".swiper-pagination",
		  },
		};
		for (i in el.dataset) {
			let param = el.dataset[i];
			if (param[0] = '{') {
				param = JSON.parse(param);
			}
			params[i] = param;
		}
		swiper.push(new Swiper(el, params))
		//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))		
	});
}	

initSwiper();
</script>

</header>`
});
	Vvveb.SectionsGroup["Hero"] = ["hero/hero-1","hero/hero-2","hero/hero-3-full","hero/hero-3","hero/hero-4","hero/hero-5","hero/hero-6","hero/hero-7","hero/hero-slider"];
Vvveb.Sections.add("features/features-1", {
    name: "Features 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-1-thumb.webp",
    html: `<section class="features-1 bg-alternate" aria-label="features-1">
  <div class="container">
    <div class="row g-5 wrap">
      <div class="col-md-6 align-self-center">
        <div class="max-box" data-aos="fade-right">
          <!--
                    <span class="badge  bg-success rounded-pill px-3">new</span>
                    -->
          <h2 class="display-6 fw-semibold">Real time code editor</h2>
          <div class="mt-4">
            <p class="lead">Code editor with syntax highglighting that updates in real time.</p>
            <p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
            <p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
          </div>
          <a tile="Code editor features" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
      <div class="col-md-6">
        <img src="demo/img/illustrations.co/118-macbook.svg" alt="Macbook" loading="lazy" class="img-fluid" data-aos="fade-left" />
      </div>
    </div>
    <div class="row g-5 wrap">
      <div class="col-md-6">
        <img src="demo/img/illustrations.co/day95-app-development.svg" alt="App development" loading="lazy" class="img-fluid" data-aos="fade-right" />
      </div>
      <div class="col-md-6 align-self-center">
        <div class="max-box ms-auto" data-aos="fade-left">
          <!-- <span class="badge  bg-success rounded-pill px-3">on sale</span> -->
          <h2 class="display-6 fw-semibold">Drag and drop page builder</h2>
          <div class="mt-4">
            <p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
            <p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
          </div>
          <a title="Drag and drop" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-2", {
    name: "Features 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-2-thumb.webp",
    html: `<section class="features-2 py-5 bg-alternate" aria-label="features-2">

  <div class="row no-gutters">
    <div class="col-lg-6">
      <img alt="image" src="demo/img/illustrations.co/day68-happy-cat.svg" alt="happy cat" loading="lazy" class="img-fluid">
    </div>

    <div class="col-lg-6 bg-primary bg-gradient text-white d-flex">

      <div class="text-box align-self-center">
        <h3 class="text-white mb-3">Code editor with syntax highlighting that updates in real time</h3>
        <p>The html for sections blocks and components and this template are built using Bootstrap 5</p>
        <ul class="list-block">
          <li class="my-2">
            <span>Intuitive building with simple drag and drop for sections, components and blocks/snippets.</span>
            </span>
          </li>
          <li class="my-2">
            <span>Code editor with syntax highglighting that updates in real time.</span>
          </li>
          <li class="my-2">
            <span>Search and insert CCO images directly into the page. </span>
          </li>
          <li class="my-2">
            <span>The html for sections blocks and components and this template are built using bootstrap 5.</span>
          </li>
        </ul>
        <a class="btn btn-outline-light  mt-3">
          <span>Learn More</span>
        </a>
      </div>

    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-3", {
    name: "Features 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-3-thumb.webp",
    html: `<section class="features-3 py-5 bg-alternate" aria-label="features-3">
  <div class="container">

    <div class="row">

      <div class="col-lg-6 d-flex align-items-center">
        <div class="row">
          <div class="col-md-12 mb-4">
            <div class="d-flex align-items-center">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="72" height="72" color="#1064ea" fill="#fff">
                  <polyline points="336 176 225.2 304 176 255.8" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline>
                  <path d="M463.1,112.37C373.68,64.33,336.71,84.45,256,48,175.29,84.45,138.32,64.33,48.9,112.37,32.7,369.13,240.58,457.79,256,464,271.42,457.79,479.3,369.13,463.1,112.37Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path>
                </svg>

              </div>
              <div class="p-4">
                <h6 class="text-muted">
                  <a class="linking">Live code edit</a>
                </h6>
                <p class="mt-3">Code editor with syntax highglighting for html css and javascript that updates in real time.</p>
              </div>
            </div>
          </div>
          <div class="col-md-12 mb-4">
            <div class="d-flex align-items-center">
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="72" height="72" color="#1064ea" fill="#fff">
                  <path d="M419.1,337.45a3.94,3.94,0,0,0-6.1,0c-10.5,12.4-45,46.55-45,77.66,0,27,21.5,48.89,48,48.89h0c26.5,0,48-22,48-48.89C464,384,429.7,349.85,419.1,337.45Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
                  <path d="M387,287.9,155.61,58.36a36,36,0,0,0-51,0l-5.15,5.15a36,36,0,0,0,0,51l52.89,52.89,57-57L56.33,263.2a28,28,0,0,0,.3,40l131.2,126a28.05,28.05,0,0,0,38.9-.1c37.8-36.6,118.3-114.5,126.7-122.9,5.8-5.8,18.2-7.1,28.7-7.1h.3A6.53,6.53,0,0,0,387,287.9Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
                </svg>

              </div>
              <div class="p-4">
                <h6 class="text-muted">
                  <a class="linking">Drag and drop</a>
                </h6>
                <p class="mt-3">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
              </div>
            </div>
          </div>
          <div class="col-md-12 mb-4">
            <div class="d-flex align-items-center">
              <div>

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" width="72" height="72" color="#1064ea" fill="#fff" stroke-width="28">
                  <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M80,176a16,16,0,0,0-16,16V408c0,30.24,25.76,56,56,56H392c30.24,0,56-24.51,56-54.75V192a16,16,0,0,0-16-16Z"></path>
                  <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M160,176V144a64,64,0,0,1,64-64h0a64,64,0,0,1,64,64v32"></path>
                </svg>

              </div>
              <div class="p-4">
                <h6 class="text-muted">
                  <a class="linking">Bootstrap 5</a>
                </h6>
                <p class="mt-3">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <img src="demo/img/illustrations.co/day67-dog.svg" alt="dog" loading="lazy" class="img-fluid" />
      </div>

      <div class="col-md-12 mt-3 text-center">
        <a class="btn btn-primary ">View Details</a>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-4", {
    name: "Features 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-4-thumb.webp",
    html: `<section class="features-4 py-5 bg-primary bg-gradient text-white" aria-label="features-4">

  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h2>Our product features</h2>
      </div>
    </div>


    <div class="row text-center justify-content-sm-center no-gutters">
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto">
        <div>

          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="96" height="96" color="#fff" fill="#fff">
            <polyline points="336 176 225.2 304 176 255.8" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline>
            <path d="M463.1,112.37C373.68,96.33,336.71,84.45,256,48,175.29,84.45,138.32,96.33,48.9,112.37,32.7,369.13,240.58,457.79,256,464,271.42,457.79,479.3,369.13,463.1,112.37Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path>
          </svg>

          <h3 class="mt-3">Drag and drop</h3>

          <p class="mt-2">Intuitive building with simple drag and drop for sections, components and blocks/snippets.</p>
          <p class="mt-4">
            <a>Learn More <i class="la la-angle-right"></i>
            </a>
          </p>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0">
        <div>

          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="96" height="96" color="#fff" fill="#fff">
            <path d="M419.1,337.45a3.94,3.94,0,0,0-6.1,0c-10.5,12.4-45,46.55-45,77.66,0,27,21.5,48.89,48,48.89h0c26.5,0,48-22,48-48.89C464,384,429.7,349.85,419.1,337.45Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
            <path d="M387,287.9,155.61,58.36a36,36,0,0,0-51,0l-5.15,5.15a36,36,0,0,0,0,51l52.89,52.89,57-57L56.33,263.2a28,28,0,0,0,.3,40l131.2,126a28.05,28.05,0,0,0,38.9-.1c37.8-36.6,118.3-114.5,126.7-122.9,5.8-5.8,18.2-7.1,28.7-7.1h.3A6.53,6.53,0,0,0,387,287.9Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"></path>
          </svg>

          <h3 class="mt-3">Live code edit</h3>

          <p class="mt-2">Code editor with syntax highglighting that updates in real time.</p>
          <p class="mt-4">
            <a>Learn More <i class="la la-angle-right"></i>
            </a>
          </p>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0">
        <div>

          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icons" width="96" height="96" color="#fff" fill="#fff" stroke-width="28">
            <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M80,176a16,16,0,0,0-16,16V408c0,30.24,25.76,56,56,56H392c30.24,0,56-24.51,56-54.75V192a16,16,0,0,0-16-16Z"></path>
            <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" fill-rule="evenodd" d="M160,176V144a96,96,0,0,1,96-96h0a96,96,0,0,1,96,96v32"></path>
          </svg>

          <h3 class="mt-3">Bootstrap 5</h3>

          <p class="mt-2">The html for sections blocks and components and this template are built using Bootstrap 5.</p>
          <p class="mt-4">
            <a>Learn More <i class="la la-angle-right"></i>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>

</section>`
});Vvveb.Sections.add("features/features-5", {
    name: "Features 5",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-5-thumb.webp",
    html: `<section class="features-5 py-5 bg-alternate" aria-label="features-5">

  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-8 col-lg-6 m-md-auto ms-lg-0 me-lg-auto">
        <img src="demo/img/illustrations.co/day67-dog.svg" alt="dog" loading="lazy" class="img-fluid" />
      </div>
      <div class="col-12 col-lg-6 col-xl-5 ms-sm-auto pt-5 pt-lg-0">
        <h2>Open Source CMS Reinvented</h2>

        <div class="row pt-4 pt-xl-5">
          <div class="col-12 col-sm-6 col-xl-5">
            <h4>
              <strong>Drag and drop</strong>
            </h4>
            <p>Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
          </div>
          <div class="col-12 col-sm-6 col-xl-5 m-auto pt-3 pt-sm-0">
            <h4>
              <strong>Live code edit</strong>
            </h4>
            <p>Code editor with syntax highglighting that updates in real time.</p>
          </div>
        </div>

        <div class="row pt-3">
          <div class="col-12 col-sm-6 col-xl-5">
            <h4>
              <strong>Bootstrap 5</strong>
            </h4>
            <p>The html for sections blocks and components and this template are built using bootstrap 5</p>
          </div>
          <div class="col-12 col-sm-6 col-xl-5 m-auto pt-3 pt-sm-0">
            <h4>
              <strong>Google fonts</strong>
            </h4>
            <p>Use any of the hundreds fonts from google fonts for your design</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>`
});Vvveb.Sections.add("features/features-6", {
    name: "Features 6",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-6-thumb.webp",
    html: `<section class="features-6 py-5 bg-alternate" aria-label="features-6">
  <div class="container">
    <div class="row text-center">
      <div class="col-12">
        <h2>Our product features</h2>
      </div>
    </div>
    <div class="row text-center justify-content-center">
      <div class="col-12 col-sm-4 col-xl-3 m-md-auto">
        <div>
          <img loading="lazy" src="demo/img/illustrations.co/109-map-location.svg" alt="map location">
          <h3>Drag and drop</h3>
          <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-sm-4 col-xl-3 m-md-auto">
        <div>
          <img loading="lazy" src="demo/img/illustrations.co/107-healthy.svg" alt="dumbbell">
          <h3>Live code editor</h3>
          <p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-sm-4 col-xl-3 m-md-auto">
        <div>
          <img loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell">
          <h3>Bootstrap 5</h3>
          <p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>

          <a>Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-7", {
    name: "Features 7",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-7-thumb.webp",
    html: `<section class="features-7 py-5 bg-alternate" aria-label="features-7">
  <div class="container">
    <div class="row text-center">
      <div class="col-12">
        <h2>Our product features</h2>
      </div>
    </div>
    <div class="row text-center justify-content-center">
      <div class="col-12 col-md-6 col-lg-3">
        <div>
          <img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
          <h3>Drag and drop</h3>
          <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div>
          <img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
          <h3>Live code editor</h3>
          <p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div>
          <img alt="dumbbell" loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg">
          <h3>Bootstrap 5</h3>
          <p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using Bootstrap 5</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3">
        <div>
          <img alt="namaste" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg">
          <h3>Google fonts</h3>
          <p class="lead text-muted mt-4">Use any of the hundreds fonts from google fonts for your design</p>

          <a>Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-8", {
    name: "Features 8",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-8-thumb.webp",
    html: `<section class="features-8 py-5 bg-alternate" aria-label="features-8">
  <div class="container">
    <div class="row text-center">
      <div class="col-12">
        <h2>Our product features</h2>
      </div>
    </div>
    <div class="row text-start mt-5">
      <div class="col-12 col-md-4">
        <div class="row">
          <div class="col-3">
            <img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
          </div>
          <div class="col-9">
            <h4>Drag and drop</h4>
            <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 pt-3 pt-sm-4">
        <div class="row">
          <div class="col-3">
            <img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
          </div>
          <div class="col-9">
            <h4>Live code editor</h4>
            <p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 pt-3 pt-sm-4">
        <div class="row">
          <div class="col-3">
            <img alt="dumbbell" loading="lazy" src="demo/img/illustrations.co/104-dumbbell.svg">
          </div>
          <div class="col-9">
            <h4>Bootstrap 5</h4>
            <p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>
    </div>

    <div class="row text-start pt-3 pt-sm-4 pt-md-5">
      <div class="col-12 col-md-4">
        <div class="row">
          <div class="col-3">
            <img alt="namaste" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg">
          </div>
          <div class="col-9">
            <h4>Google fonts</h4>
            <p class="lead text-muted mt-4">Use any of the hundreds fonts from google fonts for your design</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 pt-3 pt-sm-4">
        <div class="row">
          <div class="col-3">
            <img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
          </div>
          <div class="col-9">
            <h4>Drag and drop</h4>
            <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>

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

    <div class="row text-start pt-3 pt-lg-5">
      <div class="col-12 col-sm-6 col-lg-3">
        <div class="row">
          <div class="col-3">
            <img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">
          </div>
          <div class="col-9">
            <h4>Drag and drop</h4>
            <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 pt-3 pt-sm-0">
        <div class="row">
          <div class="col-3">
            <img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
          </div>
          <div class="col-9">
            <h4>Bootstrap 5</h4>
            <p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootrap 5</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
        <div class="row">
          <div class="col-3">
            <img alt="map location" loading="lazy" src="demo/img/illustrations.co/109-map-location.svg">

          </div>
          <div class="col-9">
            <h4>Drag and drop</h4>
            <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 pt-3 pt-lg-0">
        <div class="row">
          <div class="col-3">
            <img alt="healthy" loading="lazy" src="demo/img/illustrations.co/107-healthy.svg">
          </div>
          <div class="col-9">
            <h4>Live code editor</h4>
            <p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time</p>
            <a>Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-10", {
    name: "Features 10",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-10-thumb.webp",
    html: `<section class="features-10 py-5 bg-alternate" aria-label="features-10">
  <div class="container">
    <div class="row text-end align-items-center">
      <div class="col-12 col-md-6 m-auto">
        <img src="demo/img/illustrations.co/day67-dog.svg" alt="dog" loading="lazy" class="img-fluid">
      </div>

      <div class="col-12 col-md-7 col-lg-5 m-auto text-start pt-5">
        <div class="row pb-lg-5">
          <div class="col-3">
            <img src="demo/img/illustrations.co/107-healthy.svg" alt="healthy" loading="lazy" class="img-fluid">
          </div>
          <div class="col-9">
            <h3>
              <strong>Drag and drop</strong>
            </h3>
            <p>Even the all-powerful Pointing has no control about the blind texts.</p>
          </div>
        </div>

        <div class="row pt-4 pt-md-5 pb-lg-5">
          <div class="col-3">
            <img alt="image" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell" loading="lazy" class="img-fluid">
          </div>
          <div class="col-9">
            <h3>
              <strong>Live code editor</strong>
            </h3>
            <p>Duden flows by their place far far away, behind the word mountains.</p>
          </div>
        </div>


        <div class="row pt-4 pt-md-5">
          <div class="col-3">
            <img alt="image" src="demo/img/illustrations.co/109-map-location.svg" alt="map location" loading="lazy" class="img-fluid">
          </div>
          <div class="col-9">
            <h3>
              <strong>Bootstrap 5 Components</strong>
            </h3>
            <p>A small river named Duden flows by their place and supplies it.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-11", {
    name: "Features 11",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-11-thumb.webp",
    html: `<section class="features-11 py-5 bg-alternate" aria-label="features-11">
  <div class="container">
    <div class="row text-center">
      <div class="col-12 col-md-8 col-lg-4">
        <div>
          <img alt="image" src="demo/img/illustrations.co/109-map-location.svg" alt="map location" loading="lazy" class="img-fluid">
          <h3>Drag and drop</h3>
          <p class="lead text-muted mt-4">Intuitive building with simple drag and drop for sections, components and blocks/snippets.</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-md-8 col-lg-4">
        <div>
          <img alt="image" src="demo/img/illustrations.co/107-healthy.svg" alt="healthy" loading="lazy" class="img-fluid">
          <h3>Live code editor</h3>
          <p class="lead text-muted mt-4">Code editor with syntax highglighting that updates in real time.</p>

          <a>Learn More</a>
        </div>
      </div>

      <div class="col-12 col-md-8 col-lg-4">
        <div>
          <img alt="image" src="demo/img/illustrations.co/104-dumbbell.svg" alt="dumbbell" loading="lazy" class="img-fluid">
          <h3>Bootstrap 5 Components</h3>
          <p class="lead text-muted mt-4">The html for sections blocks and components and this template are built using bootstrap 5.</p>

          <a>Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-12", {
    name: "Features 12",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-12-thumb.webp",
    html: `<section class="features-1 bg-alternate" aria-label="features-12">
  <div class="container-fluid g-0">
    <div class="row g-0 wrap">
      <div class="col-md-6 align-self-center">
        <div class="max-box" data-aos="fade-right">
          <!--
                    <span class="badge  bg-success rounded-pill px-3">new</span>
                    -->
          <h2 class="display-6 fw-semibold">Real time code editor</h2>
          <div class="mt-4">
            <p class="lead">Code editor with syntax highglighting that updates in real time.</p>
            <p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
            <p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
          </div>
          <a tile="Code editor features" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
      <div class="col-md-6">
        <img src="demo/img/video-1.webp" alt="Macbook" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
      </div>
    </div>
    <div class="row g-0 wrap">
      <div class="col-md-6">
        <img src="demo/img/video-1.webp" alt="App development" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
      </div>
      <div class="col-md-6 align-self-center">
        <div class="max-box ms-auto" data-aos="fade-left">
          <!-- <span class="badge  bg-success rounded-pill px-3">on sale</span> -->
          <h2 class="display-6 fw-semibold">Drag and drop page builder</h2>
          <div class="mt-4">
            <p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
            <p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
          </div>
          <a title="Drag and drop" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-13", {
    name: "Features 13",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-13-thumb.webp",
    html: `<section class="features-1 bg-alternate" aria-label="features-13">
  <div class="container">
    <div class="row wrap">
      <div class="col-md-6 align-self-center">
        <div class="max-box" data-aos="fade-right">
          <!--
                    <span class="badge  bg-success rounded-pill px-3">new</span>
                    -->
          <h2 class="display-6 fw-semibold">Real time code editor</h2>
          <div class="mt-4">
            <p class="lead">Code editor with syntax highglighting that updates in real time.</p>
            <p class="lead">Use any of the hundreds fonts from google fonts for your design.</p>
            <p class="lead">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
          </div>
          <a tile="Code editor features" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
      <div class="col-md-6">
        <img src="demo/img/video-1.webp" alt="Macbook" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("features/features-14", {
    name: "Features 14",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/features/features-14-thumb.webp",
    html: `<section class="features-1 bg-alternate" aria-label="features-14">
  <div class="container">
    <div class="row g-0 wrap">
      <div class="col-md-6">
        <img src="demo/img/video-1.webp" alt="App development" loading="lazy" class="img-fluid w-100" data-aos="fade-right" />
      </div>
      <div class="col-md-6 align-self-center">
        <div class="max-box ms-auto" data-aos="fade-left">
          <!-- <span class="badge  bg-success rounded-pill px-3">on sale</span> -->
          <h2 class="display-6 fw-semibold">Drag and drop page builder</h2>
          <div class="mt-4">
            <p class="lead">Intuitive building with simple drag and drop for sections, components and blocks.</p>
            <p class="lead">The html for sections blocks and components and this template are built using Bootstrap.</p>
          </div>
          <a title="Drag and drop" href="/page/about" role="button">
            <span>Learn More</span>
            <i class="la la-long-arrow-alt-right ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Features"] = ["features/features-1","features/features-2","features/features-3","features/features-4","features/features-5","features/features-6","features/features-7","features/features-8","features/features-9","features/features-10","features/features-11","features/features-12","features/features-13","features/features-14"];
Vvveb.Sections.add("base/1-column", {
    name: "1 column",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/1-column-thumb.webp",
    html: `<section title="one column" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/2-columns", {
    name: "2 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/2-columns-thumb.webp",
    html: `<section title="two columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/3-columns", {
    name: "3 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/3-columns-thumb.webp",
    html: `<section title="three columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/4-columns", {
    name: "4 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/4-columns-thumb.webp",
    html: `<section title="four columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/6-columns", {
    name: "6 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/6-columns-thumb.webp",
    html: `<section title="six columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/8-columns", {
    name: "8 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/8-columns-thumb.webp",
    html: `<section title="eight columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/12-columns", {
    name: "12 columns",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/12-columns-thumb.webp",
    html: `<section title="twelve columns" class="py-4">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("base/blank", {
    name: "Blank",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/base/blank-thumb.webp",
    html: `<section title="blank" class="py-4">
  <div class="container">
    <h1>Blank container</h1>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Base"] = ["base/1-column","base/2-columns","base/3-columns","base/4-columns","base/6-columns","base/8-columns","base/12-columns","base/blank"];
Vvveb.Sections.add("contact-form/contact-form-1", {
    name: "Contact form 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-1-thumb.webp",
    html: `<section class="contact-form-9" aria-label="contact-form-9">
  <div class="container py-5 my-5">
    <div class="row py-5">
      <div class="col py-5">
        <div>
          <div class="row text-center justify-content-center">
            <div class="col-12 col-md-9 col-lg-7">
              <h1>Contact Us</h1>
              <p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
            </div>
          </div>

          <div class="row justify-content-center pt-4">
            <div class="col-12 col-md-8">
              <form>
                <div class="row">
                  <div class="col-12 col-md">
                    <input type="text" class="form-control" placeholder="Name">
                  </div>
                  <div class="col-12 col-md mt-4 mt-md-0">
                    <input type="text" class="form-control" placeholder="Email">
                  </div>
                </div>

                <div class="row mt-4">
                  <div class="col">
                    <input type="email" class="form-control" placeholder="Subject">
                  </div>
                </div>

                <div class="row mt-4">
                  <div class="col">
                    <textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
                  </div>
                </div>
                <div class="row mt-4">
                  <div class="col text-center">
                    <button type="submit" class="btn btn-primary">Send</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-2", {
    name: "Contact form 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-2-thumb.webp",
    html: `<section class="contact-form-11 pt-0" aria-label="contact-form-11">
  <div class="container-fluid p-0 pb-5">
    <iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
  </div>
  <div class="container">
    <div class="row pt-5">
      <div class="col-12">
        <form>
          <div class="row">
            <div class="col-12 col-md">
              <label>First Name</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-12 col-md mt-4 mt-md-0">
              <label>Last Name</label>
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <label>Your Email</label>
              <input type="email" class="form-control">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <label>Subject (optional but helpful)</label>
              <input type="email" class="form-control">
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <label>How can we help?</label>
              <textarea class="form-control" name="message" rows="3"></textarea>
            </div>
          </div>
          <div class="row mt-4 text-center">
            <div class="col">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-3", {
    name: "Contact form 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-3-thumb.webp",
    html: `<section class="contact-form-12 py-0" aria-label="contact-form-12">
  <div class="container py-5">
    <div class="row text-center justify-content-center">
      <div class="col-12 col-md-8 col-lg-7">
        <h1>Contact Us</h1>
        <p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
      </div>
    </div>
    <div class="row-50">
    </div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-7">
        <form>
          <div class="row">
            <div class="col">
              <label>Your Email Address</label>
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <label>Subject</label>
              <input type="email" class="form-control">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <label>How can we help?</label>
              <textarea class="form-control" name="message" rows="3"></textarea>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col text-end">
              <button type="submit" class="btn btn-dark">Send</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row-100"></div>
  </div>

  <div class="container-fluid p-0">
    <iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-4", {
    name: "Contact form 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-4-thumb.webp",
    html: `<section class="contact-form-13" aria-label="contact-form-13">
  <div class="container">
    <div class="row text-center justify-content-center">
      <div class="col-12 col-md-8 col-lg-7">
        <h1>Contact Us</h1>
        <p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
      </div>
    </div>
    <div class="row-70"></div>
    <div class="row">
      <div class="col-12 col-md-8 col-lg m-auto">
        <form>
          <div class="row">
            <div class="col">
              <input type="email" class="form-control" placeholder="Email">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <input type="email" class="form-control" placeholder="Subject">
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>

      <div class="col-12 col-md-8 col-lg pt-5 m-auto pt-lg-0">
        <iframe loading="lazy" class="mb-4" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="200" frameborder="0"></iframe>

        <p>
          <strong>Showroom</strong>
        </p>
        <p>
          71 Pilgrim Avenue
          <br>Chevy Chase, MD 20815
        </p>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-5", {
    name: "Contact form 5",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-5-thumb.webp",
    html: `<section class="contact-form-2 container-fluid px-5 my-5" aria-label="contact-form-2">
  <div class="row justify-content-center">
    <div class="col-xl-10">
      <div class="card border-0 rounded-3 shadow-lg ">
        <div class="card-body p-0">
          <div class="row g-0">
            <div class="col-sm-6 d-none d-sm-block bg-image">

              <img alt="image" src="demo/img/illustrations.co/day68-happy-cat.svg" alt="happy cat" loading="lazy" class="img-fluid">

            </div>
            <div class="col-sm-6 p-4">
              <div class="text-center">
                <div class="h3 fw-light">Contact Form</div>
                <p class="mb-4 text-muted">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
              </div>


              <form id="contactForm">


                <div class=" mb-3">
                  <input class="form-control" id="name" type="text" placeholder="Name" required />
                  <label for="name">Name</label>
                </div>


                <div class=" mb-3">
                  <input class="form-control" id="emailAddress" type="email" placeholder="Email Address" required />
                  <label for="emailAddress">Email Address</label>
                </div>


                <div class=" mb-3">
                  <textarea class="form-control" id="message" type="text" placeholder="Message" style="height: 10rem;" required></textarea>
                  <label for="message">Message</label>
                </div>




                <div class="d-grid">
                  <button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
                </div>
              </form>


            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-6", {
    name: "Contact form 6",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-6-thumb.webp",
    html: `<section title="contact-form-6" class="contact-form-6">
  <div class="container-fluid g-0">

    <div style="height:300px" data-component-maps>
      <iframe loading="lazy" frameborder="0" title="map" src="https://maps.google.com/maps?q=Bucharest&z=15&t=q&key=&output=embed" width="100%" height="100%" style="width:100%;height:100%;left:0px">
      </iframe>
    </div>

  </div>
  <div class="container">
    <div class="row my-5">
      <div class="col-12 col-md-6 col-lg-5">
        <h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
        <p class="lead">
          Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
        </p>

        <p class="lead">
          The html for sections blocks and components and this template are built using Bootstrap 5.
        </p>

        <div data-v-component-site>
          <p class="mt-5">
            <b>
              <i class="la la-lg la-envelope opacity-50"></i> Email:
            </b>
            <span data-v-if="site.contact-email">
              <a href="mailto:contact@mysite.com" data-v-site-contact-email>
                <span data-v-site-contact-email>contact@mysite.com</span>
              </a>
            </span>
          </p>
          <p class="">
            <b>
              <i class="la la-lg la-phone opacity-50"></i> Phone:
            </b>
            <a href="tel:5511112377" data-v-site-description-phone-number>
              <span data-v-site-description-phone-number>+55 (111) 123 777</span>
            </a>
          </p>
        </div>
      </div>

      <div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">

        <div class="notifications" data-v-notifications>

          <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
            </div>

            <div class="flex-grow-1 align-self-center text-small">
              <div>
                <div data-v-notification-text>
                  This is a placeholder for a notification message.
                </div>
              </div>
            </div>


            <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

          <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1 la-check-circle"></i>
            </div>

            <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
              This is a placeholder for a success message.
            </div>

            <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

          <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1  la-info-circle"></i>
            </div>

            <div class="flex-grow-1 align-self-center" data-v-notification-text>
              This is a placeholder for a info message.
            </div>

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

        </div>
        <div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
          <form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
            <input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
            <input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>

            <div class="row">
              <div class="col">
                <input type="text" class="form-control" placeholder="First name" name="first_name" required>
              </div>
              <div class="col">
                <input type="text" class="form-control" placeholder="Last name" name="last_name" required>
              </div>
            </div>

            <div class="row mt-4">
              <div class="col">
                <input type="email" class="form-control" placeholder="Email" name="email" required>
              </div>
            </div>

            <div class="row mt-4">
              <div class="col">
                <input type="text" class="form-control" placeholder="Subject" name="subject" required>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col">
                <textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
              </div>
            </div>


            <!-- if these hidden inputs are filled then ignore, robots -->

            <input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">

            <input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">

            <input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">


            <div class="row mt-4">
              <div class="col">
                <button type="submit" class="btn btn-primary">
                  <span class="loading d-none">
                    <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                    </span>
                    <span>Submitting</span> ...
                  </span>

                  <span class="button-text">
                    <span>Submit</span>
                    <i class="la la-lg la-envelope opacity-50 ms-2"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-7", {
    name: "Contact form 7",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-7-thumb.webp",
    html: `<section class="contact-form-8" aria-label="contact-form-8">
  <div class="container">
    <div class="row text-center justify-content-center">
      <div class="col-12 col-md-8 col-lg-7">
        <h1>Contact Us</h1>
        <p class="lead">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
      </div>
    </div>

    <div class="row pt-4">
      <div class="col-12 col-md-6">
        <iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
      </div>

      <div class="col-12 col-md-6 pt-5">
        <form>
          <div class="row">
            <div class="col">
              <input type="email" class="form-control" placeholder="Email">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <input type="email" class="form-control" placeholder="Subject">
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-8", {
    name: "Contact form 8",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-8-thumb.webp",
    html: `<section class="contact-form-8 pt-0" aria-label="contact-form-8">
  <div class="container-fluid p-0 pb-3">
    <iframe loading="lazy" class="map" title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656" style="border:0" allowfullscreen="" width="100%" height="300" frameborder="0"></iframe>
  </div>
  <div class="container">
    <div class="row text-center justify-content-center pt-5">
      <div class="col-12 col-md-7">
        <h1>Contact Us</h1>
      </div>
    </div>

    <div class="row justify-content-center pt-4">
      <div class="col-12 col-md-7">
        <form>
          <div class="row">
            <div class="col">
              <input type="text" class="form-control" placeholder="Email">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <input type="email" class="form-control" placeholder="Subject">
            </div>
          </div>

          <div class="row mt-4">
            <div class="col">
              <textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col text-center">
              <button type="submit" class="btn btn-primary">Send</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row-100"></div>
  </div>
  <div class="">
    <div class="container">
      <div class="row-50"></div>
      <div class="row justify-content-center text-center">
        <div class="col-12 col-md me-auto ms-auto">
          <p class="lead">+55 (111) 123 777</p>
        </div>

        <div class="col-12 col-md pt-4 me-auto ms-auto">
          <p class="lead">7th St.
            <br>New York, NY 12345
          </p>
        </div>

        <div class="col-12 col-md pt-4 me-auto ms-auto">
          <p class="lead">support@vvveb.com</p>
        </div>
      </div>
      <div class="row-50"></div>
    </div>
  </div>

  <div class="container">
    <div class="row-70"></div>
    <div class="row text-center">
      <div class="col">
        <p class="h2">
          <a class="mx-2">
            <i class="la la-facebook"></i>
          </a>
          <a class="mx-2">
            <i class="la la-twitter"></i>
          </a>
          <a class="mx-2">
            <i class="la la-instagram"></i>
          </a>
          <a class="mx-2">
            <i class="la la-google"></i>
          </a>
          <a class="mx-2">
            <i class="la la-pinterest"></i>
          </a>
        </p>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-9", {
    name: "Contact form 9",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-9-thumb.webp",
    html: `<section class="contact-form-3 py-5" aria-label="contact-form-3">
  <div class="row no-gutters">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="card-shadow">
            <img alt="image" src="demo/img/illustrations.co/day68-happy-cat.svg" alt="happy cat" loading="lazy" class="img-fluid">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="contact-box ms-3">
            <h1 class=" mt-2">Quick Contact</h1>
            <form class="mt-4">
              <div class="row">
                <div class="col-lg-12">
                  <div class="form-group mt-2">
                    <input class="form-control" type="text" placeholder="name">
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group mt-2">
                    <input class="form-control" type="email" placeholder="email address">
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group mt-2">
                    <input class="form-control" type="text" placeholder="phone">
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group mt-2">
                    <textarea class="form-control" rows="3" placeholder="message"></textarea>
                  </div>
                </div>
                <div class="col-lg-12">
                  <button type="submit" class="btn btn-success mt-3 text-white border-0 px-3 py-2">
                    <span> Submit</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="card mt-4 border-0 mb-4">
            <div class="row">
              <div class="col-lg-4 col-md-4">
                <div class="card-body d-flex align-items-center c-detail pl-0">
                  <div class="me-3 align-self-center">
                    <i class="la la-map la-lg"></i>
                  </div>
                  <div>
                    <h6>Address</h6>
                    <p>708 Picadilly Ave.
                      <br> New York
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-4">
                <div class="card-body d-flex align-items-center c-detail">
                  <div class="me-3 align-self-center">
                    <i class="la la-phone la-lg"></i>
                  </div>
                  <div>
                    <h6>Phone</h6>
                    <p>555 111 333</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-4">
                <div class="card-body d-flex align-items-center c-detail">
                  <div class="me-3 align-self-center">
                    <i class="la la-email la-lg"></i>
                  </div>
                  <div>
                    <h6>Email</h6>
                    <p>
                      hello@vvveb.com
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("contact-form/contact-form-10", {
    name: "Contact form 10",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/contact-form/contact-form-10-thumb.webp",
    html: `<section title="contact-form-10" class="contact-form-10 border-top">
  <div class="container">
    <div class="row my-5">
      <div class="col-12 col-md-6 col-lg-5">
        <h2 class="display-6 mb-1 fw-bold mb-4">Contact Us</h2>
        <p class="lead">
          Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.
        </p>

        <p class="lead">
          The html for sections blocks and components and this template are built using Bootstrap 5.
        </p>

        <div data-v-component-site>
          <p class="mt-5">
            <b>
              <i class="la la-lg la-envelope opacity-50"></i> Email:
            </b>
            <span data-v-if="site.contact-email">
              <a href="mailto:contact@mysite.com" data-v-site-contact-email>
                <span data-v-site-contact-email>contact@mysite.com</span>
              </a>
            </span>
          </p>
          <p class="">
            <b>
              <i class="la la-lg la-phone opacity-50"></i> Phone:
            </b>
            <a href="tel:5511112377" data-v-site-description-phone-number>
              <span data-v-site-description-phone-number>+55 (111) 123 777</span>
            </a>
          </p>
        </div>
      </div>

      <div class="col-12 col-md-6 ms-auto" data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-us-home">

        <div class="notifications" data-v-notifications>

          <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
            </div>

            <div class="flex-grow-1 align-self-center text-small">
              <div>
                <div data-v-notification-text>
                  This is a placeholder for a notification message.
                </div>
              </div>
            </div>


            <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

          <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1 la-check-circle"></i>
            </div>

            <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
              This is a placeholder for a success message.
            </div>

            <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

          <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>

            <div class="icon align-middle me-2">
              <i class="align-middle la la-2x lh-1  la-info-circle"></i>
            </div>

            <div class="flex-grow-1 align-self-center" data-v-notification-text>
              This is a placeholder for a info message.
            </div>

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">
                <!-- <i class="la la-times"></i> -->
              </span>
            </button>
          </div>

        </div>
        <div class="border rounded-3 p-4 border-opacity-25 border-light-subtle">
          <form action="" method="post" data-v-vvveb-action="submit" data-selector="[data-v-component-plugin-contact-form-form]" data-v-vvveb-on="submit">
            <input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
            <input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>

            <div class="row">
              <div class="col">
                <input type="text" class="form-control" placeholder="First name" name="first_name" required>
              </div>
              <div class="col">
                <input type="text" class="form-control" placeholder="Last name" name="last_name" required>
              </div>
            </div>

            <div class="row mt-4">
              <div class="col">
                <input type="email" class="form-control" placeholder="Email" name="email" required>
              </div>
            </div>

            <div class="row mt-4">
              <div class="col">
                <input type="text" class="form-control" placeholder="Subject" name="subject" required>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col">
                <textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
              </div>
            </div>


            <!-- if these hidden inputs are filled then ignore, robots -->

            <input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">

            <input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">

            <input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">


            <div class="row mt-4">
              <div class="col">
                <button type="submit" class="btn btn-primary">
                  <span class="loading d-none">
                    <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                    </span>
                    <span>Submitting</span> ...
                  </span>

                  <span class="button-text">
                    <span>Submit</span>
                    <i class="la la-lg la-envelope opacity-50 ms-2"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Contact form"] = ["contact-form/contact-form-1","contact-form/contact-form-2","contact-form/contact-form-3","contact-form/contact-form-4","contact-form/contact-form-5","contact-form/contact-form-6","contact-form/contact-form-7","contact-form/contact-form-8","contact-form/contact-form-9","contact-form/contact-form-10"];
Vvveb.Sections.add("cta/cta-1", {
    name: "Cta 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/cta/cta-1-thumb.webp",
    html: `<section class="cta-1" aria-label="cta-1" data-bs-theme="dark">

  <div class="container">

    <div class="row justify-content-center">
      <div class="col text-center">
        <h2 class="display-5  fw-bold text-body mb-3">Ready to take the next step?</h2>
        <p class="text-body h4 fw-normal">Our specialists are ready to work on your next awesome project</p>
        <p class="text-body h4 fw-normal">Contact us today to get started!</p>
        <a href="https://www.vvveb.com" class="btn btn-lg btn-primary mt-5">
          <span>Contact us</span>
        </a>
      </div>
    </div>
  </div>


  <div class="overlay">
  </div>

  <div class="background-container parallax">

    <img src="demo/img/hero-3.webp" alt="Hero background">

  </div>

</section>`
});
	Vvveb.SectionsGroup["Cta"] = ["cta/cta-1"];
Vvveb.Sections.add("footer/footer-1", {
    name: "Footer 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-1-thumb.webp",
    html: `<footer class="footer-1" title="footer-1" data-v-save-global="index.html,.footer-1">
  <div class="container" data-v-component-menu="footer" data-v-slug="main-footer">

    <div class="row" data-v-menu-items>

      <div class="col-md">

        <div data-v-component-site>
          <img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
          <img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
        </div>

      </div>


      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Vvveb</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://themes.vvveb.com/" data-v-menu-item-url>
              <span data-v-menu-item-name>Themes</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://plugins.vvveb.com/" data-v-menu-item-url>
              <span data-v-menu-item-name>Plugins</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="content/index.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Blog</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="product/index.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Shop</span>
            </a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Resources</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
              <span data-v-menu-item-name>User documentation</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
              <span data-v-menu-item-name>Developer documentation</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="pricing.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Pricing</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="services.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Services</span>
            </a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Contact</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="" href="contact.html">Contact us</a>
            <a href="" href="portfolio.html">Portfolio</a>
            <a href="" href="about.html">About us</a>
            <a href="" href="user/return-form.html">Return form</a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>My account</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="" href="user/order-tracking.html">Order tracking</a>
            <a href="" href="user/wishlist.html">Wishlist</a>
            <a href="" href="user/orders.html">Orders</a>
            <a href="" href="cart/compare.html">Compare</a>
          </div>
        </nav>
      </div>



    </div>
    <!--
		<div class="row justify-content-end">
			<div class="col-md-3 text-muted text-small mt-5">
				&copy; <span data-v-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-year>2025</span>
          <span data-v-global-site.description.title>Vvveb</span>. <span>Powered by</span>
          <a href="https://vvveb.com" class="btn-link text-muted" target="_blank">Vvveb</a>
        </div>
      </div>
    </div>
  </div>

</footer>`
});Vvveb.Sections.add("footer/footer-2", {
    name: "Footer 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-2-thumb.webp",
    html: `<footer class="bg-white" title="footer-2" data-v-save-global="index.html,.footer-2">

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

  </div>
</footer>`
});Vvveb.Sections.add("footer/footer-3", {
    name: "Footer 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/footer/footer-3-thumb.webp",
    html: `<footer class="footer-3 bg-dark text-white" title="footer-3" data-v-save-global="index.html,.footer-3" data-bs-theme="dark">
  <div class="container" data-v-component-menu="footer" data-v-slug="main-footer">

    <div class="row" data-v-menu-items>


      <div class="col-md">

        <div data-v-component-site>
          <img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
          <img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
        </div>

      </div>


      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Vvveb</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://themes.vvveb.com/" data-v-menu-item-url>
              <span data-v-menu-item-name>Themes</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://plugins.vvveb.com/" data-v-menu-item-url>
              <span data-v-menu-item-name>Plugins</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="content/index.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Blog</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="product/index.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Shop</span>
            </a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Resources</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
              <span data-v-menu-item-name>User documentation</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
              <span data-v-menu-item-name>Developer documentation</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="pricing.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Pricing</span>
            </a>
          </div>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="services.html" data-v-menu-item-url>
              <span data-v-menu-item-name>Services</span>
            </a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>Contact</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="" href="contact.html">Contact us</a>
            <a href="" href="portfolio.html">Portfolio</a>
            <a href="" href="about.html">About us</a>
            <a href="" href="user/return-form.html">Return form</a>
          </div>
        </nav>
      </div>

      <div class="col-md" data-v-menu-item data-v-if="category.children > 0">
        <div class="h6" data-v-menu-item-name>My account</div>
        <nav data-v-menu-item-recursive>
          <div data-v-menu-item data-v-if="category.children == 0">
            <a href="" href="user/order-tracking.html">Order tracking</a>
            <a href="" href="user/wishlist.html">Wishlist</a>
            <a href="" href="user/orders.html">Orders</a>
            <a href="" href="cart/compare.html">Compare</a>
          </div>
        </nav>
      </div>



    </div>
    <!--
		<div class="row justify-content-end">
			<div class="col-md-3 text-muted text-small mt-5">
				&copy; <span data-v-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-year>2025</span>
          <span data-v-global-site.description.title>Vvveb</span>. <span>Powered by</span>
          <a href="https://vvveb.com" class="btn-link text-muted" target="_blank">Vvveb</a>
        </div>
      </div>
    </div>
  </div>

</footer>`
});
	Vvveb.SectionsGroup["Footer"] = ["footer/footer-1","footer/footer-2","footer/footer-3"];
Vvveb.Sections.add("navigation/navigation-1", {
    name: "Navigation 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-1-thumb.webp",
    html: `<nav class="navigation-1 clearfix" data-v-save-global="blank.html,.navigation-1">

  <div id="top" class="top-nav clearfix">
    <div class="container">
      <div class="d-flex justify-content-between  flex-md-row d-flex flex-column flex-md-row">
        <div class="nav">
          <ul class="list-inline" data-v-component-site>
            <li class="list-inline-item" data-v-if="site.description.phone-number">
              <a href="tel:5511112377" class="p-2 p-md-0" title="Phone" data-v-site-description-phone-number>
                <i class="la la-phone"></i>
                <span class=" text-muted" data-v-site-description-phone-number>+55 (111) 123 777</span>
              </a>
            </li>
            <li class="list-inline-item" data-v-if="site.contact-email">
              <a href="mailto:contact@mysite.com" class="p-2 p-md-0" title="Email" data-v-site-contact-email>
                <i class="la la-envelope"></i>
                <span class=" text-muted" data-v-site-contact-email>contact@mysite.com</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="nav">
          <ul class="list-inline">
            <!--
					<li class="list-inline-item"><a id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="">Favorites</span></a></li>
					<li class="list-inline-item"><a title="Checkout"><i class="la la-share"></i> <span class="">Checkout</span></a></li>
					<li class="list-inline-item">
						<div class="dropdown">
							<a href="" class="dropdown-toggle" data-bs-toggle="dropdown" role="button"><i class="la la-user"></i> <span class="">My Account</span></i></a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a class="dropdown-item">Register</a></li>
								<li><a class="dropdown-item">Login</a></li>
							</ul>
						</div>
					</li>
					-->
            <li class="list-inline-item">
              <div data-v-component-currency>
                <form method="post" enctype="multipart/form-data" id="form-currency">

                  <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Currency " aria-expanded="false">
                    <!-- <i class="la la-dollar-sign me-1"></i> -->
                    <span class="" data-v-currency-info-name>USD</span>
                  </a>


                  <div class="dropdown-menu dropdown-menu-end">

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>€</span>
                        <span data-v-currency-sign_end>€</span>
                        <span class="ms-1" data-v-currency-name>Euro</span>
                      </button>
                    </div>

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>£</span>
                        <span data-v-currency-sign_end>£</span>
                        <span class="ms-1" data-v-currency-name>Pound Sterling</span>
                      </button>
                    </div>

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>$</span>
                        <span data-v-currency-sign_end>$</span>
                        <span class="ms-1" data-v-currency-name>US Dollar</span>
                      </button>
                    </div>

                  </div>
                </form>
              </div>
            </li>
            <li class="list-inline-item">
              <div data-v-component-language>
                <form method="post" enctype="multipart/form-data" id="form-language">

                  <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
                    <!-- <i class="la la-flag me-1"></i> -->
                    <!-- 
									<img src="" data-v-language-info-img>
									-->
                    <span class="" data-v-language-info-name>English</span>
                  </a>


                  <div class="dropdown-menu dropdown-menu-end">

                    <div data-v-language>
                      <button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
                        <!-- <i class="la la-flag la-lg me-2"></i> -->
                        <img src="" loading="lazy" class="me-1" data-v-language-img>

                        <!-- <a href="" data-v-language-url> -->
                        <span data-v-language-name>English</span>
                        <!-- </a> -->
                      </button>
                    </div>

                    <div data-v-language>
                      <button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
                        <!-- <i class="la la-flag la-lg me-2"></i> -->
                        <img src="" loading="lazy" class="me-1" data-v-language-img>
                        <!-- <a href="" data-v-language-url>  -->
                        <span data-v-language-name>Romanian</span>
                        <!-- </a>  -->
                      </button>
                    </div>

                  </div>
                </form>
              </div>
            </li>
            <li class="list-inline-item">

              <a id="color-theme-switch" class="p-2 p-md-0" role="button" title="Switch sidebar color theme">
                <i class="la la-sun la-lg"></i>
              </a>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-md">

    <div class="container">
      <div data-v-component-site>
        <!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><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>

      <nav class="navbar" data-navbar data-v-component-menu="header" data-v-slug="main-menu">
        <div class="container">
          <ul class="navbar-list m-0" data-v-menu-items>
            <li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children &gt; 0" data-v-class-if-position-static="category.has-text">

              <a class="navbar-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children &gt; 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' &amp;&amp; category.name"></span>
                <span data-v-if="category.content" data-v-menu-item-content>
                  <p>
                    <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
                  </p>
                </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 &gt; 0">
                  <a class="dropdown-item" data-v-class-if-active="category.active &amp;&amp; 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-if="category.content" data-v-menu-item-content>
                      <div class="row">
                        <div class="col-6 align-self-center">
                          <img src="img/demo/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 &gt; 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="navbar-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 &gt; 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 &gt; 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="navbar-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="navbar-link" href="https://www.vvveb.com" data-v-menu-item-url>
                <span data-v-menu-item-name>About us</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>

    </div>
  </div>
</nav>`
});Vvveb.Sections.add("navigation/navigation-2", {
    name: "Navigation 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-2-thumb.webp",
    html: `<nav class="navigation-2 clearfix fixed-top transparent" title="navigation-2" data-v-save-global="index.html,.navigation-2">

  <div class="container">

    <div class="navbar navbar-expand-md navbar-dark">
      <div data-v-component-site>
        <!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><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>

      <nav class="navbar" data-navbar data-v-component-menu="header" data-v-slug="main-menu">
        <div class="container">
          <ul class="navbar-list m-0" data-v-menu-items>
            <li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children &gt; 0" data-v-class-if-position-static="category.has-text">

              <a class="navbar-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children &gt; 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' &amp;&amp; category.name"></span>
                <span data-v-if="category.content" data-v-menu-item-content>
                  <p>
                    <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
                  </p>
                </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 &gt; 0">
                  <a class="dropdown-item" data-v-class-if-active="category.active &amp;&amp; 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-if="category.content" data-v-menu-item-content>
                      <div class="row">
                        <div class="col-6 align-self-center">
                          <img src="img/demo/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 &gt; 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="navbar-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 &gt; 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 &gt; 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="navbar-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="navbar-link" href="https://www.vvveb.com" data-v-menu-item-url>
                <span data-v-menu-item-name>About us</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>


  </div>

</nav>`
});Vvveb.Sections.add("navigation/navigation-3", {
    name: "Navigation 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-3-thumb.webp",
    html: `<nav class="navigation-3 clearfix fixed-top transparent" title="navigation-3" data-v-save-global="index.html,.navigation-3">

  <div id="top" class="top-nav clearfix" data-bs-theme="dark">
    <div class="container">
      <div class="d-flex justify-content-between  flex-md-row d-flex flex-column flex-md-row">
        <div class="nav">
          <ul class="list-inline" data-v-component-site>
            <li class="list-inline-item" data-v-if="site.description.phone-number">
              <a href="tel:5511112377" class="p-2 p-md-0" title="Phone" data-v-site-description-phone-number>
                <i class="la la-phone"></i>
                <span class=" text-muted" data-v-site-description-phone-number>+55 (111) 123 777</span>
              </a>
            </li>
            <li class="list-inline-item" class="p-2 p-md-0" data-v-if="site.contact-email">
              <a href="mailto:contact@mysite.com" title="Email" data-v-site-contact-email>
                <i class="la la-envelope"></i>
                <span class=" text-muted" data-v-site-contact-email>contact@mysite.com</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="nav">
          <ul class="list-inline">
            <!--
					<li class="list-inline-item"><a id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="">Favorites</span></a></li>
					<li class="list-inline-item"><a title="Checkout"><i class="la la-share"></i> <span class="">Checkout</span></a></li>
					<li class="list-inline-item">
						<div class="dropdown">
							<a href="" class="dropdown-toggle" data-bs-toggle="dropdown" role="button"><i class="la la-user"></i> <span class="">My Account</span></i></a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a class="dropdown-item">Register</a></li>
								<li><a class="dropdown-item">Login</a></li>
							</ul>
						</div>
					</li>
					-->
            <li class="list-inline-item">
              <div data-v-component-currency>
                <form method="post" enctype="multipart/form-data" id="form-currency">

                  <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Currency" aria-expanded="false">
                    <!-- <i class="la la-dollar-sign me-1"></i> -->
                    <span class="" data-v-currency-info-name>USD</span>
                  </a>


                  <div class="dropdown-menu dropdown-menu-end">

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>€</span>
                        <span data-v-currency-sign_end>€</span>
                        <span class="ms-1" data-v-currency-name>Euro</span>
                      </button>
                    </div>

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>£</span>
                        <span data-v-currency-sign_end>£</span>
                        <span class="ms-1" data-v-currency-name>Pound Sterling</span>
                      </button>
                    </div>

                    <div data-v-currency>
                      <button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
                        <span data-v-currency-sign_start>$</span>
                        <span data-v-currency-sign_end>$</span>
                        <span class="ms-1" data-v-currency-name>US Dollar</span>
                      </button>
                    </div>

                  </div>
                </form>
              </div>
            </li>
            <li class="list-inline-item">
              <div data-v-component-language>
                <form method="post" enctype="multipart/form-data" id="form-language">

                  <a class="dropdown-toggle p-2 p-md-0" data-bs-toggle="dropdown" role="button" title="Language" aria-expanded="false">
                    <!-- <i class="la la-flag me-1"></i> -->
                    <!-- 
									<img src="" data-v-language-info-img>
									-->
                    <span class="" data-v-language-info-name>English</span>
                  </a>


                  <div class="dropdown-menu dropdown-menu-end">

                    <div data-v-language>
                      <button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
                        <!-- <i class="la la-flag la-lg me-2"></i> -->
                        <img src="" loading="lazy" class="me-1" data-v-language-img>

                        <!-- <a href="" data-v-language-url> -->
                        <span data-v-language-name>English</span>
                        <!-- </a> -->
                      </button>
                    </div>

                    <div data-v-language>
                      <button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
                        <!-- <i class="la la-flag la-lg me-2"></i> -->
                        <img src="" loading="lazy" class="me-1" data-v-language-img>
                        <!-- <a href="" data-v-language-url>  -->
                        <span data-v-language-name>Romanian</span>
                        <!-- </a>  -->
                      </button>
                    </div>

                  </div>
                </form>
              </div>
            </li>
            <li class="list-inline-item">

              <a id="color-theme-switch" class="p-2 p-md-0" role="button" title="Switch sidebar color theme">
                <i class="la la-sun la-lg"></i>
              </a>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-md navbar-dark">

    <div class="container">

      <div data-v-component-site>
        <!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><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>

      <nav class="navbar" data-navbar data-v-component-menu="header" data-v-slug="main-menu">
        <div class="container">
          <ul class="navbar-list m-0" data-v-menu-items>
            <li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children &gt; 0" data-v-class-if-position-static="category.has-text">

              <a class="navbar-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children &gt; 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' &amp;&amp; category.name"></span>
                <span data-v-if="category.content" data-v-menu-item-content>
                  <p>
                    <img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
                  </p>
                </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 &gt; 0">
                  <a class="dropdown-item" data-v-class-if-active="category.active &amp;&amp; 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-if="category.content" data-v-menu-item-content>
                      <div class="row">
                        <div class="col-6 align-self-center">
                          <img src="img/demo/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 &gt; 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="navbar-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 &gt; 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 &gt; 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="navbar-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="navbar-link" href="https://www.vvveb.com" data-v-menu-item-url>
                <span data-v-menu-item-name>About us</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <!--
			  <div class="collapse navbar-collapse" id="navbar">
				<ul class="navbar-nav ms-auto">
				  <li class="nav-item">
					<a class="nav-link" href="#features">Features <span class="sr-only">(current)</span></a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link" href="https://themes.vvveb.com">Themes</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link" href="https://plugins.vvveb.com">Plugins</a>
				  </li>
				  <li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
					<div class="dropdown-menu" aria-labelledby="dropdown01">
					  <a class="dropdown-item" target="_blank"  href="https://github.com/givanz/VvvebJs/wiki">User Documentation</a>
					  <a class="dropdown-item" target="_blank"  href="https://github.com/givanz/VvvebJs/wiki">Developer Documentation</a>
					</div>
				  </li>
				  <li class="nav-item">
					<a class="nav-link" target="_blank" href="https://github.com/givanz/VvvebJs">Github</a>
				  </li>
				  <li class="nav-item">
					<a class="nav-link" href="contact.html">Contact</a>
				  </li>
				  <li class="nav-item active">
					<a class="nav-link" href="https://vvveb.com/download.php">Download for free</a>
				  </li>			  
				</ul>
			  </div>
			  -->
    </div>

  </div>

</nav>`
});Vvveb.Sections.add("navigation/navigation-4", {
    name: "Navigation 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/navigation/navigation-4-thumb.webp",
    html: `<nav class="navigation-4 clearfix" data-v-save-global="index.html,.navigation-4">

  <div class="navbar navbar-expand-md">

    <div class="container">

      <div data-v-component-site>
        <!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><span class="visually-hidden">Logo</span> -->
        <a class="navbar-brand" href="/" data-v-site-url'>
          <span class="visually-hidden">Logo</span>
          <img src="demo/img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
          <img src="demo/img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
          <img src="demo/img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
          <img src="demo/img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
        </a>
      </div>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
        <ul class="navbar-nav ms-auto" data-v-menu-items>
          <li class="nav-item dropdown" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0">

            <a class="nav-link" data-v-class-if-dropdown-toggle="category.children > 0" aria-expanded="false" data-v-menu-item-url>
              <span data-v-menu-item-name>Resources</span>
            </a>

            <div class="dropdown-menu" data-v-menu-item-recursive>
              <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
                <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                  <span data-v-menu-item-name>User Documentation</span>
                </a>
              </div>
              <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
                <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                  <span data-v-menu-item-name>Developer Documentation</span>
                </a>
              </div>
            </div>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://blog.vvveb.com" data-v-menu-item-url>
              <span data-v-menu-item-name>Blog</span>
            </a>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
              <span data-v-menu-item-name>Contact</span>
            </a>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
              <span data-v-menu-item-name>About us</span>
            </a>
          </li>
          <li class="nav-item">
            <a id="color-theme-switch" class="nav-link" role="button" title="Switch sidebar color theme">
              <i class="la la-sun"></i>
            </a>
          </li>

        </ul>
        <!--				
				<div class="search-area toggle-hover">
					<form action="/search" method="get" data-v-action="/search">
						<input type="hidden" name="route" value="search">
						<div class="input-group">
							<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
							<button class="btn border-0" type="submit" title="Search">
								<div class="la-flip-horizontal">
									<i class="la la-search la-lg" aria-hidden="true"></i>
								</div>
							</button>
						</div>			  
					</form>
				</div>
-->
      </div>
      <!--
		  <div class="collapse navbar-collapse" id="navbar">
			<ul class="navbar-nav ms-auto">
			  <li class="nav-item">
				<a class="nav-link" href="#features">Features <span class="sr-only">(current)</span></a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="https://themes.vvveb.com">Themes</a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="https://plugins.vvveb.com">Plugins</a>
			  </li>
			  <li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Resources</a>
				<div class="dropdown-menu" aria-labelledby="dropdown01">
				  <a class="dropdown-item" target="_blank"  href="https://github.com/givanz/VvvebJs/wiki">User Documentation</a>
				  <a class="dropdown-item" target="_blank"  href="https://github.com/givanz/VvvebJs/wiki">Developer Documentation</a>
				</div>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" target="_blank" href="https://github.com/givanz/VvvebJs">Github</a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="contact.html">Contact</a>
			  </li>
			  <li class="nav-item active">
				<a class="nav-link" href="https://vvveb.com/download.php">Download for free</a>
			  </li>			  
			</ul>
		  </div>
		  -->
    </div>

  </div>

</nav>`
});
	Vvveb.SectionsGroup["Navigation"] = ["navigation/navigation-1","navigation/navigation-2","navigation/navigation-3","navigation/navigation-4"];
Vvveb.Sections.add("portfolio/portfolio-1", {
    name: "Portfolio 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/portfolio/portfolio-1-thumb.webp",
    html: `<section class="portfolio-1 my-5" aria-label="portfolio-1">
  <div class="row justify-content-center pb-2">
    <div class="col-md-7 heading-section text-center">
      <h2 class="text-center display-6 mb-1 fw-bold">Portfolio</h2>
      <p class="lead text-center text-muted mb-4">Some of our work</p>
    </div>
  </div>
  <div class="gallery masonry" data-component-gallery="portfolio-1">
    <div class="item" data-aos="fade-up">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="100">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="200">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="300">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="400">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="500">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="600">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
    <div class="item" data-aos="fade-up" data-aos-delay="700">
      <a href="/demo/video-1.webp">
        <img class="img-fluid" src="demo/img/video-1.webp">
      </a>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("portfolio/portfolio-2", {
    name: "Portfolio 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/portfolio/portfolio-2-thumb.webp",
    html: `<section class="portfolio-2 my-5" aria-label="portfolio-2">
  <div class="container">
    <div class="row justify-content-center pb-2">
      <div class="col-md-7 text-center">
        <h2 class="text-center display-6 mb-1 fw-bold">Portfolio</h2>
        <p class="lead text-center text-muted mb-4">Some of our work</p>
      </div>
    </div>
    <div class="gallery masonry has-shadow" data-component-gallery="portfolio-1">
      <div class="item" data-aos="fade-up">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
      <div class="item" data-aos="fade-up" data-aos-delay="100">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
      <div class="item" data-aos="fade-up" data-aos-delay="200">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
      <div class="item" data-aos="fade-up" data-aos-delay="300">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
      <div class="item" data-aos="fade-up" data-aos-delay="400">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
      <div class="item" data-aos="fade-up" data-aos-delay="500">
        <a href="/demo/video-1.webp">
          <img class="img-fluid" src="demo/img/video-1.webp">
        </a>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Portfolio"] = ["portfolio/portfolio-1","portfolio/portfolio-2"];
Vvveb.Sections.add("posts/posts-1", {
    name: "Posts 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-1-thumb.webp",
    html: `<section class="posts-1" aria-label="latest-post-1">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-heading text-center">
          <h2 class="text-center display-6 mb-1 fw-bold">Latest Posts</h2>
          <p class="lead text-center text-muted mb-4">Fresh updates from the industry.</p>
        </div>
      </div>
    </div>
  </div>



  <div class="container" 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="000" data-v-post>

        <article class="card h-100 shadow-sm">
          <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 mb-3" data-v-post-name>
                  Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
                </h3>
              </div>
              <!-- Hover Content -->
              <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="100" data-v-post>

        <article class="card h-100 shadow-sm">
          <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 mb-3" data-v-post-name>
                  Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
                </h3>
              </div>
              <!-- Hover Content -->
              <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="200" data-v-post>

        <article class="card h-100 shadow-sm">
          <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 mb-3" data-v-post-name>
                  Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada
                </h3>
              </div>
              <!-- Hover Content -->
              <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>
</section>`
});Vvveb.Sections.add("posts/posts-2", {
    name: "Posts 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-2-thumb.webp",
    html: `<section class="pt-5 pb-5" aria-label="posts-2">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h3 class="mb-3">News sections</h3>
      </div>
      <div class="col-6 text-end">
        <a class="btn btn-primary mb-3 me-1" href="#carouselPosts2" role="button" data-bs-slide="prev">
          <i class="la la-arrow-left"></i>
        </a>
        <a class="btn btn-primary mb-3 " href="#carouselPosts2" role="button" data-bs-slide="next">
          <i class="la la-arrow-right"></i>
        </a>
      </div>
      <div class="col-12">
        <div id="carouselPosts2" class="carousel slide" data-bs-ride="carousel">

          <div class="carousel-inner">
            <div class="carousel-item active" data-v-component-posts="slide1" data-v-limit="3" data-v-page="1" data-v-image_size="medium">
              <div class="row">

                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="day67-dog" src="demo/img/illustrations.co/day67-dog.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>

                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="day22-owl" src="demo/img/illustrations.co/day22-owl.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>
                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="day68-happy-cat" src="demo/img/illustrations.co/day68-happy-cat.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="carousel-item" data-v-component-posts="slide2" data-v-limit="3" data-v-page="2">
              <div class="row">

                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="day79-coffee" src="demo/img/illustrations.co/day79-coffee.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>

                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="109-map-location" src="demo/img/illustrations.co/109-map-location.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>
                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="107-healthy" src="demo/img/illustrations.co/107-healthy.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="carousel-item" data-v-component-posts="slide3" data-v-limit="3" data-v-page="3">
              <div class="row">

                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="126-namaste-no-hand-shake" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>

                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="104-dumbbell" src="demo/img/illustrations.co/104-dumbbell.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>

                    </div>
                  </div>
                </div>
                <div class="col-md-4 mb-3" data-v-post>
                  <div class="card">
                    <img class="img-fluid" loading="lazy" alt="day50-pirahna" src="demo/img/illustrations.co/day50-pirahna.svg" data-v-post-image>
                    <div class="card-body">
                      <a href="content/post.html" data-v-post-url>
                        <h4 class="card-title" data-v-post-name>Interdum et malesuada</h4>
                      </a>
                      <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("posts/posts-3", {
    name: "Posts 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/posts/posts-3-thumb.webp",
    html: `<section class="posts-3 py-5" aria-label="posts-3">
  <div class="container">

    <div class="row justify-content-center">

      <div class="col-md-8 text-center">
        <h2 class="text-center display-6 mb-1 fw-bold">From Our Blog</h2>
        <p class="lead text-center text-muted mb-4">Vivamus sed nunc in arcu cursus mollis quis et orci. Interdum et malesuada.</p>
      </div>

    </div>

    <div class="row mt-4" data-v-component-posts="posts-3" data-v-limit="3" data-v-page="1" data-v-image_size="medium">

      <div class="col-md-4" data-v-post>
        <div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
          <img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
          <div class="card-img-overlay overflow-hidden">
            <div class="d-flex align-items-center">
              <span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
              <div class="ms-2">
                <span class="ms-2 small">Jan 21, 2024</span>
              </div>
            </div>
            <a href="content/post.html" class="text-body" data-v-post-url>
              <h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
            </a>
            <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4" data-v-post>
        <div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
          <img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
          <div class="card-img-overlay overflow-hidden">
            <div class="d-flex align-items-center">
              <span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
              <div class="ms-2">
                <span class="ms-2 small">Jan 21, 2024</span>
              </div>
            </div>
            <a href="content/post.html" class="text-body" data-v-post-url>
              <h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
            </a>
            <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
          </div>
        </div>
      </div>


      <div class="col-md-4" data-v-post>
        <div class="card position-relative shadow border-0 mb-4" data-bs-theme="dark">
          <img class="card-img" src="demo/img/product.webp" loading="lazy" alt="product" data-v-post-image>
          <div class="card-img-overlay overflow-hidden">
            <div class="d-flex align-items-center">
              <span class="badge bg-primary text-white px-3 py-1 font-weight-normal">New</span>
              <div class="ms-2">
                <span class="ms-2 small">Jan 21, 2024</span>
              </div>
            </div>
            <a href="content/post.html" class="text-body" data-v-post-url>
              <h5 class="card-title my-3 font-weight-normal" data-v-post-name>Interdum et malesuada</h5>
            </a>
            <p class="card-text" data-v-post-excerpt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim nulla, mollis eu metus in, sagittis fringilla tortor. Phasellus purus dignissim convallis.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Posts"] = ["posts/posts-1","posts/posts-2","posts/posts-3"];
Vvveb.Sections.add("pricing-table/pricing-table-3", {
    name: "Pricing table 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/pricing-table/pricing-table-3-thumb.webp",
    html: `<section class="pricing-table-3" 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-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-4">
            <span class="excerpt d-block">Personal</span>
            <span class="price">
              <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-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-4">
            <span class="excerpt d-block">Business</span>
            <span class="price">
              <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-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-4">
            <span class="excerpt d-block">Ultimate</span>
            <span class="price">
              <sup>$</sup>
              <span class="number">109</span>
              <sub>/mos</sub>
            </span>
            <ul class="pricing-text mb-5">
              <li>
                <span class="la la-check me-2"></span>5 Dog Walk
              </li>
              <li>
                <span class="la la-check me-2"></span>3 Vet Visit
              </li>
              <li>
                <span class="la la-check me-2"></span>3 Pet Spa
              </li>
              <li>
                <span class="la la-check me-2"></span>Free Support
              </li>
            </ul>
            <a href="/page/pricing" class="btn btn-primary">
              <span>Get Started</span>
              <i class="la la-long-arrow-alt-right ms-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Pricing table"] = ["pricing-table/pricing-table-3"];
Vvveb.Sections.add("products/products-1", {
    name: "Products 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/products/products-1-thumb.webp",
    html: `<section class="products-1" aria-label="products-1">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-heading text-center">
          <h2 class="text-center display-6 mb-1 fw-bold">Latest Products</h2>
          <p class="lead text-center text-muted mb-4">Best quality at the lowest price.</p>
        </div>
      </div>
    </div>
  </div>


  <div class="container" data-v-component-products="latest" data-v-limit="8" data-v-variant_price="true" data-v-image_size="medium">
    <div class="row">



      <div class="col-md-3" data-aos="fade-up" data-aos-delay="000" 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="demo/img/video-1.webp" 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="100" 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="demo/img/video-1.webp" 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="200" 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="demo/img/video-1.webp" 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="300" 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="demo/img/video-1.webp" 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="400" 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="demo/img/video-1.webp" 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="500" 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="demo/img/video-1.webp" 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="600" 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="demo/img/video-1.webp" 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="700" 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="demo/img/video-1.webp" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />

              <!-- Hover Thumb -->
              <img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
            </a>


            <!-- Favourite -->
            <div class="product-favourite">
              <a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
                <span></span>
              </a>
            </div>

            <!-- Compare -->
            <div class="product-compare">
              <a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
                <span></span>
              </a>
            </div>

            <div class="badges">
              <span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
            </div>
          </div>

          <!-- Product Description -->
          <div class="product-content">

            <a href="product/product.html" class="text-body" data-v-product-url>
              <span data-v-product-name>Product 8</span>
            </a>

            <p data-v-if="prod.min_price > 0">
              <span class="text-muted small">From</span>
              <span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
            </p>

            <div data-v-if-not="prod.min_price">
              <p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
              <p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
            </div>

            <!-- Hover Content -->
            <div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
              <!-- Add to Cart -->
              <div class="add-to-cart-btn">
                <input type="hidden" name="product_id" value="" data-v-product-product_id />

                <a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
                  <span class="button-text">
                    Out of stock
                  </span>
                </a>

                <a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">

                  <span class="loading d-none">
                    <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
                    <span>Add to cart</span>
                  </span>

                  <span class="button-text">
                    <i class="la la-lg la-shopping-bag"></i>
                    <span>Add to cart</span>
                  </span>

                </a>
              </div>
            </div>

          </div>
        </article>


      </div>



    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Products"] = ["products/products-1"];
Vvveb.Sections.add("showcase/showcase-1", {
    name: "Showcase 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-1-thumb.webp",
    html: `<section class="d-flex showcase-1" aria-label="showcase-1">
  <div class="container">
    <div class="row align-items-center w-100">
      <div class="col-md-6 col-sm-12">
        <h3>Drag and drop builder</h3>
        <p class="lead">Unlimited design powers with an easy to use interface, change anything on your website with a few clicks.</p>
        <a href="content/post.html">
          <span>Learn more</span>
          <i class="la la-long-arrow-alt-right ms-1"></i>
        </a>
      </div>
      <div class="col-md-6 col-sm-12 col-img">
        <img class="img-fluid" loading="lazy" src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" alt="namaste">
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-2", {
    name: "Showcase 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-2-thumb.webp",
    html: `<section class="d-flex showcase-2" aria-label="showcase-2">
  <div class="container">
    <div class="row align-items-center w-100">
      <div class="col-md-6 col-sm-12 col-img">
        <img class="img-fluid" src="demo/img/illustrations.co/107-healthy.svg" alt="healthy">
      </div>
      <div class="col-md-6 col-sm-12">
        <h3>Drag and drop builder</h3>
        <p class="lead">Unlimited design powers with an easy to use interface, change anything on your website with a few clicks.</p>
        <a href="content/post.html">
          <span>Learn more</span>
          <i class="la la-long-arrow-alt-right ms-1"></i>
        </a>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-3", {
    name: "Showcase 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-3-thumb.webp",
    html: `<section class="showcase-3" aria-label="showcase-3">
  <div class="container">
    <div class="row g-1 justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-3">
        <div class="feature" data-aos="fade-up" data-aos-delay="100">
          <div class="font-container text-center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="56" height="56" 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="56" height="56" 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="56" height="56" 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="56" height="56" color="#1064ea" fill="#1064ea">
              <path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"></path>
            </svg>
          </div>
          <h3>
            Full Localization
          </h3>
          <p class="text-center">Publish content in multiple languages or sell in different currencies.</p>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-4", {
    name: "Showcase 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-4-thumb.webp",
    html: `<section class="showcase-4" aria-label="showcase-4">
  <div class="container">
    <div class="row g-1 justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shield-alt"></i>
          </div>
          <h3>
            <a>Security</a>
          </h3>
          <p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
          <a class="more  d-block">
            Read more
            <i class="font-icon la la-chevron-circle-right"></i>
          </a>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-praying-hands"></i>
          </div>
          <h3>
            <a>Unlimited theme flexibility</a>
          </h3>
          <p>Vvveb uses only html for templating for maximum flexibility.</p>
          <a class="more d-block">
            Read more
            <i class="font-icon la la-chevron-circle-right"></i>
          </a>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shopping-cart"></i>
          </div>
          <h3>
            <a>Ecommerce</a>
          </h3>
          <p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
          <a class="more d-block">
            Read more
            <i class="font-icon la la-chevron-circle-right"></i>
          </a>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-globe-europe"></i>
          </div>
          <h3>
            <a>Localization</a>
          </h3>
          <p>Publish content in multiple languages or sell in different currencies.</p>
          <a class="more d-block">
            Read more
            <i class="font-icon la la-chevron-circle-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-5", {
    name: "Showcase 5",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-5-thumb.webp",
    html: `<section class="showcase-5" aria-label="showcase-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shield-alt"></i>
          </div>
          <h3>
            <a>Security</a>
          </h3>
          <p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
          <!-- a class="more d-block">
			  Read more
			  <i class="font-icon la la-chevron-circle-right"></i>
          </a-->
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-praying-hands"></i>
          </div>
          <h3>
            <a>Unlimited flexibility</a>
          </h3>
          <p>Vvveb uses only html for templating for maximum flexibility.</p>
          <!-- a class="more d-block">
			  Read more
			  <i class="font-icon la la-chevron-circle-right"></i>
          </a-->
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shopping-cart"></i>
          </div>
          <h3>
            <a>Ecommerce</a>
          </h3>
          <p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
          <!-- a class="more d-block">
			  Read more
			  <i class="font-icon la la-chevron-circle-right"></i>
          </a-->
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-globe-europe"></i>
          </div>
          <h3>
            <a>Localization</a>
          </h3>
          <p>Publish content in multiple languages or sell in different currencies.</p>
          <!-- a class="more d-block">
			  Read more
			  <i class="font-icon la la-chevron-circle-right"></i>
          </a-->
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-6", {
    name: "Showcase 6",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-6-thumb.webp",
    html: `<section class="showcase-6" aria-label="showcase-6">
  <div class="separator top">
    <svg class="pricing-divider-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" fill="currentColor" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
      <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
		c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="currentColor" opacity="0.6"></path>
      <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
		c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="currentColor" opacity="0.6"></path>
      <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
		H42.401L43.415,98.342z" fill="currentColor" opacity="0.7"></path>
      <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
		c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="currentColor"></path>
    </svg>
  </div>


  <div class="background-container"></div>

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-shield-alt"></i>
          </div>
          <div class="text">
            <h3>
              <a>Security</a>
            </h3>
            <p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-praying-hands"></i>
          </div>
          <div class="text">
            <h3>
              <a>Unlimited flexibility</a>
            </h3>
            <p>Vvveb uses only html for templating for maximum flexibility.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-shopping-cart"></i>
          </div>
          <div class="text">
            <h3>
              <a>Ecommerce</a>
            </h3>
            <p>Vvveb is a full featured ecommerce platform with advanced functionality.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="separator bottom">
    <svg class="pricing-divider-img" enable-background="new 0 0 300 100" height="100px" fill="currentColor" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
      <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
		c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="currentColor" opacity="0.6"></path>
      <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
		c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="currentColor" opacity="0.6"></path>
      <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
		H42.401L43.415,98.342z" fill="currentColor" opacity="0.7"></path>
      <path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
		c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="currentColor"></path>
    </svg>
  </div>

</section>`
});Vvveb.Sections.add("showcase/showcase-7", {
    name: "Showcase 7",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-7-thumb.webp",
    html: `<section class="showcase-7" aria-label="showcase-7">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-shield-alt"></i>
          </div>
          <div class="text">
            <h3>
              <a>Security</a>
            </h3>
            <p>Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-praying-hands"></i>
          </div>
          <div class="text">
            <h3>
              <a>Unlimited theme flexibility</a>
            </h3>
            <p>Vvveb uses only html for templating for maximum flexibility.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-shopping-cart"></i>
          </div>
          <div class="text">
            <h3>
              <a>Ecommerce</a>
            </h3>
            <p>Vvveb is a full featured ecommerce platform with advanced functionality and internationalization.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-8", {
    name: "Showcase 8",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-8-thumb.webp",
    html: `<section class="showcase-8" aria-label="showcase-8">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-robot"></i>
          </div>
          <div class="text">
            <h3>
              <a>The next generation website builder</a>
            </h3>
            <p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-9", {
    name: "Showcase 9",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-9-thumb.webp",
    html: `<section class="showcase-8" aria-label="showcase-9">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-robot"></i>
          </div>
          <div class="text">
            <h3>
              <a>The next generation website builder</a>
            </h3>
            <p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-10", {
    name: "Showcase 10",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-10-thumb.webp",
    html: `<section class="showcase-10" aria-label="showcase-10">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7 mx-auto" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container">
            <i class="font-icon la la-robot la-2x"></i>
          </div>
          <div class="text">
            <h3>
              <a>The next generation website builder</a>
            </h3>
            <p>Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
            <a class="more d-block">
              Read more
              <i class="font-icon la la-chevron-circle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-11", {
    name: "Showcase 11",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-11-thumb.webp",
    html: `<section class="pt-5 pb-5">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-12 col-md-6   mt-4 mt-md-0 order-md-1 order-2">
        <img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
      </div>
      <div class="col-12 col-md-4 order-1 order-md-2">
        <h2>Nice Heading</h2>
        <p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
      </div>
    </div>
    <div class="row align-items-center justify-content-center pt-5 pb-5">
      <div class="col-12 col-md-4 offset-md-1">
        <h2>Nice Heading</h2>
        <p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>

      </div>
      <div class="col-12 col-md-6   mt-4 mt-md-0">
        <img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
      </div>
    </div>
    <div class="row align-items-center justify-content-center">
      <div class="col-12 col-md-6   mt-4 mt-md-0 order-md-1 order-2">
        <img alt="image" loading="lazy" class="img-fluid" src="http://via.placeholder.com/650x450/5fa9f8/fff">
      </div>
      <div class="col-12 col-md-4 order-1 order-md-2">
        <h2>Nice Heading</h2>
        <p class="text-h3 mt-3">Powerful and easy to use drag and drop website builder for blogs, presentation or ecommerce stores.</p>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("showcase/showcase-12", {
    name: "Showcase 12",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/showcase/showcase-12-thumb.webp",
    html: `<section class="showcase-12" aria-label="showcase-12">
  <div class="container">
    <div class="row g-1 justify-content-center">
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shield-alt"></i>
          </div>
          <h3>
            <a>Security</a>
          </h3>
          <p class="text-center">Vvveb is 100% safe against sql injections, a vulerability that affects most CMS.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-praying-hands"></i>
          </div>
          <h3>
            <a>Unlimited theme flexibility</a>
          </h3>
          <p class="text-center">Vvveb uses only html for templating for maximum flexibility.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-shopping-cart"></i>
          </div>
          <h3>
            <a>Ecommerce</a>
          </h3>
          <p class="text-center">Vvveb is a full featured ecommerce platform with advanced functionality.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
        <div class="feature">
          <div class="font-container text-center">
            <i class="font-icon la la-globe-europe"></i>
          </div>
          <h3>
            <a>Localization</a>
          </h3>
          <p class="text-center">Publish content in multiple languages or sell in different currencies.</p>
        </div>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Showcase"] = ["showcase/showcase-1","showcase/showcase-2","showcase/showcase-3","showcase/showcase-4","showcase/showcase-5","showcase/showcase-6","showcase/showcase-7","showcase/showcase-8","showcase/showcase-9","showcase/showcase-10","showcase/showcase-11","showcase/showcase-12"];
Vvveb.Sections.add("team/team-1", {
    name: "Team 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-1-thumb.webp",
    html: `<section class="py-5" aria-label="team-1">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h2 class="text-center display-6 mb-1 fw-bold">Meet Our Team</h2>
        <p class="lead text-center text-muted mb-4">We are a group of professionals dedicated to their work</p>

      </div>
    </div>
    <div class="row">

      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <img alt="image" loading="lazy" src="demo/img/sections/team/1.webp" class="img-fluid p-4 rounded-circle">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h3 class="mt-4 mb-0">John Doe</h3>
              <h4 class="text-muted mb-3">CTO - Founder</h4>
              <p class="text-muted">We are a group of professionals dedicated to their work</p>

              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <img alt="image" loading="lazy" src="demo/img/sections/team/2.webp" class="img-fluid p-4 rounded-circle">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h3 class="mt-4 mb-0">John Doe</h3>
              <h4 class="text-muted mb-3">CTO - Tech</h4>
              <p class="text-muted">We are a group of professionals dedicated to their work</p>

              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <img alt="image" loading="lazy" src="demo/img/sections/team/3.webp" class="img-fluid p-4 rounded-circle">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h3 class="mt-4 mb-0">John Doe</h3>
              <h4 class="text-muted mb-3">CSO - Financial</h4>
              <p class="text-muted">We are a group of professionals dedicated to their work</p>

              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <img alt="image" loading="lazy" src="demo/img/sections/team/4.webp" class="img-fluid p-4 rounded-circle">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h3 class="mt-4 mb-0">John Doe</h3>
              <h4 class="text-muted mb-3">CMO - Operations</h4>
              <p class="text-muted">You can relay on our amazing features list and also our user services will be great experience.</p>

              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("team/team-2", {
    name: "Team 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-2-thumb.webp",
    html: `<section class="py-5 team-2" aria-label="team-2">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h3 class="mb-3">Meet Our Team</h3>
        <h5 class="lead text-muted">We are a group of professionals dedicated to their work</h5>
      </div>
    </div>
    <div class="row justify-content-center py-5">
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body p-0">
            <div class="profile">
              <img src="demo/img/sections/team/1.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>Jane Doe</h4>
              <small>CEO - Founder</small>
            </div>
            <div class="card-subtitle">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
            </div>
            <div class="card-footer">
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body p-0">
            <div class="profile">
              <img src="demo/img/sections/team/2.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>John Doe</h4>
              <small>CTO - Co-Founder</small>
            </div>
            <div class="card-subtitle">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
            </div>
            <div class="card-footer">
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body p-0">
            <div class="profile">
              <img src="demo/img/sections/team/3.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>Jane Doe</h4>
              <small>CSO - Financial</small>
            </div>
            <div class="card-subtitle">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing </p>
            </div>
            <div class="card-footer">
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook-f"></i>
                    <span class="visually-hidden">Facebook</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>`
});Vvveb.Sections.add("team/team-3", {
    name: "Team 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-3-thumb.webp",
    html: `<section class="py-5" aria-label="team-5">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h3 class="mb-3">Meet Our Team</h3>
        <h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
      </div>
    </div>
    <div class="row">

      <div class="col-lg-3 mb-4">

        <div class="row no-gutters">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4" loading="lazy">

            <ul class="mb-0 list-inline mt-3 px-4">
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-linkedin"></i>
                  <span class="visually-hidden">Linkedin</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row no-gutters">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4" loading="lazy">

            <ul class="mb-0 list-inline mt-3 px-4">
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-linkedin"></i>
                  <span class="visually-hidden">Linkedin</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row no-gutters">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4" loading="lazy">

            <ul class="mb-0 list-inline mt-3 px-4">
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-linkedin"></i>
                  <span class="visually-hidden">Linkedin</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row no-gutters">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid p-4" loading="lazy">

            <ul class="mb-0 list-inline mt-3 px-4">
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="social-link">
                  <i class="lab la-linkedin"></i>
                  <span class="visually-hidden">Linkedin</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</section>`
});Vvveb.Sections.add("team/team-4", {
    name: "Team 4",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-4-thumb.webp",
    html: `<section class="py-5" aria-label="team-6">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h3 class="mb-3">Meet Our Team</h3>
        <h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
      </div>
    </div>
    <div class="row">

      <div class="col-lg-4 mb-4">

        <div class="row">
          <div class="col-md-12">
            <img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4" loading="lazy">
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-4 mb-4">

        <div class="row">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4" loading="lazy">
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-4 mb-4">

        <div class="row">
          <div class="col-md-12 pro-pic">
            <img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4" loading="lazy">
          </div>
          <div class="col-md-12">
            <div class="px-4">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
              <p class="mt-3">We are a group of professionals dedicated to their work</p>
              <ul class="mb-0 list-inline mt-3">
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-twitter"></i>
                    <span class="visually-hidden">Twitter</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-instagram"></i>
                    <span class="visually-hidden">Instagram</span>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a class="social-link">
                    <i class="lab la-linkedin"></i>
                    <span class="visually-hidden">Linkedin</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</section>`
});Vvveb.Sections.add("team/team-5", {
    name: "Team 5",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-5-thumb.webp",
    html: `<section class="py-5" aria-label="team-7">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h3 class="mb-3">Meet Our Team</h3>
        <h5 class="text-muted">We are a group of professionals dedicated to their work</h5>
      </div>
    </div>
    <div class="row">

      <div class="col-lg-6">
        <div class="card shadow-sm border-1 mb-4 p-0">

          <div class="row no-gutters">
            <div class="col-md-5">

              <img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid" loading="lazy">

            </div>
            <div class="col-md-7">
              <div class="p-4">
                <h4 class="mb-3">John Doe</h4>
                <p>We are a group of professionals dedicated to their work</p>
                <ul class="mb-0 list-inline mt-3">
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-facebook-f"></i>
                      <span class="visually-hidden">Facebook</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-twitter"></i>
                      <span class="visually-hidden">Twitter</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-instagram"></i>
                      <span class="visually-hidden">Instagram</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-linkedin"></i>
                      <span class="visually-hidden">Linkedin</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="col-lg-6">
        <div class="card shadow-sm border-1 mb-4 p-0">

          <div class="row no-gutters">
            <div class="col-md-5">

              <img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid" loading="lazy">

            </div>
            <div class="col-md-7">
              <div class="p-4">
                <h4 class="mb-3">John Doe</h4>
                <p>We are a group of professionals dedicated to their work</p>
                <ul class="mb-0 list-inline mt-3">
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-facebook-f"></i>
                      <span class="visually-hidden">Facebook</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-twitter"></i>
                      <span class="visually-hidden">Twitter</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-instagram"></i>
                      <span class="visually-hidden">Instagram</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-linkedin"></i>
                      <span class="visually-hidden">Linkedin</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
    <div class="row">

      <div class="col-lg-6">
        <div class="card shadow-sm border-1 mb-4 p-0">

          <div class="row no-gutters">
            <div class="col-md-5">

              <img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid" loading="lazy">
            </div>
            <div class="col-md-7">
              <div class="p-4">
                <h4 class="mb-3">John Doe</h4>
                <p>We are a group of professionals dedicated to their work</p>
                <ul class="mb-0 list-inline mt-3">
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-facebook-f"></i>
                      <span class="visually-hidden">Facebook</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-twitter"></i>
                      <span class="visually-hidden">Twitter</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-instagram"></i>
                      <span class="visually-hidden">Instagram</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-linkedin"></i>
                      <span class="visually-hidden">Linkedin</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="col-lg-6">

        <div class="card shadow-sm border-1 mb-4 p-0">
          <div class="row no-gutters">
            <div class="col-md-5">

              <img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid" loading="lazy">

            </div>
            <div class="col-md-7">
              <div class="p-4">
                <h4 class="mb-3">John Doe</h4>
                <p>We are a group of professionals dedicated to their work</p>
                <ul class="mb-0 list-inline mt-3">
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-facebook-f"></i>
                      <span class="visually-hidden">Facebook</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-twitter"></i>
                      <span class="visually-hidden">Twitter</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-instagram"></i>
                      <span class="visually-hidden">Instagram</span>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="social-link">
                      <i class="lab la-linkedin"></i>
                      <span class="visually-hidden">Linkedin</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>`
});Vvveb.Sections.add("team/team-6", {
    name: "Team 6",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/team/team-6-thumb.webp",
    html: `<section class="p-4" aria-label="team-11">
  <div class="container">
    <div class="row text-center">


      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4">

          <img src="demo/img/sections/team/1.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">

          <h5>John Doe</h5>
          <span class="small text-uppercase text-muted">CEO - Founder</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-facebook-f-f"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-twitter"></i>
                <span class="visually-hidden">Twitter</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-instagram"></i>
                <span class="visually-hidden">Instagram</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-linkedin"></i>
                <span class="visually-hidden">Linkedin</span>
              </a>
            </li>
          </ul>
        </div>
      </div>


      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4">

          <img src="demo/img/sections/team/2.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">

          <h5>Jane Doe</h5>
          <span class="small text-uppercase text-muted">CTO - Co-Founder</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-facebook-f"></i>
                <span class="visually-hidden">Facebook</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-twitter"></i>
                <span class="visually-hidden">Twitter</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-instagram"></i>
                <span class="visually-hidden">Instagram</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-linkedin"></i>
                <span class="visually-hidden">Linkedin</span>
              </a>
            </li>
          </ul>
        </div>
      </div>


      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4">

          <img src="demo/img/sections/team/3.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">

          <h5>John Doe</h5>
          <span class="small text-uppercase text-muted">CMO - Operations</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-facebook-f"></i>
                <span class="visually-hidden">Facebook</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-twitter"></i>
                <span class="visually-hidden">Twitter</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-instagram"></i>
                <span class="visually-hidden">Instagram</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-linkedin"></i>
                <span class="visually-hidden">Linkedin</span>
              </a>
            </li>
          </ul>
        </div>
      </div>


      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4">

          <img src="demo/img/sections/team/4.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm" loading="lazy">

          <h5>Jane Doe</h5>
          <span class="small text-uppercase text-muted">CCO - Financial</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-facebook-f"></i>
                <span class="visually-hidden">Facebook</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-twitter"></i>
                <span class="visually-hidden">Twitter</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-instagram"></i>
                <span class="visually-hidden">Instagram</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="social-link">
                <i class="lab la-linkedin"></i>
                <span class="visually-hidden">Linkedin</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>`
});
	Vvveb.SectionsGroup["Team"] = ["team/team-1","team/team-2","team/team-3","team/team-4","team/team-5","team/team-6"];
Vvveb.Sections.add("testimonials/testimonials-1", {
    name: "Testimonials 1",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-1-thumb.webp",
    html: `<section class="testimonials-1 bg-alternate" aria-label="testimonials-1">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h2 class="text-center display-6 mb-1 fw-bold">Some of our users</h2>
        <p class="lead text-center text-muted mb-4">Hear what our users have to say</p>
      </div>
    </div>

    <div class="row text-center">


      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="rounded border testimonial" data-aos="fade-up">

          <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g>
              <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
            </g>
          </svg>

          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

          <img src="demo/img/sections/team/1.webp" alt="team" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow border rounded-3" loading="lazy">

          <h3 class="mb-0">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 img-thumbnail shadow border rounded-3" loading="lazy">

          <h3 class="mb-0">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 img-thumbnail shadow border rounded-3" loading="lazy">

          <h3 class="mb-0">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 img-thumbnail shadow border rounded-3" loading="lazy">

          <h3 class="mb-0">Jane Doe</h3>
          <span class="small text-uppercase text-muted">Company Inc.</span>
        </div>
      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-2", {
    name: "Testimonials 2",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-2-thumb.webp",
    html: `<section class="py-5" aria-label="testimonials-2">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h2 class="mb-1">Some of our users</h2>
        <h3 class="lead text-muted mb-3">Hear what our users have to say</h3>
      </div>
    </div>
    <div class="row text-center">

      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <img alt="image" src="demo/img/sections/team/1.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">

              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CTO - Founder</h6>

            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <img alt="image" src="demo/img/sections/team/2.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CTO - Tech</h6>

            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <img alt="image" src="demo/img/sections/team/3.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CSO - Financial</h6>
            </div>
          </div>
        </div>

      </div>


      <div class="col-lg-3 mb-4">

        <div class="row">
          <div class="col-md-12">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <img alt="image" src="demo/img/sections/team/4.webp" class="img-fluid p-4 rounded-circle" loading="lazy">
          </div>
          <div class="col-md-12 text-center">
            <div class="pt-2">
              <h5 class="mt-4 mb-0">John Doe</h5>
              <h6 class="text-muted mb-3">CMO - Operations</h6>


            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>`
});Vvveb.Sections.add("testimonials/testimonials-3", {
    name: "Testimonials 3",
    image: Vvveb.themeBaseUrl + "/screenshots/sections/testimonials/testimonials-3-thumb.webp",
    html: `<section class="py-5 team-2" aria-label="testimonials-3">
  <div class="container">
    <div class="row justify-content-center mb-4">
      <div class="col-md-7 text-center">
        <h2 class="mb-1">Some of our users</h2>
        <h3 class="lead text-muted mb-3">Hear what our users have to say</h3>
      </div>
    </div>
    <div class="row justify-content-center py-5">
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body">


            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <div class="profile">
              <img src="demo/img/sections/team/1.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>Jane Doe</h4>
              <small>CEO - Founder</small>
            </div>
          </div>
        </div>
      </div>
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <div class="profile">
              <img src="demo/img/sections/team/2.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>John Doe</h4>
              <small>CTO - Co-Founder</small>
            </div>
          </div>
        </div>
      </div>
      <div class="card col-md-3">
        <div class="card-content">
          <div class="card-body">
            <svg enable-background="new 0 0 33 25" version="1.1" viewBox="0 0 33 25" width="42" height="42" fill="#0d6efd" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g>
                <path d="M18.006,6.538c0-1.973,0.662-3.554,1.988-4.743c1.326-1.19,2.977-1.785,4.947-1.785   c2.517,0,4.488,0.799,5.916,2.397C32.285,4.004,33,6.13,33,8.782c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.061,4.743c-1.188,1.258-2.43,2.244-3.723,2.958c-1.291,0.714-2.413,1.239-3.365,1.581l-3.265-5.508   c1.36-0.545,2.517-1.412,3.468-2.602c0.953-1.19,1.496-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.724-1.786   C18.566,10.09,18.006,8.509,18.006,6.538z M0.359,6.538c0-1.973,0.663-3.554,1.989-4.743C3.674,0.604,5.324,0.01,7.295,0.01   c2.518,0,4.488,0.799,5.916,2.397c1.429,1.597,2.143,3.723,2.143,6.375c0,2.719-0.424,5.032-1.275,6.936   c-0.85,1.903-1.869,3.483-3.06,4.743c-1.188,1.258-2.431,2.244-3.724,2.958C6.004,24.133,4.883,24.658,3.93,25l-3.264-5.508   c1.36-0.545,2.516-1.412,3.467-2.602c0.953-1.19,1.497-2.465,1.633-3.824c-1.359,0-2.602-0.597-3.723-1.786   C0.92,10.09,0.359,8.509,0.359,6.538z"></path>
              </g>
            </svg>


            <div class="card-subtitle mt-3">
              <p class="text-muted"> I really enjoyed working with them, they are Group of Professionals and they know what they're Doing</p>
            </div>

            <div class="profile">
              <img src="demo/img/sections/team/3.webp" loading="lazy" alt="team">
            </div>
            <div class="card-title mt-4">
              <h4>Jane Doe</h4>
              <small>CSO - Financial</small>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>`
});
	Vvveb.SectionsGroup["Testimonials"] = ["testimonials/testimonials-1","testimonials/testimonials-2","testimonials/testimonials-3"];