From c2f467f9d7baf232b365a7ab1fb4a3391f049abc Mon Sep 17 00:00:00 2001
From: Marco Fabiani <240521773+marcofabiani12@users.noreply.github.com>
Date: Mon, 11 May 2026 17:04:10 +0200
Subject: [PATCH 1/3] Fix responsive layout for header, home and about pages

---
 components/Header.tsx                      | 229 +++++++++++++++------
 styles/AboutUs/AboutUs.module.scss         |  68 ++++++
 styles/Home/Home.module.css                |  29 ++-
 styles/components/Header.module.css        | 123 ++++++-----
 styles/components/Home/HomeLogo.module.css |  24 ++-
 styles/components/Layout.module.css        |   5 +-
 6 files changed, 344 insertions(+), 134 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 7cc0b94..9fcb6ea 100755
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -3,21 +3,25 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import RoundButton from "./molecules/RoundButton";
 import React, { useState } from "react";
-import { Navbar } from '../components/components_toolge/NavBar';
-import { T, useTranslate } from "@tolgee/react";
+import { T } from "@tolgee/react";
 
 const Header = ({ darkHeader = false }: { darkHeader?: boolean }) => {
     const router = useRouter();
     const { locale, asPath } = router;
+
     const isActive = (pathname: string) => router.pathname === pathname;
+
     const [navbarOpen, toggleNavbar] = useState(false);
-    const { t } = useTranslate();
+    const [peopleDropdownOpen, setPeopleDropdownOpen] = useState(false);
 
-    const handleNavigate = (event: React.MouseEvent<Element, MouseEvent>, pathname: string) => {
+    const handleNavigate = (
+        event: React.MouseEvent<Element, MouseEvent>,
+        pathname: string
+    ) => {
         event.preventDefault();
         event.stopPropagation();
         router.push(pathname);
-    }
+    };
 
     const handleLangChange = (lang: string) => {
         if (lang === locale) return;
@@ -32,14 +36,24 @@ const Header = ({ darkHeader = false }: { darkHeader?: boolean }) => {
                 <div className={styles.topbarInner}>
                     <div className={styles.langSwitch}>
                         <button
-                            className={`${styles.langButton} ${isLangActive("it") ? styles.langButtonActive : ""}`}
+                            className={`${styles.langButton} ${
+                                isLangActive("it")
+                                    ? styles.langButtonActive
+                                    : ""
+                            }`}
                             onClick={() => handleLangChange("it")}
                         >
                             IT
                         </button>
+
                         <span className={styles.langSeparator}>|</span>
+
                         <button
-                            className={`${styles.langButton} ${isLangActive("en") ? styles.langButtonActive : ""}`}
+                            className={`${styles.langButton} ${
+                                isLangActive("en")
+                                    ? styles.langButtonActive
+                                    : ""
+                            }`}
                             onClick={() => handleLangChange("en")}
                         >
                             EN
@@ -48,74 +62,161 @@ const Header = ({ darkHeader = false }: { darkHeader?: boolean }) => {
                 </div>
             </div>
 
-            <header className={`${styles.header} ${navbarOpen ? styles.open : ''}`} >
-                <div className={styles.logoTitle} onClick={() => router.push('/')} >
-                    <Image className={styles.logo} src="/Common/hkn_logo_white_vector.svg" alt="HKN PoliTO Logo" width={90} height={90} />
-                </div>
-
-                <div className={`${styles.menu} ${navbarOpen ? styles.open : ''}`}>
-                    <div className={isActive('/') ? styles.active : styles.inactive} onClick={() => router.push('/')}>
-                        <T keyName="header.nav.home" />
+            <header className={`${styles.header} ${navbarOpen ? styles.open : ""}`}>
+                <div className={styles.headerInner}>
+                    <div className={styles.logoTitle} onClick={() => router.push("/")}>
+                        <Image
+                            className={styles.logo}
+                            src="/Common/hkn_logo_white_vector.svg"
+                            alt="HKN PoliTO Logo"
+                            width={82}
+                            height={82}
+                        />
                     </div>
 
-                    <div className={isActive('/AboutUs') ? styles.active : styles.inactive} onClick={() => router.push('/AboutUs')}>
-                        <T keyName="header.nav.about" />
-                    </div>
+                    <div className={`${styles.menu} ${navbarOpen ? styles.open : ""}`}>
+                        <div
+                            className={isActive("/") ? styles.active : styles.inactive}
+                            onClick={() => router.push("/")}
+                        >
+                            <T keyName="header.nav.home" />
+                        </div>
 
-                    <div className={`${isActive('/People/People') || isActive('/People/Alumni') || isActive('/People/Professionals') || isActive('/People/PastBoards') ? styles.active : styles.inactive} ${styles.menuItem}`}
-                        /* onClick={() => router.push('/People/People')}*/>
-                        <div className={styles.itemWrapper}>
-                            <T keyName="header.nav.people.main" />
-                            <div className={styles.arrowDown}></div>
+                        <div
+                            className={isActive("/AboutUs") ? styles.active : styles.inactive}
+                            onClick={() => router.push("/AboutUs")}
+                        >
+                            <T keyName="header.nav.about" />
                         </div>
-                        <ul className={styles.dropdown}>
-                            <li className={isActive('/People/People') ? styles.activeDropdown : ''}
-                                onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/People')}>
-                                <T keyName="header.nav.people.people" />
-                            </li>
-                            <li className={isActive('/People/Alumni') ? styles.activeDropdown : ''}
-                                onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/Alumni')}>
-                                <T keyName="header.nav.people.alumni" />
-                            </li>
-                            <li className={isActive('/People/Professionals') ? styles.activeDropdown : ''}
-                                onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/Professionals')}>
-                                <T keyName="header.nav.people.professionals" />
-                            </li>
-                            <li className={isActive('/People/PastBoards') ? styles.activeDropdown : ''}
-                                onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/PastBoards')}>
-                                <T keyName="header.nav.people.past_boards" />
-                            </li>
-
-                        </ul>
-                    </div>
 
-                    <div className={isActive('/Activities/Events') ? styles.active : styles.inactive}
-                        onClick={() => router.push('/Activities/Events')}>
-                        <T keyName="header.nav.events" />
-                    </div>
+                        <div
+                            className={`${
+                                isActive("/People/People") ||
+                                isActive("/People/Alumni") ||
+                                isActive("/People/Professionals") ||
+                                isActive("/People/PastBoards")
+                                    ? styles.active
+                                    : styles.inactive
+                            } ${styles.menuItem}`}
+                            onClick={() => {
+                                if (window.innerWidth <= 960) {
+                                    setPeopleDropdownOpen((prev) => !prev);
+                                }
+                            }}
+                        >
+                            <div className={styles.itemWrapper}>
+                                <T keyName="header.nav.people.main" />
+                                <div className={styles.arrowDown}></div>
+                            </div>
+
+                            <ul
+                                className={`${styles.dropdown} ${
+                                    peopleDropdownOpen ? styles.dropdownOpen : ""
+                                }`}
+                            >
+                                <li
+                                    className={
+                                        isActive("/People/People")
+                                            ? styles.activeDropdown
+                                            : ""
+                                    }
+                                    onClick={(e) => handleNavigate(e, "/People/People")}
+                                >
+                                    <T keyName="header.nav.people.people" />
+                                </li>
+
+                                <li
+                                    className={
+                                        isActive("/People/Alumni")
+                                            ? styles.activeDropdown
+                                            : ""
+                                    }
+                                    onClick={(e) => handleNavigate(e, "/People/Alumni")}
+                                >
+                                    <T keyName="header.nav.people.alumni" />
+                                </li>
+
+                                <li
+                                    className={
+                                        isActive("/People/Professionals")
+                                            ? styles.activeDropdown
+                                            : ""
+                                    }
+                                    onClick={(e) =>
+                                        handleNavigate(e, "/People/Professionals")
+                                    }
+                                >
+                                    <T keyName="header.nav.people.professionals" />
+                                </li>
+
+                                <li
+                                    className={
+                                        isActive("/People/PastBoards")
+                                            ? styles.activeDropdown
+                                            : ""
+                                    }
+                                    onClick={(e) => handleNavigate(e, "/People/PastBoards")}
+                                >
+                                    <T keyName="header.nav.people.past_boards" />
+                                </li>
+                            </ul>
+                        </div>
 
-                    <div className={isActive('/Activities/StudyGroups') ? styles.active : styles.inactive}
-                        onClick={() => router.push('/Activities/StudyGroups')}>
-                        <T keyName="header.nav.study_groups" />
-                    </div>
+                        <div
+                            className={
+                                isActive("/Activities/Events")
+                                    ? styles.active
+                                    : styles.inactive
+                            }
+                            onClick={() => router.push("/Activities/Events")}
+                        >
+                            <T keyName="header.nav.events" />
+                        </div>
+
+                        <div
+                            className={
+                                isActive("/Activities/StudyGroups")
+                                    ? styles.active
+                                    : styles.inactive
+                            }
+                            onClick={() => router.push("/Activities/StudyGroups")}
+                        >
+                            <T keyName="header.nav.study_groups" />
+                        </div>
 
-                    <div className={isActive('/Publications/Recognitions') ? styles.active : styles.inactive}
-                        onClick={() => router.push('/Publications/Recognitions')}>
-                        <T keyName="header.nav.publications" />
+                        <div
+                            className={
+                                isActive("/Publications/Recognitions")
+                                    ? styles.active
+                                    : styles.inactive
+                            }
+                            onClick={() => router.push("/Publications/Recognitions")}
+                        >
+                            <T keyName="header.nav.publications" />
+                        </div>
                     </div>
 
-                </div>
+                    <div className={styles.headerSpace}>
+                        <RoundButton
+                            className={styles.joinUsButton}
+                            onClick={() => router.push("/JoinUs")}
+                        >
+                            <T keyName="common.join_us" />
+                        </RoundButton>
+                    </div>
 
-                <div className={styles.headerSpace}>
-                    <RoundButton className={styles.joinUsButton} onClick={() => router.push('/JoinUs')}>
-                        <T keyName="common.join_us" />
-                    </RoundButton>
+                    <img
+                        onClick={() => toggleNavbar((open) => !open)}
+                        src={"/Common/bars.svg"}
+                        height={"30px"}
+                        width={"30px"}
+                        alt="Menu"
+                        className={styles.showMenu}
+                    />
                 </div>
-
-                <img onClick={() => toggleNavbar((open) => !open)} src={'/Common/bars.svg'} height={'30px'} width={'30px'} alt="Menu" className={styles.showMenu} />
             </header>
         </>
-    )
-}
+    );
+};
 
