Don’t miss out on exclusive deals made for you.

Free US delivery for orders over $200

Place for search form

Moneyback

Did you change your mind? You can return the product within 14 days.

Weekly Promotions

Explore our exclusive weekly promotions for special discounts.

Place for slider

<?php
/**
 * Title: Storefront hero with carousel and search
 * Slug: wlc/storefront-hero-with-carousel-and-search
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Storefront hero with carousel and search","categories":["featured"],"patternName":"wlc/storefront-hero-with-carousel-and-search"},"align":"full","className":"storefront-hero-with-carousel-and-search","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull storefront-hero-with-carousel-and-search"><!-- wp:group {"className":"storefront-hero-with-carousel-and-search__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__wrapper"><!-- wp:columns {"className":"storefront-hero-with-carousel-and-search__columns"} -->
<div class="wp-block-columns storefront-hero-with-carousel-and-search__columns"><!-- wp:column {"className":"storefront-hero-with-carousel-and-search__content-column","layout":{"type":"constrained","contentSize":"42rem","justifyContent":"left"}} -->
<div class="wp-block-column storefront-hero-with-carousel-and-search__content-column"><!-- wp:group {"className":"storefront-hero-with-carousel-and-search__content","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__content"><!-- wp:heading {"level":1,"className":"storefront-hero-with-carousel-and-search__heading"} -->
<h1 class="wp-block-heading storefront-hero-with-carousel-and-search__heading">Don’t miss out on exclusive deals made for you.</h1>
<!-- /wp:heading -->

<!-- wp:group {"className":"storefront-hero-with-carousel-and-search__paragraph-box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__paragraph-box"><!-- wp:wlc/custom-svg {"svgContent":"  \u003csvg class=\u0022me-2 h-6 w-6 text-gray-500 dark:text-gray-400\u0022 aria-hidden=\u0022true\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002224\u0022 height=\u002224\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022\u003e\n              \u003cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M13 7h6l2 4m-8-4v8m0-8V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9h2m8 0H9m4 0h2m4 0h2v-4m0 0h-5m3.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm-10 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z\u0022 /\u003e\n            \u003c/svg\u003e"} /-->

<!-- wp:paragraph {"className":"storefront-hero-with-carousel-and-search__description"} -->
<p class="storefront-hero-with-carousel-and-search__description">Free US delivery for orders over $200</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-hero-with-carousel-and-search__form","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__form"><!-- wp:paragraph -->
<p>Place for search form</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-hero-with-carousel-and-search__icon-wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__icon-wrapper"><!-- wp:group {"className":"storefront-hero-with-carousel-and-search__icon-box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__icon-box"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg class=\u0022mb-2 h-8 w-8 text-primary-700 dark:text-primary-500\u0022 aria-hidden=\u0022true\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002224\u0022 height=\u002224\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022\u003e\n              \u003cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 7V6a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1M3 18v-7a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Zm8-3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z\u0022 /\u003e\n            \u003c/svg\u003e"} /-->

<!-- wp:heading {"level":3,"className":"storefront-hero-with-carousel-and-search__icon-heading"} -->
<h3 class="wp-block-heading storefront-hero-with-carousel-and-search__icon-heading">Moneyback</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"storefront-hero-with-carousel-and-search__icon-description"} -->
<p class="storefront-hero-with-carousel-and-search__icon-description">Did you change your mind? You can return the product within 14 days.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-hero-with-carousel-and-search__icon-box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-hero-with-carousel-and-search__icon-box"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg class=\u0022mb-2 h-8 w-8 text-primary-700 dark:text-primary-500\u0022 aria-hidden=\u0022true\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002224\u0022 height=\u002224\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022\u003e\n              \u003cpath\n                stroke=\u0022currentColor\u0022\n                stroke-linecap=\u0022round\u0022\n                stroke-linejoin=\u0022round\u0022\n                stroke-width=\u00222\u0022\n                d=\u0022M8.891 15.107 15.11 8.89m-5.183-.52h.01m3.089 7.254h.01M14.08 3.902a2.849 2.849 0 0 0 2.176.902 2.845 2.845 0 0 1 2.94 2.94 2.849 2.849 0 0 0 .901 2.176 2.847 2.847 0 0 1 0 4.16 2.848 2.848 0 0 0-.901 2.175 2.843 2.843 0 0 1-2.94 2.94 2.848 2.848 0 0 0-2.176.902 2.847 2.847 0 0 1-4.16 0 2.85 2.85 0 0 0-2.176-.902 2.845 2.845 0 0 1-2.94-2.94 2.848 2.848 0 0 0-.901-2.176 2.848 2.848 0 0 1 0-4.16 2.849 2.849 0 0 0 .901-2.176 2.845 2.845 0 0 1 2.941-2.94 2.849 2.849 0 0 0 2.176-.901 2.847 2.847 0 0 1 4.159 0Z\u0022\n              /\u003e\n            \u003c/svg\u003e"} /-->

<!-- wp:heading {"level":3,"className":"storefront-hero-with-carousel-and-search__icon-heading"} -->
<h3 class="wp-block-heading storefront-hero-with-carousel-and-search__icon-heading">Weekly Promotions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"storefront-hero-with-carousel-and-search__icon-description"} -->
<p class="storefront-hero-with-carousel-and-search__icon-description">Explore our exclusive weekly promotions for special discounts.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","className":"storefront-hero-with-carousel-and-search__slider-column"} -->
<div class="wp-block-column is-vertically-aligned-top storefront-hero-with-carousel-and-search__slider-column"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Place for slider</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.storefront-hero-with-carousel-and-search {
    @apply bg-white antialiased dark:bg-gray-900;

    .storefront-hero-with-carousel-and-search__wrapper {
        @apply mx-auto px-4 py-8 sm:py-16;
    }

    .storefront-hero-with-carousel-and-search__columns {
        @apply flex flex-col gap-8 lg:flex-row lg:items-center lg:gap-24 mb-0;

        .storefront-hero-with-carousel-and-search__content-column {
            @apply xl:shrink-0;
        }

        .storefront-hero-with-carousel-and-search__heading {
            @apply mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-5xl;
        }

        .storefront-hero-with-carousel-and-search__paragraph-box {
            @apply flex align-middle;
            
            svg {
                @apply pb-0.5 md:pb-0 md:pt-1 mr-1;
            }
        }

        .storefront-hero-with-carousel-and-search__description {
            @apply mb-6 flex items-center text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl;
        }

        .storefront-hero-with-carousel-and-search__form {
            @apply w-full flex -space-x-0.5;
            
            p {
                @apply mb-0;
            }
        }

        .storefront-hero-with-carousel-and-search__icon-wrapper {
            @apply mt-4 grid grid-cols-2 gap-4 dark:border-gray-700 sm:mt-8 sm:border-t sm:border-gray-200 sm:pt-8 lg:gap-8;
        }

        .storefront-hero-with-carousel-and-search__icon-heading {
            @apply mb-2 font-semibold  dark:text-white text-base;
        }

        .storefront-hero-with-carousel-and-search__icon-description {
            @apply text-sm text-gray-500 dark:text-gray-400 mb-0;
        }

        .storefront-hero-with-carousel-and-search__slider-column {
            @apply w-full; 
        }
    }
}