wip: working

17 files changed, 31 insertions, 34 deletions

diff --git a/alphabetlearning/static/css/custom.css b/alphabetlearning/static/css/custom.css
index d5c43ab..4ff491e 100644
--- a/alphabetlearning/static/css/custom.css
+++ b/alphabetlearning/static/css/custom.css
@@ -201,13 +201,6 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-hr {
-  margin: 1rem 0;
-  color: inherit;
-  border: 0;
-  border-top: var(--bs-border-width) solid;
-  opacity: 0.25;
-}
 
 h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index be6532f..cdff2b3 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -85,6 +85,10 @@ h6 {
     font-weight: 700; /* Bold for headings */
 }
 
+hr {
+      opacity: 1 !important; /* Forcefully set opacity to 1 */
+  }
+
 p,
 label,
 button {
@@ -100,18 +104,18 @@ button {
 }
 
 .email-submit-button {
-    background-color: #ac94eb;
     padding: 12px;
     font-size: 1.1rem;
     font-weight: 600;
+    background-color: #ff9d3e;
+    border: 2px solid #ff9d3e;
     color: white;
-    border: none;
     border-radius: 5px;
     transition: background-color 0.3s;
 }
 
 .email-submit-button:hover {
-    background-color: #c0b0eb;
+    background-color: #fa8713;
 }
 
 .alert-debug {
diff --git a/alphabetlearning/static/images/funnel1.png b/alphabetlearning/static/images/funnel1.png
new file mode 100644
index 0000000..cc844df
--- /dev/null
+++ b/alphabetlearning/static/images/funnel1.png
diff --git a/alphabetlearning/static/images/funnel1_initial_sounds.png b/alphabetlearning/static/images/funnel1_initial_sounds.png
deleted file mode 100644
index 7942396..0000000
--- a/alphabetlearning/static/images/funnel1_initial_sounds.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel2.png b/alphabetlearning/static/images/funnel2.png
new file mode 100644
index 0000000..8e976c0
--- /dev/null
+++ b/alphabetlearning/static/images/funnel2.png
diff --git a/alphabetlearning/static/images/funnel2_handwriting.png b/alphabetlearning/static/images/funnel2_handwriting.png
deleted file mode 100644
index d6be0ec..0000000
--- a/alphabetlearning/static/images/funnel2_handwriting.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel2_picture_match_words.png b/alphabetlearning/static/images/funnel2_picture_match_words.png
deleted file mode 100644
index 807dbfb..0000000
--- a/alphabetlearning/static/images/funnel2_picture_match_words.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel3.png b/alphabetlearning/static/images/funnel3.png
new file mode 100644
index 0000000..50baecb
--- /dev/null
+++ b/alphabetlearning/static/images/funnel3.png
diff --git a/alphabetlearning/static/images/funnel3_handwriting.png b/alphabetlearning/static/images/funnel3_handwriting.png
deleted file mode 100644
index d063b47..0000000
--- a/alphabetlearning/static/images/funnel3_handwriting.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel3_ug_words.png b/alphabetlearning/static/images/funnel3_ug_words.png
deleted file mode 100644
index e922ea4..0000000
--- a/alphabetlearning/static/images/funnel3_ug_words.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel4.png b/alphabetlearning/static/images/funnel4.png
new file mode 100644
index 0000000..49dcdc1
--- /dev/null
+++ b/alphabetlearning/static/images/funnel4.png
diff --git a/alphabetlearning/static/images/funnel4_order_numbers.png b/alphabetlearning/static/images/funnel4_order_numbers.png
deleted file mode 100644
index 817cbe6..0000000
--- a/alphabetlearning/static/images/funnel4_order_numbers.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel5.png b/alphabetlearning/static/images/funnel5.png
new file mode 100644
index 0000000..77baa9d
--- /dev/null
+++ b/alphabetlearning/static/images/funnel5.png
diff --git a/alphabetlearning/static/images/funnel5_ug_words.png b/alphabetlearning/static/images/funnel5_ug_words.png
deleted file mode 100644
index 2dcb508..0000000
--- a/alphabetlearning/static/images/funnel5_ug_words.png
+++ /dev/null
diff --git a/alphabetlearning/static/images/funnel6.png b/alphabetlearning/static/images/funnel6.png
new file mode 100644
index 0000000..da8bde2
--- /dev/null
+++ b/alphabetlearning/static/images/funnel6.png
diff --git a/alphabetlearning/static/images/funnel6_2D_shape_match.png b/alphabetlearning/static/images/funnel6_2D_shape_match.png
deleted file mode 100644
index 53f2de1..0000000
--- a/alphabetlearning/static/images/funnel6_2D_shape_match.png
+++ /dev/null
diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index 8f74836..e06f65d 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -3,11 +3,11 @@
 <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.
+            <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>.
             </p>
         </div>
     </div>
@@ -18,13 +18,13 @@
             height: 10px;
             background: linear-gradient(
                 to right,
-                red,
-                orange,
-                yellow,
-                green,
-                blue,
-                indigo,
-                violet
+                #FF0000,
+                #FF8C00,
+                #FFFF00,
+                #32CD32,
+                #0000FF,
+                #4B0082,
+                #8A2BE2
             );
             width: 100%;
             margin: 20px 0;
@@ -34,21 +34,21 @@
     <div class="row justify-content-center my-5">
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel1_initial_sounds.png' %}"
+                src="{% static 'images/funnel1.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 1"
             />
         </div>
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel2_picture_match_words.png' %}"
+                src="{% static 'images/funnel2.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 2"
             />
         </div>
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel3_handwriting.png' %}"
+                src="{% static 'images/funnel3.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 3"
             />
@@ -139,21 +139,21 @@
     <div class="row justify-content-center my-5">
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel4_order_numbers.png' %}"
+                src="{% static 'images/funnel4.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 1"
             />
         </div>
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel5_ug_words.png' %}"
+                src="{% static 'images/funnel5.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 2"
             />
         </div>
         <div class="col-md-4">
             <img
-                src="{% static 'images/funnel6_2D_shape_match.png' %}"
+                src="{% static 'images/funnel6.png' %}"
                 class="img-fluid rotated-image"
                 alt="Funnel 3"
             />
@@ -163,7 +163,7 @@
         <div class="col-lg-12">
             <div
                 style="
-                    background-color: #edade0;
+                    background-color: #f19de0;
                     padding: 20px;
                     border-radius: 10px;
                     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@@ -193,7 +193,7 @@
                 {% csrf_token %}
                 <div
                     style="
-                        background-color: #91dacd;
+                        background-color: #9372eb;
                         padding: 20px;
                         border-radius: 10px;
                         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@@ -208,7 +208,7 @@
                                 font-weight: bold;
                                 color: #333;
                             "
-                            >Your story starts here...</label
+                            >1, 2, 3...</label
                         >
                         <input
                             type="email"
@@ -218,7 +218,7 @@
                             required
                             placeholder="Your email address..."
                             style="
-                                border: 2px solid #25daba;
+                                border: 2px solid #855feb;
                                 height: 60px;
                                 border-radius: 5px;
                                 transition: border-color 0.3s;
@@ -226,8 +226,8 @@
                         />
                     </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">
+                        <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>