We invest in the world’s potential
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
FEATURED IN
<?php
/**
* Title: Default hero section
* Slug: default-hero-section
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Default hero section"},"align":"full","className":"default-hero-section","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull default-hero-section"><!-- wp:group {"className":"default-hero-section__container","layout":{"type":"constrained"}} -->
<div class="wp-block-group default-hero-section__container"><!-- wp:buttons {"className":"default-hero-section__buttons","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons default-hero-section__buttons"><!-- wp:button {"className":"default-hero-section__button","icon":"chevron-right"} -->
<div class="wp-block-button default-hero-section__button"><a class="wp-block-button__link wp-element-button"><div class="default-hero-section__button-text">New</div> Flowbite is out! See what's new</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:heading {"textAlign":"center","level":1,"className":"wp-block-heading default-hero-section__heading"} -->
<h1 class="wp-block-heading has-text-align-center default-hero-section__heading">We invest in the world’s potential</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"default-hero-section__description"} -->
<p class="has-text-align-center default-hero-section__description">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"default-hero-section__cta","layout":{"type":"constrained"}} -->
<div class="wp-block-group default-hero-section__cta"><!-- wp:buttons {"className":"default-hero-section__buttons","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons default-hero-section__buttons"><!-- wp:button {"className":"default-hero-section__button default-hero-section__button\u002d\u002dprimary","icon":"arrow-right"} -->
<div class="wp-block-button default-hero-section__button default-hero-section__button--primary"><a class="wp-block-button__link wp-element-button" href="#">Learn more</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"default-hero-section__button default-hero-section__button\u002d\u002dsecondary"} -->
<div class="wp-block-button default-hero-section__button default-hero-section__button--secondary"><a class="wp-block-button__link wp-element-button" href="#"><div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5.5a2.75 2.75 0 0 0-2.75 2.75v7.5A2.75 2.75 0 0 0 5 18.5h8.5a2.75 2.75 0 0 0 2.75-2.75v-1.594l3.419 3.045c.805.717 2.081.145 2.081-.934V7.365c0-1.08-1.276-1.651-2.081-.934L16.25 9.476V8.25A2.75 2.75 0 0 0 13.5 5.5z"></path></svg></div> Watch video</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"default-hero-section__brands","layout":{"type":"constrained"}} -->
<div class="wp-block-group default-hero-section__brands"><!-- wp:paragraph {"className":"default-hero-section__brands-title"} -->
<p class="default-hero-section__brands-title">FEATURED IN</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"default-hero-section__brands-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group default-hero-section__brands-content"><!-- wp:image {"lightbox":{"enabled":false},"scale":"cover","sizeSlug":"large","linkDestination":"custom","className":"default-hero-section__brand"} -->
<figure class="wp-block-image size-large default-hero-section__brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt="" style="object-fit:cover"/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"default-hero-section__brand"} -->
<figure class="wp-block-image size-large default-hero-section__brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"default-hero-section__brand"} -->
<figure class="wp-block-image size-large default-hero-section__brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->
.default-hero-section {
@apply bg-white dark:bg-gray-900;
.default-hero-section__container {
@apply py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12;
}
.default-hero-section__buttons {
@apply flex justify-center mb-7;
}
.default-hero-section__button {
a {
@apply inline-flex justify-between items-center py-1 px-1 pr-4 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;
}
.default-hero-section__button-text {
@apply text-xs bg-primary-600 rounded-full text-white px-4 py-1.5 mr-3;
}
}
.default-hero-section__heading {
@apply mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white;
}
.default-hero-section__description {
@apply mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400;
}
.default-hero-section__cta {
@apply mb-8 lg:mb-16;
.default-hero-section__buttons {
@apply flex flex-col w-full space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4;
.default-hero-section__button {
@apply w-full sm:w-auto;
a {
@apply w-full justify-center;
}
}
}
}
.default-hero-section__button--primary a {
@apply inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-800 dark:hover:bg-primary-900 dark:focus:ring-primary-900;
}
.default-hero-section__button--secondary a {
@apply inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800;
}
.default-hero-section__brands {
@apply px-4 mx-auto text-center md:max-w-screen-md lg:max-w-screen-lg lg:px-36;
.default-hero-section__brands-title {
@apply font-semibold text-gray-400 uppercase;
}
.default-hero-section__brands-content {
@apply flex flex-wrap justify-center items-center mt-8 text-gray-500 sm:justify-between;
}
.default-hero-section__brand {
@apply mr-5 mb-5 lg:mb-0;
a {
@apply inline-block text-gray-500 hover:text-gray-800;
}
img {
@apply mx-auto;
transition: all 0.3s ease;
opacity: 0.6;
}
a:hover img {
opacity: 1;
}
}
}
}
.dark .default-hero-section__brand img {
filter: invert(0.7) brightness(1.2);
opacity: 0.7;
}
.dark .default-hero-section__brand a:hover img {
filter: invert(0.6) brightness(1);
opacity: 0.9;
}
.dark .default-hero-section__brand img {
filter: invert(0.8) brightness(1.5);
opacity: 0.7;
}
.dark .default-hero-section__brand a:hover img {
filter: invert(0.8) brightness(1.8);
opacity: 1;
}