Added two boxes of text to the home page.

1 files changed, 42 insertions, 20 deletions

diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index 633c607..def9d65 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -6,29 +6,51 @@
     <div class="container">
         <div class="row">
             <div class="px-4 py-5 my-5 text-center">
-                <h1 class="display-5 fw-bold">High quality educational resources</h1>
-                <div class="col-lg-6 mx-auto">
-                    <p class="lead mb-4 mt-4">
-                        Alphabet Learning is a brand new platform selling high quality educational resources.
-                        As of November 2024, the site is currently in active development and will be launched soon.
-                    </p>
-                    <p class="lead mb-4">To be kept informed about the site launch and to receive <strong>50% off your first purchase</strong>, please submit your email address 
-                    to join our new-customer mailing list.</p>
-                    <form method="post" action="{% url 'payments:email_signup' %}">
-                        {% csrf_token %}
-                            <div class="mb-3">
-                                <label for="email" class="lead text-start form-label font-weight-bold">Your email address:</label>
-                                <input type="email" class="form-control" id="email" name="email" required>
-                            </div>
-                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
-                    </form>
-                    <p class="text-start text-sm text-muted my-4">
-                        <small>By clicking 'Submit' you agree to us retaining your email address in accordance with our <a href="{% url 'payments:privacy_policy' %}">Privacy and Legal Notice</a>.</small>
+                <h1 class="display-5 fw-bold">High Quality Educational Resources</h1>
+                <p class="lead mb-4 mt-4">
+                    Alphabet Learning is a brand new platform selling high quality educational resources.
+                    As of November 2024, the site is currently in active development and will be launched soon.
+                </p>
+            </div>
+        </div>
+        <div class="row mb-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="h4 font-weight-bold mb-2">What is Alphabet Learning?</h2>
+                    <p class="custom-text" style="margin-bottom: 20px;">
+                        Alphabet Learning has been created from 30 years of educational experience.
+                        From the classrooms of mainstream and special education provisions, American camps, Australian nurseries,
+                        childminding at home and teaching online combined with a broad understanding of creativity and design a
+                        range of teaching and learning resources have been created.
                     </p>
-                    <p class="my-4">
-                        
+                </div>
+            </div>
+            <div class="col-md-6 d-flex">
+                <div class="p-4 border border-primary rounded shadow flex-fill custom-box">
+                    <h2 class="h4 font-weight-bold mb-2">Alphabet Learning Resources</h2>
+                    <p class="custom-text">
+                        Alphabet Learning resources have been designed with individual learners in mind. Those who need clarity, detail and to be stimulated and engaged.
+                        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, focussed on getting to the nub of a concept to make learning clear.
                     </p>
                 </div>
             </div>
         </div>
+        <div class="row justify-content-center">
+            <div class="col-lg-6 text-center">
+                <p class="lead mb-4">To be kept informed about the site launch and to receive <strong>50% off your first purchase</strong>, please submit your email address 
+                to join our new-customer mailing list.</p>
+                <form method="post" action="{% url 'payments:email_signup' %}" class="mb-4">
+                    {% csrf_token %}
+                    <div class="mb-3">
+                        <label for="email" class="form-label font-weight-bold">Enter Your Email:</label>
+                        <input type="email" class="form-control rounded-pill" id="email" name="email" required placeholder="example@example.com">
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-lg rounded-pill">Join Our List</button>
+                </form>
+                <p class="text-muted">
+                    <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 %}