{% extends 'volt/layouts/base-fullscreen.html' %}
{% load static %}

{% block content %}

    <header class="header-global">
        <nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary pt-4 navbar-dark">
            <div class="container position-relative">
                <div class="navbar-collapse collapse me-auto" id="navbar_global">
                    <div class="navbar-collapse-header">
                        <div class="row">
                            <div class="col-6 collapse-brand">
                                <a href="/">
                                    <img src="{% static 'volt/img/brand/light.svg' %}" alt="Volt logo">
                                </a>
                            </div>
                            <div class="col-6 collapse-close">
                                <a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
                            </div>
                        </div>
                    </div>
                    <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
                        <li class="nav-item me-2">
                            <a href="/dashboard.html" class="nav-link">Dashboard</a>
                        </li>
                        <li class="nav-item me-2">
                            <a href="{% url 'account_logout' %}" class="nav-link">Logout</a>
                        </li>
                    </ul>
                </div>
                <div class="d-flex align-items-center ms-auto">
                    <a href="#pricing" class="btn btn-outline-white me-md-3"><i class="fas fa-download me-2"></i> Download</a>
                </div>
            </div>
        </nav>
    </header>

    <main>

        <!-- Hero -->
        <section class="section-header overflow-hidden pt-7 pt-lg-8 pb-9 pb-lg-12 bg-primary text-white">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <div class="bootstrap-big-icon d-none d-lg-block">
                            <svg xmlns="http://www.w3.org/2000/svg" width="700" height="622" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
                        </div>
                        <h1 class="fw-bolder">Volt Bootstrap 5</h1>
                        <h2 class="lead fw-normal text-muted mb-5">
                            Open-source Seed Project
                        </h2>
                        <!-- Button Modal -->
                        <div class="d-flex align-items-center justify-content-center mb-5">
                            <a href="/dashboard.html" class="btn btn-secondary text-dark me-4">
                                <span class="fas fa-chart-line me-2 d-none d-sm-inline"></span> Dashboard Demo</a>
                        </div>
                        <div class="d-flex justify-content-center flex-column mb-6 mb-lg-5">
                            <a href="https://themesberg.com" target="_blank">
                                <img src="{% static 'volt/img/themesberg.svg' %}" class="d-block mx-auto mb-3" height="25" width="25" alt="Themesberg Logo">
                                <span class="text-muted font-small">
                                &copy; Themesberg    
                                </span>
                            </a>
                            <a target="_blank" href="https://appseed.us">Coded by AppSeed</a>
                        </div>
                    </div>
                </div>
            </div>
            <figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2"><svg class="fill-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4"><path d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path></svg></figure>       
        </section>
        <div class="section pt-0">
            <div class="container mt-n10 mt-lg-n12 z-2">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <img src="{% static 'volt/img/mockup-presentation.png' %}" alt="Mockup presentation">
                    </div>
                </div>
            </div>
        </div>
        <section class="section section-lg bg-soft pt-0">
            <div class="container">
                <div class="row justify-content-center mb-5 mb-lg-6">
                    <div class="col-6 col-md-3 text-center mb-4">
                        <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-4">
                            <span class="fas fa-pager"></span>
                        </div>
                        <h3 class="fw-bolder">10</h3>
                        <p class="text-gray">Dashboard Pages</p>
                    </div>
                    <div class="col-6 col-md-3 text-center mb-4">
                        <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-4">
                            <span class="fas fa-puzzle-piece"></span>
                        </div>
                        <h3 class="fw-bolder">100+</h3>
                        <p class="text-gray">Premium Components</p>
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-4">
                            <span class="fab fa-sass"></span>
                        </div>
                        <h3 class="fw-bolder">Workflow</h3>
                        <p class="text-gray">Sass & Gulp</p>
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        <div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-4">
                            <span class="fab fa-js-square"></span>
                        </div>
                        <h3 class="fw-bolder">Vanilla</h3>
                        <p class="text-gray">Javascript</p>
                    </div>
                </div>
                <div class="row justify-content-between align-items-center mb-5 mb-lg-7">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-lg-5 order-lg-2 mb-5 mb-lg-0">
                            <h2 class="h1">Bootstrap 5</h2>
                            <p class="mb-4 lead fw-bold">Latest version of Bootstrap without jQuery</p>
                            <p class="mb-4">Volt is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins</p>
                            <a href="https://appseed.us/admin-dashboards/django-dashboard-volt" target="_blank" class="btn btn-outline-primary">
                                <span class="fas fa-book me-2"></span>Getting started</a>
                        </div>
                        <div class="col-lg-6 order-lg-1">
                            <img src="{% static 'volt/img/illustrations/bs5-illustrations.svg' %}" alt="Front pages overview">
                        </div>
                    </div>
                    <div class="col-lg-5 mb-5 mb-lg-0">
                        <h2 class="h1 d-flex align-items-center">Kanban Board <span class="badge-md ms-3 mb-0 fs-6 badge rounded-pill text-dark bg-secondary">Pro</span></h2>
                        <p class="mb-4 lead fw-bold">Advanced FullCalendar.js integration</p>
                        <p class="mb-4">We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.</p>
                        <a href="https://django-volt-pro.appseed-srv1.com/" target="_blank" class="btn btn-secondary text-dark me-3">
                            <span class="fas fa-th me-2"></span> Demo</a>
                        <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/kanban/" target="_blank" class="btn btn-outline-primary">
                            <span class="fas fa-book me-2"></span> Guide</a>
                    </div>
                    <div class="col-lg-6">
                        <img src="{% static 'volt/img/mockup-kanban-presentation.png' %}" alt="Kanban Preview">
                    </div>
                </div>
                <div class="row justify-content-between align-items-center mb-5 mb-lg-7">
                    <div class="col-lg-5 order-lg-2 mb-5 mb-lg-0">
                        <h2 class="h1 d-flex align-items-center">Mapbox <span class="badge-md ms-3 mb-0 fs-6 badge rounded-pill text-dark bg-secondary">Pro</span></h2>
                        <p class="mb-4 lead fw-bold">Markers and cards integration with Leaflet.js</p>
                        <p class="mb-4">You can use this map to add markers with custom cards and show them on a map using our custom MapBox integration with Leaflet.js</p>
                        <a href="https://django-volt-pro.appseed-srv1.com/" target="_blank" class="btn btn-secondary text-dark me-3">
                            <span class="fas fa-map-marked-alt me-2"></span> Demo</a>
                        <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/mapbox/" target="_blank" class="btn btn-outline-primary">
                            <span class="fas fa-book me-2"></span> Guide</a>
                    </div>
                    <div class="col-lg-6 order-lg-1">
                        <img src="{% static 'volt/img/mockup-map-presentation.png' %}" alt="MapBox Leaflet.js Custom Integration Mockup">
                    </div>
                </div>
                <div class="row justify-content-between align-items-center mb-5 mb-lg-7">
                    <div class="col-lg-5 mb-5 mb-lg-0">
                        <h2 class="h1 d-flex align-items-center">Calendar <span class="badge-md ms-3 mb-0 fs-6 badge rounded-pill text-dark bg-secondary">Pro</span></h2>
                        <p class="mb-4 lead fw-bold">Advanced FullCalendar.js integration</p>
                        <p class="mb-4">We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.</p>
                        <a href="https://django-volt-pro.appseed-srv1.com/" target="_blank" class="btn btn-secondary text-dark me-3">
                            <span class="far fa-calendar-alt me-2"></span> Demo</a>
                        <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/calendar/" target="_blank" class="btn btn-outline-primary">
                            <span class="fas fa-book me-2"></span> Guide</a>
                    </div>
                    <div class="col-lg-6">
                        <img src="{% static 'volt/img/mockup-calendar-presentation.png' %}" alt="Calendar Preview">
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-sm pt-0">
            <div class="container">
                <div class="row justify-content-center mb-5 mb-lg-6">
                    <div class="col-12 text-center">
                        <h2 class="h1 px-lg-5">10 hand-crafted pages</h2>
                        <p class="lead px-lg-10">Every page from Volt has been carefully built to provide all the necessary pages your startup will require</p>
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-6 mb-5">
                        <a href="/dashboard.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/overview.jpg' %}" alt="Dashboard page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Overview <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/transactions.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/transactions.jpg' %}" alt="Transactions page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Transactions <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/settings.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/settings.jpg' %}" alt="Settings page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Settings <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/sign-in.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/sign-in.jpg' %}" alt="Sign In page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Sign In <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/sign-up.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/sign-up.jpg' %}" alt="Sign Up page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Sign Up <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/lock.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/lock.jpg' %}" alt="Lock page preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Sign Up <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/forgot-password.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/forgot-password.jpg' %}" alt="Forgot password preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Forgot password <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/reset-password.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/reset-password.jpg' %}" alt="Reset password preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">Reset password <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/page-404.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/404.jpg' %}" alt="404 error preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">404 <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 mb-5">
                        <a href="/page-500.html" class="page-preview scale-up-2">
                            <img class="shadow-lg rounded scale" src="{% static 'volt/img/pages/500.jpg' %}" alt="500 error preview">
                            <div class="text-center show-on-hover rounded-bottom">
                                <h6 class="m-0 text-center text-white">500 <i class="fas fa-external-link-alt ms-2"></i></h6>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-lg bg-dark text-white">
            <div class="container">
                <div class="row justify-content-center mb-5 mb-lg-6">
                    <div class="col-12 text-center">
                        <h2 class="h1 px-lg-5">Awesome Features</h2>
                        <p class="lead px-lg-8">You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-bootstrap"></span></span>
                                <h5 class="fw-bold text-primary">Bootstrap 5</h5>
                                <p>Built with the most popular CSS Framework</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-sass"></span></span>
                                <h5 class="fw-bold text-primary">Sass</h5>
                                <p>Variables and mixins to empower development</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fas fa-mobile-alt"></span></span>
                                <h5 class="fw-bold text-primary">Responsive</h5>
                                <p>All pages and components are 100% responsive</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-gulp"></span></span>
                                <h5 class="fw-bold text-primary">Gulp</h5>
                                <p>Gulp & BrowserSync for a flawless workflow</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="far fa-images"></span></span>
                                <h5 class="fw-bold text-primary">Creative rights</h5>
                                <p>All images, icons and fonts are licensed & free to use</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="far fa-file-alt"></span></span>
                                <h5 class="fw-bold text-primary">Documentation</h5>
                                <p>Everything that comes with Rocket is well documented</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-accessible-icon"></span></span>
                                <h5 class="fw-bold text-primary">WCAG Accessibility</h5>
                                <p>Accessibility oriented design and functionality</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-html5"></span></span>
                                <h5 class="fw-bold text-primary">W3C Validated</h5>
                                <p>HTML pages are all valid by W3C Standards</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fab fa-js-square"></span></span>
                                <h5 class="fw-bold text-primary">Vanilla JS</h5>
                                <p>jQuery is not a required dependency for Volt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="far fa-calendar-alt"></span></span>
                                <h5 class="fw-bold text-primary">Calendar</h5>
                                <p>Advanced integration with FullCalendar.js</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fas fa-map-marked-alt"></span></span>
                                <h5 class="fw-bold text-primary">MapBox</h5>
                                <p>Custom integration with markers and cards</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="card bg-white shadow-soft text-primary rounded mb-4">
                            <div class="px-3 px-lg-4 py-5 text-center">
                                <span class="icon icon-lg mb-4"><span class="fas fa-pen-fancy"></span></span>
                                <h5 class="fw-bold text-primary">Design</h5>
                                <p>Crafted by professional UI/UX designers</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-lg line-bottom-soft">
            <div class="container">
                <div class="row justify-content-center mb-5 mb-lg-6">
                    <div class="col-12 text-center">
                        <h2 class="h1 px-lg-5">What's inside?</h2>
                        <p class="lead px-lg-8">We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.</p>
                    </div>
                </div>
                <div class="row d-flex align-items-center">
                    <div class="col-12 col-lg-6 mb-4">
                        <div class="d-none d-lg-block mt-5">
                            <h4>You need only HTML, CSS and Javascript?</h4>
                            <p class="lead mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p>
                            <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/file-structure/" target="_blank" class="btn btn-md btn-secondary text-dark"><i class="fas fa-book me-2"></i> Docs v1.3</a>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center">
                        <ul class="d-block fmw-100 list-style-none folder-structure">
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Main folder that you will be working with"><i class="fas fa-folder me-2"></i>src</li>
                            <li>
                                <ul class="list-style-none ps-4">
                                    <li data-bs-toggle="tooltip" data-bs-placement="left" title="CSS, Images, Fonts and Javascript"><i class="fas fa-folder me-2"></i> assets</li>
                                    <li data-bs-toggle="tooltip" data-bs-placement="left" title="HTML templates"><i class="fas fa-folder me-2"></i> pages</li>
                                    <li data-bs-toggle="tooltip" data-bs-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><i class="fas fa-folder me-2"></i> partials</li>
                                    <li data-bs-toggle="tooltip" data-bs-placement="left" title="Sass source files"><i class="fas fa-folder me-2"></i> scss</li>
                                    <li data-bs-toggle="tooltip" data-bs-placement="left" title="The page you're looking at right now. Call it inception."><i class="fab fa-html5 me-2 text-secondary"></i> index.html</li>
                                </ul>
                            </li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Rocket with only HTML, CSS and Javascript"><i class="fas fa-folder me-2 text-muted"></i> html&css</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Temporary folder that is created when serving files with BrowserSync"><i class="fas fa-folder text-muted me-2"></i>.temp</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Minified version of the project"><i class="fas fa-folder me-2 text-muted"></i> dist</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Project dependencies from package.json"><i class="fas fa-folder text-muted me-2"></i> node_modules
                            </li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Development workflow commands. We have them well documented."><i class="fab fa-js-square me-2 text-warning"></i> gulpfile.js</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="Project details and dependencies."><i class="fas fa-file-code me-2 text-tertiary"></i> package.json</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="No project can miss a README :)"><i class="fas fa-file-code me-2 text-tertiary"></i> README.md</li>
                            <li data-bs-toggle="tooltip" data-bs-placement="left" title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)">
                                <i class="fas fa-file-code me-2 text-tertiary"></i> .gitignore</li>
                        </ul>
                    </div>
                    <div class="col-12 mt-5 d-lg-none">
                        <h5>You need only HTML, CSS and Javascript?</h5>
                        <p>Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-lg bg-dark">
            <div class="container">
                <div class="row justify-content-center text-center text-white mb-5">
                    <div class="col-12">
                        <h2 class="h1 fw-light mb-3">Less <span class="fw-bold">work</span>, more <span class="fw-bold">flow</span>.</h2>
                        <p class="lead px-lg-8">
                            Boost productivity with BrowserSync. Sass changes are reflected instantly and pages scroll and refresh on devices as you work.
                        </p>
                    </div>
                </div>
                <div class="row justify-content-center mb-6">
                    <div class="col-md-10 col-xl-9">
                        <div class="position-relative">
                            <div class="rounded bg-white p-4 text-dark mb-2">
                                <div class="mb-3">
                                    <div class="fw-bold">&gt; $ npm install</div>
                                    <div class="text-gray">Everything’s installed!</div>
                                </div>
                                <div class="mb-3">
                                    <div class="fw-bold">&gt; $ gulp</div>
                                    <div class="text-gray">SCSS watching</div>
                                    <div class="text-gray">LiveReload started</div>
                                    <div class="text-gray">Opening localhost:3000</div>
                                </div>
                                <div>
                                    <div class="fw-bold">&gt; $ that's it?</div>
                                    <div class="text-gray">It's that simple!</div>
                                </div>
                            </div>
                        </div>
                        <p class="mt-4 text-white text-center">Looks unfamiliar? Don’t worry! Our <a class="text-white text-underline fw-bold" href="https://themesberg.com/docs/rocket/getting-started/overview/" target="_blank">documentation</a> has got you covered.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-lg bg-white" id="pricing">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-8">
                        <h2 class="h1 fw-bold mb-3">Open source</h2>
                        <p class="lead mb-4">
                            Volt is an open source project under the MIT License. 
                            Give us a lucky star to spread the open source love ❤️</p>
                        <div class="d-flex align-items-center">
                            <a href="https://appseed.us/admin-dashboards/django-dashboard-volt" 
                               target="_blank" class="btn btn-dark me-4">
                                See Product
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="github-big-icon">
                            <span class="fab fa-github"></span>
                        </div>
                      </div>
                </div>
                <div class="row mt-6">
                    <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <div class="card shadow-sm p-4">
                            <!-- Header -->
                            <div class="card-header bg-white border-0 pb-0">
                                <span class="d-block">
                                    <span class="h2 text-primary fw-bold align-top">Free Demo</span>
                                </span>
                            </div>
                            <!-- End Header -->
                            <!-- Content -->
                            <div class="card-body">
                                <ul class="list-group list-group-flush price-list">
                                    <li class="list-group-item bg-white border-0 ps-0"><strong>100</strong> Components</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><strong>11</strong> Example Pages</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger me-2"><span class="fas fa-times-circle"></span></span> MapBox</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger me-2"><span class="fas fa-times-circle"></span></span> Calendar</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger me-2"><span class="fas fa-times-circle"></span></span> SVG Map</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger me-2"><span class="fas fa-times-circle"></span></span> Widgets</li>
                                    <li class="list-group-item bg-white border-0 ps-0 pb-0"><span class="icon-danger me-2"><span class="fas fa-times-circle"></span></span> Premium Support</li>
                                </ul>
                            </div>
                            <!-- End Content -->
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <div class="card shadow-sm p-4 py-5 mt-lg-n5">
                            <!-- Header -->
                            <div class="card-header bg-white border-0 pb-0">
                                <span class="d-block">
                                    <span class="h2 text-primary fw-bold align-top">Pro Version</span>
                                </span>
                            </div>
                            <!-- End Header -->
                            <!-- Content -->
                            <div class="card-body">
                                <ul class="list-group list-group-flush price-list">
                                    <li class="list-group-item bg-white border-0 ps-0"><strong>1000+</strong> Components</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><strong>20</strong> Example Pages</li>
                                    <li class="list-group-item bg-white border-0 ps-0">Dashboard included</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-success me-2"><span class="fas fa-check-circle"></span></span> MapBox</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-success me-2"><span class="fas fa-check-circle"></span></span> Calendar</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-success me-2"><span class="fas fa-check-circle"></span></span> SVG Map</li>
                                    <li class="list-group-item bg-white border-0 ps-0"><span class="icon-success me-2"><span class="fas fa-check-circle"></span></span> Widgets</li>
                                    <li class="list-group-item bg-white border-0 border-0 ps-0 pb-0"><span class="icon-success me-2"><span class="fas fa-check-circle"></span></span> Premium Support</li>
                                </ul>
                            </div>
                            <a href="https://appseed.us/admin-dashboards/django-dashboard-volt-pro" target="_blank" 
                               class="btn btn-secondary d-flex align-items-center justify-content-center mb-0 mt-2">Django Volt Pro 
                                <i class="fas fa-external-link-alt ms-2"></i></a>
                            <!-- End Content -->
                        </div>
                    </div>
                </div>
                <div class="mt-lg-6 row">
                    <div class="text-center col-12">
                       <h2 class="h5 text-gray fw-normal mb-4">Available in the following technologies:</h2>
                       <div>
                            <a class="me-3 card-link" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank">
                                <img src="{% static 'volt/img/technologies/bootstrap-5-logo.svg' %}" class="image image-sm">
                            </a>
                            <a class="me-3 card-link" href="https://demo.themesberg.com/volt-react-dashboard/#/" target="_blank">
                                <img src="{% static 'volt/img/technologies/react-logo.svg' %}" class="image image-sm">
                            </a>
                            <a class="me-3 card-link" href="https://appseed.us/admin-dashboards/flask-dashboard-volt" target="_blank">
                                <img src="{% static 'volt/img/technologies/flask-logo.svg' %}" class="image image-sm">
                            </a>
                            <a class="me-3 card-link" href="https://appseed.us/admin-dashboards/django-dashboard-volt" target="_blank">
                                <img src="{% static 'volt/img/technologies/django-logo.svg' %}" class="image image-sm">
                            </a>                                                        
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <footer class="footer py-6 bg-dark text-white">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img class="navbar-brand-dark mb-4" height="35" src="{% static 'volt/img/brand/light.svg' %}" alt="Logo light">
                    <p>Volt is a Premium Bootstrap 5 Admin Dashboard bringing together beautiful UI/UX design and functional elements.</p>
                    <ul class="social-buttons mb-5 mb-lg-0">
                        <li>
                            <a href="https://twitter.com/themesberg" aria-label="twitter social link" class="icon-white me-2">
                                <span class="fab fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/themesberg/" class="icon-white me-2" aria-label="facebook social link">
                                <span class="fab fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://github.com/themesberg" aria-label="github social link" class="icon-white me-2">
                                <span class="fab fa-github"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/themesberg" class="icon-white" aria-label="dribbble social link" >
                                <span class="fab fa-dribbble"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-6 col-md-2 mb-5 mb-lg-0">
                    <span class="h5">Themesberg</span>
                    <ul class="links-vertical mt-2">
                        <li><a target="_blank" href="https://themesberg.com/blog">Blog</a></li>
                        <li><a target="_blank" href="https://themesberg.com/products">Products</a></li>
                        <li><a target="_blank" href="https://themesberg.com/about">About Us</a></li>
                        <li><a target="_blank" href="https://themesberg.com/contact">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-2 mb-5 mb-lg-0">
                    <span class="h5">Other</span>
                    <ul class="links-vertical mt-2">
                        <li><a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/" target="_blank">Docs
                                <span class="badge badge-sm bg-secondary text-dark ms-2">v1.3</span></a></li>
                        <li><a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/changelog/" target="_blank">Changelog</a></li>
                        <li><a target="_blank" href="https://themesberg.com/licensing">License</a>
                        </li>
                        <li><a target="_blank" href="https://themesberg.com/contact">Support</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-4 mb-5 mb-lg-0">
                    <span class="h5 mb-3 d-block">Subscribe</span>
                    <form action="#">
                        <div class="form-row mb-2">
                            <div class="col-12">
                                <input type="email" class="form-control mb-2" placeholder="example@company.com" name="email" aria-label="Subscribe form" required>
                            </div>
                            <div class="col-12 d-grid">
                                <button type="submit" class="btn btn-secondary" data-loading-text="Sending">
                                    <span>Subscribe</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <p class="text-muted font-small m-0">We’ll never share your details. See our <a class="text-white" href="#">Privacy Policy</a></p>
                </div>
            </div>
            <hr class="bg-gray-700 my-5">
            <div class="row">
                <div class="col mb-md-0">
                    <a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center">
                        <img src="{% static 'volt/img/themesberg-logo-alt.svg' %}" height="35" class="mb-4" alt="Themesberg Logo">
                    </a>
                <div class="d-flex text-center justify-content-center align-items-center" role="contentinfo">
                    <p class="font-weight-normal font-small mb-0">
                        &copy; Themesberg 2019-<span class="current-year">2020</span> - coded by <a target="_blank" href="https://appseed.us">AppSeed</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

{% endblock content %}