Merge pull request #86 from RGBOARD/dev-page-fix

Dev Page Mobile Scroll Fix

Author: PinkSylvie

view/src/components/Footer.jsx

@@ -25,13 +25,13 @@ const Footer = () => {
             </a>
           </div>
         </div>
-        <div className="footer-item">
+        <div className="footer-item hover:text-red-700">
           <a href="/faq">FAQ</a>
         </div>
-        <div className="footer-item">
+        <div className="footer-item hover:text-green-700">
           <a href="/privacy">Privacy Policy</a>
         </div>
-        <div className="footer-item">
+        <div className="footer-item hover:text-blue-700">
           <a href="/developers">Our Developers</a>
         </div>
       </div>

view/src/pages/Developers.jsx

@@ -49,25 +49,31 @@ const Developers = () => {
     <div className="developers-page">
       <h2 className="page-title">Our Developers</h2>
       <div className="page-desc">
-        <h3 className="font-semibold">A small peek at the developers who brought RGBoard to life.</h3>
-        <h3> From design decisions to backend logic and frontend polish, our team has tackled every corner of the
+        <h3 className="font-semibold">
+          A small peek at the developers who brought RGBoard to life.
+        </h3>
+        <p className="hidden sm:block">
+          From design decisions to backend logic and frontend polish, our team has tackled every corner of the
           project with care and creativity.
           Each developer contributed across the full stack, making this site not just functional, but something we're
           proud of.
-        </h3>
+        </p>
+        <p className="block sm:hidden">
+          Each developer worked across the full stack to bring RGBoard to life.
+        </p>
       </div>
       <div className="developers-wrapper card-animation">
         <div className="developers-container">
           {developers.map((developer, index) => (
-            <Developer
-              key={index}
-              name={developer.name}
-              degree={developer.degree}
-              excerpt={developer.excerpt}
-              photo={developer.photo}
-              linkedin={developer.linkedin}
-              borderColor={developer.borderColor}
-            />
+              <Developer
+                  key={index}
+                  name={developer.name}
+                  degree={developer.degree}
+                  excerpt={developer.excerpt}
+                  photo={developer.photo}
+                  linkedin={developer.linkedin}
+                  borderColor={developer.borderColor}
+              />
           ))}
         </div>
       </div>

view/src/pages/styles/Developers.css

@@ -35,14 +35,22 @@
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 0.5rem;
-  padding: 1rem;
+  padding: 0.2rem;
 }
 
 .page-desc{
   text-align: center;
   font-size: 1.1rem;
   max-width: 1000px;
   padding-bottom: 1rem;
+
+  @media (max-width: 600px) {
+    .page-desc {
+      font-size: 0.9rem;
+      padding: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+  }
 }