fix: aboutPage

src/app/globals.css

@@ -53,7 +53,7 @@ body {
 
 .footer-bg {
     border-radius: 10px;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.45);
 }
 
 .home {
@@ -79,6 +79,11 @@ body {
     background-position: center;
 }
 
+.AboutCardContent {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(20px);
+}
+
 .scrolled {
     animation: fadeout 1.5s;
     -moz-animation: fadeout 1.5s;
@@ -258,3 +263,9 @@ body {
 .greenbutton{
     filter: hue-rotate(137deg) drop-shadow(0 0 20px #23A347) brightness(120%);
 }
+
+@media screen and (min-width: 1240px) {
+    .about {
+        min-height: max(100vh, 742px);
+    }
+}

src/components/AboutCard/AboutCard.module.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
 }
 
-.parent div {
+.edge {
     position: absolute;
     width: 55px;
     height: 55px;
@@ -46,3 +46,26 @@
     border: 1px solid #ddd;
     border-radius: 2px;
 }
+
+/* .topWedge {
+    width: 70px;
+    height: 6.9px;
+    left: 50%;
+    transform: translate(-40%,-10%);
+    background: url('../../assets/images/aboutWedge.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    transform: scale(1.2);
+}
+
+.bottomWedge {
+    width: 70px;
+    height: 8px;
+    left: 50%;
+    transform: translate(-40%,-50%);
+    transform: rotate(90deg);
+    background: url('../../assets/images/aboutWedge.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    transform: scale(1.2);
+} */

src/components/AboutCard/AboutCard.tsx

@@ -4,7 +4,7 @@ const AboutCard = () => {
     const content = AboutContent.content;
     return (
         <div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[60%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
-            <p className="pt-3 max-lg:text-base">{content}</p>
+            <p className="pt-3 max-lg:text-base text-lg font-Nunito">{content}</p>
         </div>
     );
 };

src/components/AboutCard/AboutCardMob.tsx

@@ -10,16 +10,16 @@ const AboutCardMob = () => {
             className={
                 styles.parent +
                 ' ' +
-                'md:hidden flex justify-center items-center p-4 py-10 text-center'
+                'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
             }
         >
-            <div className={styles.topLeft}></div>
-            <div className={styles.topRight}></div>
-            <div className={styles.bottomLeft}></div>
-            <div className={styles.bottomRight}></div>
-            <p className={styles.content + ' ' + 'w-full h-full p-3 overflow-y-scroll'}>
+            <div className={styles.topLeft + ' ' + styles.edge}></div>
+            <div className={styles.topRight + ' ' + styles.edge}></div>
+            <div className={styles.bottomLeft + ' ' + styles.edge}></div>
+            <div className={styles.bottomRight + ' ' + styles.edge}></div>
+            <div className={styles.content + ' ' + 'w-full h-full p-3 overflow-y-scroll relative'}>
                 {content} + {content2}
-            </p>
+            </div>
         </div>
     );
 };