Merge pull request #51 from SpaceyaTech/feat/hero-section

Feature: Hero Section

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/components/navigation/LandingPageNavbar.tsx

@@ -7,16 +7,24 @@ export function LandingPageNavbar({}: LandingPageNavbarProps) {
   const isLoading = useRouterState({ select: (s) => s.status === "pending" });
 
   return (
-    <header className="sticky top-0 z-30 flex  w-full flex-col items-center justify-between bg-base-200/520">
-      <nav className="flex h-full w-full items-center justify-between gap-5 px-5 p-2">
+    <header className="bg-base-200/520 sticky top-0 z-30 flex w-full flex-col items-center justify-between">
+      <nav className="flex h-full w-full items-center justify-between gap-5 p-2 px-5">
         <Link to="/" className="btn btn-link btn-sm">
           <img src="/colabs.png" alt="logo" className="h-8 w-fit" />
         </Link>
         <div className="flex items-center gap-5">
-          <Link to="/auth" search={{ returnTo: "/dashboard" }} className="btn  btn-sm">
+          <Link
+            to="/auth"
+            search={{ returnTo: "/dashboard" }}
+            className="btn btn-sm"
+          >
             Login
           </Link>
-          <Link to="/auth/signup" search={{ returnTo: "/dashboard" }} className="btn btn-primary btn-sm">
+          <Link
+            to="/auth/signup"
+            search={{ returnTo: "/dashboard" }}
+            className="btn btn-primary btn-sm"
+          >
             Sign up
           </Link>
         </div>

src/routes/-components/Footer.tsx

@@ -9,16 +9,26 @@ export default function Footer() {
       <div className="flex flex-col md:flex-row md:items-center md:justify-between lg:justify-around">
         <div className="flex items-center justify-start gap-4">
           {/* Social Icons */}
-          <Link to="/">
+          <Link to="/" className="z-10">
             <img src={ColabsLogo} alt="Colabs logo" />
           </Link>
-          <a href="http://www.x.com" target="_blank" rel="noopener noreferrer">
-            <img src={XIcon} alt="X Icon" className="h-6 w-6 object-contain" />{" "}
+          <a
+            href="https://www.x.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="z-10"
+          >
+            <img
+              src={XIcon}
+              alt="X Icon"
+              className="z-10 h-6 w-6 object-contain"
+            />{" "}
           </a>
           <a
-            href="http://www.linkedin.com"
+            href="https://www.linkedin.com"
             target="_blank"
             rel="noopener noreferrer"
+            className="z-10"
           >
             <img
               src={LinkedinIcon}

src/routes/-components/FooterCTA.tsx

@@ -6,12 +6,12 @@ export const FooterCTA = () => {
   return (
     <div
       data-test="FooterCTA"
-      className="relative flex flex-col items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:pl-[20%]"
+      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="z-10 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
-        <p className="text-[32px] font-bold text-white lg:text-[55px] lg:leading-[60.5px]">
+      <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.
-        </p>
+        </h1>
         <p className="font-ff-inconsolata text-lg font-bold leading-6 text-[#9f9c9c] lg:text-xl">
           Colabs is where you cut your teeth on enterprise projects. We have
           over 100 repositories on all tech tracks, carefully picked for you.
@@ -36,7 +36,7 @@ export const FooterCTA = () => {
       <img
         src={robot}
         alt="Standing robot"
-        className="z-10 mt-4 pl-[30%] md:mt-6 md:w-[50%] md:pl-[15%] lg:w-auto"
+        className="z-10 mt-4 pl-[30%] md:mt-6 md:w-[50%] md:pl-[15%] lg:h-auto lg:max-w-[40%] lg:object-contain"
       />
       <img
         src={ellipse}

src/routes/-components/HeroSection.tsx

@@ -0,0 +1,72 @@
+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:mt-2 md:p-5 lg:mt-4 lg:flex lg:flex-row lg:justify-around"
+    >
+      <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>
+        <p className="font-ff-inconsolata text-lg font-bold leading-6 text-brand-gray-8 lg:text-xl">
+          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.
+        </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"
+            search={{ returnTo: "/dashboard" }}
+            className="btn bg-brand-green-6 px-4 py-2 text-white md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Join Colabs
+          </Link>
+          <Link
+            to="/dashboard/hackathons"
+            className="btn bg-brand-green-8 px-4 py-2 text-brand-green-7 outline outline-1 outline-brand-green-8 md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Launch a Hackathon <img src={rocketIcon} alt="Rocket icon" />
+          </Link>
+        </div>
+      </div>
+
+      <img
+        src={astronaut}
+        alt="Standing robot"
+        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/routes/-components/HomePage.tsx

@@ -1,4 +1,5 @@
 import { LandingPageNavbar } from "@/components/navigation/LandingPageNavbar";
+import { HeroSection } from "./HeroSection";
 import { Link } from "@tanstack/react-router";
 import RepositoriesSection from "./RepositoriesSection";
 
@@ -11,6 +12,7 @@ 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">
         {/* landing page goes here  */}
         <p className="rounded-2xl border border-primary p-5 text-3xl">

tailwind.config.js

@@ -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",
       },
     },
   },