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

    const cardsContainer = section.querySelector(".fm-steps-with-right-image-text-step-list");
    component.data.forEach((card, index) => {
        const cardElement = document.createElement("div");
        cardElement.classList.add("fm-step");
        cardElement.innerHTML = templateCard
            .replace("%titleCard%", card.title)
            .replace("%order%", index + 1);
        cardsContainer.appendChild(cardElement);
    });        

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


const template = /*html*/ `
<div class="fm-steps-with-right-image-text-container">
    <span class="fm-steps-with-right-image-title" >%title%</span>
    <span class="fm-steps-with-right-image-subtitle">%subtitle%</span>
    <div class="fm-steps-with-right-image-text-step-list">
    </div>
</div>
<div class="fm-steps-with-right-image-container">
    <img src="%mainImage%" alt="%mainImage%">
</div>
`;

const templateCard = /*html*/ `
    <div class="fm-step-order" >%order%</div>
    <p class="fm-step-text">%titleCard%</p>
`;

const css = () => {
    updateFmTemplateCss(/*css*/
        `
    .fm-section-container.fm-steps-with-right-image{
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    @media (max-width: 768px) {
        .fm-section-container.fm-steps-with-right-image{
            flex-direction: column;
        }
        .fm-steps-with-right-image .fm-steps-with-right-image-container img{
            max-width: 350px !important;
        }
    }
    .fm-steps-with-right-image-container {
        display: flex;
        align-items: center;
    }
    .fm-steps-with-right-image .fm-steps-with-right-image-subtitle{
        font-size: 1.1rem;
    }

    .fm-steps-with-right-image .fm-steps-with-right-image-title{
        font-size: 32px;
        margin: 0;
        font-weight: bold;
    }

    .fm-steps-with-right-image .fm-steps-with-right-image-container img{
        max-width: 600px;
    }

    .fm-steps-with-right-image .fm-steps-with-right-image-text-container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .fm-steps-with-right-image .fm-steps-with-right-image-text-step-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-top: 10px;
    }

    .fm-steps-with-right-image .fm-step{
        display: flex;
        align-items: center;
        border: 2px solid var(--fm-secondary-color);
        border-radius: 30px;
        padding: 5px 15px;
        gap: 15px;
    }

    .fm-steps-with-right-image .fm-step-order{
        display: table-cell;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--fm-secondary-light-color);
        background: var(--fm-secondary-color);
        border-radius: 30px;
        padding: 5px 13px;
    }

    .fm-steps-with-right-image .fm-step-text{
        font-size: 1.1rem;
        margin: 0;
        color: var(--fm-secondary-color);
        font-weight: bold;
    }
    
`);
}