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

<div class="welcome-section-container">
    <div class="welcome-section-wrapper">
        <div class="welcome-content-wrapper">
            <div class="introduction">
                No matter where you are in your journey, Supplier Academy is your source for
                everything you need to build a strong, lasting relationship with 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">New to Walmart?</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">Seasoned 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 system-specific questions?</span>
                        Visit our <a href="/app/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d" class="text-link">Help Docs</a> directory.
                    </li>
                </ul>
            </div>
        </div>
        <div class="video-container">
            <video width='600px' 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>

<style>
    .welcome-section-container {
        background: #13244c;
        padding: 20px;
        display: flex;
        border-radius: 10px;
    }
    .welcome-section-wrapper {
        background: #041e42;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }
    .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: 30px;
        font-weight: 600;
        text-align: center;
    }
    .heading {
        color: #fff;
        font-size: 30px;
        font-weight: 600;
    }
    .get-started-item-heading {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }
    .get-started-item {
        font-size: 20px;
    }
    .video-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .text-link {
        color: #fff;
    }
</style>