Member Career Paths + Our Partnerships

app/components/MemberCareerPaths.tsx

@@ -0,0 +1,100 @@
+/*  MemberCareerPaths.tsx
+*
+*   This component is a section of the website that displays a collage of
+*   company logos that members have gone on to work for.
+* 
+*   Created by: Megan Yi and Holden Kittelberger
+*   Date: 1/16/25
+*/
+
+import H3Section from "./h3Section";
+import ImageCollageMapper from "./imageCollageMapper";
+
+export default function MemberCareerPaths() {
+
+    /* Constant Array of all the images being used in the collage */
+    const logos = [
+        {src: "/member-career-paths/amazon_logo.png", alt: "Amazon"},
+        {src: "/member-career-paths/ey_logo.png", alt: "EY"},
+        {src: "/member-career-paths/mathworks_logo.png", alt: "MathWorks"},
+        {src: "/member-career-paths/meta_logo.png", alt: "Meta"},
+        {src: "/member-career-paths/bluecat_logo.png", alt: "BlueCat Networks"},
+        {src: "/member-career-paths/nasuni_logo.png", alt: "Nasuni"},
+        {src: "/member-career-paths/datadog_logo.png", alt: "Datadog"},
+        {src: "/member-career-paths/google_logo.png", alt: "Google"},
+        {src: "/member-career-paths/palantir_logo.png", alt: "Palantir"},
+        {src: "/member-career-paths/apple_logo.png", alt: "Apple"},
+        {src: "/member-career-paths/spotify_logo.png", alt: "Aaron's Presents"},
+        {src: "/member-career-paths/notion_logo.png", alt: "Notion"},
+        {src: "/member-career-paths/snapchat_logo.png", alt: "Snapchat"},
+        {src: "/member-career-paths/microsoft_logo.png", alt: "Microsoft"},
+        {src: "/member-career-paths/mastercard_logo.png", alt: "Mastercard"},
+        {src: "/member-career-paths/goldmann_sachs_logo.png", alt: "Goldmann Sachs"},
+        {src: "/member-career-paths/disney_logo.png", alt: "Disney+"},
+    ]
+
+    /* constant representation of how the images will be split up between
+       rows according to the figma
+    */
+    const rows = [
+        logos.slice(0, 5), // First row
+        logos.slice(5, 10), // Second row
+        logos.slice(10), // Third row
+    ];
+
+    /* returns the h3 section component with a title and its children */
+    /* the child div is a map of the const array of images */
+    /* at smaller screen sizes it cuts off the left and right images and
+       resizes
+    */
+    return (
+        <H3Section
+            header="Member Career Paths"
+            headerAlignment="center"
+        >
+            <ImageCollageMapper
+                rows={rows}
+                logos={logos}
+            />
+        </H3Section>
+    );
+
+
+    /* Megan's code */
+    /* At desktop screen sizes, looks perfect to Figma, just lacking
+       the responsiveness
+    */
+
+    /* return (
+        <H3Section
+            header="Member Career Paths"
+            headerAlignment="center"
+        >
+            <div className="w-full max-w-[1280px] p-4">
+                <div className={rowStyle}>
+                    <img src="/member-career-paths/amazon_logo.png" alt="Amazon" className={imageStyle} />
+                    <img src="/member-career-paths/ey_logo.png" alt="EY" className={imageStyle} />
+                    <img src="/member-career-paths/mathworks_logo.png" alt="MathWorks" className={imageStyle} />
+                    <img src="/member-career-paths/meta_logo.png" alt="Meta" className={imageStyle} />
+                    <img src="/member-career-paths/bluecat_logo.png" alt="BlueCat Networks" className={imageStyle} />
+                </div>
+                <div className={rowStyle}>
+                    <img src="/member-career-paths/nasuni_logo.png" alt="Nasuni" className={imageStyle} />
+                    <img src="/member-career-paths/datadog_logo.png" alt="Datadog" className={imageStyle} />
+                    <img src="/member-career-paths/google_logo.png" alt="Google" className={imageStyle} />
+                    <img src="/member-career-paths/palantir_logo.png" alt="Palantir" className={imageStyle} />
+                    <img src="/member-career-paths/apple_logo.png" alt="Apple" className={`${imageStyle} mb-4`} />
+                </div>
+                <div className={rowStyle}>
+                    <img src="/member-career-paths/spotify_logo.png" alt="Aaron's Presents" className={imageStyle} />
+                    <img src="/member-career-paths/notion_logo.png" alt="Notion" className={imageStyle} />
+                    <img src="/member-career-paths/snapchat_logo.png" alt="Snapchat" className={imageStyle} />
+                    <img src="/member-career-paths/microsoft_logo.png" alt="Microsoft" className={imageStyle} />
+                    <img src="/member-career-paths/mastercard_logo.png" alt="Mastercard" className="object-contain self-end pb-2" />
+                    <img src="/member-career-paths/goldmann_sachs_logo.png" alt="Goldmann Sachs" className={imageStyle} />
+                    <img src="/member-career-paths/disney_logo.png" alt="Disney+" className={imageStyle} />
+                </div>
+            </div>
+        </H3Section>
+    ) */
+}

