Skip to content

Commit 9dd0cce

Browse files
tigawannatigawanna
authored
Merge pull request #51 from SpaceyaTech/feat/hero-section
Feature: Hero Section
2 parents 4aa8754 + 78b752d commit 9dd0cce

File tree

12 files changed

+199
-14
lines changed

12 files changed

+199
-14
lines changed

Diff for: ‎e2e-tests/herosection.spec.ts

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
//Test for the HeroSection component
4+
test.describe("HeroSection Component", () => {
5+
test.beforeEach(async ({ page }) => {
6+
//go to the page containing the HeroSection component
7+
await page.goto("http://localhost:3000");
8+
});
9+
10+
test("should render the HeroSection component", async ({ page }) => {
11+
const heroSection = await page.locator('[data-test="HeroSection"]');
12+
await expect(heroSection).toBeVisible();
13+
});
14+
15+
test("should display the heading ", async ({ page }) => {
16+
const heading = await page.getByRole("heading", {
17+
name: "Making open-source contribution fun again",
18+
});
19+
await expect(heading).toBeVisible();
20+
});
21+
22+
test("should display the description correctly", async ({ page }) => {
23+
// Locate the description paragraph within the HeroSection
24+
const description = await page.locator(
25+
'[data-test="HeroSection"] p.font-ff-inconsolata',
26+
);
27+
28+
// Wait for the paragraph to be visible
29+
await expect(description).toBeVisible();
30+
31+
// Verify the description text
32+
await expect(description).toHaveText(
33+
"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.",
34+
);
35+
});
36+
37+
test("should display the collaborator images correctly", async ({ page }) => {
38+
const collaborators = await page.locator(
39+
'[data-test="HeroSection"] img[alt="Collaborator"]',
40+
);
41+
42+
//check the number of collaborators image displayed
43+
await expect(collaborators).toHaveCount(4);
44+
45+
//check that they are all visible
46+
for (let i = 0; i < 4; i++) {
47+
const collaborator = collaborators.nth(i);
48+
await expect(collaborator).toBeVisible();
49+
await expect(collaborator).toHaveClass(/rounded-full/);
50+
}
51+
});
52+
53+
test("should display the contributor text", async ({ page }) => {
54+
const contributorText = await page.locator(
55+
'[data-test="HeroSection"] p.font-text-brand-gray-10',
56+
);
57+
await expect(contributorText).toHaveText("500+ contributors and counting");
58+
});
59+
60+
test("should render the action buttons correctly", async ({ page }) => {
61+
// Verify the "Join Colabs" button
62+
const joinButton = await page.locator(
63+
"data-test=HeroSection >> text=Join Colabs",
64+
);
65+
await expect(joinButton).toBeVisible();
66+
await expect(joinButton).toHaveAttribute(
67+
"href",
68+
"/auth/signup?returnTo=%2Fdashboard",
69+
);
70+
71+
// Verify the "Launch a Hackathon" button
72+
const hackathonButton = await page.locator(
73+
"data-test=HeroSection >> text=Launch a Hackathon",
74+
);
75+
await expect(hackathonButton).toBeVisible();
76+
await expect(hackathonButton).toHaveAttribute(
77+
"href",
78+
"/dashboard/hackathons",
79+
);
80+
});
81+
82+
test("should display the astronaut image", async ({ page }) => {
83+
// Verify the astronaut image
84+
const astronautImage = await page.locator(
85+
'[data-test="HeroSection"] img[alt="Standing robot"]',
86+
);
87+
await expect(astronautImage).toBeVisible();
88+
await expect(astronautImage).toHaveClass(/object-contain/);
89+
});
90+
});

Diff for: ‎src/assets/Astronaut-herosection.png

40.8 KB
Loading

Diff for: ‎src/assets/hero-section/fred.png

3.54 KB
Loading

Diff for: ‎src/assets/hero-section/ian.png

3.26 KB
Loading

Diff for: ‎src/assets/hero-section/katrina.png

3.12 KB
Loading

