<!--
=========================================================
* BLK Design System- v1.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/blk-design-system
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.png">
    <title>
        TiBillet• Design System by Creative Tim
    </title>
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <!-- Nucleo Icons -->
    <link href="../assets/css/nucleo-icons.css" rel="stylesheet"/>
    <!-- CSS Files -->
    <link href="../assets/css/blk-design-system.css?v=1.0.0" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../assets/demo/demo.css" rel="stylesheet"/>
    <style>
        @font-face {
            font-family: BeStrong;
            src: url(../assets/fonts/BeStrongRegular.otf);
        }
    </style>
</head>

<body class="landing-page">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="100">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" href="https://www.tibillet.re" rel="tooltip"
               title="L'évènementiel en réseau" data-placement="bottom" target="_blank">
                <span style="font-family: BeStrong; font-size: x-large">TiBillet</span>
            </a>
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
                    aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse justify-content-end" id="navigation">
            <div class="navbar-collapse-header">
                <div class="row">
                    <div class="col-6 collapse-brand">
                        <a>
                            BLK•
                        </a>
                    </div>
                    <div class="col-6 collapse-close text-right">
                        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation"
                                aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="tim-icons icon-simple-remove"></i>
                        </button>
                    </div>
                </div>
            </div>
            <ul class="navbar-nav">
                <li class="nav-item p-0">
                    <a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
                       href="https://twitter.com/CreativeTim" target="_blank">
                        <i class="fab fa-twitter"></i>
                        <p class="d-lg-none d-xl-none">Twitter</p>
                    </a>
                </li>
                <li class="nav-item p-0">
                    <a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom"
                       href="https://www.facebook.com/CreativeTim" target="_blank">
                        <i class="fab fa-facebook-square"></i>
                        <p class="d-lg-none d-xl-none">Facebook</p>
                    </a>
                </li>
                <li class="nav-item p-0">
                    <a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
                       href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
                        <i class="fab fa-instagram"></i>
                        <p class="d-lg-none d-xl-none">Instagram</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index.html">Back to Kit</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/creativetimofficial/blk-design-system/issues">Have an
                        issue?</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
    <div class="page-header">
        <img src="../assets/img/blob.png" class="path">
        <img src="../assets/img/path2.png" class="path2">
        <img src="../assets/img/triunghiuri.png" class="shapes triangle">
        <img src="../assets/img/waves.png" class="shapes wave">
        <img src="../assets/img/patrat.png" class="shapes squares">
        <img src="../assets/img/cercuri.png" class="shapes circle">
        <div class="content-center">
            <div class="row row-grid justify-content-between align-items-center text-left">
                <div class="col-lg-6 col-md-6">
                    <h1 class="text-white">Réseau culturel coopératif à monnaie local
                        <br/>
                    </h1>
                    <p class="text-white mb-3">TiBillet est un système de paiement sans contact et de gestion pour l’évènementiel ou la restauration. C’est aussi un outil d'engagement associatif, de promotion artistique d'achat de billet en ligne... et bien plus encore !</p>
                    <div class="btn-wrapper mb-3">
                        <p class="category text-success d-inline">From 9.99%/mo</p>
                        <a href="#blk" class="btn btn-success btn-link btn-sm"><i
                                class="tim-icons icon-minimal-right"></i></a>
                    </div>
                    <div class="btn-wrapper">
                        <div class="button-container">
                            <button href="javascript:void(0)" class="btn btn-icon btn-simple btn-round btn-neutral">
                                <i class="fab fa-twitter"></i>
                            </button>
                            <button href="javascript:void(0)" class="btn btn-icon btn-simple btn-round btn-neutral">
                                <i class="fab fa-dribbble"></i>
                            </button>
                            <button href="javascript:void(0)" class="btn btn-icon btn-simple btn-round btn-neutral">
                                <i class="fab fa-facebook"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-5">
                    <img src="../assets/img/etherum.png" alt="Circle image" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    <section class="section section-lg">
        <section class="section">
            <img src="../assets/img/path4.png" class="path">

        </section>
    </section>
    <section class="section section-lg">
        <img src="../assets/img/path4.png" class="path">
        <img src="../assets/img/path5.png" class="path2">
        <img src="../assets/img/path2.png" class="path3">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <h1 class="text-center">L'intérêt commun au centre du projet</h1>
                    <div class="row row-grid justify-content-center">
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-primary">
                                    <i class="tim-icons icon-money-coins"></i>
                                </div>
                                <h4 class="info-title">Réseau circulaire</h4>
                                <hr class="line-primary">
                                <p>Des centaines de lieux interconnectés afin de faciliter les échanges (café-concert, tiers lieux ou même d’artisans).</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-warning">
                                    <i class="tim-icons icon-chart-pie-36"></i>
                                </div>
                                <h4 class="info-title">Cashless</h4>
                                <hr class="line-warning">
                                <p>Paiement dématérialisé pour faciliter la gestion d’évènement.</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-success">
                                    <i class="tim-icons icon-single-02"></i>
                                </div>
                                <h4 class="info-title">Non Lucratif</h4>
                                <hr class="line-success">
                                <p>Les fonds générés par les évènements sont reversés dans le réseau culturel.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="row row-grid justify-content-center">
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-primary">
                                    <i class="tim-icons icon-money-coins"></i>
                                </div>
                                <h4 class="info-title">Monnaie locale</h4>
                                <hr class="line-primary">
                                <p>L’argent de votre carte convertie en monnaies locales pour favoriser la transition écologique (lien social, circuits-courts, définanciarisation).</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-warning">
                                    <i class="tim-icons icon-chart-pie-36"></i>
                                </div>
                                <h4 class="info-title">Open-Source</h4>
                                <hr class="line-warning">
                                <p>Nous croyons aux solutions et à la philosophie du logiciel libre. Tout notre code est publié sur Github. </p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="info">
                                <div class="icon icon-success">
                                    <i class="tim-icons icon-single-02"></i>
                                </div>
                                <h4 class="info-title">Transparence</h4>
                                <hr class="line-success">
                                <p>Anonymisation des données personnelles / donnée et code sont 100% ouvert.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-lg section-safe">
        <img src="../assets/img/path5.png" class="path">
        <div class="container">
            <div class="row row-grid justify-content-between">
                <div class="col-md-5">
                    <img src="../assets/img/chester-wade.jpg" class="img-fluid floating">
                    <div class="card card-stats bg-danger">
                        <div class="card-body">
                            <div class="justify-content-center">
                                <div class="numbers">
                                    <p class="card-title">100%</p>
                                    <p class="card-category text-white">Transparent</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-stats bg-info">
                        <div class="card-body">
                            <div class="justify-content-center">
                                <div class="numbers">
                                    <p class="card-title">573 K</p>
                                    <p class="card-category text-white">Utilisateurs</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-stats bg-default">
                        <div class="card-body">
                            <div class="justify-content-center">
                                <div class="numbers">
                                    <p class="card-title">10 425</p>
                                    <p class="card-category text-white">Partenaires</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="px-md-5">
                        <hr class="line-success">
                        <h3>Comment ça marche ?</h3>
                        <ul class="list-unstyled mt-5">
                            <li class="py-2">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-success mb-2">
                                        <i class="tim-icons icon-vector"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h6>Une carte unique qui vous permet de réserver vos places pour vos évènements préférés mais aussi de commander à manger ou à boire une fois sur place, et ceux, dans n’importe quel lieux partenaire.</h6>
                                    </div>
                                </div>
                            </li>
                            <li class="py-2">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-success mb-2">
                                        <i class="tim-icons icon-tap-02"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h6>Des adhésions et rechargements simples et rapides soit dans un lieu culturel du réseau, soit par vous-même directement en ligne.</h6>
                                    </div>
                                </div>
                            </li>
                            <li class="py-2">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-success mb-2">
                                        <i class="tim-icons icon-single-02"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h6>L'argent sur votre portefeuille cashless (votre carte) disponible à vie et remboursable à n'importe quel moment* </h6>
                                            <p>*Passé un an d’inactivité votre carte est remise à zéro</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-lg">
        <img src="../assets/img/path4.png" class="path">
        <img src="../assets/img/path2.png" class="path2">
        <div class="col-md-12">
            <div class="card card-chart card-plain">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <hr class="line-primary">
                            <h5 class="card-category">Les dates importantes</h5>
                            <h2 class="card-title">Progression de TiBillets</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="chartBig"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <section class="section section-lg">
        <section class="section">
            <img src="../assets/img/path4.png" class="path">
            <div class="container">
                <div class="row row-grid justify-content-between">
                    <div class="col-md-5 mt-lg-5">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12 px-2 py-2">
                                <div class="card card-stats ">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-5 col-md-4">
                                                <div class="icon-big text-center icon-warning">
                                                    <i class="tim-icons icon-trophy text-warning"></i>
                                                </div>
                                            </div>
                                            <div class="col-7 col-md-8">
                                                <div class="numbers">
                                                    <p class="card-title">3,237
                                                    <p>
                                                    <p class="card-category">Que</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 px-2 py-2">
                                <div class="card card-stats upper bg-default">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-5 col-md-4">
                                                <div class="icon-big text-center icon-warning">
                                                    <i class="tim-icons icon-coins text-white"></i>
                                                </div>
                                            </div>
                                            <div class="col-7 col-md-8">
                                                <div class="numbers">
                                                    <p class="card-title">3,653
                                                    <p>
                                                    <p class="card-category">faire</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-sm-12 px-2 py-2">
                                <div class="card card-stats ">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-5 col-md-4">
                                                <div class="icon-big text-center icon-warning">
                                                    <i class="tim-icons icon-gift-2 text-info"></i>
                                                </div>
                                            </div>
                                            <div class="col-7 col-md-8">
                                                <div class="numbers">
                                                    <p class="card-title">593
                                                    <p>
                                                    <p class="card-category">de ce</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12 px-2 py-2">
                                <div class="card card-stats ">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-5 col-md-4">
                                                <div class="icon-big text-center icon-warning">
                                                    <i class="tim-icons icon-credit-card text-success"></i>
                                                </div>
                                            </div>
                                            <div class="col-7 col-md-8">
                                                <div class="numbers">
                                                    <p class="card-title">10,783
                                                    <p>
                                                    <p class="card-category">dessin</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="pl-md-5">
                            <h1>En utilisant TiBillet :</h1>
                            <p>-Je soutien les acteurs locaux, les artistes et lieux culturels.</p>
                            <br/>
                            <p>-Je choisi la transparence sur l’utilisation de mes données.</p>
                            <br/>
                            <p>-Je simplifie ma consommation d’évènement culturel.</p>
                            <br/>
                            <p>-J’adhère à un modèle qui me ressemble (circuit court, monnaie locale, gouvernance horizontale et coopération).</p>
                            <br/>
                            <a href="#" class="font-weight-bold text-info mt-5">Pour en savoir plus   vers le wiki<i
                                    class="tim-icons icon-minimal-right text-info"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    </section>
    <section class="section section-lg section-coins">
        <img src="../assets/img/path3.png" class="path">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <hr class="line-info">
                    <h1>Choisissez
                        <span class="text-info">votre degré d'implication</span>
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="card card-coin card-plain">
                        <div class="card-header">
                            <img src="../assets/img/bitcoin.png" class="img-center img-fluid">
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h4 class="text-uppercase">Adhérent / Bénévole</h4>
                                    <span>Plan</span>
                                    <hr class="line-primary">
                                </div>
                            </div>
                            <div class="row">
                                <ul class="list-group">
                                    <li class="list-group-item">50 messages</li>
                                    <li class="list-group-item">100 emails</li>
                                    <li class="list-group-item">24/7 Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <button class="btn btn-primary btn-simple">Get plan</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-coin card-plain">
                        <div class="card-header">
                            <img src="../assets/img/etherum.png" class="img-center img-fluid">
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h4 class="text-uppercase">Partenaire</h4>
                                    <span>Plan</span>
                                    <hr class="line-success">
                                </div>
                            </div>
                            <div class="row">
                                <ul class="list-group">
                                    <li class="list-group-item">150 messages</li>
                                    <li class="list-group-item">1000 emails</li>
                                    <li class="list-group-item">24/7 Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <button class="btn btn-success btn-simple">Get plan</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-coin card-plain">
                        <div class="card-header">
                            <img src="../assets/img/ripp.png" class="img-center img-fluid">
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h4 class="text-uppercase">Client</h4>
                                    <span>Plan</span>
                                    <hr class="line-info">
                                </div>
                            </div>
                            <div class="row">
                                <ul class="list-group">
                                    <li class="list-group-item">350 messages</li>
                                    <li class="list-group-item">10K emails</li>
                                    <li class="list-group-item">24/7 Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <button class="btn btn-info btn-simple">Get plan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h1 class="title">BLK•</h1>
                </div>
                <div class="col-md-3">
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="../index.html" class="nav-link">
                                Home
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="../examples/landing-page.html" class="nav-link">
                                Landing
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="../examples/register-page.html" class="nav-link">
                                Register
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="../examples/profile-page.html" class="nav-link">
                                Profile
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="https://creative-tim.com/contact-us" class="nav-link">
                                Contact Us
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://creative-tim.com/about-us" class="nav-link">
                                About Us
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://creative-tim.com/blog" class="nav-link">
                                Blog
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://opensource.org/licenses/MIT" class="nav-link">
                                License
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3 class="title">Follow us:</h3>
                    <div class="btn-wrapper profile">
                        <a target="_blank" href="https://twitter.com/creativetim"
                           class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip"
                           data-original-title="Follow us">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a target="_blank" href="https://www.facebook.com/creativetim"
                           class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip"
                           data-original-title="Like us">
                            <i class="fab fa-facebook-square"></i>
                        </a>
                        <a target="_blank" href="https://dribbble.com/creativetim"
                           class="btn btn-icon btn-neutral  btn-round btn-simple" data-toggle="tooltip"
                           data-original-title="Follow us">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="../assets/js/plugins/moment.min.js"></script>
<script src="../assets/js/plugins/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Black Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<!-- Control Center for Black UI Kit: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/blk-design-system.min.js?v=1.0.0" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
        demo.initLandingPageChart();
    });
</script>
</body>

</html>