app/components/OurPartnerships.tsx

@@ -0,0 +1,94 @@
+/*  MemberCareerPaths.tsx
+*
+*   This component is a section of the website that displays a collage of
+*   non-profit logos that JumboCode has made projects for.
+* 
+*   Created by: Megan Yi and Holden Kittelberger
+*   Date: 1/16/25
+*/
+
+import H3Section from "./h3Section";
+import ImageCollageMapper from "./imageCollageMapper";
+
+export default function OurPartnerships() {
+
+    /* Constant Array of all the images being used in the collage */
+    const logos = [
+        {src: "/partnerships/Peace_corps_logo.png", alt: "Peace Corps"},
+        {src: "/partnerships/HomeStart_logo.png", alt: "HomeStart"},
+        {src: "/partnerships/Bergen_Family_Center_logo.png", alt: "Bergen Family Center"},
+        {src: "/partnerships/SS_Villages_logo.png", alt: "SimplySmiles children's villages"},
+        {src: "/partnerships/Bisexual_Resource_Center_logo.png", alt: "Bisexual Resource Center"},
+        {src: "/partnerships/Casa_Myrna_logo.png", alt: "Casa Myrna"},
+        {src: "/partnerships/Animal_Aid_Logo.png", alt: "Animal Aid"},
+        {src: "/partnerships/kmb_logo.png", alt: "Keep Massachusetts Beautiful"},
+        {src: "/partnerships/Dress_for_Success_logo.png", alt: "Dress For Success"},
+        {src: "/partnerships/Ocean_Alliance_Logo.png", alt: "Ocean Alliance"},
+        {src: "/partnerships/AaronsPresents_logo.png", alt: "Aaron's Presents"},
+        {src: "/partnerships/images-4.png", alt: ""}, /* not sure what image this is */
+        {src: "/partnerships/potencialogo.png", alt: "Potencia"},
+        {src: "/partnerships/Emerald_Necklace_Conservancy_logo.png", alt: "Emerald Necklace Conservancy"},
+    ]
+
+    /* constant representation of how the images will be split up between
+       rows according to the figma
+    */
+    const rows = [
+        logos.slice(0, 4), // First row
+        logos.slice(4, 9), // Second row
+        logos.slice(9), // Third row
+    ];
+
+    /* returns the h3 section component with a title and its children */
+    /* the child div is a map of the const array of images */
+    /* at smaller screen sizes it cuts off the left and right images and
+       resizes
+    */
+    return (
+        <H3Section
+            header="Our Partnerships"
+            headerAlignment="center"
+        >
+            <div>
+                <ImageCollageMapper
+                rows={rows}
+                logos={logos}
+                />
+            </div>
+        </H3Section>
+    );
+
+    /* Megan's code */
+    /* At desktop screen sizes, looks perfect to Figma, just lacking
+       the responsiveness
+    */
+    /* return (
+        <H3Section
+            header="Our Partnerships"
+            headerAlignment="center"
+        >
+            <div className="w-full max-w-[1280px] justify-between p-4">
+                <div className="flex justify-between">
+                    <img src="/partnerships/Peace_corps_logo.png" alt="Peace Corps" className="object-contain" />
+                    <img src="/partnerships/HomeStart_logo.png" alt="HomeStart" className="object-contain self-start mt-2 ml-8 mr-9" />
+                    <img src="/partnerships/Bergen_Family_Center_logo.png" alt="Bergen Family Center" className="object-contain mt-2 self-start" />
+                    <img src="/partnerships/SS_Villages_logo.png" alt="SimplySmiles children's villages" className="object-contain ml-16 mr-10 -mb-6" />
+                </div>
+                <div className="flex justify-between">
+                    <img src="/partnerships/Bisexual_Resource_Center_logo.png" alt="Bisexual Resource Center" className="object-contain" />
+                    <img src="/partnerships/Casa_Myrna_logo.png" alt="Casa Myrna" className="object-contain mt-3 ml-5" />
+                    <img src="/partnerships/Animal_Aid_Logo.png" alt="Animal Aid" className="object-contain -mt-20" />
+                    <img src="/partnerships/kmb_logo.png" alt="Keep Massachusetts Beautiful" className="object-contain -mt-14 ml-6 mr-4" />
+                    <img src="/partnerships/Dress_for_Success_logo.png" alt="Dress For Success" className="object-contain mt-4" />
+                    <img src="/partnerships/Ocean_Alliance_Logo.png" alt="Ocean Alliance" className="object-contain -mb-14 ml-20 mr-14" />
+                </div>
+                <div className="flex">
+                    <img src="/partnerships/AaronsPresents_logo.png" alt="Aaron's Presents" className="object-contain -mt-6" />
+                    <img src="/partnerships/images-4.png" alt="" className="object-contain -mt-6 ml-10 mr-14" />
+                    <img src="/partnerships/potencialogo.png" alt="Potencia" className="object-contain -mt-16 mr-8" />
+                    <img src="/partnerships/Emerald_Necklace_Conservancy_logo.png" alt="Emerald Necklace Conservancy" className="object-contain mr-[40rem] -mt-20" />
+                </div>
+            </div>
+        </H3Section>
+    ) */
+}

