wip: site is better

9 files changed, 138 insertions, 176 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index cdff2b3..08d743c 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -95,6 +95,27 @@ button {
     font-weight: 400; /* Regular for body text */
 }
 
+input {
+    border: 6px solid rgb(253, 119, 119);
+    border-radius: 4px;
+    font-size: 2.0rem;
+    display: block;
+    padding: 10px;
+    width: 100%;
+    height: 100px;
+}
+
+input:focus {
+    border-color: darkgray;
+}
+
+input::placeholder {
+    color: darkgray;
+    font-size: 2.0rem;
+}
+
+
+
 .custom-text {
     font-family: "Roboto", sans-serif;
     font-size: 1.1rem;
diff --git a/alphabetlearning/static/images/funnel1.png b/alphabetlearning/static/images/funnel1.png
index cc844df..970a784 100644
--- a/alphabetlearning/static/images/funnel1.png
+++ b/alphabetlearning/static/images/funnel1.png
diff --git a/alphabetlearning/static/images/funnel2.png b/alphabetlearning/static/images/funnel2.png
index 8e976c0..70f151c 100644
--- a/alphabetlearning/static/images/funnel2.png
+++ b/alphabetlearning/static/images/funnel2.png
diff --git a/alphabetlearning/static/images/funnel3.png b/alphabetlearning/static/images/funnel3.png
index 50baecb..b4c80e3 100644
--- a/alphabetlearning/static/images/funnel3.png
+++ b/alphabetlearning/static/images/funnel3.png
diff --git a/alphabetlearning/static/images/funnel4.png b/alphabetlearning/static/images/funnel4.png
index 49dcdc1..cc2b0a0 100644
--- a/alphabetlearning/static/images/funnel4.png
+++ b/alphabetlearning/static/images/funnel4.png
diff --git a/alphabetlearning/static/images/funnel5.png b/alphabetlearning/static/images/funnel5.png
index 77baa9d..ca332e1 100644
--- a/alphabetlearning/static/images/funnel5.png
+++ b/alphabetlearning/static/images/funnel5.png
diff --git a/alphabetlearning/static/images/funnel6.png b/alphabetlearning/static/images/funnel6.png
index da8bde2..2609d38 100644
--- a/alphabetlearning/static/images/funnel6.png
+++ b/alphabetlearning/static/images/funnel6.png
diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index e06f65d..40f7861 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -3,58 +3,14 @@
 <div class="container text-center">
     <div class="row">
         <div class="px-4 py-5 mt-5 mb-0">
-            <h1 class="display-1 fw-bold">hello!</h1>
-            <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: lightgray;">
-                <span style="color: red;">Alphabet Learning</span> is a brand new platform selling high quality
-                <span style="color: orange;">educational resources</span>. As of <span style="color: yellow;">December 2024</span>, the site is
-                <span style="color: green;">currently in active development</span> and will be <span style="color: blue;">launched soon</span>.
+            <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,
-                #FF0000,
-                #FF8C00,
-                #FFFF00,
-                #32CD32,
-                #0000FF,
-                #4B0082,
-                #8A2BE2
-            );
-            width: 100%;
-            margin: 20px 0;
-        "
-    />
-
-    <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>
-
+    
     <hr
         style="
             border: none;
@@ -65,7 +21,7 @@
                 orange,
                 yellow,
                 green,
-                blue,
+                #1a87ee,
                 indigo,
                 violet
             );
@@ -73,47 +29,60 @@
             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.
+    
+    
+    <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>
-        </div>
-        <div class="col-md-6 d-flex">
-            <div
-                class="p-4 border border-primary rounded shadow flex-fill custom-box"
+            <form
+                method="post"
+                action="{% url 'payments:email_signup' %}"
+                class="mb-4"
+                style="padding: 30px 0"
             >
-                <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>
+                {% 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>
 
@@ -127,7 +96,7 @@
                 orange,
                 yellow,
                 green,
-                blue,
+                #1a87ee,
                 indigo,
                 violet
             );
@@ -137,7 +106,7 @@
     />
 
     <div class="row justify-content-center my-5">
-        <div class="col-md-4">
+        <div class="col-md-4 sm-mb-5">
             <img
                 src="{% static 'images/funnel4.png' %}"
                 class="img-fluid rotated-image"
@@ -159,91 +128,57 @@
             />
         </div>
     </div>
-    <div class="row justify-content-center">
-        <div class="col-lg-12">
-            <div
-                style="
-                    background-color: #f19de0;
-                    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.
+
+
+    <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>
-            <form
-                method="post"
-                action="{% url 'payments:email_signup' %}"
-                class="mb-4"
-                style="padding: 30px 0"
-            >
-                {% csrf_token %}
-                <div
-                    style="
-                        background-color: #9372eb;
-                        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;
-                            "
-                            >1, 2, 3...</label
-                        >
-                        <input
-                            type="email"
-                            class="form-control"
-                            id="email"
-                            name="email"
-                            required
-                            placeholder="Your email address..."
-                            style="
-                                border: 2px solid #855feb;
-                                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" onclick="floatLetters()">
-                            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 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 %}
diff --git a/alphabetlearning/templates/payments/success_email_signup.html b/alphabetlearning/templates/payments/success_email_signup.html
index 8c7d618..0988995 100644
--- a/alphabetlearning/templates/payments/success_email_signup.html
+++ b/alphabetlearning/templates/payments/success_email_signup.html
@@ -3,10 +3,16 @@
 {% load static %}
 
 {% block content %}
-    <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 class="row justify-content-center my-5">
+        <div class="col-lg-12">
+            <h2 class="display-4 font-weight-bolder my-3">
+                Success!
+            </h2>
+            <div>
+                <p class="display-6 mb-4" style="color: darkgray;">
+                    Just wait will you. You'll here from us next year.
+                </p>
+            </div>
         </div>
+    </div>
 {% endblock content %}
\ No newline at end of file