@extends('layouts.public')

@section('full_title', config('app.name').' - Get notified when the API changes')

@section('content')

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">

      <h1 class="display-3 animated fadeInDown mt-4"><span class="animated">Get notified when<br /> the API
          changes</span></h1>
      <p data-cypress-id="title" class="lead my-4">
        <strong>{{config('app.name')}}</strong> <strong>notifies you</strong> on Slack & Email when
        the
        structure<br /> or the datatype of the API response changes.
      </p>
      <p class="mx-auto text-center mt-3 d-none d-md-block d-lg-block">
        <a class="typeform-share button btn btn-highlight p-2 px-3 large btn-lg randomBtn"
          href="{{config('app.typeform_request_invite_url')}}" data-mode="popup" target="_blank">Request an Invite </a>
      </p>
      <p class="mx-auto text-center mt-3 ">
        <a class="typeform-share button btn btn-highlight p-2 px-6 large btn-lg randomBtn d-md-none d-lg-none"
          href="{{config('app.typeform_request_invite_url')}}" data-mode="popup" target="_blank">Request an Invite </a>
      </p>

    </div>
    <!-- <div class="col-md-4">

      <div style="width: 300px; height: 300px">
        <div class="mt-5"
          style="position: absolute; width: 280px; height: 280px; background: #2B303B; border-radius: 300px;"></div>
        <div class="mt-5"
          style="position: absolute; top: 30px; left: 30px;width: 300px; height: 300px; background: #ff2e63; border-radius: 300px;">
         
        </div>
      </div> 

    </div> -->
  </div>
  <div class="text-center mt-2">
    <img src="{{ asset('/images/apibeats-screenshot.png') }}" width="80%" style="border-radius: 5px 5px 0 0" />
  </div>

</div>

<div style="background-color: #7154D3" class="pt-4 text-center">
  <div class="container">
    <h1 class="display-4 animated text-white mt-4"><span class="animated">Realtime notifications on Slack</span><img
        src="{{ asset('/images/slack-logo.svg') }}" width="32" class="ml-3 mt-n1" /></h1>
    <p class="lead text-white text-bold">The backend and frontend shouldn’t fight.
      Spread love and be on the same page</p>
  </div>
  <div class="container">
    <img src="{{ asset('/images/slack-screenshot.png') }}" width="80%" style="border-radius: 5px 5px 0 0"
      class="mt-3" />
  </div>
</div>

<div class="container">
  <!-- <video autoplay loop muted playsinline width="100%" style="">
    <source src="/videos/intro-white.mp4" type="video/mp4"></video> -->
</div>
<div class="fixed-bottom col-12 justify-content-center animated fadeInDown policy" style="display:none;"
  id="privacy-policy-alert">
  <div role="alert" class="fade alert alert-info show"><span>By using
      this site you
      agree with
      our <a href="/privacy-policy" class="alert-info" target="_blank">Privacy Policy</a></span><a class="cross-btn"><i
        class="fa fa-times pl-2"></i></a></div>
</div>

@endsection

@section('body-script')
<script>
  (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() 
</script>
@endsection