<?php
/**
 * Title: Search bar with datepicker
 * Slug: search-bar-with-datepicker
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Search bar with datepicker"},"align":"full","className":"search-bar-with-datepicker","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull search-bar-with-datepicker"><!-- wp:group {"align":"full","className":"search-bar-with-datepicker__container","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull search-bar-with-datepicker__container"><!-- wp:group {"align":"full","className":"search-bar-with-datepicker__content","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignfull search-bar-with-datepicker__content"><!-- wp:heading {"level":1,"className":"search-bar-with-datepicker__title"} -->
<h1 class="wp-block-heading search-bar-with-datepicker__title">Every home is a destination</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"search-bar-with-datepicker__description"} -->
<p class="search-bar-with-datepicker__description">The best of Luxury Retreats is now Flowbite Luxe—offering the world's most extraordinary homes with the highest standard of service.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"search-bar-with-datepicker__buttons"} -->
<div class="wp-block-buttons search-bar-with-datepicker__buttons"><!-- wp:button {"className":"search-bar-with-datepicker__button"} -->
<div class="wp-block-button search-bar-with-datepicker__button"><a class="wp-block-button__link wp-element-button"> Sign In / Register</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.search-bar-with-datepicker {
    background-image: url('https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/coast-house-view.jpg');
    @apply bg-no-repeat bg-cover bg-center bg-gray-700 bg-blend-multiply;
  
    .search-bar-with-datepicker__container {
        @apply relative py-8 px-4 mx-auto max-w-screen-xl text-white lg:py-16 xl:px-0;
  
      .search-bar-with-datepicker__content {
        @apply mb-6 max-w-screen-md lg:mb-0 mx-0;
  
        .search-bar-with-datepicker__title {
          @apply mb-4 text-4xl font-extrabold tracking-tight leading-tight text-white md:text-5xl lg:text-6xl;
        }
  
        .search-bar-with-datepicker__description {
          @apply mb-6 font-light text-gray-300 lg:mb-8 md:text-lg lg:text-xl;
        }
  
        .search-bar-with-datepicker__buttons {
          .search-bar-with-datepicker__button {
            a {
              @apply inline-flex items-center py-3 px-5 font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-900 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
            }
          }
        }
      }
    }
  }