Merge pull request #9 from JVPH/WEB-10

chore: Hero text for the hero section (WEB-10)

src/app/components/heroSection/heroSection.module.css

@@ -26,3 +26,10 @@
  align-items: center;
  justify-content: center;
 }
+
+.intro {
+ font-size: 100px;
+ font-family: "Raleway", sans-serif;
+ font-weight: 900;
+ color: #3c3db9;
+}

src/app/components/heroSection/heroSection.test.js

@@ -0,0 +1,21 @@
+import React from "react"; // Import React
+import { render, screen } from "@testing-library/react";
+import HeroSection from "./heroSection";
+
+describe("HeroSection component", () => {
+ const labelMap = {
+ lblHero: "You don't have to code alone.",
+ };
+ test("renders the component", () => {
+ render(<HeroSection label={labelMap.lblHero} />);
+ const heroElement = screen.getByTestId("hero");
+ expect(heroElement).toBeInTheDocument();
+ });
+
+ test("renders the correct text", () => {
+ render(<HeroSection label={labelMap.lblHero} />);
+
+ const heroElement = screen.getByTestId("hero");
+ expect(heroElement).toHaveTextContent(labelMap.lblHero);
+ });
+});

src/app/components/heroSection/heroSection.tsx

@@ -3,22 +3,10 @@
 import React from "react";
 import styles from "./heroSection.module.css";
 
-interface HeroSection {
- label: {
- lblHome: string;
- lblCommunity: string;
- lblContact: string;
- lblMeetup: string;
- lblBanner: string;
- lblWorkshops: string;
- lblSupport: string;
- lblCohorts: string;
- };
-}
-
-export default function HeroSection({ label }: HeroSection) {
+export default function HeroSection({ label }: { label: string }) {
  return (
- <div className={styles.heroSection}>
+ <div className={styles.heroSection} data-testid="hero">
+ <p className={styles.intro}>{label}</p>
  <div className={styles.videoPlaceholder}>Video playing here</div>
  </div>
  );

src/app/page.tsx

@@ -10,6 +10,7 @@ export default function Home() {
  lblCommunity: "Community Impact",
  lblContact: "Contact Us",
  lblMeetup: "Meetups",
+ lblHero: "You don't have to code alone.",
  lblBanner: "This website is made BY the community FOR the community",
  lblWorkshopsTitle: "Technical Workshops",
  lblSupportTitle: "Community Support",
@@ -25,7 +26,7 @@ export default function Home() {
  return (
  <main className={styles.main}>
  <Navbar label={labelMap} />
- <HeroSection label={labelMap} />
+ <HeroSection label={labelMap.lblHero} />
  <BannerSection label={labelMap} />
  <CardsSection label={labelMap} />
  </main>