@extends('provider_dashboard.layouts.master')

@section('content')
<main>
<section style="background-color: #006d77;" class="mb-5">
<div style="background-image: url('assets/img/wave.svg');    background-position: bottom;
    background-repeat: no-repeat;">
  <div class="container col-xxl-8 px-4  text-white">
    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
      <div class="col-10 col-sm-8 col-lg-6">
        <img src="assets/img/main_phone.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
      </div>
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
        <p class="lead">22 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system.</p>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
        <a href="#">         <img src="{{ asset('provider_dashboard/assets/img/apple-button.svg') }}"/>  </a>
        <a href="#">         <img src="{{ asset('provider_dashboard/assets/img/google-play.svg') }}"/>  </a>
        </div>
      </div>
    </div>
  </div>
</div>
</section>




  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container">

    <!-- Three columns of text below the carousel -->
    <div class="row py-5  ">
      <div class="col-lg-3">

        <h1 class="fw-normal"> How It Works</h1>
        <p>Ac sapien purus tristique neque nibh vitae faucibus non phasellus vulputate nulla in eget amet, risus</p>
       </div><!-- /.col-lg-4 -->
      <div class="col-lg-3">
        <img src="assets/img/icon-acquis.svg"/>
        <h2 class="fw-normal">Create Account </h2>
        <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-3">
        <img src="assets/img/icon-active.svg"/>
        <h2 class="fw-normal">Account Activation</h2>
        <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-3">
        <img src="assets/img/icon-retent.svg"/>
        <h2 class="fw-normal"> Service progress </h2>
        <p>And lastly this, the third column of representative placeholder content.</p>
        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->




  </div><!-- /.container -->


  <div class="container">


    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
        <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
      </div>
      <div class="col-md-5">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
      </div>
    </div>
  </div><!-- /.container -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

<section style="background-color: #f0efeb!important;">
  <div class="container col-xxl-8 px-4 py-5">
    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
      <div class="col-10 col-sm-8 col-lg-6">
        <img src="#" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
      </div>
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
        </div>
      </div>
    </div>
  </div>
</section>




    <hr class="featurette-divider">
  <div class="container">
    <div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
      </div>
      <div class="col-md-5 order-md-1">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
      </div>
    </div>
  </div><!-- /.container -->



  <div class="container">
    <!-- Three columns of text below the carousel -->
    <div class="row py-5  ">
      <div class="col-lg-4">

        <h1 class="fw-normal"> Access you account from Multi Device </h1>
       </div><!-- /.col-lg-4 -->
      <div class="col-lg-8">
    <div class="row  text-center">
      <div class="col-lg-6">
        <img src="assets/img/mobile.svg"/>
        <h2 class="fw-normal">Account Activation</h2>
        <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
       </div><!-- /.col-lg-4 -->
      <div class="col-lg-6">
        <img src="assets/img/tablet.svg"/>
        <h2 class="fw-normal"> Service progress </h2>
        <p>And lastly this, the third column of representative placeholder content.</p>
       </div><!-- /.col-lg-4 -->
      <div class="col-lg-6">
        <img src="assets/img/laptop.svg"/>
        <h2 class="fw-normal">Account Activation</h2>
        <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
       </div><!-- /.col-lg-4 -->
      <div class="col-lg-6">
        <img src="assets/img/pc.svg"/>
        <h2 class="fw-normal"> Service progress </h2>
        <p>And lastly this, the third column of representative placeholder content.</p>
       </div><!-- /.col-lg-4 -->
      </div><!-- /.col-lg-4 -->
      </div><!-- /.col-lg-4 -->

    </div><!-- /.row -->
  </div><!-- /.container -->




  <div class="container py-5">
    <div class="row align-items-md-stretch">

      <div class="col-md-4">
        <div class="h-100 p-5 border rounded-3" style="background-color: #dbece5!important;">
          <h2>Add borders</h2>
          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="h-100 p-5 border rounded-3" style="background-color: #d1ecfd!important;">
          <h2>Add borders</h2>
          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="h-100 p-5 border rounded-3" style="background-color: #fff3ea!important;">
          <h2>Add borders</h2>
          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
    </div>
    </div>


</main>


@endsection