-export default Header;
+export default Header;
\ No newline at end of file
diff --git a/styles/AboutUs/AboutUs.module.scss b/styles/AboutUs/AboutUs.module.scss
index da8aa1d..f69fb48 100755
--- a/styles/AboutUs/AboutUs.module.scss
+++ b/styles/AboutUs/AboutUs.module.scss
@@ -414,3 +414,71 @@
 .divider1 {
   height: 40px;
 }
+
+@media (max-width: 780px) {
+  .sections {
+    width: 100%;
+    padding-inline: 20px;
+  }
+
+  .section__container_img {
+    width: min(100%, 450px);
+    height: 420px;
+    margin-inline: auto;
+    overflow: hidden;
+  }
+
+  .section_image {
+    max-width: 100%;
+  }
+
+  .section1_image1,
+  .section1_image2,
+  .section2_image1,
+  .section3_image1,
+  .section4_image1 {
+    width: 80%;
+    height: auto;
+  }
+
+  .section1_image2 {
+    left: 20%;
+  }
+
+  .section2_image2,
+  .section4_image2 {
+    right: 0;
+  }
+
+  .section3_image3 {
+    left: 0;
+  }
+
+  .stats {
+    flex-direction: column;
+
+    &__element {
+      width: 100%;
+    }
+
+    &__container_img {
+      width: 70px;
+      height: 70px;
+    }
+  }
+}
+
+@media screen and (max-width: 960px) {
+    .menu {
+        gap: 10px;
+        padding: 10px 0 6px;
+    }
+
+    .dropdown {
+        margin-top: 4px;
+    }
+
+    .dropdown > li {
+        padding: 0.4em 0.8em;
+    }
+}
\ No newline at end of file
diff --git a/styles/Home/Home.module.css b/styles/Home/Home.module.css
index d8e1311..4c72763 100755
--- a/styles/Home/Home.module.css
+++ b/styles/Home/Home.module.css
@@ -5,9 +5,10 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    max-width: 1300px; /* set the maximum width */
-    width: 85%;
-    height:50vh;
+    max-width: 1300px;
+    width: min(100%, 1300px);
+    padding-inline: clamp(24px, 5vw, 72px);
+    min-height: 50vh;
 }
 
 .titleColumn {
@@ -71,8 +72,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 40vw;
+    max-width: 45%;
     margin-left: 25px;
+    min-width: 0;
 }
 
 /* second section - awards */
