{% extends "base.html" %} {% load static %} {% block content %}

<div class="container text-center">
    <div class="row">
        <div class="px-4 py-5 mt-5 mb-0">
            <h1 class="display-1 fw-bold">Alphabet Learning</h1>
            <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191;">
                High quality educational resources focused on simple concepts and the first steps in learning.
            </p>

        </div>
    </div>
    
    <hr
        style="
            border: none;
            height: 10px;
            background: linear-gradient(
                to right,
                red,
                orange,
                yellow,
                green,
                #1a87ee,
                indigo,
                violet
            );
            width: 100%;
            margin: 20px 0;
        "
    />
    
    
    <div class="row justify-content-center my-5">
        <div class="col-lg-12">
            <h2 class="display-4 font-weight-bolder my-3">
                Sign up
            </h2>
            <div>
                <p class="display-6 mb-4" style="color: darkgray;">
                    To be informed of the site launch and receive FREE resource credits,
                    join our new customer mailing list...
                </p>
            </div>
            <form
                method="post"
                action="{% url 'payments:email_signup' %}"
                class="mb-4"
                style="padding: 30px 0"
            >
                {% csrf_token %}
                <div class="my-5">
                    <div class="mb-4 text-start">
                        <input
                            type="email"
                            class="sign-up-form-input"
                            id="email"
                            name="email"
                            required
                            placeholder="Your email address..."
                        />
                    </div>
                        <button type="submit" style="background-color: red; color: white; border: none; padding: 20px 50px; border-radius: 10px; font-size: 1.5rem; font-weight: bold;">
                            Submit
                        </button>
                </div>
            <p class="text-muted text-center mt-3">
                <small
                    >By joining our list, you agree to our
                    <a
                        href="{% url 'payments:privacy_policy' %}"
                        class="text-decoration-none"
                        >Privacy and Legal Notice</a
                    >.</small
                >
            </p>
            </form>
        </div>
        <div class="col-lg-12">
            <h2 class="display-4 font-weight-bolder my-3">
                Bonus offer!
            </h2>
            <p class="display-6 mb-4" style="color: darkgray;">
                As a thank-you, the first fifty customers who join our mailing list will receive a 50% discount once the site is live.
            </p>
        </div>
    </div>

    <hr
        style="
            border: none;
            height: 10px;
            background: linear-gradient(
                to right,
                red,
                orange,
                yellow,
                green,
                #1a87ee,
                indigo,
                violet
            );
            width: 100%;
            margin: 20px 0;
        "
    />

    <div class="row justify-content-center">
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel4.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel5.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel6.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 3"
            />
        </div>
    </div>


    <div class="row my-5 d-flex align-items-stretch">
        <div class="col-md-12 d-flex">
            <div class="p-4 flex-fill">
                <h2 class="display-4 font-weight-bolder my-3">
                    Learning from A to Z
                </h2>
                <p class="display-6" style="margin-bottom: 20px; color: darkgray;">
                    Focused on early concepts,
                    these resources are designed to be accessible to all learners.
                </p>
            </div>
        </div>
            <div class="display-4 font-weight-bolder my-5">
                <h2 class="display-4 font-weight-bolder mb-2">
                    No commitment required
                </h2>
                <p class="display-6" style="margin-bottom: 20px; color: darkgray;">
                    Resources will be available to purchase individually
                    without a subscription.
                </p>
            </div>
    </div>


    <div class="row justify-content-center my-5">
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel1.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel2.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4 mb-5 mb-md-0">
            <img
                src="{% static 'images/funnel3.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 3"
            />
        </div>
    </div>
<p class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center" style="color: darkgray;">
    Alphabet Learning is currently in active <br>development and will be launched in Spring 2025.
</p>
</div>
{% endblock content %}