From de3f4a47624fdd163d1ae2eb5217c84d355dbb40 Mon Sep 17 00:00:00 2001
From: AndreiZg <zgherea13@gmail.com>
Date: Wed, 2 Oct 2024 14:50:01 +0200
Subject: [PATCH] adaptive design added

---
 frontend/src/pages/spotnet/about/about.css | 133 ++++++++++++++++++++-
 frontend/src/pages/spotnet/home/home.css   |   2 +-
 2 files changed, 133 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/spotnet/about/about.css b/frontend/src/pages/spotnet/about/about.css
index c6948368..523524fa 100644
--- a/frontend/src/pages/spotnet/about/about.css
+++ b/frontend/src/pages/spotnet/about/about.css
@@ -18,7 +18,7 @@
     align-items: center;
     flex-direction: column;
     justify-content: space-between;
-    height: 102vh;
+    height: 105vh;
     width: 117%;
     right: 9.2%;
     background-color: var(--primary-color);
@@ -99,4 +99,135 @@
     background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
     /* Blur */
     filter: blur(80px);
+}
+
+@media (min-width: 1800px) {
+    .about-container {
+        width: 125%;
+        right: 150px;
+    }
+
+    .about-title{
+        font-size: 70px;
+    }
+
+    .card-about {
+        width: 400px;
+        height: 450px;
+    }
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 250px;
+        left: -40px;
+        width: 232px;
+        height: 208px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 260px;
+        width: 232px;
+        height: 208px;
+    }
+
+}
+
+@media (max-width: 1800px) {
+    .about-container {
+        width: 120%;
+        right: 100px;
+    }
+
+    .card-about {
+        width: 370px;
+        height: 420px;
+    }
+
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 300px;
+        left: -40px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 300px;
+    }
+}
+
+@media (max-width: 1710px) {
+    .about-container {
+        width: 100%;
+        right: 20px;
+    }
+
+    .card-about {
+        width: 340px;
+        height: 400px;
+    }
+
+    .card-gradient:nth-child(1){
+        position: absolute;
+        top: 100px;
+        left: -40px;
+    }
+
+    .card-gradient:nth-child(2){
+        position: absolute;
+        right: -70px;
+        bottom: 120px;
+    }
+}
+
+@media (max-width: 1440px) {
+    .about-container {
+        left: 10px;
+        width: 97%;
+    }
+
+    .card-about {
+        width: 320px;
+        height: 380px;
+    }
+}
+
+@media (max-width: 1550px) {
+    .about-container {
+        width: 100%;
+    }
+
+    .card-about {
+        width: 320px;
+        height: 380px;
+    }
+}
+
+@media (max-width: 1400px) {
+    .about-container {
+        left: -10px;
+        width: 105%;
+    }
+}
+
+@media (max-width: 1280px) {
+    .about-container {
+        width: 95%;
+        left: 15px;
+    }
+
+    .card-about {
+        width: 280px;
+        height: 360px;
+    }
+}
+
+
+@media (max-width: 1024px) {
+    .card-about {
+        width: 100%;
+        max-width: 280px;
+        margin-bottom: 20px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/home/home.css b/frontend/src/pages/spotnet/home/home.css
index ab8d3435..578eee92 100644
--- a/frontend/src/pages/spotnet/home/home.css
+++ b/frontend/src/pages/spotnet/home/home.css
@@ -20,7 +20,7 @@ body{
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    height: calc(100vh - 160px);
+    height: calc(111vh - 160px);
 }
 
 .center-text{