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.
<?php
/**
* Title: App screenshot with CTAs
* Slug: app-screenshot-with-ctas
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"App screenshot with CTAs","categories":["featured"],"patternName":"wlc/app-screenshot-with-ctas"},"align":"full","className":"app-screenshot-with-ctas","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull app-screenshot-with-ctas"><!-- wp:group {"align":"full","className":"app-screenshot-with-ctas__container","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull app-screenshot-with-ctas__container"><!-- wp:heading {"textAlign":"center","level":1,"className":"app-screenshot-with-ctas__heading"} -->
<h1 class="wp-block-heading has-text-align-center app-screenshot-with-ctas__heading">We invest in the world’s potential</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"app-screenshot-with-ctas__description"} -->
<p class="has-text-align-center app-screenshot-with-ctas__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:buttons {"className":"app-screenshot-with-ctas__buttons","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
<div class="wp-block-buttons app-screenshot-with-ctas__buttons"><!-- wp:button {"className":"app-screenshot-with-ctas__button app-screenshot-with-ctas__button\u002d\u002dprimary"} -->
<div class="wp-block-button app-screenshot-with-ctas__button app-screenshot-with-ctas__button--primary"><a class="wp-block-button__link wp-element-button">Free trial for 30 days</a></div>
<!-- /wp:button -->
<!-- wp:button {"textAlign":"center","className":"app-screenshot-with-ctas__button app-screenshot-with-ctas__button\u002d\u002dsecondary","icon":"arrow-right"} -->
<div class="wp-block-button app-screenshot-with-ctas__button app-screenshot-with-ctas__button--secondary"><a class="wp-block-button__link has-text-align-center wp-element-button"> Pricing & FAQ</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:image {"scale":"cover","sizeSlug":"large","className":"app-screenshot-with-ctas__image app-screenshot-with-ctas__image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large app-screenshot-with-ctas__image app-screenshot-with-ctas__image--light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/dashboard-mockup.svg" alt="" style="object-fit:cover"/></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","className":"app-screenshot-with-ctas__image app-screenshot-with-ctas__image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large app-screenshot-with-ctas__image app-screenshot-with-ctas__image--dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/dashboard-mockup-dark.svg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"app-screenshot-with-ctas__brands","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull app-screenshot-with-ctas__brands"><!-- wp:group {"align":"full","className":"app-screenshot-with-ctas__brands-container","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull app-screenshot-with-ctas__brands-container"><!-- wp:group {"align":"full","className":"app-screenshot-with-ctas__brands-content","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull app-screenshot-with-ctas__brands-content"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"app-screenshot-with-ctas__brand"} -->
<figure class="wp-block-image size-large app-screenshot-with-ctas__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":"app-screenshot-with-ctas__brand"} -->
<figure class="wp-block-image size-large app-screenshot-with-ctas__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":"app-screenshot-with-ctas__brand"} -->
<figure class="wp-block-image size-large app-screenshot-with-ctas__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 -->
.app-screenshot-with-ctas {
@apply bg-white dark:bg-gray-900;
.app-screenshot-with-ctas__container {
@apply max-w-screen-xl px-4 pt-8 mx-auto text-center lg:pt-16 lg:px-12;
.app-screenshot-with-ctas__heading {
@apply mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white;
}
.app-screenshot-with-ctas__description {
@apply mb-8 font-light text-gray-500 md:text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400;
}
.app-screenshot-with-ctas__buttons {
@apply flex flex-col w-full md:w-auto mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4;
:not([hidden]) ~ :not([hidden]) {
@apply ml-0 md:ml-4;
}
.app-screenshot-with-ctas__button {
@apply w-full md:w-auto;
a {
@apply w-full md:w-auto;
}
}
.app-screenshot-with-ctas__button--primary a{
@apply inline-flex items-center justify-center px-5 py-3 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:focus:ring-primary-900;
}
.app-screenshot-with-ctas__button--secondary a{
@apply inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-900 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800;
}
}
.app-screenshot-with-ctas__image img {
@apply mx-auto mb-5 lg:mb-8 border border-gray-200 rounded-lg shadow-xl dark:border-gray-600 z-10;
}
.app-screenshot-with-ctas__image--light {
@apply dark:hidden;
}
.app-screenshot-with-ctas__image--dark {
@apply hidden dark:block;
}
}
.app-screenshot-with-ctas__brands {
@apply pt-48 lg:pb-16 pb-8 -mt-48 bg-gray-50 sm:pt-80 sm:-mt-80 dark:bg-gray-800 z-20;
.app-screenshot-with-ctas__brands-container {
@apply px-4 mx-auto text-center md:max-w-screen-md lg:max-w-screen-lg lg:px-36;
}
.app-screenshot-with-ctas__brands-content {
@apply flex flex-wrap items-center justify-center mt-8 text-gray-500 sm:justify-between;
}
.app-screenshot-with-ctas__brand {
@apply mb-5 mr-5 lg:mb-0;
a {
@apply hover:text-gray-900 dark:hover:text-gray-400;
}
img {
@apply mx-auto;
transition: all 0.3s ease;
opacity: 0.6;
}
a:hover img {
opacity: 1;
}
}
}
}
.dark .app-screenshot-with-ctas__brand img {
filter: invert(0.7) brightness(1.2);
opacity: 0.7;
}
.dark .app-screenshot-with-ctas__brand a:hover img {
filter: invert(0.6) brightness(1);
opacity: 0.9;
}