Gainsight/Custom_Templates/customer_templates/Walmart Supplier Prod/_welcome_section.html.liquid

{% if current_person.properties.person_locale == 'MEX' %}
    <div class="welcome-section-container">
    <div class="welcome-section-wrapper">
        <div class="welcome-content-wrapper">
            <div class="introduction">
                Crece  con  Walmart  es  un  programa  de  desarrollo  de  proveedores  que  tiene  como 
                objetivo  trabajar  con  personas  que  lideran  micro,  pequeñas  y  medianas  empresas  en 
                México. No importa en qué etapa de tu camino empresarial te encuentres,  Crece con 
                Walmart es el lugar para fortalecer tus capacidades y habilidades de venta en línea a 
                través de aprendizaje autogestionado, sesiones grupales en vivo y mentorías uno a uno
            </div>
            <div class="get-started">
                <div class="heading">Aquí te damos algunas ideas para empezar:</div>
                <ul class="get-started-list">
                    <li class="get-started-item">
                        Antes de comenzar, dirígete a la ruta de Bienvenida para terminar de conocerte y 
                        recomendarte los mejores contenidos con base en la situación actual de tu negocio.
                    </li>
                    <li class="get-started-item">
                        ¡Empieza a navegar en las tres rutas de aprendizaje que hemos diseñado para ti y 
                        descubre todo lo que Crece con Walmart puede hacer para impulsar y hacer crecer 
                        aún más tu negocio!
                    </li>
                    <li class="get-started-item">
                        ¿Tienes dudas sobre el sistema o algún proceso? Pasa por nuestro directorio de ayuda 
                        y encuentra toda la información que necesitas.
                    </li>
                </ul>
            </div>
        </div>
        <div class="video-container">
            <video width='100%' height="400px" controls autoplay muted>
                <source src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/video/supplier_academy_2.0_launch_v5+(360p).mp4">
            </video>
        </div>
    </div>
</div>
{% else %}
    <div class="welcome-section-container">
        <div class="welcome-section-wrapper">
            <div class="welcome-content-wrapper">
                <div class="introduction">
                    Supplier Academy is your one-stop-shop for success at Walmart.
                </div>
                <div class="get-started">
                    <div class="heading">Here’s how to get started:</div>
                    <ul class="get-started-list">
                        <li class="get-started-item">
                            <span class="get-started-item-heading">U.S. small business?</span>
                            Check out the <a class="text-link" href="/app/grow-with-walmart-catalog">Grow With Walmart</a> programs!
                        </li>
                        <li class="get-started-item">
                            <span class="get-started-item-heading">New to Walmart?</span>
                            Check our <a class="text-link" href="/app/welcome-to-walmart">Welcome to Walmart</a> series!
                        </li>
                        <li class="get-started-item">
                            <span class="get-started-item-heading">Seasoned Walmart supplier?</span>
                            Explore the categories below to hone your skills and grow your business.
                        </li>
                        <li class="get-started-item">
                            <span class="get-started-item-heading">Have a system-specific questions?</span>
                            Visit our <a href="/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d" class="text-link">Help Docs</a> directory.
                        </li>
                    </ul>
                </div>
            </div>
            <div class="video-container">
                <video width='100%' height="400px" controls autoplay muted>
                    <source src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/video/supplier_academy_2.0_launch_v5+(360p).mp4">
                </video>
            </div>
        </div>
    </div>
{% endif %}


<style>
    .welcome-section-container {
        padding: 10px;
        display: flex;
        border-radius: 10px;
    }
    .welcome-section-wrapper {
        background: #001E60;
        padding: 20px;
        border-radius: 10px;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
    .get-started {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .get-started-content-wrapper {
        display: flex;
        margin-top: 20px;
    }
    .introduction {
        color: #fff;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
    }
    .heading {
        color: #fff;
        font-size: 25px;
        font-weight: 600;
    }
    .get-started-item-heading {
        color: #fff;
        font-size: 25px;
        font-weight: 600;
    }
    .get-started-item {
        font-size: 25px;
    }
    .video-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .text-link {
        color: #fff;
    }
    @media (max-width:1000px) {
    .welcome-section-wrapper  {
        grid-template-columns: repeat(1,1fr);
    }
  }
  @media (max-width: 768px) {
    .introduction, .heading {
        font-size: 25px
    }
    .get-started-list {
        padding: 15px;
    }   
    .get-started-item  {
        font-size: 17px;
    }
  }
</style>