{% 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-5 fw-bold">Welcome, friend!</h1>
            <p class="lead mb-4 mt-4 bg-light p-4 rounded">
                Alphabet Learning is a brand new platform selling high quality
                educational resources. As of December 2024, the site is
                currently in active development and will be launched soon.
            </p>
        </div>
    </div>

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

    <div class="row justify-content-center my-5">
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel1_initial_sounds.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel2_picture_match_words.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel3_handwriting.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 3"
            />
        </div>
    </div>

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

    <div class="row my-5 d-flex align-items-stretch">
        <div class="col-md-6 d-flex">
            <div
                class="p-4 border border-danger rounded shadow flex-fill custom-box"
            >
                <h2 class="font-weight-bolder mb-2">
                    What is Alphabet Learning?
                </h2>
                <p class="custom-text" style="margin-bottom: 20px">
                    Our teaching resources are created by experienced educators
                    with 30 years of combined experience in mainstream and
                    special education, American camps, Australian nurseries,
                    childminding, and online teaching.
                </p>
                <p class="custom-text" style="margin-bottom: 20px">
                    All resources will be available to purchase individually for
                    a very competitive price <u>without</u> needing a
                    subscription. We believe this will make our resources more
                    accessible to more people.
                </p>
            </div>
        </div>
        <div class="col-md-6 d-flex">
            <div
                class="p-4 border border-primary rounded shadow flex-fill custom-box"
            >
                <h2 class="font-weight-bolder mb-2">Our philosophy</h2>
                <p class="custom-text">
                    Our resources have been designed with individual learners in
                    mind: those who need clarity, detail and to be stimulated
                    and engaged.
                </p>
                <p class="custom-text">
                    Not all learners are the same and one way doesn’t fit all.
                    Sometimes learners need to revisit concepts, explore them
                    further and look at them in a different way - Alphabet
                    Learning resources are designed with this in mind, focused
                    on getting to the nub of a concept to make learning clear.
                </p>
            </div>
        </div>
    </div>

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

    <div class="row justify-content-center my-5">
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel4_order_numbers.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel5_ug_words.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel6_2D_shape_match.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 3"
            />
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg-12">
            <div
                style="
                    background-color: #edade0;
                    padding: 20px;
                    border-radius: 10px;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                "
            >
                <p
                    class="lead mb-4"
                    style="
                        font-weight: bold;
                        font-size: 1.5rem;
                        text-align: center;
                    "
                >
                    To be kept informed about the site launch and to receive
                    <span style="font-weight: bold; color: white"
                        >50% off your first purchase</span
                    >, please submit your email address to 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
                    style="
                        background-color: #91dacd;
                        padding: 20px;
                        border-radius: 10px;
                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                    "
                >
                    <div class="mb-4 text-start">
                        <label
                            for="email"
                            class="form-label"
                            style="
                                font-size: 1.5rem;
                                font-weight: bold;
                                color: #333;
                            "
                            >Your story starts here...</label
                        >
                        <input
                            type="email"
                            class="form-control"
                            id="email"
                            name="email"
                            required
                            placeholder="Your email address..."
                            style="
                                border: 2px solid #25daba;
                                height: 60px;
                                border-radius: 5px;
                                transition: border-color 0.3s;
                            "
                        />
                    </div>
                    <div class="d-flex justify-content-end">
                        <p class="me-2 my-2" style="font-size: 1.5rem; font-weight: bold;">...easy as A, B, C!</p>
                        <button type="submit" class="email-submit-button">
                            Submit
                        </button>
                    </div>
                </div>
            </form>
            <p class="text-muted text-center">
                <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>
        </div>
    </div>
</div>
{% endblock content %}