@@ -416,22 +418,23 @@
         font-size: 30px;
     }
 
-    .titleContainer{
+    .titleContainer {
         flex-direction: column;
+        align-items: flex-start;
+        height: auto;
+        min-height: auto;
+        gap: 40px;
     }
 
     .logoContainer {
         max-width: 100%;
+        width: 100%;
         margin-left: 0;
     }
 
     .visionContainer {
-        margin-top: 50vh;
+        margin-top: 80vh;
         margin-bottom: 50px;
-        @media (max-width: 450px) {
-            margin-top: 250px;
-            
-        }
     }
 
     .joinUsTitleButton {
@@ -460,3 +463,9 @@
     }
 
 }
+
+@media screen and (max-width: 450px) {
+    .visionContainer {
+        margin-top: 60px;
+    }
+}
\ No newline at end of file
diff --git a/styles/components/Header.module.css b/styles/components/Header.module.css
index 5e23be3..0439349 100755
--- a/styles/components/Header.module.css
+++ b/styles/components/Header.module.css
@@ -8,9 +8,12 @@
 }
 
 .topbarInner {
+    width: 100%;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 4px 7%;
+    padding-inline: clamp(20px, 5vw, 72px);
+    padding-top: 4px;
+    padding-bottom: 4px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -44,31 +47,33 @@
 }
 
 .header {
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    align-items: center;
-    height: 84px;
     width: 100%;
-    background-color:#061E33;
+    height: 84px;
+    background-color: #061E33;
     z-index: 20;
     margin-top: 30px;
     margin-bottom: 16px;
 }
 
