fm-lp-factory/factory/templates/template1/basic/bannerWithCardsNude.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-nude", "fm-section-container");
    section.innerHTML = template
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle);

    const cardsContainer = section.querySelector(".fm-banner-with-cards-nude-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-nude-container">
    <div class="fm-banner-with-cards-nude-container-header">
        <span class="fm-banner-with-cards-nude-container-inner-title" >%title%</span>
        <span class="fm-banner-with-cards-nude-container-inner-subtitle">%subtitle%</span>
    </div>
    <div class="fm-flex-center fm-banner-with-cards-nude-cards"></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-nude{
        width: 90%;
    }

    .fm-banner-with-cards-nude .fm-banner-with-cards-nude-container {
        padding: 20px;
        margin: 40px;
        border-radius: var(--fm-base-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

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

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

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

    .fm-banner-with-cards-nude .fm-banner-with-cards-nude-cards {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

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

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

        .fm-banner-with-cards-nude-container .fm-banner-with-cards-nude-cards{
            grid-template-columns: 50% 50%;
        }
        .fm-banner-with-cards-nude .fm-banner-with-cards-nude-cards .fm-card-light{
            flex-basis: 100% !important;
        }
    }

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

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