@extends('layouts.welcome')
@section('hero')
<section class="hero-section" id="hero">

    <div class="wave">

      <svg width="100%" height="355px" viewBox="0 0 1920 355" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
            <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,757 L1017.15166,757 L0,757 L0,439.134243 Z" id="Path"></path>
          </g>
        </g>
      </svg>

    </div>

    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 hero-text-image">
          <div class="row">
            <div class="col-lg-8 text-center text-lg-start">
              <h1 data-aos="fade-right">Le meilleur de la <br class="d-sm-block d-md-none d-lg-block"> visio-conférence</h1>
              {{-- <p class="mb-5" data-aos="fade-right" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur
                adipisicing elit.</p> --}}
              <p data-aos="fade-right" data-aos-delay="200" data-aos-offset="-500"><a href="{{route('login')}}" class="btn btn-outline-white">Démarrer</a></p>
            </div>
            <div class="col-lg-4 iphone-wrap">
              {{-- <img src="{{asset('welcome/img/phone_1.png')}}" alt="Image" class="phone-1" data-aos="fade-right"> --}}
              <img src="{{asset('welcome/img/meetweb.png')}}" alt="Image" class="phone-2 w-100 m-r-15" data-aos="fade-right" data-aos-delay="200">
            </div>
          </div>
        </div>
      </div>
    </div>

  </section><!-- End Hero -->
@endsection
@section('main')
    <!-- ======= Home Section ======= -->
    <section class="section">
      <div class="container">

        <div class="row justify-content-center text-center mb-5">
          <div class="col-md-5" data-aos="fade-up">
            <h2 class="section-heading">Organisez vos réunions en toute simplicité</h2>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4" data-aos="fade-up" data-aos-delay="">
            <div class="feature-1 text-center">
              <div class="wrap-icon icon-1">
                <i class="bi bi-people"></i>
              </div>
              <h3 class="mb-3">Paramertrez vos réunions</h3>
              <p>Vous pouvez créer des réunions en y assignant un mot de passe. Seuls les détenteurs de ce mot de passe pourront y accéder.</p>
            </div>
          </div>
          <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
            <div class="feature-1 text-center">
              <div class="wrap-icon icon-1">
                <i class="bi bi-brightness-high"></i>
              </div>
              <h3 class="mb-3">Partagez votre lien avec votre public</h3>
              <p>Une fois la réunion créée, partagez le lien avec autant de personnes que vous voulez.</p>
            </div>
          </div>
          <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
            <div class="feature-1 text-center">
              <div class="wrap-icon icon-1">
                <i class="bi bi-bar-chart"></i>
              </div>
              <h3 class="mb-3">Contrôlez l'accès à la réunion</h3>
              <p>Seuls ceux que vous autoriserez pourront accéder à vos réunions.</p>
            </div>
          </div>
        </div>

      </div>
    </section>

    <section class="section">

      <div class="container">
        <div class="row justify-content-center text-center mb-5" data-aos="fade">
          <div class="col-md-6 mb-5">
            <img src="{{asset('welcome/img/undraw_svg_1.svg')}}" alt="Image" class="img-fluid">
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div class="step h-100">
              <span class="number">01</span>
              <h3>Inscrivez-vous</h3>
              <p>Remplissez le formulaire d'inscription pour vous inscrire.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="step h-100">
              <span class="number">02</span>
              <h3>Validez votre compte</h3>
              <p>Soumettez les informations complémentairres pour valider votre compte.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="step h-100">
              <span class="number">03</span>
              <h3>Profitez de nos services</h3>
              <p>Créez et administrez vos réunions comme vous le souhaitez.</p>
            </div>
          </div>
        </div>
      </div>

    </section>

    <section class="section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-4 me-auto">
            <h2 class="mb-4">Accès facile</h2>
            <h4 class="fw-lighter text-muted mb-4">Une interface facile d'utilisation pour vous permettre de gérer au mieux vos réunions</h4>
            <p><a href="{{route('features')}}" class="btn btn-primary">Voir plus</a></p>
          </div>
          <div class="col-md-6" data-aos="fade-left">
            <img src="{{asset('welcome/img/undraw_svg_2.svg')}}" alt="Image" class="img-fluid">
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-4 ms-auto order-2">
            <h2 class="mb-4">Contrôle total</h2>
            <h4 class="fw-lighter text-muted mb-4">En tant qu'hôte de réunion, vous disposez d'un controle total sur la réunion et ses participants</h4>
            <p><a href="{{route('features')}}" class="btn btn-primary">Voir plus</a></p>
          </div>
          <div class="col-md-6" data-aos="fade-right">
            <img src="{{asset('welcome/img/undraw_svg_3.svg')}}" alt="Image" class="img-fluid">
          </div>
        </div>
      </div>
    </section>

@endsection