fm-lp-factory/factory/templates/template1/basic/bannerWithCards.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";

export default (component) => {
    const section = document.createElement("section");
    section.classList.add("fm-banner-with-cards", "fm-section-container");
    section.innerHTML = template
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle);

    const cardsContainer = section.querySelector(".fm-banner-with-cards-cards");
    component.data.forEach(card => {
        const cardElement = document.createElement("div");
        cardElement.classList.add("fm-card-light");
        cardElement.innerHTML = cardTemplate
            .replace("%title%", card.title)
            .replace("%subtitle%", card.subtitle)
            .replaceAll("%image%", card.image);
        cardsContainer.appendChild(cardElement);
    });

    css();
    document.querySelector("#fm-landing-page-content").appendChild(section);
}

const template = /*html*/ `
<div class="fm-banner-with-cards-container">
   <div class="fm-banner-with-cards-container-inner">
        <div class="fm-banner-with-cards-container-header">
            <span class="fm-banner-with-cards-container-inner-subtitle">%subtitle%</span>
            <span class="fm-banner-with-cards-container-inner-title" >%title%</span>
        </div>
        <div class="fm-flex-center fm-banner-with-cards-cards"></div>
   </div>
</div>
`;

const cardTemplate = /*html*/ `
    <img src="%image%"
        alt="%image%">
    <strong class="fm-strong-text">%title%</strong>
    <p>%subtitle%</p>
`;


const css = () => {
    updateFmTemplateCss(/*css*/
        `
    .fm-section-container.fm-banner-with-cards{
        width: 90%;
    }
    .fm-banner-with-cards .fm-banner-with-cards-container{
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        background: var(--fm-secondary-color);
        border-radius: var(--fm-base-border-radius);
    }
    .fm-banner-with-cards .fm-banner-with-cards-container .fm-banner-with-cards-container-inner{
        padding: 20px;
        margin: 40px;
        width: 80%;
        background: var(--fm-secondary-light-color);
        border-radius: var(--fm-base-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .fm-banner-with-cards .fm-banner-with-cards-container .fm-banner-with-cards-container-inner .fm-banner-with-cards-container-inner-subtitle{
        font-size: 1.1rem;
        color: var(--fm-primary-color);
        letter-spacing: 6px;
    }

    .fm-banner-with-cards .fm-banner-with-cards-container .fm-banner-with-cards-container-inner .fm-banner-with-cards-container-inner-title{
        font-size: 32px;
        margin: 0;
        font-weight: bold;
        text-align: center;
    }

    .fm-banner-with-cards 
    .fm-banner-with-cards-cards .fm-card-light{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-align: center;
        border-radius: var(--fm-base-border-radius);
        border: 1px solid #ccc;
        flex-basis: 30%;
    }

    .fm-banner-with-cards .fm-banner-with-cards-cards {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        align-items: stretch;
    }

    .fm-banner-with-cards 
    .fm-banner-with-cards-cards .fm-card-light img{
        max-width: 80px;
        width: 100%;
    }

    .fm-banner-with-cards .fm-card-light p,
    .fm-banner-with-cards .fm-card-light strong
    {
        margin: 0;
    }
    .fm-banner-with-cards .fm-card-light p{
        font-weight: normal;
    }
    @media (max-width: 768px){
        .fm-banner-with-cards .fm-banner-with-cards-container{
            border-radius: 0;
        }
        .fm-section-container.fm-banner-with-cards{
            width: 100%;
        }

        .fm-banner-with-cards-container .fm-banner-with-cards-cards{
            grid-template-columns: 50% 50%;
        }
    }

    @media (max-width: 600px){
        .fm-banner-with-cards-container .fm-banner-with-cards-cards{
            grid-template-columns: auto;
        }
    }

    .fm-banner-with-cards-container-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    `
    )
}