{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{ text[0]|upper}}{{text[1:] }} {% endmacro %}
{% block header %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='landing-mobile.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kolker+Brush">
{% endblock header %}
{% block content %}
<div class="landing">
    <div class="landing-header">
        <p class="landing-header-font">
            Make it happen
        </p>
        <p class="landing-header-sub-font">
            together!
        </p>
    </div>

    <div>
        <div class="landing-boxes">
            <div class="landing-box">
                <div class="landing-emoji">🚀</div>
                <p class="landing-box-header-font">Post a mission</p>
                <p class="landing-box-tagline-font">What do you want to accomplish?</p>
                <p class="landing-box-description-font">Do you have a great idea but you’re not capable of doing it all
                    by yourself? Post it as a mission here in minutes!
                </p>
            </div>
            <div class="landing-box">
                <div class="landing-emoji">💆🏽</div>
                <p class="landing-box-header-font">Share your goals</p>
                <p class="landing-box-tagline-font">Tell us what you need help with</p>
                <p class="landing-box-description-font">
                    Share the goals you would like to accomplish while turning your idea into reality. Open up to us with the challenges you have
                </p>
            </div>
            <div class="landing-box">
                <div class="landing-emoji">🥰</div>
                <p class="landing-box-header-font">Get solutions</p>
                <p class="landing-box-tagline-font">Let us help you achieve your goals</p>
                <p class="landing-box-description-font">
                    Let the crowd come up with solutions for your mission’s challenges, and vote on the best solutions for
                    your challenges.
                </p>
            </div>
        </div>
    </div>

    <div class="landing-subtext">
        <p class="landing-subtext-font">We’re becoming a community of people helping each other to make things happen!
        </p>
    </div>

    <div class="landing-user-container">
        <div>
            <p class="landing-user-text-font">We currently only have </p>
        </div>
        <div class="d-flex align-items-center justify-content-center">
            <div class="landing-user-counter-container">
                <p class="landing-user-counter">{{user_count}} </p>
            </div>
            <p class="landing-user-text-font" style="margin-left: 10px;">members.</p>
        </div>
        <div>
            <p class="landing-user-text-font"> We’re looking for people to join!</p>
        </div>
    </div>

    <div class="landing-buttons-container">
        <div class="landing-buttons-box">
            <div class="landing-buttons-inner">
                <p class="landing-buttons-inner-font">
                    Curious to see our missions?
                </p>
                <a class="landing-browse-project-button custom-a" href="{{ url_for('main_bp.home') }}">
                    Browse Projects
                    <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M2.79483 14.2802C2.26762 14.8074 1.41284 14.8074 0.885642 14.2802C0.358431 13.7529 0.358431 12.8982 0.885642 12.371L5.65381 7.6028L0.885642 2.83463C0.358432 2.30741 0.358432 1.45264 0.885643 0.925438C1.41284 0.398227 2.26762 0.398227 2.79483 0.925438L8.42131 6.55191C8.45614 6.58041 8.48989 6.6109 8.52238 6.64341C8.78725 6.90822 8.91901 7.25569 8.91775 7.60276C8.91901 7.94984 8.78725 8.29733 8.52238 8.5622C8.48989 8.59469 8.45614 8.6252 8.42131 8.65373L2.79483 14.2802Z"
                            fill="white" />
                    </svg>
                </a>
            </div>
        </div>
        <div class="landing-buttons-box">
            <div class="landing-buttons-inner">
                <p class="landing-buttons-inner-font">
                    Do you have an idea to realize?
                </p>
                <a class="landing-post-mission-button custom-a" href="{{ url_for('project_bp.new_project') }}">
                    Post a Mission
                    <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M2.79483 14.2802C2.26762 14.8074 1.41284 14.8074 0.885642 14.2802C0.358431 13.7529 0.358431 12.8982 0.885642 12.371L5.65381 7.6028L0.885642 2.83463C0.358432 2.30741 0.358432 1.45264 0.885643 0.925438C1.41284 0.398227 2.26762 0.398227 2.79483 0.925438L8.42131 6.55191C8.45614 6.58041 8.48989 6.6109 8.52238 6.64341C8.78725 6.90822 8.91901 7.25569 8.91775 7.60276C8.91901 7.94984 8.78725 8.29733 8.52238 8.5622C8.48989 8.59469 8.45614 8.6252 8.42131 8.65373L2.79483 14.2802Z"
                            fill="white" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock content %}