fm-lp-factory/factory/templates/template1/basic/textWithStepsRightAndImageLeft.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-text-with-cards-and-image", "image-right", "fm-section-container");
    section.innerHTML = template
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle);
    document.getElementById("fm-landing-page-content").appendChild(section);

    css();
}

const template = /*html*/ `
<div class="fm-text-with-cards-and-image-inner-container">
    <div >
        <h2>%title%</h2>
        <p>%subtitle%</p>
    </div>
    <div class="">
    
    </div>
</div>
</div>
<div class="fm-text-with-cards-and-image-inner-container"> 
    <img src="https://cdns.fidelizarmais.com/files/production/9c001abc-2a3f-477d-a9d7-f171ec78a145/app-store/banner/notebook-and-mobile.svg"
        alt="cellphone.png">
</div>
`;


const css = () => {
    updateFmTemplateCss(/*css*/
        `
        .fm-text-with-cards-and-image {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            width: 100%;
        }
        
        .fm-text-with-cards-and-image 
        .fm-text-with-cards-and-image-inner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            flex-basis: 50%;
        }
        
        .fm-text-with-cards-and-image.image-right {}
        `
    );
}