Copy Code
<?php
/**
* Title: Hero section with carousel slider
* Slug: hero-section-with-carousel-slider
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Hero section with carousel slider","categories":["featured"],"patternName":"wlc/hero-section-with-carousel-slider"},"align":"full","className":"hero-section-with-carousel-slider hero-section-with-carousel-slider__wrapper","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull hero-section-with-carousel-slider hero-section-with-carousel-slider__wrapper"><!-- wp:group {"align":"full","className":"hero-section-with-carousel-slider__content","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hero-section-with-carousel-slider__content"><!-- wp:columns {"verticalAlignment":"center","align":"full","className":"hero-section-with-carousel-slider__columns"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center hero-section-with-carousel-slider__columns"><!-- wp:column {"verticalAlignment":"center","className":"hero-section-with-carousel-slider__column-text","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center hero-section-with-carousel-slider__column-text"><!-- wp:heading {"className":"hero-section-with-carousel-slider__title"} -->
<h2 class="wp-block-heading hero-section-with-carousel-slider__title">
Making earth cooler for people, nature, climate
</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hero-section-with-carousel-slider__description"} -->
<p class="hero-section-with-carousel-slider__description">
Protecting the planet and its natural resources for future generations by reducing pollution, promoting sustainability, and conserving energy and resources.
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"hero-section-with-carousel-slider__buttons"} -->
<div class="wp-block-buttons hero-section-with-carousel-slider__buttons"><!-- wp:button {"className":"hero-section-with-carousel-slider__button-primary"} -->
<div class="wp-block-button hero-section-with-carousel-slider__button-primary"><a class="wp-block-button__link wp-element-button">
Donate now
</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"hero-section-with-carousel-slider__button-secondary"} -->
<div class="wp-block-button hero-section-with-carousel-slider__button-secondary"><a class="wp-block-button__link wp-element-button">
<svg class="hero-section-with-carousel-slider__icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
</svg>
Learn more
</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:group {"className":"hero-section-with-carousel-slider__partners","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__partners"><!-- wp:paragraph {"className":"hero-section-with-carousel-slider__partners-title"} -->
<p class="hero-section-with-carousel-slider__partners-title">Partners and backers:</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"hero-section-with-carousel-slider__partners-logos","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__partners-logos"><!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/greenpeace.svg" alt="Greenpeace"/></figure>
<!-- /wp:image -->
<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/united-nations.svg" alt="UN"/></figure>
<!-- /wp:image -->
<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/wwf.svg" alt="WWF"/></figure>
<!-- /wp:image -->
<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/oxfam.svg" alt="Oxfam"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","className":"hero-section-with-carousel-slider__column-slider"} -->
<div class="wp-block-column is-vertically-aligned-center hero-section-with-carousel-slider__column-slider"><!-- wp:group {"className":"hero-section-with-carousel-slider__slider-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__slider-wrapper"><!-- wp:paragraph {"align":"center","className":"hero-section-with-carousel-slider__slider-placeholder"} -->
<p class="has-text-align-center hero-section-with-carousel-slider__slider-placeholder">Tu można wstawić slider</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->
Copy Code
.hero-section-with-carousel-slider {
@apply bg-white dark:bg-gray-900 antialiased ;
.hero-section-with-carousel-slider__content {
@apply px-4 py-8 mx-auto max-w-screen-xl lg:px-6 sm:py-16 lg:py-24;
.hero-section-with-carousel-slider__columns {
@apply flex flex-col gap-8 lg:items-center lg:gap-16 lg:flex-row mb-0;
}
.hero-section-with-carousel-slider__column-text {
@apply lg:max-w-xl xl:shrink-0;
}
.hero-section-with-carousel-slider__title {
@apply text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-5xl;
}
.hero-section-with-carousel-slider__description {
@apply mt-5 text-base font-normal text-gray-500 dark:text-gray-400 md:max-w-3xl sm:text-xl;
}
}
.hero-section-with-carousel-slider__buttons {
@apply flex flex-col gap-4 mt-8 sm:flex-row w-full;
.hero-section-with-carousel-slider__button-primary {
@apply w-full md:w-auto;
.wp-block-button__link {
@apply sm:w-[182px] w-full text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
}
}
.hero-section-with-carousel-slider__button-secondary {
@apply w-full md:w-auto;
.wp-block-button__link {
@apply sm:w-[182px] w-full inline-flex justify-center items-center text-base font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
}
}
.hero-section-with-carousel-slider__icon {
@apply w-5 h-5 mr-2 -ml-1 fill-current;
}
}
.hero-section-with-carousel-slider__partners {
@apply mt-4 sm:border-t sm:border-gray-100 sm:mt-8 sm:pt-8 dark:border-gray-700;
.hero-section-with-carousel-slider__partners-title {
@apply hidden text-base font-medium text-gray-500 sm:block;
}
.hero-section-with-carousel-slider__partners-logos {
@apply flex items-center mt-3 max-w-md;
.hero-section-with-carousel-slider__partner-logo {
img {
@apply w-auto h-8 md:h-12 mr-4;
}
}
}
}
.hero-section-with-carousel-slider__column-slider {
@apply relative w-full;
.hero-section-with-carousel-slider__slider-wrapper {
@apply relative h-56 overflow-hidden rounded-lg md:h-96;
}
}
}