Adds some nice images and tidies up funnel page

12 files changed, 100 insertions, 38 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 29a4e18..d475b2a 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -86,8 +86,9 @@ p, label, button {
 
 .custom-text {
     font-family: 'Roboto', sans-serif;
+    font-size: 1.1rem;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.7;
     color: #212529;
 }
 
@@ -104,6 +105,15 @@ p, label, button {
   border-color: #eed3d7;
 }
 
+.rotated-image {
+    transform: rotate(0deg); /* Existing rotation */
+    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)); /* Existing drop-shadow */
+    transition: transform 0.3s ease; /* Smooth transition for the hover effect */
+}
+
+.rotated-image:hover {
+    transform: rotate(3deg) translateY(-5px); /* Move the image up slightly on hover */
+}
 
 /*@font-face {*/
 /*  font-family: 'Franklin';*/
diff --git a/alphabetlearning/static/images/funnel1_initial_sounds.png b/alphabetlearning/static/images/funnel1_initial_sounds.png
new file mode 100644
index 0000000..7942396
--- /dev/null
+++ b/alphabetlearning/static/images/funnel1_initial_sounds.png
diff --git a/alphabetlearning/static/images/funnel2_handwriting.png b/alphabetlearning/static/images/funnel2_handwriting.png
new file mode 100644
index 0000000..d6be0ec
--- /dev/null
+++ b/alphabetlearning/static/images/funnel2_handwriting.png
diff --git a/alphabetlearning/static/images/funnel2_picture_match_words.png b/alphabetlearning/static/images/funnel2_picture_match_words.png
new file mode 100644
index 0000000..807dbfb
--- /dev/null
+++ b/alphabetlearning/static/images/funnel2_picture_match_words.png
diff --git a/alphabetlearning/static/images/funnel3_handwriting.png b/alphabetlearning/static/images/funnel3_handwriting.png
new file mode 100644
index 0000000..d063b47
--- /dev/null
+++ b/alphabetlearning/static/images/funnel3_handwriting.png
diff --git a/alphabetlearning/static/images/funnel3_ug_words.png b/alphabetlearning/static/images/funnel3_ug_words.png
new file mode 100644
index 0000000..e922ea4
--- /dev/null
+++ b/alphabetlearning/static/images/funnel3_ug_words.png
diff --git a/alphabetlearning/static/images/funnel4_order_numbers.png b/alphabetlearning/static/images/funnel4_order_numbers.png
new file mode 100644
index 0000000..817cbe6
--- /dev/null
+++ b/alphabetlearning/static/images/funnel4_order_numbers.png
diff --git a/alphabetlearning/static/images/funnel5_ug_words.png b/alphabetlearning/static/images/funnel5_ug_words.png
new file mode 100644
index 0000000..2dcb508
--- /dev/null
+++ b/alphabetlearning/static/images/funnel5_ug_words.png
diff --git a/alphabetlearning/static/images/funnel6_2D_shape_match.png b/alphabetlearning/static/images/funnel6_2D_shape_match.png
new file mode 100644
index 0000000..53f2de1
--- /dev/null
+++ b/alphabetlearning/static/images/funnel6_2D_shape_match.png
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>
diff --git a/alphabetlearning/templates/pages/privacy_policy.html b/alphabetlearning/templates/pages/privacy_policy.html
index df8544d..06d12a5 100644
--- a/alphabetlearning/templates/pages/privacy_policy.html
+++ b/alphabetlearning/templates/pages/privacy_policy.html
@@ -1,17 +1,26 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <div class="container text-start">
+    <div class="container text-center">
         <h1 class="font-weight-bold my-4">Privacy and Data Policy</h1>
-        <p>Your privacy is important to us. This policy explains how we collect, use, and protect your information.</p>
-        <h3 class="font-weight-bold">Information We Collect</h3>
-        <p>We collect information that you provide to us directly, such as your email address when you sign up for our newsletter.</p>
-        <h3 class="font-weight-bold">How We Use Your Information</h3>
-        <p>Your information is used to send you updates about our services and promotions.</p>
-        <h3 class="font-weight-bold">Data Protection</h3>
-        <p>We take appropriate security measures to protect your personal information.</p>
-        <h3 class="font-weight-bold">Contact Us</h3>
-        <p>If you have any questions about this policy, please contact us.</p>
-        <p class="mt-4">Additionally, if you would like to have your email removed from our database, please email us at <a href="mailto:help@alphabetlearning.online">help@alphabetlearning.online</a> with your request.</p>
+        
+        <div class="bg-light p-4 mb-4 rounded">
+            <h3 class="font-weight-bold">Information We Collect and How We Use It</h3>
+            <p>We collect your email address so that that we can inform you about the launch of our site and register your interest 
+                to receive a discount on your first purchases.</p>
+        </div>
+
+        <div class="bg-light p-4 mb-4 rounded">
+            <h3 class="font-weight-bold">Data Protection</h3>
+            <p>We take appropriate security measures to protect your personal information. <strong>We will not share your email address with any 
+                third parties.</strong></p>
+        </div>
+
+        <div class="bg-light p-4 mb-4 rounded">
+            <h3 class="font-weight-bold">Contact Us</h3>
+            <p>If you have any questions about this policy or would like us to remove your email address from our database, 
+                please email us at <a href="mailto:help@alphabetlearning.online">help@alphabetlearning.online</a>.</p>
+        </div>
+
     </div>
 {% endblock content %} 
\ No newline at end of file
diff --git a/alphabetlearning/templates/payments/success_email_signup.html b/alphabetlearning/templates/payments/success_email_signup.html
index f953beb..8c7d618 100644
--- a/alphabetlearning/templates/payments/success_email_signup.html
+++ b/alphabetlearning/templates/payments/success_email_signup.html
@@ -3,9 +3,10 @@
 {% load static %}
 
 {% block content %}
-    <div class="container my-5">
-        <div class="row">
-            <h2>Thanks for signing up!</h2>
-            <p>When we go live, we will be in touch with a 50% off discount code for your first purchase and other exclusive offers.</p>
+    <div class="container my-5 text-center">
+        <div class="row bg-light p-4 rounded">
+            <h2 class="text-success">Success! Thank you for signing up.</h2>
+            <p>A confirmation email has been sent to your inbox. We'll be in touch before our go-live 
+                date with full details on how to register for an Alphabet Learning account and receive your discount.</p>
         </div>
 {% endblock content %}
\ No newline at end of file