whatsapp_web_groups/theme_m22tc/views/snippets.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    
    <!-- M22 Bento Grid Snippet -->
    <template id="s_m22_bento_grid" name="Bento Grid M22">
        <section class="s_m22_bento_grid pt96 pb96 o_colored_level" data-snippet="s_m22_bento_grid" data-name="Bento Grid">
            <div class="container">
                <div class="row mb-5">
                    <div class="col-12 text-center">
                        <h2 class="display-4 font-weight-bold">Our Capabilities</h2>
                        <p class="lead text-muted">Engineered for the future.</p>
                    </div>
                </div>
                
                <div class="bento-grid-container">
                    <!-- Card 1: Large (2 cols, 2 rows) -->
                    <div class="bento-card bento-span-2 bento-row-2">
                        <h3 class="mb-3 text-gradient">Digital Transformation</h3>
                        <p>Complete overhaul of your digital infrastructure using cutting-edge tech stacks.</p>
                        <div class="mt-auto">
                            <a href="#" class="btn btn-m22-primary">Explore</a>
                        </div>
                    </div>

                    <!-- Card 2: Standard -->
                    <div class="bento-card">
                        <i class="fa fa-cloud fa-3x mb-3 text-white"></i>
                        <h4>Cloud Solutions</h4>
                        <p class="small">Scalable &amp; Secure.</p>
                    </div>

                    <!-- Card 3: Standard -->
                    <div class="bento-card">
                        <i class="fa fa-code fa-3x mb-3 text-white"></i>
                        <h4>Custom Dev</h4>
                        <p class="small">Tailored software.</p>
                    </div>

                    <!-- Card 4: Wide (2 cols) -->
                    <div class="bento-card bento-span-2">
                         <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h4>Consulting Services</h4>
                                <p class="mb-0">Strategic advice for growth.</p>
                            </div>
                            <i class="fa fa-arrow-right fa-2x text-gradient"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </template>

    <!-- Register Snippet in Drag & Drop Bar -->
    <template id="snippets" inherit_id="website.snippets" name="M22 Tech Snippets">
        <xpath expr="//snippets[@id='snippet_structure']" position="inside">
            <t t-snippet="theme_m22tc.s_m22_bento_grid" t-thumbnail="/theme_m22tc/static/description/icon.png"/>
        </xpath>
    </template>

</odoo>