We invest in the world’s potential

Here at Flowbite we focus on markets where innovation can unlock long-term value and drive economic growth.

Customizable Categories

Host code that you don’t want to share with the world in private.

Private repos

Host code that you don’t want to share with the world in private.

Tracking Saving Rate

Host code that you don’t want to share with the world in private.

<?php
/**
 * Title: Hero section with search bar
 * Slug: hero-section-with-search-bar
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Hero section with search bar","categories":["featured"],"patternName":"wlc/hero-section-with-search-bar"},"align":"full","className":"hero-section-with-search-bar","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull hero-section-with-search-bar"><!-- wp:group {"className":"hero-section-with-search-bar__container","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__container"><!-- wp:columns {"align":"full","className":"hero-section-with-search-bar__columns"} -->
<div class="wp-block-columns alignfull hero-section-with-search-bar__columns"><!-- wp:column {"className":"hero-section-with-search-bar__content-column"} -->
<div class="wp-block-column hero-section-with-search-bar__content-column"><!-- wp:buttons {"className":"hero-section-with-search-bar__buttons"} -->
<div class="wp-block-buttons hero-section-with-search-bar__buttons"><!-- wp:button {"className":"hero-section-with-search-bar__button","icon":"chevron-right"} -->
<div class="wp-block-button hero-section-with-search-bar__button"><a class="wp-block-button__link wp-element-button"><strong>New</strong> Flowbite is out! See what's new</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":1,"className":"hero-section-with-search-bar__heading"} -->
<h1 class="wp-block-heading hero-section-with-search-bar__heading">We invest in the world’s potential</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"hero-section-with-search-bar__description"} -->
<p class="hero-section-with-search-bar__description">Here at Flowbite we focus on markets where innovation can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hero-section-with-search-bar__image-column"} -->
<div class="wp-block-column hero-section-with-search-bar__image-column"><!-- wp:image {"sizeSlug":"large","className":"hero-section-with-search-bar__image-light"} -->
<figure class="wp-block-image size-large hero-section-with-search-bar__image-light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/search-mockup.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","className":"hero-section-with-search-bar__image-dark"} -->
<figure class="wp-block-image size-large hero-section-with-search-bar__image-dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/search-mockup-dark.png" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"metadata":{"name":""},"align":"full","className":"hero-section-with-search-bar__info-container","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hero-section-with-search-bar__info-container"><!-- wp:group {"className":"hero-section-with-search-bar__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-box"><!-- wp:image {"sizeSlug":"large","align":"full","className":"hero-section-with-search-bar__info-image"} -->
<figure class="wp-block-image alignfull size-large hero-section-with-search-bar__info-image"><img src="data:image/svg+xml, %3Csvg class='w-6 h-6 mr-3 text-primary-600 dark:text-primary-500 shrink-0' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"hero-section-with-search-bar__info-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-content"><!-- wp:heading {"level":3,"className":"hero-section-with-search-bar__info-heading"} -->
<h3 class="wp-block-heading hero-section-with-search-bar__info-heading">Customizable Categories</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"hero-section-with-search-bar__info-description"} -->
<p class="hero-section-with-search-bar__info-description">Host code that you don't want to share with the world in private.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"hero-section-with-search-bar__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-box"><!-- wp:image {"sizeSlug":"large","align":"full","className":"hero-section-with-search-bar__info-image"} -->
<figure class="wp-block-image alignfull size-large hero-section-with-search-bar__info-image"><img src="data:image/svg+xml, %3Csvg class='w-6 h-6 mr-3 text-primary-600 dark:text-primary-500 shrink-0' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"hero-section-with-search-bar__info-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-content"><!-- wp:heading {"level":3,"className":"hero-section-with-search-bar__info-heading"} -->
<h3 class="wp-block-heading hero-section-with-search-bar__info-heading">Private repos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"hero-section-with-search-bar__info-description"} -->
<p class="hero-section-with-search-bar__info-description">Host code that you don't want to share with the world in private.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"hero-section-with-search-bar__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-box"><!-- wp:image {"sizeSlug":"large","align":"full","className":"hero-section-with-search-bar__info-image"} -->
<figure class="wp-block-image alignfull size-large hero-section-with-search-bar__info-image"><img src="data:image/svg+xml, %3Csvg class='w-6 h-6 mr-3 text-primary-600 dark:text-primary-500 shrink-0' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"hero-section-with-search-bar__info-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-search-bar__info-content"><!-- wp:heading {"level":3,"className":"hero-section-with-search-bar__info-heading"} -->
<h3 class="wp-block-heading hero-section-with-search-bar__info-heading">Tracking Saving Rate</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"hero-section-with-search-bar__info-description"} -->
<p class="hero-section-with-search-bar__info-description">Host code that you don't want to share with the world in private.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.hero-section-with-search-bar {
    @apply bg-white dark:bg-gray-900;
  
    .hero-section-with-search-bar__container {
      @apply max-w-screen-xl px-4 py-8 mx-auto lg:py-16;
  
      .hero-section-with-search-bar__columns {
        @apply grid items-center gap-8 mb-8 lg:mb-16 lg:gap-12 lg:grid-cols-12;
       
        .hero-section-with-search-bar__content-column {
          @apply col-span-6 text-center sm:mb-6 lg:text-left lg:mb-0; 
  
          .hero-section-with-search-bar__buttons {
            @apply inline-flex items-center justify-between;
            
            .hero-section-with-search-bar__button a{
              @apply px-1 py-1 pr-4 mb-6 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700;
              
              strong {
                @apply px-3 py-1 mr-3 text-xs text-white rounded-full bg-primary-600;
              }
  
              .wp-element-button {
                @apply text-sm font-medium;
              }
            }
          }
  
          .hero-section-with-search-bar__heading {
            @apply mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white;
          }
  
          .hero-section-with-search-bar__description {
            @apply max-w-xl mx-auto mb-6 font-light text-gray-500 lg:mx-0 xl:mb-8 md:text-lg xl:text-xl dark:text-gray-400;
          }
        }
  
        .hero-section-with-search-bar__image-column {
          @apply col-span-6;
  
          .hero-section-with-search-bar__image-light {
            @apply dark:hidden;
          }
  
          .hero-section-with-search-bar__image-dark {
            @apply hidden dark:block;
          }
        }
      }
  
      .hero-section-with-search-bar__info-container {
        @apply grid gap-8 sm:gap-12 md:grid-cols-3;
  
        .hero-section-with-search-bar__info-box {
          @apply flex justify-center;
  
          .hero-section-with-search-bar__info-image {
            @apply mr-3;
            img {
              @apply w-6 h-6 mr-3 text-primary-600 dark:text-primary-500 shrink-0;
            }
          }
  
          .hero-section-with-search-bar__info-content {
            .hero-section-with-search-bar__info-heading {
              @apply mb-1 text-lg font-semibold leading-tight text-gray-900 dark:text-white;
            }
  
            .hero-section-with-search-bar__info-description {
              @apply font-light text-gray-500 dark:text-gray-400;
            }
          }
        }
      }
    }
  }