chore: add contributors image on the hero section and add hero-section test

Author: samoina

e2e-tests/herosection.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from "@playwright/test";
+
+//Test for the HeroSection component
+test.describe("HeroSection Component", () => {
+  test.beforeEach(async ({ page }) => {
+    //go to the page containing the HeroSection component
+    await page.goto("http://localhost:3000");
+  });
+
+  test("should render the HeroSection component", async ({ page }) => {
+    const heroSection = await page.locator('[data-test="HeroSection"]');
+    await expect(heroSection).toBeVisible();
+  });
+
+  test("should display the heading ", async ({ page }) => {
+    const heading = await page.getByRole("heading", {
+      name: "Making open-source contribution fun again",
+    });
+    await expect(heading).toBeVisible();
+  });
+
+  test("should display the description correctly", async ({ page }) => {
+    // Locate the description paragraph within the HeroSection
+    const description = await page.locator(
+      '[data-test="HeroSection"] p.font-ff-inconsolata',
+    );
+
+    // Wait for the paragraph to be visible
+    await expect(description).toBeVisible();
+
+    // Verify the description text
+    await expect(description).toHaveText(
+      "Open-source is the fastest way to get the job experience you need. Colabs is the platform that makes open-source contribution fun and competitive.",
+    );
+  });
+
+  test("should display the collaborator images correctly", async ({ page }) => {
+    const collaborators = await page.locator(
+      '[data-test="HeroSection"] img[alt="Collaborator"]',
+    );
+
+    //check the number of collaborators image displayed
+    await expect(collaborators).toHaveCount(4);
+
+    //check that they are all visible
+    for (let i = 0; i < 4; i++) {
+      const collaborator = collaborators.nth(i);
+      await expect(collaborator).toBeVisible();
+      await expect(collaborator).toHaveClass(/rounded-full/);
+    }
+  });
+
+  test("should display the contributor text", async ({ page }) => {
+    const contributorText = await page.locator(
+      '[data-test="HeroSection"] p.font-text-brand-gray-10',
+    );
+    await expect(contributorText).toHaveText("500+ contributors and counting");
+  });
+
+  test("should render the action buttons correctly", async ({ page }) => {
+    // Verify the "Join Colabs" button
+    const joinButton = await page.locator(
+      "data-test=HeroSection >> text=Join Colabs",
+    );
+    await expect(joinButton).toBeVisible();
+    await expect(joinButton).toHaveAttribute(
+      "href",
+      "/auth/signup?returnTo=%2Fdashboard",
+    );
+
+    // Verify the "Launch a Hackathon" button
+    const hackathonButton = await page.locator(
+      "data-test=HeroSection >> text=Launch a Hackathon",
+    );
+    await expect(hackathonButton).toBeVisible();
+    await expect(hackathonButton).toHaveAttribute(
+      "href",
+      "/dashboard/hackathons",
+    );
+  });
+
+  test("should display the astronaut image", async ({ page }) => {
+    // Verify the astronaut image
+    const astronautImage = await page.locator(
+      '[data-test="HeroSection"] img[alt="Standing robot"]',
+    );
+    await expect(astronautImage).toBeVisible();
+    await expect(astronautImage).toHaveClass(/object-contain/);
+  });
+});

src/assets/hero-section/fred.png

