From d482923b0bcbc20868d7746837e53e2880f99125 Mon Sep 17 00:00:00 2001
From: aravt3040 <aravt@vt.edu>
Date: Mon, 3 Jun 2024 23:07:14 +0530
Subject: [PATCH] made the changes to mission page, donate button works but is
 not centred

---
 .../src/Pages/About-Us/Mission/Mission.jsx    |  72 ++++++++--
 .../src/Pages/About-Us/Mission/Mission.scss   | 128 ++++++++++++++----
 2 files changed, 162 insertions(+), 38 deletions(-)

diff --git a/react-ystemandchess/src/Pages/About-Us/Mission/Mission.jsx b/react-ystemandchess/src/Pages/About-Us/Mission/Mission.jsx
index 85c299cf..cf93cd59 100644
--- a/react-ystemandchess/src/Pages/About-Us/Mission/Mission.jsx
+++ b/react-ystemandchess/src/Pages/About-Us/Mission/Mission.jsx
@@ -3,13 +3,18 @@ import "./Mission.scss";
 import ImageOne from "../../../images/mission-image.png";
 import ImageTwo from "../../../images/LogoLineBreak.png";
 import ImageThree from "../../../images/founder-story.png";
-import ImageFour from "../../../images/donate.png";
-import ImageFive from "../../../images/free-lunch.png";
-import ImageSix from "../../../images/premium.png";
+import Heart from "../../../images/heart-regular.svg";
+import Gem from "../../../images/gem-regular.svg";
+//import ImageSix from "../../../images/premium.png";
 
 
 
 const Mission = () => {
+
+    const handleDonateButton = () => {
+        window.location.href =
+          "https://buy.stripe.com/8wMaF92c56FE7RKeUU";
+      };
     return (
         <main id='main-content'>
             <section className="container">
@@ -43,17 +48,58 @@ const Mission = () => {
                 <figure>
                     <img className="picture3" src={ImageThree} alt="mission-page"/>
                 </figure>
-                <figure>
-                    <img className="picture4" src={ImageFour} alt="mission-page"/>
-                </figure>
-                <figure>
-                    <img className="picture5" src={ImageFive} alt="mission-page"/>
-                </figure>
-                <figure>
-                    <img className="picture6" src={ImageSix} alt="mission-page"/>
-                </figure>
+                
+               
+                <div className="video-container">
+                    <iframe
+                        width="600"
+                        height="515"
+                        src="https://www.youtube.com/embed/SBr0bGgddIc?start=1"
+                        title="YouTube video player"
+                        frameBorder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen
+                    ></iframe>
+                </div>
+                <div className="donate-button-container">
+                <button className="donate-button" onClick={handleDonateButton}>
+                <strong>Donate</strong>
+                </button>
+                </div>
+                <div className="home-content2">
+                <div className="card1">
+                  <img src={Heart} alt="heart" />
+                  <h1>Free</h1>
+                    <p>
+                     For students who qualify for <br></br> free and reduced lunch.
+                    <br></br>
+                     Our lessons are free.
+                    </p>
+                <button>
+                    <strong>Join Now!</strong>
+                </button>
+                </div>
+                <div className="card2">
+                  <img src={Gem} alt="gem" />
+                  <h1>Premium</h1>
+                  <p>
+                    For students who don't qualify <br></br> for free and reduced lunch.{" "}
+                  <br></br>
+                    $25 / Week <br></br> First lesson is FREE. <br></br> Cancel anytime.
+                  </p>
+                <button>
+                  <strong>Join Now!</strong>
+                </button>
+                </div>
+                </div>
+                
                 </section>
                 </main>
                 )
+    
+
+
+      
 }
-export default Mission;
\ No newline at end of file
+export default Mission;
+
diff --git a/react-ystemandchess/src/Pages/About-Us/Mission/Mission.scss b/react-ystemandchess/src/Pages/About-Us/Mission/Mission.scss
index 1232fe2e..b17b1383 100644
--- a/react-ystemandchess/src/Pages/About-Us/Mission/Mission.scss
+++ b/react-ystemandchess/src/Pages/About-Us/Mission/Mission.scss
@@ -23,7 +23,7 @@ $brand-color-secondary: #ffffff;
     line-height: 26px;
     margin-top: 0;
     text-align: left;
-    padding-left: 0; // Ensure the paragraph aligns with the heading
+    padding-left: 0; 
     text-indent: 0;
      // Reset text indent if it's causing an offset
     padding-bottom:0;
@@ -71,36 +71,114 @@ $brand-color-secondary: #ffffff;
     margin-top: 10px;
 }
 
-.picture4 {
-    object-fit: contain;
-    width: max(100%, 25px);
+
+.video-container {
+    margin: 20px 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;  
+
+    .video-iframe {
+        width: 100%;
+        max-width: 800px;  
+        height: 450px;  
+        border: none;
+    }
+}
+
+
+.donate-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    width: 100%; 
+    margin: 10px 0;
+  }
+  
+  .donate-button {
+    text-align: center;
+    width: 200px;  
+    font-size: 1.2em;
+    border: none;
+    border-radius: 20px;
+    height: 50px;  
+    background-color: rgb(182, 180, 180);
+    box-shadow: 5px 5px 1px greenyellow;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  
+    &:hover {
+      background-color: darken(rgb(182, 180, 180), 10%);
+    }
+  }
+.card1, .card2 {
+    width: 25%; 
+    height: 500px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+    box-shadow: 10px 10px 1px rgb(115, 179, 19); 
+    text-align: center;
+    padding: 20px;
+}
+
+.card1 {
+    background-color: rgb(115, 179, 19);
+    box-shadow: 10px 10px 1px rgb(209, 230, 28);
+}
+
+.card2 {
+    background-color: rgb(255, 255, 255);
+    border: 3px solid rgb(115, 179, 19);
+}
+
+.card1 img, .card2 img {
+    width: 30%; 
+    margin-bottom: 5px;
+}
+
+.card1 p, .card2 p {
+    font-size: 1.4rem; 
+    margin-top: 5%;
+}
+
+.card1 button, .card2 button {
+    width: 50%; 
     height: 50px; 
-    padding-right: 400px;
-    padding-top: 0px;
+    font-size: 1.2rem; 
+    border: none;
+    border-radius: 20px;
+    box-shadow: 5px 5px 1px rgb(255, 255, 255);
     margin-top: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s;
 }
 
-.picture5 {
-    object-fit: contain;
-    width: max(100%, 160px);
-    height: 240px; 
-    padding-left: -500px;
-    margin-left:-200px;
-    padding-top: 0px;
-    margin-top: 10px;
+.card1 button {
+    background-color: rgb(209, 230, 28);
 }
 
-.picture6 {
-    object-fit: contain;
-    width: max(100%, 160px);
-    height: 240px; 
-    padding-left: -500px;
-    margin-left:200px;
-    padding-top: -10px;
-    margin-top: -900px;
+.card1 button:hover, .card2 button:hover {
+    transform: scale(1.1);
 }
 
-.picture5, .picture6 {
-    padding: 0;
-    margin-bottom:10px
+.card1 button:hover {
+    background-color: rgb(228, 243, 96);
+}
+
+.card2 button {
+    background-color: rgb(201, 200, 200);
+}
+
+.card2 button:hover {
+    background-color: rgb(238, 238, 238);
+}
+
+.home-content2 {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 40px;
 }
\ No newline at end of file