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

<template id="s_banner" name="Banner">
    <section class="s_banner pt96 pb96">
        <div class="container">
            <div class="row o_grid_mode" data-row-count="10">
                <div class="o_grid_item g-height-10 g-col-lg-5 col-lg-5" data-name="Box" style="z-index: 1; grid-area: 1 / 1 / 11 / 6;">
                    <h1 class="display-3">Unleash your <strong>potential.</strong></h1>
                    <p class="lead"><br/>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<br/><br/></p>
                    <p>
                        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary o_translate_inline">Start Now <span class="fa fa-angle-right ms-2"/></a>
                    </p>
                </div>
                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-10 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 2; grid-area: 1 / 8 / 11 / 12;">
                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_banner_default_image_2" alt=""/>
                </div>
                <div class="o_grid_item o_grid_item_image g-col-lg-2 g-height-5 col-lg-2 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 3; grid-area: 2 / 11 / 7 / 13;">
                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_banner_default_image_3" alt=""/>
                </div>
                <div class="o_grid_item g-col-lg-5 g-height-4 col-lg-5" style="z-index: 4; grid-area: 6 / 6 / 10 / 11;">
                    <blockquote class="s_blockquote s_blockquote_with_line o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 mx-auto p-4 fst-normal shadow" data-vcss="001" data-snippet="s_blockquote" data-name="Blockquote">
                        <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                        <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
                        </div>
                        <p class="s_blockquote_quote my-auto">"Write a quote here from one of your customers. Quotes are a great way to build confidence in your products."</p>
                        <div class="s_blockquote_infos d-flex gap-2 flex-row align-items-start justify-content-start w-100 text-start">
                            <img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle" alt=""/>
                            <div class="s_blockquote_author">
                                <span class="o_small">
                                    <strong>Paul Dawson</strong><br/>
                                    <span>CEO of MyCompany</span>
                                </span>
                            </div>
                        </div>
                    </blockquote>
                </div>
            </div>
        </div>
    </section>
</template>

</odoo>
