@extends('frontend.layouts.app', ['page' => 'branches'])

@section('title')
Concepts | Grupo Alegria
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Concepts | Grupo Alegria" />
<meta property="og:url"             content="{{ url('branches') }}" />
<meta property="og:site_name"       content="Grupo Alegria" />
<meta property="og:image"           content="{{ asset('resources/web_thumbnail.jpg') }}" />
<meta property="og:thumbnail"       content="{{ asset('resources/web_thumbnail.jpg') }}" />
@endsection

@section('content')
  <div>
    <!-- Page Title -->
    <section class="page-title">
      <div class="page-title d-flex justify-content-between align-items-center mb-5">
        <div></div>
        <div class="d-flex align-items-center">
          <div class="dash"></div>
          <h3>CONCEPTS</h3>
        </div>
      </div>
    </section>
    <!-- End Page Title -->

    <!-- Page Content -->
    <div class="container-fluid">
      <!-- Page Text -->
      <div class="d-flex justify-content-between align-items-center">
        <div></div>
        <div class="d-flex align-items-center text-end">
          <h5>BRINGING LATIN ASIAN CUISINE NEAR YOU!</h5>
        </div>
      </div>
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div></div>
        <div>
          <h6 style="text-align: right; max-width: 950px">Our continued success since 2017 has
            emboldened us to expand into different concepts and different markets.</h6>
        </div>
      </div>
      <!-- End Page Text -->

      <!-- Branches -->
      <div class="row">
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('alegria-manila') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/a-mnl.png') }}" class="w-50 h-auto mob-mnl" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('alegria-singapore') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/a-sg.png') }}" class="w-50 h-auto mob-sg" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('buena-vida') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/b-vida.png') }}" class="w-75 h-auto mob-alegrita" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('cafe-alegria') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/c-aleg.png') }}" class="w-50 h-auto mob-alegrita" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('alegria-cantina') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/a-ctn.png') }}" class="w-75 h-auto mob-alegrita" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('alegria-ihola-chula') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/h-chl.png') }}" class="w-50 h-auto mob-hola" alt="img">
            </div>
          </a>
        </div>
        <div class="col-xl col-lg col-md-3 col-sm-6 p-1">
          <a href="{{ url('alegrita') }}">
            <div class="branches hover-gradient d-flex align-items-center justify-content-center">
              <img src="{{ asset('resources/branches/web-logo_branches/alegrita-branch.png') }}" class="w-75 h-auto mob-alegrita" alt="img">
            </div>
          </a>
        </div>
      </div>
      <!-- End Branches -->
    </div>
    <!-- End Page Content -->
  </div>

  <style>
  @media only screen and (max-width: 600px) {
      .mob-alegrita{
        width: 50% !important;
      }

      .mob-mnl{
        width: 23% !important;
      }

      .mob-sg {
      width: 36% !important;
    }

    .mob-hola {
      width: 30% !important;
    }
  }
  @media only screen and (max-width: 1200px) {
    footer{
      margin-top: 149px;
    }
    .branches {
      height: 114px;
      background-color: #080606;
    }
  }
  </style>
@endsection