Diff for: ‎src/assets/hero-section/sharon.png

3.1 KB
Loading

Diff for: ‎src/components/navigation/LandingPageNavbar.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,24 @@ export function LandingPageNavbar({}: LandingPageNavbarProps) {
77
const isLoading = useRouterState({ select: (s) => s.status === "pending" });
88

99
return (
10-
<header className="sticky top-0 z-30 flex w-full flex-col items-center justify-between bg-base-200/520">
11-
<nav className="flex h-full w-full items-center justify-between gap-5 px-5 p-2">
10+
<header className="bg-base-200/520 sticky top-0 z-30 flex w-full flex-col items-center justify-between">
11+
<nav className="flex h-full w-full items-center justify-between gap-5 p-2 px-5">
1212
<Link to="/" className="btn btn-link btn-sm">
1313
<img src="/colabs.png" alt="logo" className="h-8 w-fit" />
1414
</Link>
1515
<div className="flex items-center gap-5">
16-
<Link to="/auth" search={{ returnTo: "/dashboard" }} className="btn btn-sm">
16+
<Link
17+
to="/auth"
18+
search={{ returnTo: "/dashboard" }}
19+
className="btn btn-sm"
20+
>
1721
Login
1822
</Link>
19-
<Link to="/auth/signup" search={{ returnTo: "/dashboard" }} className="btn btn-primary btn-sm">
23+
<Link
24+
to="/auth/signup"
25+
search={{ returnTo: "/dashboard" }}
26+
className="btn btn-primary btn-sm"
27+
>
2028
Sign up
2129
</Link>
2230
</div>

Diff for: ‎src/routes/-components/Footer.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,26 @@ export default function Footer() {
99
<div className="flex flex-col md:flex-row md:items-center md:justify-between lg:justify-around">
1010
<div className="flex items-center justify-start gap-4">
1111
{/* Social Icons */}
12-
<Link to="/">
12+
<Link to="/" className="z-10">
1313
<img src={ColabsLogo} alt="Colabs logo" />
1414
</Link>
15-
<a href="http://www.x.com" target="_blank" rel="noopener noreferrer">
16-
<img src={XIcon} alt="X Icon" className="h-6 w-6 object-contain" />{" "}
15+
<a
16+
href="https://www.x.com"
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
className="z-10"
20+
>
21+
<img
22+
src={XIcon}
23+
alt="X Icon"
24+
className="z-10 h-6 w-6 object-contain"
25+
/>{" "}
1726
</a>
1827
<a
19-
href="http://www.linkedin.com"
28+
href="https://www.linkedin.com"
2029
target="_blank"
2130
rel="noopener noreferrer"
31+
className="z-10"
2232
>
2333
<img
2434
src={LinkedinIcon}

Diff for: ‎src/routes/-components/FooterCTA.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ export const FooterCTA = () => {
66
return (
77
<div
88
data-test="FooterCTA"
9-
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%]"
9+
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"
1010
>
11-
<div className="z-10 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
12-
<p className="text-[32px] font-bold text-white lg:text-[55px] lg:leading-[60.5px]">
11+
<div className="z-10 p-4 lg:ml-[4%] lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
12+
<h1 className="text-[32px] font-bold text-heading lg:text-[55px] lg:leading-[60.5px]">
1313
Experience counts. Get it on Colabs.
14-
</p>
14+
</h1>
1515
<p className="font-ff-inconsolata text-lg font-bold leading-6 text-[#9f9c9c] lg:text-xl">
1616
Colabs is where you cut your teeth on enterprise projects. We have
1717
over 100 repositories on all tech tracks, carefully picked for you.
@@ -36,7 +36,7 @@ export const FooterCTA = () => {
3636
<img
3737
src={robot}
3838
alt="Standing robot"
39-
className="z-10 mt-4 pl-[30%] md:mt-6 md:w-[50%] md:pl-[15%] lg:w-auto"
39+
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"
4040
/>
4141
<img
4242
src={ellipse}

Diff for: ‎src/routes/-components/HeroSection.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import astronaut from "../../assets/Astronaut-herosection.png";
2+
import rocketIcon from "../../assets/rocket.png";
3+
import fred from "../../assets/hero-section/fred.png";
4+
import ian from "../../assets/hero-section/ian.png";
5+
import katrina from "../../assets/hero-section/katrina.png";
6+
import sharon from "../../assets/hero-section/sharon.png";
7+
import { Link } from "@tanstack/react-router";
8+
9+
export const HeroSection = () => {
10+
//array of collaborators
11+
const collaborators = [fred, ian, katrina, sharon];
12+
return (
13+
//border border-red-500
14+
<div
15+
data-test="HeroSection"
16+
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"
17+
>
18+
<div className="flex flex-col gap-4 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
19+
<h1 className="pb-2 text-[25px] font-bold text-heading md:text-[30px] lg:text-[55px] lg:leading-[60.5px]">
20+
Making open-source contribution fun again
21+
</h1>
22+
<p className="font-ff-inconsolata text-lg font-bold leading-6 text-brand-gray-8 lg:text-xl">
23+
Open-source is the fastest way to get the job experience you need.
24+
Colabs is the platform that makes open-source contribution fun and
25+
competitive.
26+
</p>
27+
28+
{/* collaborators */}
29+
<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">
30+
{/* Loop thru the array of collaborators to display them */}
31+
<div className="relative flex">
32+
{collaborators.map((collaborator, index) => (
33+
<img
34+
key={index}
35+
src={collaborator}
36+
alt="Collaborator"
37+
className={`h-12 w-12 rounded-full object-cover ${
38+
index !== 0 ? "-ml-2" : ""
39+
}`}
40+
/>
41+
))}
42+
</div>
43+
44+
<p className="font-text-brand-gray-10 text-sm font-medium">
45+
500+ contributors and counting
46+
</p>
47+
</div>
48+
<div className="mt-5 flex flex-col gap-2 md:flex-row md:justify-around lg:justify-start lg:gap-4">
49+
<Link
50+
to="/auth/signup"
51+
search={{ returnTo: "/dashboard" }}
52+
className="btn bg-brand-green-6 px-4 py-2 text-white md:w-[40%] lg:w-auto lg:text-lg"
53+
>
54+
Join Colabs
55+
</Link>
56+
<Link
57+
to="/dashboard/hackathons"
58+
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"
59+
>
60+
Launch a Hackathon <img src={rocketIcon} alt="Rocket icon" />
61+
</Link>
62+
</div>
63+
</div>
64+
65+
<img
66+
src={astronaut}
67+
alt="Standing robot"
68+
className="mt-4 md:h-auto md:max-w-[50%] lg:max-w-[30%] lg:items-center lg:justify-center lg:object-contain"
69+
/>
70+
</div>
71+
);
72+
};

Diff for: ‎src/routes/-components/HomePage.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LandingPageNavbar } from "@/components/navigation/LandingPageNavbar";
2+
import { HeroSection } from "./HeroSection";
23
import { Link } from "@tanstack/react-router";
34
import RepositoriesSection from "./RepositoriesSection";
45

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

Diff for: ‎tailwind.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default {
2323
7: "#635D5D",
2424
8: "#B3B8B7",
2525
9: "#f3faf8", //#B3B8B7CC
26+
10: "D9D9D9",
2627
},
2728
green: {
2829
1: "#14A97C",
@@ -35,6 +36,9 @@ export default {
3536
8: "#294740CC",
3637
},
3738
},
39+
// Text colors
40+
heading: "E9EDEC",
41+
3842
sidebar: {
3943
DEFAULT: "oklch(var(--sidebar-background))",
4044
foreground: "oklch(var(--sidebar-foreground))",
@@ -45,7 +49,6 @@ export default {
4549
border: "oklch(var(--sidebar-border))",
4650
ring: "oklch(var(--sidebar-ring))",
4751
},
48-
heading: "E9EDEC",
4952
},
5053
},
5154
},

0 commit comments

Comments
 (0)