wip: working on the form and front page

3 files changed, 313 insertions, 151 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index d475b2a..be6532f 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,113 +1,136 @@
 /* These styles are generated from project.scss. */
 
 .roboto-thin {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 100;
+    font-style: normal;
 }
 
 .roboto-light {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-style: normal;
 }
 
 .roboto-regular {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: normal;
 }
 
 .roboto-medium {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
 }
 
 .roboto-bold {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 700;
+    font-style: normal;
 }
 
 .roboto-black {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 900;
+    font-style: normal;
 }
 
 .roboto-thin-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 100;
+    font-style: italic;
 }
 
 .roboto-light-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-style: italic;
 }
 
 .roboto-regular-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: italic;
 }
 
 .roboto-medium-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: italic;
 }
 
 .roboto-bold-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 700;
+    font-style: italic;
 }
 
 .roboto-black-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 900;
+    font-style: italic;
 }
 
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: 700; /* Bold for headings */
 }
 
-p, label, button {
+p,
+label,
+button {
     font-weight: 400; /* Regular for body text */
 }
 
 .custom-text {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.7;
     color: #212529;
 }
 
-.alert-debug {
-  color: black;
-  background-color: white;
-  border-color: #d6e9c6;
+.email-submit-button {
+    background-color: #ac94eb;
+    padding: 12px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
 }
 
+.email-submit-button:hover {
+    background-color: #c0b0eb;
+}
+
+.alert-debug {
+    color: black;
+    background-color: white;
+    border-color: #d6e9c6;
+}
 
 .alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
+    color: #b94a48;
+    background-color: #f2dede;
+    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 */
+    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 */
 }
 
@@ -131,28 +154,28 @@ p, label, button {
 
 /* Change the colour of the box shadow */
 .my-card-shadow-sm {
-  box-shadow: 0 0.25rem 0.5rem rgba(100, 100, 100, 0.1);
+    box-shadow: 0 0.25rem 0.5rem rgba(100, 100, 100, 0.1);
 }
 
 .my-card-shadow-lg {
-  box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
+    box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
 }
 
 h1 {
     /*color: #657c76;*/
-    font-size: 2.0rem;
+    font-size: 2rem;
     font-weight: bold;
 }
 
 a {
-  font-size: inherit;
-  color: #394f49;
-  font-weight: bold;
-  text-decoration: none;
+    font-size: inherit;
+    color: #394f49;
+    font-weight: bold;
+    text-decoration: none;
 }
 
 header {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 .card-title a {
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index a413cfc..533d0e8 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -60,7 +60,7 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-white">
         <div class="container-fluid">
             <a class="navbar-brand" href="{% url "home" %}">
-                <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
+                <img style="margin-left: 2rem; margin-top: 20px;" src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                     aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -84,17 +84,6 @@
                         <!-- </div> -->
                     </li>
                     <li class="nav-item">
-                        {% if request.user.is_authenticated %}
-                        <a class="nav-link text-gray fw-bold" href="{% url "users:detail" request.user.id %}">{{ request.user }}</a>
-                        {% else %}
-                        <a class="nav-link text-dark fw-bold" href="{% url "account_login" %}">Log in</a>
-                        {% endif %}
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link text-dark fw-bold" href="{% url "resources:resource_list" %}">Resources</a>
-                    </li>
-                    <li class="nav-item">
                         <a class="nav-link text-dark fw-bold"
                            href="https://www.tes.com/teaching-resources/shop/alphabetlearning"
                            target="_blank">TES Shop</a>
@@ -116,7 +105,6 @@
             </div>
         </div>
     </nav>
-    <div class="border-bottom border-dark border-1"></div>
 </header>
 <main>
     {% block body %}
diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index dc64549..8f74836 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -1,98 +1,249 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% load static %} {% block content %}
 
-{% 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-5 fw-bold">High Quality Educational Resources</h1>
-                <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 December 2024, the site is currently in active development and will be launched soon.
-                </p>
-            </div>
+<div class="container text-center">
+    <div class="row">
+        <div class="px-4 py-5 mt-5 mb-0">
+            <h1 class="display-5 fw-bold">Welcome, friend!</h1>
+            <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 December 2024, the site is
+                currently in active development and will be launched soon.
+            </p>
         </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>
 
-        <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>
+    <hr
+        style="
+            border: none;
+            height: 10px;
+            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;" />
+    <hr
+        style="
+            border: none;
+            height: 10px;
+            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="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.
-                    </p>
-                </div>
+    <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.
+                </p>
             </div>
-            <div class="col-md-6 d-flex">
-                <div class="p-4 border border-primary rounded shadow flex-fill custom-box">
-                    <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>
+        </div>
+        <div class="col-md-6 d-flex">
+            <div
+                class="p-4 border border-primary rounded shadow flex-fill custom-box"
+            >
+                <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>
         </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>
 
-        <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>
+    <hr
+        style="
+            border: none;
+            height: 10px;
+            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="row justify-content-center">
-            <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 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>
-                </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>
+        <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-12">
+            <div
+                style="
+                    background-color: #edade0;
+                    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.
                 </p>
             </div>
+            <form
+                method="post"
+                action="{% url 'payments:email_signup' %}"
+                class="mb-4"
+                style="padding: 30px 0"
+            >
+                {% csrf_token %}
+                <div
+                    style="
+                        background-color: #91dacd;
+                        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;
+                            "
+                            >Your story starts here...</label
+                        >
+                        <input
+                            type="email"
+                            class="form-control"
+                            id="email"
+                            name="email"
+                            required
+                            placeholder="Your email address..."
+                            style="
+                                border: 2px solid #25daba;
+                                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">
+                            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>
+</div>
 {% endblock content %}