From 7ee51df43cdf2d49eeb1c4a7b9fae0f4982bc8a1 Mon Sep 17 00:00:00 2001
From: angoway <160458834+angoway@users.noreply.github.com>
Date: Sun, 2 Mar 2025 13:20:06 -0800
Subject: [PATCH] Update design for congrats page (#152)

* Update design for congrats page

* Resize congratulations

* Pulling changes

* Modify Congratulations turtle logo

---------

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
---
 src/components/shared/Congratulations.tsx | 53 +++++++++++++++-------
 src/styles/Congratulations.scss           | 55 +++++++++++++++++++----
 2 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/src/components/shared/Congratulations.tsx b/src/components/shared/Congratulations.tsx
index 98281d4..5adce50 100644
--- a/src/components/shared/Congratulations.tsx
+++ b/src/components/shared/Congratulations.tsx
@@ -6,28 +6,51 @@ import penPalsLogo from '../../assets/turtleLogo.svg';
 function CongratsPage(): JSX.Element {
   return (
     <section id="congrats-page-container">
-      <div>
-        <div id="turtle-logo">
-          <img
-            src={penPalsLogo}
-            alt="Small turtle, part of the TeachLA logo"
-            id="turtle-image"
-          />
-          <div id="turtle-logo-text">Pen Pals</div>
-        </div>
-
+      <div id="congrats-turtle-logo">
+        <img
+          src={penPalsLogo}
+          alt="Small turtle, part of the TeachLA logo"
+          id="turtle-image"
+        />
+        <div id="turtle-logo-text">Pen Pals</div>
+      </div>
+      <div className="congrats-speech-and-turtle-container"></div>
+      <div className="congrats-speech-turtle-container">
         <div className="speech-bubble">
           <img
             src={speechBubble}
             alt="Small turtle, part of the TeachLA logo"
             id="speech-bubble-image"
           />
-          <div id="congratsTxt">CONGRATULATIONS!</div>
+          <div className="congrats-text">
+            <h1 id="congratsHeader">CONGRATULATIONS!</h1>
+            <p>
+              You learned about Python’s turtle library, where you can use
+              commands such as goto, forward, left, and right to draw lines.
+              Now, you can use these skills to create your own drawings and
+              graphics using code!
+            </p>
+            <div className="congrats-links">
+              <h2 id="congrats-links-header">
+                Check out our other websites to learn more!
+              </h2>
+              <a href="https://parcel-pointers.netlify.app/">
+                <u>Parcel Pointers</u>
+              </a>
+              <br />
+              <a href="https://boolbots.uclaacm.com/">
+                <u>Bool Bots</u>
+              </a>
+              <br />
+              <a href="https://tuxs-great-adventure.netlify.app/">
+                <u>Tux&apos;s Great Adventures</u>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div id="encouraging-turtle-congratulations">
+          <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
         </div>
-      </div>
-
-      <div id="encouraging-turtle-congratulations">
-        <img src={encouragingTurtle} alt="turtle image" id="turtle-picture" />
       </div>
     </section>
   );
diff --git a/src/styles/Congratulations.scss b/src/styles/Congratulations.scss
index 9d4b3ac..16652d7 100644
--- a/src/styles/Congratulations.scss
+++ b/src/styles/Congratulations.scss
@@ -9,19 +9,26 @@
 }
 
 #congrats-page-container {
+  align-items: center;
   background-color: colors.$primary-green;
+  display: flex;
+  flex-direction: column;
   // display: flex;
   height: 100%;
+  justify-content: center;
   // position: relative;
   width: 100%;
 }
 
-#turtle-logo {
+#congrats-turtle-logo {
   color: colors.$text-white;
   float: left;
+  left: 0;
   padding-left: 2vw;
   padding-top: 2vh;
+  position: fixed;
   text-align: left;
+  top: 0;
   width: 37vw;
 }
 
@@ -39,27 +46,54 @@
 }
 
 .speech-bubble {
-  height: auto;
   margin-left: 18vw;
   margin-right: 18vw;
+  max-height: 100vh;
+  padding: 0 2rem;
+  position: relative;
   // position: absolute;
-  width: auto;
+  width: 60vw;
 }
 
 #speech-bubble-image {
   height: auto;
-  width: 100%;
+  max-height: 100vh;
+  width: 60vw;
+}
+
+.congrats-text {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 0;
+  max-width: 60vw;
+  padding: 0 8vw;
+  position: absolute;
+  top: 1rem;
+}
+
+.congrats-text p {
+  font-size: 1.75vw;
 }
 
-#congratsTxt {
+#congratsHeader {
   color: colors.$primary-green;
   font-family: 'PT Sans', sans-serif;
   font-size: 4vw;
   font-weight: bold;
-  left: 50vw;
-  position: absolute;
-  top: 26%;
-  transform: translate(-50%, -60%);
+}
+
+.congrats-links a {
+  color: #000;
+  font-size: 1.75vw;
+}
+
+#congrats-links-header {
+  color: colors.$primary-green;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 2vw;
+  font-weight: bold;
 }
 
 #encouraging-turtle-congratulations {
@@ -71,6 +105,9 @@
 }
 
 #turtle-picture {
+  bottom: 2rem;
+  left: 2rem;
   padding-left: 6vw;
+  position: absolute;
   width: 14vw;
 }