@extends('layouts.app')

@section('title','Creating the third workspace. Join today')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Creating the third workspace. Join today">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="Reef is an employee wellbeing perk, creating third workspaces in hospitality spaces across the UK. Sign up today to receive your 7 day trial.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Creating the third workspace. Join today">
  <meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <meta property="og:image:width" content="600"/>
  <meta property="og:image:height" content="315"/>

 <meta name="description" content="Reef is an employee wellbeing perk, creating third workspaces in hospitality spaces across the UK. Sign up today to receive your 7 day trial.">
@endsection

@section('content')
<header class="fixed down">
    <div class="container-fluid wider-1 h-100 position-relative">
        
        <div class="d-flex h-100 justify-content-start justify-content-lg-between align-items-end align-items-lg-center flex-wrap flex-lg-row">
            <div class="social text-start">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item align-middle" >
                        <a href="https://www.facebook.com/thirdworkspace"  target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19.003" height="19.003" viewBox="0 0 19.003 19.003">
                                <path d="M18.407,1.928H5.738A3.167,3.167,0,0,0,2.571,5.1V17.763a3.167,3.167,0,0,0,3.167,3.167h6.335V12.617H9.7V10.242h2.375V8.46a2.969,2.969,0,0,1,2.969-2.969h2.969V7.866H15.041a.594.594,0,0,0-.594.594v1.782h3.266l-.594,2.375H14.448v8.314h3.959a3.167,3.167,0,0,0,3.167-3.167V5.1a3.167,3.167,0,0,0-3.167-3.168Z" transform="translate(-2.571 -1.928)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>

                    <li class="list-inline-item align-middle">
                        <a href="https://instagram.com/thirdworkspace"  target="_blank">
                            <svg id="Icon_ionic-logo-instagram" data-name="Icon ionic-logo-instagram" xmlns="http://www.w3.org/2000/svg" width="19.632" height="19.632" viewBox="0 0 16.632 16.632">
                                <path d="M16.281,5.886a3.475,3.475,0,0,1,3.465,3.465v6.93a3.475,3.475,0,0,1-3.465,3.465H9.351a3.475,3.475,0,0,1-3.465-3.465V9.351A3.475,3.475,0,0,1,9.351,5.886h6.93m0-1.386H9.351A4.865,4.865,0,0,0,4.5,9.351v6.93a4.865,4.865,0,0,0,4.851,4.851h6.93a4.865,4.865,0,0,0,4.851-4.851V9.351A4.865,4.865,0,0,0,16.281,4.5Z" transform="translate(-4.5 -4.5)" fill="#17202a"/>
                                <path d="M24.665,11.079a1.04,1.04,0,1,1,1.04-1.04A1.037,1.037,0,0,1,24.665,11.079Z" transform="translate(-11.844 -6.228)" fill="#17202a"/>
                                <path d="M15.408,12.636a2.772,2.772,0,1,1-2.772,2.772,2.775,2.775,0,0,1,2.772-2.772m0-1.386a4.158,4.158,0,1,0,4.158,4.158,4.159,4.159,0,0,0-4.158-4.158Z" transform="translate(-7.092 -7.092)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>

                    <li class="list-inline-item align-middle">
                        <a href="https://www.linkedin.com/company/thethirdworkspace"  target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19.404" height="19.404" viewBox="0 0 19.404 19.404">
                                <path d="M18.018,2.25H1.382A1.392,1.392,0,0,0,0,3.649V20.255a1.392,1.392,0,0,0,1.382,1.4H18.018a1.4,1.4,0,0,0,1.386-1.4V3.649A1.4,1.4,0,0,0,18.018,2.25ZM5.865,18.882H2.989V9.622h2.88v9.26ZM4.427,8.357A1.668,1.668,0,1,1,6.094,6.69,1.668,1.668,0,0,1,4.427,8.357ZM16.645,18.882H13.769v-4.5c0-1.074-.022-2.456-1.494-2.456-1.5,0-1.728,1.169-1.728,2.378v4.583H7.671V9.622H10.43v1.265h.039a3.029,3.029,0,0,1,2.724-1.494c2.911,0,3.452,1.919,3.452,4.414Z" transform="translate(0 -2.25)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="navigation text-left">
                <div class="menu d-block d-lg-flex align-items-center justify-content-center">
                    <nav class="navbar navbar-expand-lg ms-auto">
                        <button class="d-block d-lg-none hamburger hamburger--collapse" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav ml-auto align-items-center">
                                <li class="nav-item">
                                    <a href="{{route('contact')}}" class="nav-link @if(Route::is('contact')) active @endif">Contact</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{route('blog')}}" class="nav-link  @if(Route::is('blog')) active @endif">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{route('venue_map')}}" class="nav-link @if(Route::is('venue_map')) active @endif">Map</a>
                                </li>
                                <li class="nav-item">                                   
                                    <a href="{{route('venues')}}" class="nav-link @if(Route::is('venue_map')) active @endif">Become a host</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>                
    </div>
</header>

<section class="float-logo-block">
    <div class="container-fluid">
        <div class="d-flex flex-row flex-wrap justify-content-between align-items-center">
            <a href="{{route('index')}}" class="d-inline-block"><img src="{{asset('images/reef-logo.png')}}" alt="Reef Logo White"></a>
            <a href="{{route('login')}}" class="btn new-green">LOGIN TO PORTAL</a>
        </div>
    </div>
</section>
<section class="top-text-landing">
    <div class="container-fluid h-100">
        <div class="d-flex h-100 flex-row flex-wrap align-items-center">
            <h1>Reef is an app showcasing laptop-friendly venues with exclusive offers, inc. free hot drinks, where you can work effectively from.</h1>
        </div>
    </div>
</section>


<section class="two-block-images d-flex flex-row flex-wrap">
    <div class="single" style="background-image: url('{{asset('images/reef-for-teams.webp')}}');">
        <div class="d-flex h-100 align-items-center justify-content-center bigger-z-index">
            <div class="text-center w-100 px-4 px-md-0">
                <h2 class="mb-0 text-start"><span>For </span>Teams</h2>
            </div>
        </div>
        <a href="{{route('teams')}}" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
    </div>

    <div class="single" style="background-image: url('{{asset('images/reef-for-individuals.webp')}}');">
        <div class="d-flex h-100 align-items-center justify-content-center bigger-z-index">
            <div class="text-center w-100 px-4 px-md-0">
                <h2 class="mb-0 text-start"><span>For </span>Individuals</h2>
            </div>
        </div>
        <a href="{{route('individuals')}}" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
    </div>
    <div class="single" style="background-image: url('{{asset('images/spaces-bg.webp')}}');">
        <div class="d-flex h-100 align-items-center justify-content-center bigger-z-index">
            <div class="text-center w-100 px-4 px-md-0">
                <h2 class="mb-0 text-start"><span>For </span>Spaces</h2>
            </div>
        </div>
        <a href="{{route('venues')}}" class="stretched-link"><span class="visually-hidden">Open Link Here</span></a>
    </div>
</section>


@endsection