<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>{% block title %}KYVALA POC HOME® <!--sup>&reg;</sup-->{% endblock %}</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
    {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{{asset('css/signin.css')}}" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
      <!-- Vendor CSS Files -->
      <link href="{{asset('Appland/assets/vendor/aos/aos.css')}}" rel="stylesheet">
      <link href="{{asset('Appland/assets/vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
      <link href="{{asset('Appland/assets/vendor/bootstrap-icons/bootstrap-icons.css')}}" rel="stylesheet">
      <link href="{{asset('Appland/assets/vendor/boxicons/css/boxicons.min.css')}}" rel="stylesheet">
      <link href="{{asset('Appland/assets/vendor/glightbox/css/glightbox.min.css')}}" rel="stylesheet">
      <link href="{{asset('Appland/assets/vendor/swiper/swiper-bundle.min.css')}}" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="{{asset('Appland/assets/css/style.css')}}" rel="stylesheet">
  <style>
  .pousserDroite{
    padding-left:50px;
  }
  </style>
    {% endblock %}
  <!-- =======================================================
  * Template Name: Appland - v4.10.0
  * Template URL: https://bootstrapmade.com/free-bootstrap-app-landing-page-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top  header-transparent ">
    <div class="container d-flex align-items-center justify-content-between">

      <div class="logo">
        <h1><a href="#">KYVALA POC</a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav id="navbar" class="navbar">
        <ul>
        {%if userName is not defined %}
          <li><a class="nav-link scrollto active" href="{{ path('app_homepage') }}">Home</a></li>
          <!--li><a class="getstarted scrollto" href="{{ path('app_person_new') }}">Pre enrollment</a></li>
          <li><a class="getstarted scrollto" href="{{ path('app_person_verify') }}">Check enrollment</a-->
          <li><a class="getstarted scrollto" href="{{ path('app_enroll') }}">Subscribe</a></li></li>
          <li><a class="getstarted scrollto" href="{{ path('app_login') }}">Sign in</a></li></li>
          {% endif%}
          <li class="dropdown"><a href="#"><span>Language</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">English</a></li>
              <li><a href="#">French</a></li>
            </ul>
          </li>
          {%if userName is defined %}
          <li><a class="getstarted scrollto" href="{{ path('app_login') }}">Sign out</a></li></li>
          {% endif%}
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex align-items-center">

    <div class="container">
      <div class="row">
        {% block body %}
        <div class="col-lg-6 d-lg-flex flex-lg-column justify-content-center align-items-stretch pt-5 pt-lg-0 order-2 order-lg-1" data-aos="fade-up">
          <div>
            <h1>DISCOVER THE KYVALA UNIVERSE </h1><br>
            <h2>Test your ability to protect yourself, both your resources and your personal data</h2>
            
            <a href="http://my.kyvala.com/uploads/TOKEN/TOKEN.apk" target=_blanc class="btn btn-outline-primary text-center">Download TOKEN APP</a>
            <!--a href="#" class="download-btn disabled"><i class="bx bxl-play-store"></i> Google Play</a>
            <a href="#" class="download-btn disabled"><i class="bx bxl-apple"></i> App Store</a-->
          </div>
        </div>
        <div class="col-lg-6 d-lg-flex flex-lg-column align-items-stretch order-1 order-lg-2 hero-img" data-aos="fade-up">
          <img src="{{asset('Appland/assets/img/hero-img.png') }}" class="img-fluid" alt="">
        </div>
        {% endblock %}
      </div>
    </div>

  </section><!-- End Hero -->


  <main id="main">
  {#
    <!-- ======= App Features Section ======= -->
    <section id="features" class="features">
      <div class="container">

        <div class="section-title">
          <h2>App Features</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row no-gutters">
          <div class="col-xl-7 d-flex align-items-stretch order-2 order-lg-1">
            <div class="content d-flex flex-column justify-content-center">
              <div class="row">
                <div class="col-md-6 icon-box" data-aos="fade-up">
                  <i class="bx bx-receipt"></i>
                  <h4>Corporis voluptates sit</h4>
                  <p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
                </div>
                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
                  <i class="bx bx-cube-alt"></i>
                  <h4>Ullamco laboris nisi</h4>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
                </div>
                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
                  <i class="bx bx-images"></i>
                  <h4>Labore consequatur</h4>
                  <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
                </div>
                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
                  <i class="bx bx-shield"></i>
                  <h4>Beatae veritatis</h4>
                  <p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
                </div>
                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
                  <i class="bx bx-atom"></i>
                  <h4>Molestiae dolor</h4>
                  <p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p>
                </div>
                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
                  <i class="bx bx-id-card"></i>
                  <h4>Explicabo consectetur</h4>
                  <p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p>
                </div>
              </div>
            </div>
          </div>
          <div class="image col-xl-5 d-flex align-items-stretch justify-content-center order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100">
            <img src="{{asset('Appland/assets/img/features.svg' ) }}" class="img-fluid" alt="">
          </div>
        </div>

      </div>
    </section><!-- End App Features Section -->
#}
    <!-- ======= Details Section ======= -->
    <section id="details" class="details">
      <div class="container">

        <div class="row content">
          <div class="col-md-4" data-aos="fade-right">
            <img src="{{asset('Appland/assets/img/details-1.png') }}" class="img-fluid" alt="">
          </div>
          <div class="col-md-8 pt-4" data-aos="fade-up">
            <h3>1.	Creating an account on KYVALA POC</h3><br><br>
            <p class="pousserDroite">
              First, I click on “I don’t have an account” then I complete the form offered to me
            </p>
            <ul>
              <li class="pousserDroite"><i class="bi bi-check"></i> I fill in my title, surname, first name, organization name, phone number and email address.</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> I choose a login and password that I confirm.</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> I receive an e-mail confirming the creation of my KYVALA POC account.</li>
            </ul>
            <!--p>
              Voluptas nisi in quia excepturi nihil voluptas nam et ut. Expedita omnis eum consequatur non. Sed in asperiores aut repellendus. Error quisquam ab maiores. Quibusdam sit in officia
            </p-->
          </div>
        </div>

        <div class="row content">
          <div class="col-md-4 order-1 order-md-2" data-aos="fade-left">
            <!!--img src="{{asset('Appland/assets/img/details-2.png') }}" class="img-fluid" alt=""-->
            <img src="http://my.kyvala.com/uploads/TOKEN/token.png" class="img-fluid" alt="">
          </div>
          <div class="col-md-8 pt-5 order-2 order-md-1" data-aos="fade-up">
            <h3>2. To download the TOKEN mobile Apps</h3><br><br>
            <!--p class="fst-italic"-->
            <ul>
              <li class="pousserDroite"><i class="bi bi-check"></i>I scan the TOKEN Apps download qr code with my phone ...</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i>I take care to authorise application downloads from unknown sources</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i>I click on Install</li><br>
            </ul>
            <p class="pousserDroite"></p><br>
            <a href="http://my.kyvala.com/uploads/TOKEN/TOKEN.apk" target=_blanc class="pousserDroite btn btn-outline-primary text-center">Download TOKEN APP</a>
          </div>
        </div>

        <div class="row content">
          <div class="col-md-5" data-aos="fade-right">
            <!--img src="{{asset('Appland/assets/img/details-3.png') }}" class="img-fluid" alt=""-->
            <img src="http://my.kyvala.com/uploads/TOKEN/token-enrollement.png" class="img-fluid" alt="">
          </div>
          <div class="col-md-7 pt-5" data-aos="fade-up">
            <h3>3. To create TOKEN account </h3><br><br>
            <p class="pousserDroite">I click on the TOKEN icon to open the application. I click on "I don't have an account".I complete the registration form </p>
            <ul>
              <li class="pousserDroite"><i class="bi bi-check"></i><b>Personal information </b> : I fill in: title, surname, first name, date of birth, place of birth, country of birth, nationality, telephone number, country of residence, town of residence, email address, phone number, then I click on "next"</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> <b>Identity information </b> : I specify the type of identity document I'm going to use; then I fill in the document number, date of issue, expiry date, extension date if applicable, front photo, back photo,  then I click on "next"</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> <b>Biometric information </b> : By following all the instructions, I capture my face to take an identity selfie. I capture the fingerprints of the 5 fingers on my left hand and then those of my right hand, then I click on "next"</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> <b>signature </b> : I choose a 06-digit pin code, add my signature. Then I click on "validate".</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> <b></b> I will receive an e-mail confirming the creation of my TOKEN account.</li>
            </ul>
            <!--p>
              Qui consequatur temporibus. Enim et corporis sit sunt harum praesentium suscipit ut voluptatem. Et nihil magni debitis consequatur est.
            </p>
            <p>
              Suscipit enim et. Ut optio esse quidem quam reiciendis esse odit excepturi. Vel dolores rerum soluta explicabo vel fugiat eum non.
            </p-->
          </div>
        </div>
        
        <div class="row content">
          <div class="col-md-4 order-1 order-md-2" data-aos="fade-left">
            <!--img src="{{asset('Appland/assets/img/details-4.png') }}" class="img-fluid" alt=""-->
            <img src="http://my.kyvala.com/uploads/TOKEN/token-connexion-ltst.png" class="img-fluid" alt="">
          </div>
          <div class="col-md-8 pt-5 order-2 order-md-1" data-aos="fade-up">
            <h3>4.	To activate my TOKEN account</h3><br><br>
            <p class="pousserDroite">
             I click on the TOKEN icon to open the application<br>
            </p>
            <!--p>
              Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
              culpa qui officia deserunt mollit anim id est laborum
            </p-->
            <ul>
              <li class="pousserDroite"><i class="bi bi-check"></i> I identify myself by entering my telephone number or email address. I click on « next » </li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> I enter my pin code and confirm.</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> If the information entered is correct, I am immediately redirected to the TOKEN home window.</li>
            </ul>
          </div>
        </div>
        
        <div class="row content">
          <div class="col-md-4" data-aos="fade-right">
            <img src="{{asset('Appland/assets/img/details-3.png') }}" class="img-fluid" alt="">
            <!--img src="http://my.kyvala.com/uploads/TOKEN/kyvala-poc-landing.png" class="img-fluid" alt=""-->
          </div>
          <div class="col-md-8 pt-5" data-aos="fade-up">
            <h3>5.	To access my KYVALA POC account </h3><br><br>
            <p class="pousserDroite">I open a browser and go to <a href="#">my.kyvala.com</a> and follow the following steps :</p>
            <ul>
              <li class="pousserDroite"><i class="bi bi-check"></i>I log in with my login and password. I am directed to the KYVALA POC security page, which gives me the information I need to successfully complete my connection request.</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i>I receive a confirmation request on my phone. I am asked to identify myself formally if I am the one who initiated the connection request </li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i> I confirm the biometric procedure within the time allowed and I can safely access my private area in KYVALA POC</li><br>
              <li class="pousserDroite"><i class="bi bi-check"></i>And if my account need multi-validation? In this case, the second signer and/or the other people who need to co-validate are notified of my intention to access the shared space and I wait for each of these people to agree to my request..</li>
            </ul>
            <!--p>
              Qui consequatur temporibus. Enim et corporis sit sunt harum praesentium suscipit ut voluptatem. Et nihil magni debitis consequatur est.
            </p>
            <p>
              Suscipit enim et. Ut optio esse quidem quam reiciendis esse odit excepturi. Vel dolores rerum soluta explicabo vel fugiat eum non.
            </p-->
          </div>
        </div>

      </div>
    </section><!-- End Details Section -->
{#
    <!-- ======= Gallery Section ======= -->
    <section id="gallery" class="gallery">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Gallery</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

      </div>

      <div class="container-fluid" data-aos="fade-up">
        <div class="gallery-slider swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-1.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-1.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-2.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-2.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-3.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-3.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-4.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-4.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-5.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-5.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-6.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-6.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-7.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-7.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-8.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-8.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-9.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-9.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-10.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-10.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-11.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-11.png') }}" class="img-fluid" alt=""></a></div>
            <div class="swiper-slide"><a href="{{asset('Appland/assets/img/gallery/gallery-12.png') }}" class="gallery-lightbox" data-gall="gallery-carousel"><img src="{{asset('Appland/assets/img/gallery/gallery-12.png') }}" class="img-fluid" alt=""></a></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>

      </div>
    </section><!-- End Gallery Section -->

    <!-- ======= Testimonials Section ======= -->
    <section id="testimonials" class="testimonials section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Testimonials</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
          <div class="swiper-wrapper">

            <div class="swiper-slide">
              <div class="testimonial-item">
                <img src="{{asset('Appland/assets/img/testimonials/testimonials-1.jpg') }}" class="testimonial-img" alt="">
                <h3>Saul Goodman</h3>
                <h4>Ceo &amp; Founder</h4>
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="testimonial-item">
                <img src="{{asset('Appland/assets/img/testimonials/testimonials-2.jpg') }}" class="testimonial-img" alt="">
                <h3>Sara Wilsson</h3>
                <h4>Designer</h4>
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="testimonial-item">
                <img src="{{asset('Appland/assets/img/testimonials/testimonials-3.jpg') }}" class="testimonial-img" alt="">
                <h3>Jena Karlis</h3>
                <h4>Store Owner</h4>
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="testimonial-item">
                <img src="{{asset('Appland/assets/img/testimonials/testimonials-4.jpg') }}" class="testimonial-img" alt="">
                <h3>Matt Brandon</h3>
                <h4>Freelancer</h4>
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="testimonial-item">
                <img src="{{asset('Appland/assets/img/testimonials/testimonials-5.jpg') }}" class="testimonial-img" alt="">
                <h3>John Larson</h3>
                <h4>Entrepreneur</h4>
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
              </div>
            </div>

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

      </div>
    </section><!-- End Testimonials Section -->

    <!-- ======= Pricing Section ======= -->
    <section id="pricing" class="pricing">
      <div class="container">

        <div class="section-title">
          <h2>Pricing</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="row no-gutters">

          <div class="col-lg-4 box" data-aos="fade-right">
            <h3>Free</h3>
            <h4>$0<span>per month</span></h4>
            <ul>
              <li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
              <li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
              <li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
              <li class="na"><i class="bx bx-x"></i> <span>Pharetra massa massa ultricies</span></li>
              <li class="na"><i class="bx bx-x"></i> <span>Massa ultricies mi quis hendrerit</span></li>
            </ul>
            <a href="#" class="get-started-btn">Get Started</a>
          </div>

          <div class="col-lg-4 box featured" data-aos="fade-up">
            <h3>Business</h3>
            <h4>$29<span>per month</span></h4>
            <ul>
              <li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
              <li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
              <li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
              <li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
              <li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
            </ul>
            <a href="#" class="get-started-btn">Get Started</a>
          </div>

          <div class="col-lg-4 box" data-aos="fade-left">
            <h3>Developer</h3>
            <h4>$49<span>per month</span></h4>
            <ul>
              <li><i class="bx bx-check"></i> Quam adipiscing vitae proin</li>
              <li><i class="bx bx-check"></i> Nec feugiat nisl pretium</li>
              <li><i class="bx bx-check"></i> Nulla at volutpat diam uteera</li>
              <li><i class="bx bx-check"></i> Pharetra massa massa ultricies</li>
              <li><i class="bx bx-check"></i> Massa ultricies mi quis hendrerit</li>
            </ul>
            <a href="#" class="get-started-btn">Get Started</a>
          </div>

        </div>

      </div>
    </section><!-- End Pricing Section -->

    <!-- ======= Frequently Asked Questions Section ======= -->
    <section id="faq" class="faq section-bg">
      <div class="container" data-aos="fade-up">

        <div class="section-title">

          <h2>Frequently Asked Questions</h2>
          <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
        </div>

        <div class="accordion-list">
          <ul>
            <li data-aos="fade-up">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-1">Non consectetur a erat nam at lectus urna duis? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-1" class="collapse show" data-bs-parent=".accordion-list">
                <p>
                  Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="100">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#accordion-list-2" class="collapsed">Feugiat scelerisque varius morbi enim nunc? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="200">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#accordion-list-3" class="collapsed">Dolor sit amet consectetur adipiscing elit? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="300">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#accordion-list-4" class="collapsed">Tempus quam pellentesque nec nam aliquam sem et tortor consequat? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-4" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in.
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="400">
              <i class="bx bx-help-circle icon-help"></i> <a data-bs-toggle="collapse" data-bs-target="#accordion-list-5" class="collapsed">Tortor vitae purus faucibus ornare. Varius vel pharetra vel turpis nunc eget lorem dolor? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-5" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu scelerisque.
                </p>
              </div>
            </li>

          </ul>
        </div>

      </div>
    </section>
    <!-- End Frequently Asked Questions Section -->
#}
    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Contact</h2><br>
                <p>Our team of professionals is at your disposal for all your requests for information.</p><br>
            </div>
            <div class="row">
                <div class="col-lg-6">
                <div class="row">
                  <div class="col-lg-6 info">
                    <i class="bx bx-map"></i>
                    <h4>Address</h4>
                    <p>128, City Road, <br>London. EC1 V, 2NX, UNITED KINGDOM<br></p>
                  </div>
                  <div class="col-lg-6 info">
                    <i class="bx bx-phone"></i>
                    <h4>Call Us</h4>
                    <p>00237 24770782</p>
                  </div>
                  <div class="col-lg-6 info">
                    <i class="bx bx-envelope"></i>
                    <h4>Email Us</h4>
                    <p>info@kyvalaid.com </p>
                    <p>contact@kyvalaid.com </p>
                  </div>
                  <div class="col-lg-6 info">
                    <i class="bx bx-time-five"></i>
                    <h4>Working Hours</h4>
                    <p>Mon - Fri: 8.30AM to 5.30PM</p>
                  </div>
                </div>
                </div>

                <div class="col-lg-6">
                <form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-up">
                  <div class="form-group">
                    <input placeholder="Your Name" type="text" name="name" class="form-control" id="name" required>
                  </div>
                  <div class="form-group mt-3">
                    <input placeholder="Your Email" type="email" class="form-control" name="email" id="email" required>
                  </div>
                  <div class="form-group mt-3">
                    <input placeholder="Subject" type="text" class="form-control" name="subject" id="subject" required>
                  </div>
                  <div class="form-group mt-3">
                    <textarea placeholder="Message" class="form-control" name="message" rows="5" required></textarea>
                  </div>
                  <div class="my-3">
                    <div class="loading">Loading</div>
                    <div class="error-message"></div>
                    <div class="sent-message">Your message has been sent. Thank you!</div>
                  </div>
                  <div class="text-center"><button type="submit">Send Message</button></div>
                </form>
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact Section -->

  </main><!-- End #main -->
{#
  <!-- ======= Footer ======= -->
  <footer id="footer">

    <div class="footer-newsletter">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-6">
            <h4>Join Our Newsletter</h4>
            <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
            <form action="" method="post">
              <input type="email" name="email"><input type="submit" value="Subscribe">
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col-lg-3 col-md-6 footer-contact">
            <h3>Appland</h3>
            <p>
              A108 Adam Street <br>
              New York, NY 535022<br>
              United States <br><br>
              <strong>Phone:</strong> +1 5589 55488 55<br>
              <strong>Email:</strong> info@example.com<br>
            </p>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Social Networks</h4>
            <p>Cras fermentum odio eu feugiat lide par naso tierra videa magna derita valies</p>
            <div class="social-links mt-3">
              <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
              <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
              <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
              <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
              <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            </div>
          </div>

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

    <div class="container py-4">
      <div class="copyright">
        &copy; Copyright <strong><span>KYVALA POC</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-bootstrap-app-landing-page-template/ -->
        Designed by <a href="https://amla-groupe.com/">AMLAMETRICS</a>
      </div>
    </div>
  </footer><!-- End Footer -->
  #}
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        <script>
        $(document).ready( function () {
          $('#myTable').DataTable( {
              "paging": true,
              "searching": true,
              "ordering": true,
              "info": true
          } );
        } );
       
        </script>
  <!-- Vendor JS Files -->
  <script src="{{asset('Appland/assets/vendor/aos/aos.js')}}"></script>
  <script src="{{asset('Appland/assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
  <script src="{{asset('Appland/assets/vendor/glightbox/js/glightbox.min.js')}}"></script>
  <script src="{{asset('Appland/assets/vendor/swiper/swiper-bundle.min.js')}}"></script>
  <script src="{{asset('Appland/assets/vendor/php-email-form/validate.js')}}"></script>

  <!-- Template Main JS File -->
  <script src="{{asset('Appland/assets/js/main.js')}}"></script>
    {% endblock %}
</body>

</html>