fixing responssiveness of the landing page

Author: Houssien-Zeineddine

client/src/pages/Home/index.jsx

@@ -13,6 +13,7 @@ import securedPlatform from "../../assets/web-security 2.svg";
 import realTimeResults from "../../assets/pie-chart 1.svg";
 import { AuthContext } from "../../components/Context/AuthorizationContext";
 import "./styles.css";
+import "./responsive.css";
 
 const Home = () => {
   const { user } = useContext(AuthContext);

client/src/pages/Home/responsive.css

@@ -0,0 +1,207 @@
+/* Home Page Responsive Styles */
+
+/* Large screens */
+@media screen and (max-width: 1200px) {
+    .landing-page-text h2 {
+        width: 80%;
+    }
+
+    .our-features-cards {
+        width: 90%;
+    }
+}
+
+/* Medium screens */
+@media screen and (max-width: 992px) {
+    .landing-page-description {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .landing-page-text,
+    .politician-img-container {
+        width: 90%;
+        text-align: center;
+    }
+
+    .landing-page-text h2 {
+        width: 100%;
+    }
+
+    .landing-page-btn-container {
+        justify-content: center;
+    }
+
+    .politician-img-container {
+        padding: 2rem;
+        order: 2;
+    }
+
+    .landing-page-cards {
+        flex-direction: column;
+        height: auto;
+        padding: 4rem 0 1rem;
+        gap: 1.5rem;
+    }
+
+    .card {
+        border-radius: 10px;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .landing-page-cards-text {
+        height: auto;
+        padding: 3rem 1rem;
+        text-align: center;
+    }
+
+    .our-features-cards {
+        flex-direction: column;
+        width: 90%;
+        align-items: center;
+    }
+
+    .our-features-card {
+        width: 100%;
+        max-width: 350px;
+    }
+
+    .about-us-body {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .about-us-body>div,
+    .about-us-body img {
+        width: 90%;
+    }
+}
+
+/* Tablet */
+@media screen and (max-width: 768px) {
+    .landing-page-container {
+        gap: 4rem;
+    }
+
+    .landing-page-cards-container {
+        margin-top: -3rem;
+    }
+
+    .landing-page-text h2 {
+        font-size: calc(var(--font-size-header-2) * 0.85);
+    }
+
+    .landing-page-text p {
+        font-size: calc(var(--font-size-header-4) * 0.9);
+    }
+
+    .card {
+        height: auto;
+        padding: 1.5rem;
+        flex-direction: column;
+    }
+
+    .card-text {
+        width: 100%;
+        height: auto;
+        text-align: center;
+        align-items: center;
+    }
+
+    .our-features-header>p {
+        width: 90%;
+    }
+
+    .about-us-list {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+
+    .rounded-number {
+        margin: 0 auto 1rem auto;
+    }
+
+    .our-features-card {
+        animation-delay: 0.2s !important;
+    }
+
+    .our-features-card:nth-child(2) {
+        animation-delay: 0.4s !important;
+    }
+
+    .our-features-card:nth-child(3) {
+        animation-delay: 0.6s !important;
+    }
+}
+
+/* Mobile */
+@media screen and (max-width: 576px) {
+    .landing-page-container {
+        gap: 3rem;
+    }
+
+    .landing-page-cards-container {
+        margin-top: -2rem;
+    }
+
+    .landing-page-cards {
+        padding: 2rem 0 1rem;
+    }
+
+    .our-features-header h2,
+    .about-us-text h2,
+    .faqs-title {
+        font-size: calc(var(--font-size-header-2) * 0.8);
+        padding: 0 1rem;
+        text-align: center;
+    }
+
+    .faqs-title {
+        height: auto;
+        padding: 2rem 1rem;
+    }
+
+    .politician-img-container {
+        padding: 1rem;
+    }
+
+    .card {
+        width: 95%;
+        padding: 1rem;
+    }
+
+    .landing-page-text h2 {
+        font-size: calc(var(--font-size-header-2) * 0.75);
+    }
+
+    .about-us-text {
+        padding: 1.5rem;
+    }
+
+    .our-features-header p {
+        width: 100%;
+    }
+}
+
+/* Very small screens */
+@media screen and (max-width: 400px) {
+    .card {
+        width: 98%;
+        padding: 0.75rem;
+    }
+
+    .card img {
+        max-width: 70px;
+    }
+
+    .our-features-card {
+        height: auto;
+        padding: 1rem;
+    }
+
+    .about-us-body>div {
+        min-width: auto;
+    }
+}

client/src/pages/Home/styles.css

@@ -63,6 +63,10 @@
     animation: slideInRight 1s ease-out;
 }
 
+.politician-img-container img {
+    width: 100%;
+}
+
 .landing-page-text {
     display: flex;
     flex-direction: column;
@@ -286,6 +290,19 @@
     margin-bottom: 2.5rem;
 }
 
+.rounded-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: white;
+    width: 35px;
+    height: 35px;
+    min-width: 35px;
+    border-radius: 50%;
+    font-weight: var(--font-weight-bold);
+}
+
 div>h4 {
     font-size: var(--font-size-header-4);
 }
@@ -450,6 +467,10 @@ div>h4 {
 
 /* Footer Responsive Design */
 @media screen and (max-width: 968px) {
+    .landing-page-text{
+        margin-top: 5rem;
+    }
+
     .footer-content {
         flex-wrap: wrap;
         gap: 2rem;
@@ -513,4 +534,6 @@ div>h4 {
     100% {
         transform: translateY(0px);
     }
-}
+}
+
+/* Responsive Design for Home Page can be found in responsive.css */