aboutsummaryrefslogblamecommitdiffstats
path: root/alphabetlearning/templates/pages/home.html
blob: 40f78614f00d7d15d82c5c525466bc9a23b0557f (plain) (tree)
1
2
3
4
5
6
7
8
9
                                                               
 


                                         


                                                                                                              
                
 

              
    









                                        
                        






                           










                                                                                        
                    
                  




                                                          
             


































                                                                                                                                                                                        
              
          
 









                                        
                        








                                                 
                                      
                
                                                       


                                               
              

                              
                                                       





                                               
                                                       




                                               










                                                                                   

                    

































                                                                                   

              


                                                                                                 
      
                      
{% 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;">
                Additionally, we will give a 50% discount to the first fifty customers who join our mailing list, issued 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 my-5">
        <div class="col-md-4 sm-mb-5">
            <img
                src="{% static 'images/funnel4.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel5.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4">
            <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">
            <img
                src="{% static 'images/funnel1.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 1"
            />
        </div>
        <div class="col-md-4">
            <img
                src="{% static 'images/funnel2.png' %}"
                class="img-fluid rotated-image"
                alt="Funnel 2"
            />
        </div>
        <div class="col-md-4">
            <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 %}