@extends('layout')

@section('title')
  <title>The Heritage Maps</title>
@endsection

@section('content')
<section class="d-flex flex-column justify-content-center align-items-center text-center"
  style="
    min-height:100vh;
    background: url('{{ asset('assets/img/home_bg.jpeg') }}') center center / cover no-repeat;
  ">


<h1 style="
color: #fff;
-webkit-text-stroke: 1px black;
font-weight: 800;
font-family: 'Poppins', sans-serif;
font-size: clamp(2.5rem, 6vw, 5rem);
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
">
The Heritage Maps
</h1>


  <div class="container">
    <div class="row justify-content-center">
      <!-- 11/12 on xs, 10/12 on sm, 8/12 on md, 6/12 on lg -->
      <div class="col-11 col-sm-10 col-md-8 col-lg-6">
        <img src="{{ asset('assets/img/floorplan.jpg') }}" class="img-fluid mb-4 rounded-3"
     style="width:min(90vw, 800px); height:auto;" alt="Floor Plan">

      </div>
    </div>
  </div>

  <a href="{{ url('/home') }}" class="btn btn-primary btn-lg">Get Started</a>

</section>
@endsection