@extends('layouts.app')

@section('content')

    <div class="background-image d-flex align-items-center"
         style=" width: 100% ; background-image: url('images/ahonline_largeBanner.jfif'); background-repeat: no-repeat; background-size: cover">
        <div class="container-fluid flex-row justify-content-center" style="margin-bottom: 100px">
            <div class="flex-row justify-content-center text-center">
                <div class="hero-section col-md-6" style="min-height: 300px">

                </div>
            </div>
        </div>
    </div>
    <section id="social-buttons">
        <div class="d-flex flex-row justify-content-around" style="margin-top: -50px">
            <div class="col-md-5 card"
                 style="border-right: #00ADE6 8px solid; min-height: 200px; margin: 0px -25px 0px 25px">
                <div class="row">
                    <div class="col-md-4"
                         style="min-height: 200px; background-image: url('images/koelwagen.png'); background-repeat: no-repeat; background-size: cover">

                    </div>
                    <div class="col-md-8 d-flex justify-content-end"
                         style="background-image: url('images/bestellen.svg');background-repeat: no-repeat; background-position-x: -20%; background-position-y: bottom; ">
                        <div class="flex-row">
                            <div class="d-flex justify-content-end">
                                <h3 style="margin: 30px 5px 0px 0px;"><b>Voordelig koelwagen huren?</b></h3>
                            </div>
                            <div class="d-flex justify-content-end">
                                <p style="margin: 10px 5px 0px 0px;">Voor elk feest de oplossing.</p>
                            </div>
                        </div>
                        <a style="margin-top:140px; position: absolute; padding: 10px;color: white; background-color: #00ADE6;"><b>Bestellen  <i class="fas fa-external-link-alt"></i></b></a>
                    </div>
                </div>
            </div>
            <div class="col-md-5 card"
                 style="border-left: #50D57C 8px solid; min-height: 200px; margin: 0px 25px 0px -25px">
                <div class="row">
                    <div class="col-md-8 d-flex justify-content-start" style="background-image: url('images/whatsapp.svg');background-repeat: no-repeat; background-position-x: 105%; background-position-y: bottom; background-size: 30%">
                        <div class="flex-row">
                            <a style="margin-top:140px; position: absolute; padding: 10px;color:white; background-color: #50D57C;"><b>WhatsApp  <i class="fas fa-external-link-alt"></i></b></a>
                            <div class="d-flex justify-content-start">

                                <h3 style="margin: 30px 0px 0px 5px;"><b>Vraag over een product?</b></h3>
                            </div>
                            <div class="d-flex justify-content-start">
                                <p style="margin: 10px 0px 0px 5px;">App ons en krijg snel antwoord.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"
                         style="min-height: 200px; background-image: url('images/whatsapp-2.jpg'); background-repeat: no-repeat; background-size: cover">

                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="" style="height: 100px">
    </div>
    @yield('news')
    <div class="" style="height: 100px">
    </div>
    @yield('near-by-news')
    <div class="" style="height: 100px">
    </div>
    @yield('about')
    <div class="" style="height: 100px">
    </div>
    @yield('social')
    <div class="" style="height: 100px">
    </div>
@endsection