@@ -6,9 +6,9 @@ export const FooterCTA = () => {
   return (
     <div
       data-test="FooterCTA"
-      className="relative flex flex-col items-center gap-4 border border-red-600 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:justify-around"
+      className="relative flex flex-col items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:justify-around"
     >
-      <div className="lg:flex-0 z-10 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
+      <div className="z-10 p-4 lg:ml-[4%] lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
         <h1 className="text-[32px] font-bold text-heading lg:text-[55px] lg:leading-[60.5px]">
           Experience counts. Get it on Colabs.
         </h1>

src/assets/hero-section/ian.png

@@ -1,14 +1,21 @@
 import astronaut from "../../assets/Astronaut-herosection.png";
 import rocketIcon from "../../assets/rocket.png";
+import fred from "../../assets/hero-section/fred.png";
+import ian from "../../assets/hero-section/ian.png";
+import katrina from "../../assets/hero-section/katrina.png";
+import sharon from "../../assets/hero-section/sharon.png";
 import { Link } from "@tanstack/react-router";
 
 export const HeroSection = () => {
+  //array of collaborators
+  const collaborators = [fred, ian, katrina, sharon];
   return (
+    //border border-red-500
     <div
       data-test="HeroSection"
-      className="flex flex-col items-center gap-4 p-4 md:gap-1 md:p-4 lg:flex lg:flex-row lg:justify-around"
+      className="flex flex-col items-center gap-4 p-4 md:mt-2 md:p-5 lg:mt-4 lg:flex lg:flex-row lg:justify-around"
     >
-      <div className="lg:flex-0 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
+      <div className="flex flex-col gap-4 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
         <h1 className="pb-2 text-[25px] font-bold text-heading md:text-[30px] lg:text-[55px] lg:leading-[60.5px]">
           Making open-source contribution fun again
         </h1>
@@ -17,6 +24,27 @@ export const HeroSection = () => {
           Colabs is the platform that makes open-source contribution fun and
           competitive.
         </p>
+
+        {/* collaborators */}
+        <div className="mt-2 flex flex-col items-start justify-center gap-2 md:flex-row md:items-center md:justify-center lg:justify-start">
+          {/* Loop thru the array of collaborators to display them */}
+          <div className="relative flex">
+            {collaborators.map((collaborator, index) => (
+              <img
+                key={index}
+                src={collaborator}
+                alt="Collaborator"
+                className={`h-12 w-12 rounded-full object-cover ${
+                  index !== 0 ? "-ml-2" : ""
+                }`}
+              />
+            ))}
+          </div>
+
+          <p className="font-text-brand-gray-10 text-sm font-medium">
+            500+ contributors and counting
+          </p>
+        </div>
         <div className="mt-5 flex flex-col gap-2 md:flex-row md:justify-around lg:justify-start lg:gap-4">
           <Link
             to="/auth/signup"
@@ -37,7 +65,7 @@ export const HeroSection = () => {
       <img
         src={astronaut}
         alt="Standing robot"
-        className="mt-4 md:mt-6 lg:h-auto lg:max-w-[30%] lg:flex-1 lg:items-center lg:justify-center lg:object-contain"
+        className="mt-4 md:h-auto md:max-w-[50%] lg:max-w-[30%] lg:items-center lg:justify-center lg:object-contain"
       />
     </div>
   );

src/assets/hero-section/katrina.png

@@ -12,8 +12,8 @@ export function HomePage() {
   return (
     <div className="flex h-full min-h-screen w-full flex-col">
       <LandingPageNavbar />
+      <HeroSection />
       <div className="flex h-full min-h-screen w-full flex-col items-center justify-center gap-3 font-ff-poppins">
-        <HeroSection />
         {/* landing page goes here  */}
         <p className="rounded-2xl border border-primary p-5 text-3xl">
           Landing page goes here

src/assets/hero-section/sharon.png

@@ -23,6 +23,7 @@ export default {
             7: "#635D5D",
             8: "#B3B8B7",
             9: "#f3faf8", //#B3B8B7CC
+            10: "D9D9D9",
           },
           green: {
             1: "#14A97C",
@@ -35,6 +36,9 @@ export default {
             8: "#294740CC",
           },
         },
+        // Text colors
+        heading: "E9EDEC",
+
         sidebar: {
           DEFAULT: "oklch(var(--sidebar-background))",
           foreground: "oklch(var(--sidebar-foreground))",
@@ -45,7 +49,6 @@ export default {
           border: "oklch(var(--sidebar-border))",
           ring: "oklch(var(--sidebar-ring))",
         },
-        heading: "E9EDEC",
       },
     },
   },