{% if current_person.properties.first_login == true %}
  <script>
    window.location.replace('/app');
  </script>
{% endif %}

<div class="banner-wrapper">
    <div class="banner-container">
        <div class="banner-image-wrapper">
            <img src="https://i5.walmartimages.com/dfwrs/76316474-49b1/k2-_986bc821-322d-40d0-b90d-cff871e9d4f3.v1.jpg" alt="" class="beautystart-img">
            <!--<div class="deatils-container">
                <div class="banner-descirption text-center">Email <span class="bold-text">supplierdevelopment@walmart.com</span></div>
                <div class="banner-descirption text-center">for additional support.</div>
            </div> -->
        </div>
        <div class="banner-content-container">
            <div class="banner-descirption">
                Walmart Start is an exciting beauty brand accelerator program that sets emerging brands up for successful glow-ups by giving them a chance to launch at Walmart.
            </div>
            <div class="banner-descirption">
                The selected brands have a potential opportunity to be launched at Walmart, while also receiving access to various resources to help set each brand up for their launch.
            </div>
        </div>
    </div>
</div>



<style>
    .banner-wrapper {
        padding: 10px;
        border-radius: 10px;
    }
    .banner-img {
        width: 100%;
    }
    .banner-container {
        display: flex;
        align-items: center;
        gap: 40px;
        background: #001E60;
        padding: 20px;
        border-radius: 10px;
    }
    .text-center {
        text-align: center;
    }
    .banner-descirption {
        font-size: 20px;
    }
    .bold-text {
        font-weight: 700;
    }
    .deatils-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .banner-image-wrapper {
        width: 40%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .banner-content-container {
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    @media only screen and (max-width: 900px) { 
    .banner-container {
    flex-direction: column;
  }
}
@media only screen and (max-width: 500px) { 
    .banner-descirption{
        font-size: 17px;
  }
}
</style>