Merge pull request #1519 from gtech-mulearn/dev

Dev
gtech-mulearn · May 19, 2024 · 56445ee · 56445ee
2 parents dd94de0 + 360e69f
commit 56445ee
Show file tree

Hide file tree

Showing 7 changed files with 621 additions and 637 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -44,10 +44,8 @@ import DiscordModeration from "./modules/Dashboard/modules/DiscordModeration/Dis
 import Test from "./modules/Dashboard/modules/Test/Test";
 import Analytics from "./modules/Dashboard/modules/UrlShortener/Pages/Analytics";
 import Donation from "./modules/Public/Donation/Donation";
-import DonationTest from "./modules/Public/Donation/pages/Donate";
 import Refund from "./modules/Public/Donation/pages/Refund";
 
-
 const Profile = lazy(
     () => import("./modules/Dashboard/modules/Profile/pages/Profile")
 );
@@ -270,10 +268,6 @@ function App() {
             path: "donation",
             element: <Donation />
         },
-        {
-            path: "donation-test",
-            element: <DonationTest />
-        },
         {
             path: "donation/refund",
             element: <Refund />

diff --git a/src/modules/Public/Donation/Donation.module.css b/src/modules/Public/Donation/Donation.module.css
@@ -1,16 +1,349 @@
-.fieldsContainer{
+.LClandingPage {
+    position: relative;
+    overflow-x: hidden;
+}
+
+.joinCircle {
+    background: var(--blue);
+    border-radius: var(--borderRadius);
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    width: 6rem;
+    color: #fff;
+}
+
+.backgroundImage {
+    top: 0;
+    position: absolute;
+
+    z-index: -2;
+}
+
+.backgroundImage img {
+    width: 100vw;
+    height: 110vh;
+}
+
+.LClandingPageHero {
+    /* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center; */
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    padding-top: 5rem;
+}
+
+.LClandingPageHero span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 3.5rem;
+    color: #000;
+}
+
+.LClandingPageHero span img {
+    position: relative;
+    top: 0.75rem;
+    height: 3rem;
+}
+
+.LClandingPageHero .dash {
+    position: absolute;
+    top: -50%;
+    width: 120%;
+    height: 100%;
+    border: 5px solid #accaf6;
+    border-style: dashed;
+    border-radius: 45%;
+}
+
+.LClandingPageHero .heroTitle b:nth-child(2) {
+    font-size: 4rem;
+    color: var(--blue);
+    position: relative;
+    top: -1rem;
+    background-image: linear-gradient(to right, #ddecff, #eaf3ff);
+    border-radius: 10%;
+    height: -1rem;
+    padding: 0rem 0.5rem;
+}
+
+.LClandingPageHero p {
+    width: 75%;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.DonationSection {
+    position: relative;
+    max-width: 100vw;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 6rem;
+}
+
+.DonationFormElement {
+    background: #fff;
+    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
+    width: 80%;
+    top: -25%;
+    padding: 1.5rem 3rem;
+    display: flex;
+    gap: 2rem;
+}
+
+.DetailsContainer {
+    width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    margin-bottom: 10px;
+    padding: 1rem 0;
+    gap: 0.2rem;
+}
+
+.DetailsContainer h1,
+.DonationInputStyles {
+    margin-bottom: 0.7rem;
+}
+
+.DetailsContainer label {
+    margin: 0.2rem 0.5rem;
+}
+
+.DetailsContainer h1 {
+    font-weight: 600;
+    font-size: 1.7rem;
 }
 
-.inputStyles{
-    padding: 10px;  
-    border-radius: 4px;
-    outline: none;
-    background-color: #f3f3f4;
-    font-size: 14px;
+.DonateButtonContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.DonateButtonContainer button {
+    background-color: #fff;
+    width: 100%;
+    color: var(--blue);
+    border: 2px solid var(--blue);
+    border-radius: 0.5rem;
+    padding: 0.9rem 1.4rem;
+    margin-bottom: 1rem;
+}
+
+.DonateButtonContainer button:hover {
+    background-color: var(--blue);
+    color: #fff;
+}
+
+.DonateButtonContainer button.selectedButton {
+    background-color: var(--blue);
+    color: #fff;
+}
+
+.DonationInputStyles {
+    border-radius: 0.4rem;
+    border: 1.12px solid rgba(45, 191, 252, 0.25);
+    box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1);
+    padding: 0.4rem 1rem;
     width: 100%;
-    box-sizing: border-box;
-}
+}
+
+.AmountField {
+    font-size: 1.8rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+}
+
+.CurrencyContainer {
+    position: relative;
+}
+
+.CurrencyContainer p {
+    position: absolute;
+    cursor: default;
+    font-weight: 200;
+    color: rgba(0, 0, 0, 0.5);
+    right: 1rem;
+    top: 20%;
+}
+
+.TermsContainer {
+    display: flex;
+    align-items: center;
+}
+
+.TermsContainer input {
+    width: 1rem;
+}
+
+.TermsContainer label {
+    cursor: default;
+    font-size: 0.7rem;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.SubmitButton {
+    margin-top: 1rem;
+    font-size: 1.4rem;
+    width: 60%;
+    align-self: center;
+}
+
+.SubmitButton button {
+    padding: 0.7rem 1rem;
+}
+
+/* Refund Page */
+
+.refundSection {
+    display: flex;
+    margin-top: 30vh;
+    justify-content: center;
+    margin-bottom: 5rem;
+}
+
+.textContainer {
+    width: 95%;
+    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
+    background-color: #fff;
+    padding: 2rem 10rem;
+}
+
+@media (width<=955px) {
+    .LClandingPageHero .dash {
+        top: -46%;
+        border-radius: 38%;
+    }
+
+    .textContainer {
+        padding: 2rem 6rem;
+    }
+}
+
+@media (width <=820px) {
+    .LClandingPageHero span {
+        font-size: 1.7rem;
+        gap: 0.5rem;
+    }
+
+    .LClandingPageHero span img {
+        top: 0.5rem;
+        height: 2.2rem;
+    }
+
+    .LClandingPageHero .heroTitle b:nth-child(2) {
+        font-size: 2.5rem;
+        top: 0rem;
+    }
+
+    .LClandingPageHero p {
+        width: 90%;
+        font-size: 0.8rem;
+    }
+
+    .LClandingPageHero button {
+        padding: 0.5rem 1rem;
+    }
+
+    .DonationFormElement {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .SubmitButton {
+        width: 100%;
+        align-items: center;
+    }
+}
+
+@media (width<=550px) {
+    .LClandingPageHero .dash {
+        top: -48%;
+        border-radius: 35%;
+    }
+
+    .LClandingPageHero .heroTitle b:nth-child(2) {
+        font-size: 1.75rem;
+        top: 0rem;
+    }
+
+    .LClandingPageHero span {
+        font-size: 1.8rem;
+        gap: 0.7rem;
+    }
+    .LClandingPageHero span img {
+        top: 0.18rem;
+        height: 1.7rem;
+    }
+
+    .DonationFormElement {
+        top: -10%;
+        width: 96%;
+    }
+
+    .DonateButtonContainer {
+        /* flex-direction: column; */
+        align-items: center;
+        gap: 0.3rem;
+    }
+    .DonateButtonContainer button {
+        width: 100%;
+        padding: 0.4rem 0.8rem;
+        margin-bottom: 0.6rem;
+        font-size: 0.8rem;
+    }
+
+    .CurrencyContainer p,
+    .DetailsContainer label {
+        font-size: 0.9rem;
+    }
+
+    .DonationInputStyles {
+        font-size: 0.9rem;
+        padding: 0.6rem 0.9rem;
+    }
+
+    .DetailsContainer h1 {
+        font-size: 1.5rem;
+    }
+
+    .AmountField {
+        font-size: 1.4rem;
+    }
+
+    .TermsContainer label {
+        font-size: 0.6rem;
+    }
+
+    .SubmitButton {
+        font-size: 1rem;
+    }
+
+    .textContainer {
+        padding: 2rem;
+        width: 100%;
+        box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15);
+    }
+}
+
+@media (width<=380px) {
+    .LClandingPageHero .dash {
+        top: -47%;
+        border-radius: 35%;
+    }
+
+    .LClandingPageHero span {
+        font-size: 1.7rem;
+        padding: 0;
+    }
+}