Merge pull request #2180 from dev-launchers/responsive-updates

fix: Responsive Updates and Adding Collaboration Page to Navigation

apps/website/src/components/modules/Home/Sections/Carousel.tsx

@@ -42,7 +42,7 @@ const TestimonialCarousel = () => {
       <div className="hidden sm:block absolute right-0 top-0 w-48 h-full bg-gradient-to-l from-black via-black to-transparent z-10" />
 
       {/* Main carousel container */}
-      <div className="bg-black px-8 pt-12 relative select-none">
+      <div className="bg-black px-2 pt-12 relative select-none">
         <Carousel
           opts={{
             align: 'center',
@@ -61,10 +61,10 @@ const TestimonialCarousel = () => {
                     index % 2 === 1
                       ? 'bg-teal-900 border-teal-500'
                       : 'bg-orange-900 border-orange-500'
-                  } rounded-3xl p-12 h-full border-4 flex align-center items-center justify-center`}
+                  } rounded-3xl px-8 py-4 lg:pb-12 lg:pt-16 lg-px-10 h-full border-4 flex align-center items-center justify-center`}
                 >
                   <div className="flex flex-col items-center justify-center align-center  space-y-8">
-                    <p className="align-center  text-sky-400/75 text-base text-center flex-grow font-normal leading-relaxed">
+                    <p className="align-center opacity-70  text-white text-base text-center flex-grow font-normal leading-relaxed">
                       {testimonial.content}
                     </p>
                     <div className="flex items-center justify-center gap-3">
@@ -87,8 +87,8 @@ const TestimonialCarousel = () => {
           </CarouselContent>
 
           <div className="mt-12 flex gap-2 z-50 items-center justify-center">
-            <CarouselPrevious className="relative flex items-center justify-center left-0 ring-2 ring-white text-white hover:bg-gray-800" />
-            <CarouselNext className="relative flex items-center justify-center right-0 ring-2 ring-white text-white hover:bg-gray-800" />
+            <CarouselPrevious />
+            <CarouselNext />
           </div>
         </Carousel>
       </div>

apps/website/src/components/modules/Home/Sections/Hero.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React from 'react';
 import { Section } from './Section';
 import { styles } from '../styles';
@@ -6,12 +7,7 @@ import { sections } from './sections';
 const HeroSection = () => (
   <Section className={styles.section.container}>
     <div className={styles.section.headerHero}>
-      <h1
-        className={styles.section.headingHero.className}
-        style={styles.section.headingHero.style}
-      >
-        {sections.hero.title}
-      </h1>
+      <h1 className={styles.section.headingHero}>{sections.hero.title}</h1>
       <p className={styles.section.subHeading}>{sections.hero.description}</p>
     </div>
     <div className={styles.section.buttonContainer}>

apps/website/src/components/modules/Home/styles.js

@@ -22,12 +22,10 @@ export const styles = {
       'flex flex-col items-center justify-center w-full text-center  max-w-screen-xl ',
     headerHero:
       'flex flex-col items-center justify-center w-full max-w-6xl text-center pt-6 pb-4',
-    heading: 'text-6xl font-bold text-center leading-relaxed pb-4',
-    headingHero: {
-      className:
-        'font-bold max-w-5xl text-center align-center border-none border-0 m-0 pt-0 pb-4',
-      style: { fontSize: '4.25rem' },
-    },
+    heading:
+      'text-4xl lg:text-6xl leading-tight font-bold text-center max-w-7xl pb-4',
+    headingHero:
+      'font-bold max-w-4xl text-5xl lg:text-7xl leading-tight text-center align-center border-none border-0 m-0 pt-0 pb-4',
     label:
       'text-lg text-center uppercase text-gray-400 mx-auto font-normal min-w-full',
     logoContainer:
@@ -39,6 +37,6 @@ export const styles = {
     stackLogo:
       'flex items-center justify-center  gap-4 p-4 rounded-lg  transition-colors',
     subHeading:
-      'text-xl pb-2 text-center text-gray-500 max-w-3xl mx-auto font-normal',
+      'text-base md:text-lg lg:text-xl pb-2 pt-4 text-center leading-relaxed text-gray-500 max-w-3xl mx-auto font-normal',
   },
 };

apps/website/src/components/modules/SupportUs/SupportUs.js

@@ -1,15 +1,21 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+
+import PageBody from '../../common/PageBody';
+import SupportUsOverlay from './SupportUsOverlay';
+
+import studentPhoto from '../../../images/support-us/bw-girl-profile.png?webp';
+import { Wrapper } from './StyledSupportUs';
+
 export default function SupportUs() {
   return (
-    <div>
-      <section className="bg-black py-32 px-4 md:px-8 ">
+    <div className=" bg-black text-white">
+      <section className="max-w-7xl bg-black py-32 px-4 md:px-8 ">
         <div className="flex flex-col justify-center items-center">
-          <h1
-            className="max-w-3xl font-bold text-center leading-relaxed tracking-wide border-none border-0 m-0 pb-4 text-white"
-            style={{ fontSize: '4.5rem' }}
-          >
+          <h1 className="font-bold max-w-4xl text-5xl lg:text-7xl leading-tight text-center align-center border-none border-0 m-0 pt-0 pb-4 text-white">
             Fuel the Future
           </h1>
-          <p className="text-xl text-center max-w-3xl  text-gray-500  font-normal">
+          <p className="text-lg md:text-xl text-center max-w-3xl  text-gray-500  font-normal">
             Help Dev Launchers provide resources and opportunity for developers,
             creatives, and innovators from diverse backgrounds to gain the
             skills and knowledge necessary to launch their careers to the next
@@ -19,16 +25,16 @@ export default function SupportUs() {
       </section>
       <section className="max-w-full bg-black py-24 px-4 md:px-8">
         <div className="flex flex-col justify-center items-center">
-          <h2 className="text-6xl max-w-3xl font-bold text-left leading-relaxed tracking-wide border-none border-0 m-0 pb-4 text-white">
+          <h2 className="text-4xl lg:text-6xl leading-tight font-bold text-center max-w-7xl pb-6">
             Support Our Mission
           </h2>
-          <p className="text-lg text-center max-w-3xl  text-gray-500  font-normal">
+          <p className="text-base md:text-lg text-center max-w-3xl  text-gray-500  font-normal">
             Dev Launchers is a 501(c)(3) nonprofit intent on empowering diverse
             creatives, innovators, and leaders. We're working on touching as
             many lives as we possibly can, and need your help to make that
             happen. Any amount helps!
           </p>
-          <div className="flex pt-8">
+          <div className="flex justify-center pt-8">
             <a
               className="bg-purple-900 border-2 border-purple-400 text-base text-white font-normal capitalize py-3 px-6 rounded-xl transition-all duration-200 hover:text-black hover:font-semibold  hover:bg-purple-500 hover:border-purple-300 hover:border-4"
               href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=E6TSNXLFG3UTY&source=url"
@@ -42,11 +48,11 @@ export default function SupportUs() {
         <div className="flex flex-col justify-center items-center">
           <h2
             id="partner"
-            className="text-6xl max-w-3xl font-bold text-left leading-relaxed tracking-wide border-none border-0 m-0 pb-4 text-white"
+            className="text-4xl lg:text-6xl leading-tight font-bold text-center max-w-7xl pb-6"
           >
             Partner with Us
           </h2>
-          <p className="text-lg text-center max-w-3xl  text-gray-500  font-normal">
+          <p className="text-base md:text-lg text-center max-w-3xl  text-gray-500  font-normal">
             At Dev Launchers, we believe in the power of collaboration to create
             transformative experiences. Join us in our mission to bridge
             opportunity gaps in the tech industry by becoming a partner. Your
@@ -56,7 +62,7 @@ export default function SupportUs() {
             individual with a passion for technology and education, your support
             is crucial in building a more inclusive and diverse tech community.
           </p>
-          <div className="flex flex-wrap gap-8 pt-8">
+          <div className="flex flex-wrap justify-center gap-8 pt-8">
             <a
               className="bg-black border-2 border-purple-400 text-base text-white font-normal capitalize py-3 px-6 rounded-xl transition-all duration-200 hover:bg-purple-500 hover:text-black hover:font-semibold hover:border-purple-300 hover:border-4"
               href="mailto:[email protected]"
@@ -74,10 +80,10 @@ export default function SupportUs() {
       </section>
       <section className="max-w-full bg-black py-24 px-4 md:px-8">
         <div className="flex flex-col justify-center items-center">
-          <h2 className="text-6xl max-w-3xl font-bold text-center leading-relaxed tracking-wide border-none border-0 m-0 pb-4 text-white">
+          <h2 className="text-4xl lg:text-6xl leading-tight font-bold text-center max-w-7xl pb-6">
             Become a Mentor
           </h2>
-          <p className="text-lg text-center max-w-4xl  text-gray-500  font-normal">
+          <p className="text-base md:text-lg text-center max-w-4xl  text-gray-500  font-normal">
             Share your expertise and inspire tech enthusiasts at every career
             stage by becoming a mentor at Dev Launchers. As a mentor, you play a
             crucial role in helping our diverse members navigate the
@@ -90,7 +96,7 @@ export default function SupportUs() {
             space where every interaction is an opportunity for mutual learning
             and every challenge a chance to advance together.
           </p>
-          <div className="flex flex-wrap gap-8 pt-8">
+          <div className="flex flex-wrap justify-center gap-8 pt-8">
             <a
               className="bg-black border-2 border-purple-400 text-base text-white font-normal capitalize py-3 px-6 rounded-xl transition-all duration-200 hover:bg-purple-500 hover:text-black hover:font-semibold hover:border-purple-300 hover:border-4"
               href="mailto:[email protected]"