fm-lp-factory/factory/templates/template1/basic/textWithCardsRightAndImageLeft.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-section-container", "text-with-cars-and-side-image", "image-right", "fm-section-container");
    section.innerHTML = template
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle)
        .replaceAll("%mainImage%", component.image);

    if (component.data.length > 0) {
        section.querySelector(".fm-text-with-cards-list").innerHTML = component.data.map((card, index) => {
            const cardContainer = document.createElement("div");
            cardContainer.classList.add("fm-card", index % 2 === 0 ? "fm-dark-card" : "fm-light-card");
            cardContainer.innerHTML = cardTemplate
                .replace("%title%", card.title)
                .replace("%subtitle%", card.subtitle);
            return cardContainer.outerHTML;
        }).join("");
    }
    document.getElementById("fm-landing-page-content").appendChild(section);

    css();
}

const template = /*html*/ `
<img class="fm-text-with-cards-and-image-inner-container fm-image-main" src="%mainImage%" alt="%mainImage%">
<div class="fm-text-with-cards-and-image-inner-container fm-text-with-cards">
    <div>
        <strong class="fm-h3">%title%</strong>
        <p>%subtitle%</p>
    </div>
    <div class="fm-text-with-cards-list">
    </div>
</div>
`;

const cardTemplate = /*html*/ `
    <h3>%title%</h3>
    <p>%subtitle%</p>
`;

const css = () => {
    updateFmTemplateCss(/*css*/
        `
        .text-with-cars-and-side-image .fm-text-with-cards-and-image-inner-container.fm-text-with-cards {
            flex-basis: 50%;
        }
        .text-with-cars-and-side-image .fm-text-with-cards-and-image-inner-container.fm-image-main {
            max-width: 400px;
            width: 100%;
        }
        
        .text-with-cars-and-side-image .fm-text-with-cards  .fm-text-with-cards-list {
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .text-with-cars-and-side-image .fm-text-with-cards  .fm-text-with-cards-list .fm-card {
            align-items: flex-start;
            border-radius: var(--fm-base-border-radius);
            width: auto;
            border: 1px solid #dfdfdf;

        }
        .text-with-cars-and-side-image .fm-text-with-cards  .fm-text-with-cards-list .fm-card.fm-dark-card {
            background: var(--fm-secondary-color);
            color: var(--fm-secondary-button-text-color);
        }

        .text-with-cars-and-side-image .fm-text-with-cards  .fm-text-with-cards-list .fm-card.fm-light-card  {
            background: var(--fm-card-secondary-background);
            color: var(--fm-card-secondary-text-color);
        }

        .fm-section-container.text-with-cars-and-side-image {
            display: flex;
            flex-direction: row;
            gap: 40px;
        }

        @media (max-width: 768px) {
            .fm-section-container.text-with-cars-and-side-image{
                flex-direction: column;
            
            }
            .text-with-cars-and-side-image .fm-text-with-cards-and-image-inner-container.fm-image-main{
                max-width: 230px;
            }
            .text-with-cars-and-side-image .fm-text-with-cards .fm-text-with-cards-list{
                grid-template-columns: 1fr;
            }
        }
        `
    );
}