<div class="intro-row" id="home">
    <script type="text/javascript">
        document.getElementById('home').style.height = document.documentElement.clientHeight;
    </script>
    <header>

        <nav>
            <a href="/">
                <div class="logo start-animation"></div>
            </a>
            <ul>
                @foreach(trans('translations.menu') as $menu)
                    <li class="start-animation"><a href="{{$menu['slug']}}">{{$menu['name']}}</a></li>
                @endforeach
            </ul>
        </nav>

        <div class="call">
            <a href="tel:{{\Config::get('business.phone.call')}}">
                <div class="icon-circle"><span></span></div>
                <p>@lang('translations.call') {{\Config::get('business.phone.display')}}</p>
            </a>
        </div>

    </header>

    <div class="cta-block">
        <h1 class="start-animation">
            @lang('translations.cta-home')
        </h1>

        <div class="button-row">
            <div class="find-out-more">
                <a href="@lang('translations.menu.about.slug')"> @lang('translations.find-out')<span></span></a>
            </div>
            <p class="divider">@lang('translations.or')</p>

            <div class="direct-contact">
                <a href="@lang('translations.menu.contact.slug')"> @lang('translations.direct-contact')<span></span></a>
            </div>
        </div>

    </div>
</div>