+.headerInner {
+    width: 100%;
+    max-width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+    padding-inline: clamp(20px, 5vw, 72px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+}
 
 .logoTitle {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    padding-left: clamp(4vw, 8vw, 18vw);
-}
-
-@media (min-width: 1800px) {
-    .logoTitle {
-        padding-left: clamp(12vw, 16vw, 22vw);
-    }
+    padding-left: 0;
+    flex-shrink: 0;
 }
 
 .logo {
@@ -76,7 +81,7 @@
 }
 
 .title {
-    display:flex;
+    display: flex;
     flex-direction: column;
     height: 51px;
     justify-content: center;
@@ -86,16 +91,21 @@
 
 .menu {
     display: flex;
-    width: 55%;
-    justify-content: space-between;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    gap: clamp(20px, 2vw, 40px);
     font-size: 1.08em;
     flex-direction: row;
-    padding-left: 5%;
+    padding-left: 0;
+    min-width: 0;
 }
 
-.active, .inactive {
+.active,
+.inactive {
     font-family: "Outfit", sans-serif;
-    margin: 0 10px;
+    margin: 0;
+    white-space: nowrap;
 }
 
 .active {
@@ -115,9 +125,9 @@
 .headerSpace {
     display: flex;
     justify-content: flex-end;
-    justify-self: flex-end;
-    padding-right: 5%;
-    flex:1;
+    align-items: center;
+    flex-shrink: 0;
+    padding-right: 0;
 }
 
 .joinUsButton {
@@ -129,6 +139,7 @@
     line-height: normal;
     text-transform: capitalize;
     border-width: 3px;
+    white-space: nowrap;
 }
 
 .menuItem {
@@ -148,6 +159,7 @@
     box-shadow: 0 8px 24px rgba(0,0,0,0.3);
     background: #f2f2f2;
     min-width: 180px;
+    z-index: 40;
 }
 
 .dropdown > li {
@@ -171,7 +183,6 @@
     color: #f2f2f2;
 }
 
-
 .menu > .menuItem:hover > .dropdown,
 .dropdown:hover {
     display: block;
@@ -198,47 +209,67 @@
 }
 
 @media screen and (max-width: 960px) {
+    .header {
+        height: auto;
+        min-height: 84px;
+    }
+
+    .headerInner {
+        min-height: 84px;
+        height: auto;
+        flex-wrap: wrap;
+        position: relative;
+    }
+
     .showMenu {
         fill: white;
         display: block;
-        margin-right: auto;
-        position: absolute;
-        top: 3.5rem;
-        right: 50px;
+        margin-left: auto;
+        cursor: pointer;
+    }
+
+    .headerSpace {
+        display: none;
     }
 
-    .headerSpace,
     .menu {
         display: none;
-        flex: 1;
+        order: 3;
+        flex-basis: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 14px;
+        padding: 16px 0 8px;
         text-align: center;
     }
 
-    .menu {
-        padding-right: 3rem;
-        padding-top: 2rem;
+    .menu.open {
+        display: flex;
     }
 
-    .header.open {
-        height: 11rem;
-        align-items: flex-start;
+    .menuItem {
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     .dropdown {
-        left: auto;
-        right: auto;
-        top: auto;
-        margin-top: 4px;
+        position: static;
+        display: none;
+        margin-top: 8px;
         box-shadow: none;
+        border-radius: 10px;
+        width: 100%;
+        max-width: 220px;
     }
 
-    .menuItem {
-        justify-content: center;
-        display: flex;
+    .dropdownOpen {
+        display: block;
     }
 
-    .headerSpace.open,
-    .menu.open {
-        display: block;
+    .dropdown > li {
+        text-align: center;
     }
 }
diff --git a/styles/components/Home/HomeLogo.module.css b/styles/components/Home/HomeLogo.module.css
index 5b7f3fa..4827a5d 100755
--- a/styles/components/Home/HomeLogo.module.css
+++ b/styles/components/Home/HomeLogo.module.css
@@ -1,24 +1,26 @@
 .logoContContainer {
-    width: 550px;
-    height: 550px;
+    width: min(550px, 42vw);
+    aspect-ratio: 1 / 1;
     perspective: 1000px;
     position: relative;
 }
 
-.logoContainer, .logoContainer2 {
+.logoContainer,
+.logoContainer2 {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
-    transition: transform 0.5s ease-in-out; /* Add transition for smooth animation */
-
-    @media (max-width: 780px) {
-        height: auto;
-    }
+    transition: transform 0.5s ease-in-out;
 }
 
 .logoContainer2 {
     top: 4px;
-    left: 0px;
+    left: 0;
+}
+
+@media screen and (max-width: 780px) {
+    .logoContContainer {
+        width: min(420px, 90vw);
+    }
 }
\ No newline at end of file
diff --git a/styles/components/Layout.module.css b/styles/components/Layout.module.css
index 2f7a610..cb7d01a 100755
--- a/styles/components/Layout.module.css
+++ b/styles/components/Layout.module.css
@@ -12,11 +12,10 @@
 }
 
 .pageContent {
-    margin-top: 0; /* Adjust the value if your header height changes */
-    width: 97%;
+    margin-top: 0;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     align-items: center;
     z-index: 1;
 }

From df3d16007e4ca05eaee9e693ee09a61033e48368 Mon Sep 17 00:00:00 2001
From: Marco Fabiani <240521773+marcofabiani12@users.noreply.github.com>
Date: Mon, 11 May 2026 17:26:02 +0200
Subject: [PATCH 2/3] Improve JoinUs responsive layout

---
 pages/JoinUs.tsx                      |   8 +-
 styles/JoinUs/CoursesModal.module.css |  57 ++++++----
 styles/JoinUs/JoinUs.module.scss      | 152 +++++++++++++++++++++++++-
 3 files changed, 191 insertions(+), 26 deletions(-)

diff --git a/pages/JoinUs.tsx b/pages/JoinUs.tsx
index 0874899..f8c32e5 100755
--- a/pages/JoinUs.tsx
+++ b/pages/JoinUs.tsx
@@ -36,8 +36,12 @@ export default function JoinUs() {
                         </p>
                     </div>
                     <div className={styles.halfWidth}>
-                        <img alt={t('join_us.build_future.image_alt')} src="/JoinUs/hiring.png"
-                            width={"80%"} height={"auto"} loading="lazy" className={styles.headingImage} />
+                        <img
+                            alt={t('join_us.build_future.image_alt')}
+                            src="/JoinUs/hiring.png"
+                            loading="lazy"
+                            className={styles.headingImage}
+                        />
                     </div>
                 </section>
 
diff --git a/styles/JoinUs/CoursesModal.module.css b/styles/JoinUs/CoursesModal.module.css
index b4c0165..f8c8b3c 100644
--- a/styles/JoinUs/CoursesModal.module.css
+++ b/styles/JoinUs/CoursesModal.module.css
@@ -12,34 +12,47 @@
 
 .coursesPills {
   display: flex;
+  flex-wrap: wrap;
   margin-top: 1em;
   margin-bottom: 0.5em;
   gap: 0.5em;
+}
 
-  .coursesPill {
-    cursor: pointer;
-    padding-block: 10px;
-    padding-inline: 20px;
-    border-radius: 10px;
-    background: #fff;
-    box-shadow: 0 0 10px #00000008;
+.coursesPill {
+  cursor: pointer;
+  padding-block: 10px;
+  padding-inline: 20px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 0 10px #00000008;
+}
 
-    &.selected {
-      background: #1A334C;
-      color: white !important;
-    }
-  }
+.selected {
+  background: #1A334C;
+  color: white !important;
 }
 
 .popUpBackground {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 20;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  min-height: 100dvh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  overflow-y: auto;
 }
+
+@media screen and (max-width: 600px) {
+  .coursesContainer {
+    font-size: 1.1rem;
+  }
+
+  .coursesPill {
+    padding-block: 8px;
+    padding-inline: 14px;
+  }
+}
\ No newline at end of file
diff --git a/styles/JoinUs/JoinUs.module.scss b/styles/JoinUs/JoinUs.module.scss
index a8551aa..8f641f1 100755
--- a/styles/JoinUs/JoinUs.module.scss
+++ b/styles/JoinUs/JoinUs.module.scss
@@ -71,8 +71,8 @@
 }
 
 .headingTitle {
-  font-size: 4.8em;
-  line-height: 1.1em;
+  font-size: clamp(3rem, 6vw, 4.8rem);
+  line-height: 1.05;
   margin-bottom: 30px;
 }
 
@@ -821,3 +821,151 @@
   }
 
 }
+
+.heading,
+.spacing,
+.container > section:nth-of-type(3) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: clamp(24px, 4vw, 64px);
+}
+
+.halfWidth {
+  min-width: 0;
+}
+
+.headingImage {
+  width: min(80%, 420px);
+  max-width: 100%;
+  height: auto;
+}
+
+.gradientBackground,
+.disabledJoinUs,
+.submissionText,
+.applyCta,
+.submissionForm {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.requirementTitle,
+.requirementSubtitle,
+.recruitmentTitle,
+.recruitmentStepTitle,
+.shortRecruitmentStepText,
+.recruitmentStepText,
+.additionalRequirement {
+  overflow-wrap: anywhere;
+}
+
+@media screen and (max-width: 868px) {
+  .heading,
+  .spacing,
+  .container > section:nth-of-type(3) {
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  .headingImage {
+    width: min(85%, 320px);
+    min-width: 0;
+  }
+
+  .shortRecruitmentStepText {
+    width: 100%;
+    margin: 1.5rem 0;
+  }
+
+  .requirementPointList:nth-last-child(4) {
+    height: auto;
+    padding-left: 1.5rem;
+  }
+
+  .requiredGradesContainerWhite,
+  .requiredGradesContainerGray {
+    height: auto;
+  }
+
+  .requiredGradesContainerWhite::before,
+  .requiredGradesContainerGray::before {
+    display: none;
+  }
+
+  .fileInputContainer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .fileInputContainer > .formLabel {
+    max-width: 100%;
+  }
+
+  .fileName {
+    max-width: 100%;
+  }
+
+  .applyCta {
+    width: 100%;
+    padding: 28px 20px;
+  }
+
+  .applyButton {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .disabledJoinUs,
+  .submissionText {
+    width: 100%;
+    padding: 32px 20px;
+
+    &__text {
+      font-size: clamp(20px, 6vw, 28px);
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    padding-inline: 20px;
+  }
+
+  .pageTitle {
+    font-size: 2rem;
+    padding-bottom: 1.2em;
+  }
+
+  .pageSubtitle {
+    font-size: 1.2rem;
+  }
+
+  .headingTitle {
+    font-size: clamp(2.2rem, 11vw, 2.8rem);
+  }
+
+  .headingDescription {
+    font-size: 1.25rem;
+  }
+
+  .gradientBackground {
+    padding: 1.5rem;
+  }
+
+  .requirementTitle {
+    font-size: 1.45rem;
+  }
+
+  .recruitmentTitle {
+    font-size: 1.7rem;
+  }
+
+  .recruitmentStepText,
+  .shortRecruitmentStepText,
+  .additionalRequirement {
+    font-size: 1.15rem;
+  }
+}
\ No newline at end of file

From aa740ed2dfb8629de48342296aef199c79fe2793 Mon Sep 17 00:00:00 2001
From: Marco Fabiani <240521773+marcofabiani12@users.noreply.github.com>
Date: Mon, 11 May 2026 18:03:26 +0200
Subject: [PATCH 3/3] Improve People page responsiveness

---
 pages/People/People.tsx          |   6 ++
 styles/People/People.module.scss | 143 ++++++++++++++++++++++++++++++-
 2 files changed, 145 insertions(+), 4 deletions(-)

diff --git a/pages/People/People.tsx b/pages/People/People.tsx
index 71a67b2..acdf76e 100755
--- a/pages/People/People.tsx
+++ b/pages/People/People.tsx
@@ -40,6 +40,12 @@ export default function People() {
         fetchData();
     }, []);
 
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+
     const router = useRouter();
     const [boardIndex, setBoardIndex] = useState(0);
     const [teamIndex, setTeamIndex] = useState(0);
diff --git a/styles/People/People.module.scss b/styles/People/People.module.scss
index bfc36ef..470884e 100755
--- a/styles/People/People.module.scss
+++ b/styles/People/People.module.scss
@@ -20,7 +20,7 @@
 }
 
 .managementArea, .joinOurTeams {
-    width: 400px;
+    width: min(100%, 700px);
     color: #F2F2F2;
     text-align: center;
     font-family: Outfit;
@@ -29,6 +29,15 @@
     text-transform: capitalize;
 }
 
+.managementArea {
+    line-height: 1.1;
+}
+
+.boardGrid,
+.teamsGrid {
+    gap: 2rem;
+}
+
 .boardGrid, .teamsGrid, .discoverContainer {
     display: flex;
     flex-wrap: wrap;
@@ -42,7 +51,7 @@
     position: relative;
     flex-direction: column;
     align-items: center;
-
+    max-width: 320px;
 }
 
 .overlayContainer {
@@ -731,7 +740,7 @@ $member-margin: 30px;
     }
 
     .managementArea, .joinOurTeams {
-        font-size: 32px;
+        font-size: clamp(2rem, 7vw, 32px);
         width: 100%;
     }
     
@@ -768,7 +777,7 @@ $member-margin: 30px;
         overflow: visible;
         flex-wrap: wrap;
         gap: 8px;
-        padding: 5px 1;
+        padding: 5px 0;
       }
       
     .teamRow,
@@ -798,5 +807,131 @@ $member-margin: 30px;
     }
 }
 
+@media (max-width: 800px) {
+  .boardContainer,
+  .teamsContainer {
+    width: 100%;
+    padding-inline: 20px;
+  }
+
+  .boardGrid,
+  .teamsGrid {
+    width: 100%;
+  }
+
+  .boardMember {
+    flex: 1 1 100%;
+    max-width: 320px;
+  }
+
+  .boardImageContainer {
+    height: auto;
+  }
+
+  .boardCard {
+    bottom: 72px;
+  }
+
+  .team {
+    width: 100%;
+    max-width: 420px;
+    margin: 1rem 0;
+    overflow: hidden;
+  }
+
+  .teamRespImage {
+    width: 100%;
+    max-width: 280px;
+    height: auto;
+    left: 0;
+  }
+
+  .teamTextBox {
+    width: 100%;
+  }
+
+  .teamPopUp {
+    width: calc(100vw - 32px);
+    max-height: calc(100dvh - 32px);
+    padding: 20px;
+    border-radius: 24px;
+  }
+
+  .teamHeader {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .teamHeaderLeft {
+    min-width: 0;
+  }
+
+  .teamHeaderRight {
+    padding-left: 0;
+  }
+
+  .managerName {
+    white-space: normal;
+    text-align: center;
+  }
+
+  .managerTitleLink {
+    justify-content: center;
+  }
+
+  .teamContainer {
+    width: 100% !important;
+    padding: 0;
+  }
+
+  .teamMember {
+    flex: 1 1 30%;
+    min-width: 90px;
+    max-width: 120px;
+    margin: 8px 4px;
+  }
+
+  .memberName {
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  .memberRoleLink {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 430px) {
+  .theBoard,
+  .theTeams {
+    font-size: 22px;
+  }
+
+  .managementArea,
+  .joinOurTeams {
+    font-size: 30px;
+  }
+
+  .teamPopUp {
+    width: calc(100vw - 20px);
+    padding: 16px;
+  }
+
+  .managerPopUpImageContainer {
+    width: 110px;
+    height: 110px;
+  }
 
+  .teamMember {
+    min-width: 82px;
+    max-width: 100px;
+  }
+}
 
+@media (max-width: 800px) {
+    .boardContainer,
+    .teamsContainer {
+        margin-top: 0;
+    }
+}
\ No newline at end of file