app/components/h3Section.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+
+export default function H3Section({
+    header,
+    headerAlignment,
+    children
+}: {
+    header: string;
+    headerAlignment: "right" | "center";
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="flex flex-col items-center gap-y-6 md:gap-y-10 lg:gap-y-20">
+            <h3 className={clsx(
+            "font-bold text-white",
+            { "self-start": headerAlignment === "right" },
+            "text-2xl md:text-3xl lg:text-4xl"
+            )}>{header}</h3>
+            {children}
+        </div >
+    )
+}

app/components/imageCollageMapper.tsx

@@ -0,0 +1,68 @@
+/*  imageCollageMapper.tsx
+*
+*   This component is a way to send a list of logos and rows to the
+*   OurPartnerships and MemberCareerPaths components to display a collage of
+*   logos in a systematic way.
+* 
+*   Created by: Holden Kittelberger
+*   Date: 1/16/25
+*/
+
+/* defining of what the Logo array contains*/
+type Logo = {
+  src: string;
+  alt: string;
+};
+
+/* Parameters being passed into this component */
+type Props = {
+  logos: Logo[];
+  rows: Logo[][];
+};
+
+/* the component that takes in the logos and rows and maps them into a 
+   collage 
+*/
+const imageCollageMapper: React.FC<Props> = ({ rows }) => {
+  return (
+    <div className="flex flex-col gap-[1px] sm:gap-2 px-2 md:px-20 pb-6 md:pb-10 lg:pb-20">
+      {rows.map((row, rowIndex) => (
+        <div
+          key={rowIndex}
+          className="flex justify-between gap-[1px] w-full"
+        >
+          {row.map((logo, logoIndex) => {
+            if (logoIndex === 0 || logoIndex === row.length - 1) {
+              return (
+                <div
+                  key={logoIndex}
+                  className="hidden sm:flex flex-auto p-2"
+                >
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    className="object-contain h-10 sm:h-20"
+                  />
+                </div>
+              );
+            }
+            return (
+              <div
+                key={logoIndex}
+                className="flex-auto p-2"
+              >
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  className="object-contain h-10 sm:h-20"
+                />
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default imageCollageMapper;

app/dev/image-collages/page.tsx

@@ -0,0 +1,11 @@
+import MemberCareerPaths from "@/app/components/MemberCareerPaths";
+import OurPartnerships from "@/app/components/OurPartnerships";
+
+export default function ImageCollages() {
+    return (
+        <div className="bg-gray-950 min-h-screen px-[7.5rem] py-24 space-y-24">
+            <MemberCareerPaths />
+            <OurPartnerships />
+        </div>
+    )
+}

app/page.tsx

@@ -1,31 +1,41 @@
 import Button from "@/app/components/button";
 import { EnvelopeIcon } from "@heroicons/react/24/outline";
+import H3Section from "@/app/components/h3Section";
+import MemberCareerPaths from "@/app/components/MemberCareerPaths";
+import OurPartnerShips from "@/app/components/OurPartnerships";
 
 export default function Home() {
   return (
-    <div className="p-4 space-y-4 bg-black">
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="primary"
-        icon={EnvelopeIcon}
-      />
+    <div>
+      <div className="p-4 space-y-4 bg-black">
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="primary"
+          icon={EnvelopeIcon}
+        />
 
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="secondary"
-        icon={EnvelopeIcon}
-      />
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="secondary"
+          icon={EnvelopeIcon}
+        />
 
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="ghost"
-        icon={EnvelopeIcon}
-      />
+        <Button
+          text="Email Us"
+          route="/testing"
+          variant="ghost"
+          icon={EnvelopeIcon}
+        />
 
-      <Button text="Email Us" route="/testing" variant="primary" />
+        <Button text="Email Us" route="/testing" variant="primary" />
+
+      </div>
+      <div className="p-4 space-y-4 bg-black">
+        <MemberCareerPaths />
+        <OurPartnerShips />
+      </div>
     </div>
   );
 }