Adds some nice images and tidies up funnel page

1 files changed, 64 insertions, 22 deletions

diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index def9d65..dc64549 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -3,51 +3,93 @@
 {% load static %}
 {% block content %}
 
-    <div class="container">
+    <div class="container text-center">
         <div class="row">
-            <div class="px-4 py-5 my-5 text-center">
+            <div class="px-4 py-5 mt-5 mb-0">
                 <h1 class="display-5 fw-bold">High Quality Educational Resources</h1>
-                <p class="lead mb-4 mt-4">
+                <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 November 2024, the site is currently in active development and will be launched soon.
+                    As of December 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">
+        
+        <hr style="border: none; height: 5px; 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: 5px; 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="h4 font-weight-bold mb-2">What is Alphabet Learning?</h2>
+                    <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;">
-                        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.
+                        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="h4 font-weight-bold mb-2">Alphabet Learning Resources</h2>
+                    <h2 class="font-weight-bolder mb-2">Our philosophy</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.
+                        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: 5px; 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-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">
+            <div class="col-lg-6">
+                <div style="background-color: #d4edda; 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: #007bff;">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 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 style="background-color: #d4edda; 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;">Enter Your Email:</label>
+                            <input type="email" class="form-control" id="email" name="email" required placeholder="Enter Your Email Address" style="border: 2px solid #007bff; height: 50px; border-radius: 5px; transition: border-color 0.3s;">
+                        </div>
+                        <button type="submit" class="btn btn-primary btn-lg" style="background-color: #007bff; border: none; border-radius: 5px; height: 50px; transition: background-color 0.3s;">Join Our List</button>
                     </div>
-                    <button type="submit" class="btn btn-primary btn-lg rounded-pill">Join Our List</button>
                 </form>
-                <p class="text-muted">
+                <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>