Added two boxes of text to the home page.

4 files changed, 137 insertions, 35 deletions

diff --git a/alphabetlearning/static/css/custom.css b/alphabetlearning/static/css/custom.css
index 802b9b5..d5c43ab 100644
--- a/alphabetlearning/static/css/custom.css
+++ b/alphabetlearning/static/css/custom.css
@@ -66,7 +66,7 @@
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
-  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
   --bs-body-font-family: var(--bs-font-sans-serif);
diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 45cc949..29a4e18 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,16 +1,102 @@
 /* These styles are generated from project.scss. */
 
+.roboto-thin {
+  font-family: "Roboto", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.roboto-light {
+  font-family: "Roboto", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.roboto-regular {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.roboto-medium {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.roboto-bold {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.roboto-black {
+  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;
+}
+
+.roboto-light-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;
+}
+
+.roboto-medium-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;
+}
+
+.roboto-black-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700; /* Bold for headings */
+}
+
+p, label, button {
+    font-weight: 400; /* Regular for body text */
+}
+
+.custom-text {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+}
+
 .alert-debug {
   color: black;
   background-color: white;
   border-color: #d6e9c6;
 }
 
-* {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  /*margin: 0;*/
-  /*padding: 0;*/
-}
 
 .alert-error {
   color: #b94a48;
@@ -18,15 +104,6 @@
   border-color: #eed3d7;
 }
 
-@font-face {
-  font-family: 'Lato';
-  src: url(../fonts/Lato-Regular.ttf);
-}
-
-@font-face {
-  font-family: 'Lato-Italic';
-  src: url(../fonts/Lato-Italic.ttf);
-}
 
 /*@font-face {*/
 /*  font-family: 'Franklin';*/
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index e6531ab..a413cfc 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -26,6 +26,9 @@
         {#            referrerpolicy="no-referrer" />#}
         <!-- Your stuff: Third-party CSS libraries go here -->
         <!-- This file stores project-specific CSS -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}"/>
         <link rel="stylesheet" href="{% static 'css/custom.css' %}"/>
         <link rel="stylesheet" href="{% static 'css/project.css' %}"/>
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 %}