<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="s_banner_categories" name="Banner Categories">
    <section class="s_banner_categories oe_img_bg o_cc o_cc5 o_bg_img_center pb56"
            data-oe-shape-data="{'shape': 'html_builder/Connections/20', 'colors': {'c5': 'rgb(255, 255, 255)'}, 'showOnMobile': false}"
            style="background-position: 50% 75%; background-image: url('/web/image/website.s_banner_categories_default_image_1');">
        <div class="o_we_bg_filter bg-black-50"/>
        <div class="o_html_builder_Connections_20 o_we_shape"
            style="background-image: url('/html_editor/shape/html_builder/Connections/20.svg?c5=rgb%28255%2C255%2C255%29');"/>
        <div class="container">
            <div class="o_grid_mode row" data-row-count="13" style="gap: 16px;">
                <div data-name="Intro"
                        class="o_grid_item o_colored_level g-height-6 g-col-lg-8 col-lg-8 justify-content-start"
                        style="z-index: 1; --grid-item-padding-y: 72px; grid-area: 2 / 3 / 8 / 11;">
                    <h1 style="text-align: center;">Explore Our New Collection</h1>
                    <p class="lead" style="text-align: center;">
                        Each item in our collection is grouped by category to make your browsing experience effortless. Take a look and dive into the different worlds we’ve curated for you.
                        <br/>
                        <br/>
                    </p>
                    <p style="text-align: center;">
                        <a t-att-href="cta_btn_href" class="o_translate_inline btn btn-lg btn-secondary">
                            <t t-esc="cta_btn_text">Buy Now</t>
                        </a>
                    </p>
                </div>
                <div class="o_grid_item o_colored_level o_cc o_cc5 o_bg_img_center oe_img_bg justify-content-end g-col-lg-4 g-height-6 col-lg-4 col-10 offset-1 offset-lg-0"
                        style="grid-area: 8 / 1 / 14 / 5; z-index: 2;background-image: url('/web/image/website.shop_category_1_1x1'); --grid-item-padding-y: 32px; --grid-item-padding-x: 32px;">
                    <div class="o_we_bg_filter"
                        style="background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.52) 0%, rgba(255, 255, 255, 0) 50%);"/>
                    <h2 class="h3-fs">Sofas</h2>
                    <p>
                        <a href="#" class="o_translate_inline text-reset">Shop all →</a>
                    </p>
                </div>
                <div class="o_grid_item o_cc o_cc5 o_colored_level o_bg_img_center oe_img_bg justify-content-end g-height-6 g-col-lg-4 col-lg-4 col-10 offset-1 offset-lg-0"
                        style="grid-area: 8 / 5 / 14 / 9; z-index: 3;background-image: url('/web/image/website.shop_category_2_1x1'); --grid-item-padding-y: 32px; --grid-item-padding-x: 32px;">
                    <div class="o_we_bg_filter"
                        style="background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.52) 0%, rgba(255, 255, 255, 0) 50%);"/>
                    <h2 class="h3-fs">Desks</h2>
                    <p>
                        <a href="#" class="o_translate_inline text-reset">Shop all →</a>
                    </p>
                </div>
                <div class="o_grid_item o_cc o_cc5 o_colored_level o_bg_img_center oe_img_bg justify-content-end g-height-6 g-col-lg-4 col-lg-4 offset-1 offset-lg-0 col-10"
                        style="grid-area: 8 / 9 / 14 / 13; z-index: 4;background-image: url('/web/image/website.shop_category_3_1x1'); --grid-item-padding-y: 32px; --grid-item-padding-x: 32px;">
                    <div class="o_we_bg_filter"
                        style="background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.52) 0%, rgba(255, 255, 255, 0) 50%);"/>
                    <h2 class="h3-fs">Drawers</h2>
                    <p>
                        <a href="#" class="o_translate_inline text-reset">Shop all →</a>
                    </p>
                </div>
            </div>
        </div>
    </section>
</template>

<!-- Assets -->
<asset id="website.s_banner_categories_000_scss" name="Banner Categories 000 SCSS">
    <bundle>web.assets_frontend</bundle>
    <path>website/static/src/snippets/s_banner_categories/000.scss</path>
</asset>

</odoo>
