With text on the success page

1 files changed, 32 insertions, 17 deletions

diff --git a/alphabetlearning/templates/payments/success_email_signup.html b/alphabetlearning/templates/payments/success_email_signup.html
index 6399733..9ee87c3 100644
--- a/alphabetlearning/templates/payments/success_email_signup.html
+++ b/alphabetlearning/templates/payments/success_email_signup.html
@@ -6,32 +6,33 @@
 <style>
     .celebration-container {
         position: relative;
-        height: 600px;
+        height: 450px;
         overflow: hidden;
         background-color: white;
     }
 
     .letter {
         position: absolute;
-        font-size: 3rem;
+        font-size: 2rem;
         font-weight: bold;
         opacity: 1;
         bottom: 100px;
-        z-index: 10;
+        z-index: 1;
         transform-origin: center bottom;
     }
 
     .gift-box {
         width: 100px;
         height: 100px;
-        background: #ff6b6b;
         position: absolute;
         left: 50%;
-        bottom: 50px;
+        bottom: 0px;
         transform: translateX(-50%);
         border-radius: 5px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         z-index: 5;
+        background-size: 200px;
+        background-image: url({% static 'images/AL_long_logo_black_grey.png' %});
     }
 
     .gift-box::before {
@@ -39,10 +40,11 @@
         position: absolute;
         width: 120px;
         height: 25px;
-        background: #ff8787;
+        background: darkgray;
         top: -15px;
         left: -10px;
         border-radius: 5px;
+        z-index: 6;
     }
 
     @keyframes spray {
@@ -65,14 +67,28 @@
         <div class="gift-box"></div>
     </div>
     <div class="row justify-content-center my-5">
-        <div class="col-lg-12">
+        <div class="col-lg-12 text-center">
             <h2 class="display-4 font-weight-bolder my-3">
-                Success!
+                Thanks for signing 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 class="mb-4 fs-5">
+                    We are very excited to have you join us at Alphabet Learning! 
+                    You will be updated before we are due to go live (this is currently estimated to be Spring 2025). 
+                    Once we are live we will also send you the <strong>FREE</strong> resource credits AND a <strong>50% discount</strong>.
+                    As you're an early bird, tell your friends if they too would benefit from these exclusive rewards.
+                </p>
+
+                <p class="mb-4 fs-5">
+                    If you have any ideas, suggestions or requests please don’t hesitate to let us know at hello@alphabetlearning.com We would love to hear from you!
+                </p>
+
+                <p class="mb-4 fs-5">
+                    Best wishes,
+                </p>
+
+                <p class="mb-4 fs-5">
+                    The Alphabet Learning Team
                 </p>
             </div>
         </div>
@@ -86,7 +102,6 @@
             const totalLetters = 220;
             
             function createSpray() {
-                // Create all letters at once
                 for(let i = 0; i < totalLetters; i++) {
                     setTimeout(() => {
                         const letter = document.createElement('div');
@@ -96,14 +111,14 @@
                         
                         // Calculate spray angle (-60 to 60 degrees)
                         const angle = (Math.random() * 120 - 60) * (Math.PI / 180);
-                        const speed = 300 + Math.random() * 200; // Random speed for variety
+                        const speed = 500 + Math.random() * 200; // Random speed for variety
                         
-                        // Calculate initial position (tighter spread at bottom)
-                        const initialSpread = Math.random() * 40 - 20;
+                        // Tighter initial spread at the source
+                        const initialSpread = Math.random() * 10 - 5;
                         letter.style.left = `calc(50% + ${initialSpread}px)`;
                         
                         // Calculate trajectory
-                        const duration = 6 + Math.random() * 0.5; // 1-1.5s duration
+                        const duration = 2 + Math.random() * 0.5; // 1-1.5s duration
                         const xVelocity = Math.sin(angle) * speed;
                         const yVelocity = Math.cos(angle) * speed;
                         const gravity = 500; // Pixels per second squared
@@ -115,7 +130,7 @@
                               offset: 0.6 },
                             { transform: `translate(${xVelocity * 1.2}px, 0px) rotate(${720 + Math.random() * 360}deg)` }
                         ], {
-                            duration: duration * 1000,
+                            duration: duration * 2000,
                             easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
                             fill: 'forwards'
                         });