Merge pull request #10 from climaxmba/WEB-11

chore: add video placeholder (WEB-11)

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

@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap");
+
+.heroSection {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: space-between;
+ padding: 5rem 3rem;
+ margin: 3rem 0;
+ background-image: url("/assets/dsdHeroBg.png");
+ background-repeat: no-repeat;
+ background-position: bottom right;
+ background-size: contain;
+}
+
+.videoPlaceholder {
+ font-family: "Raleway", sans-serif;
+ text-align: center;
+ font-weight: 700;
+ font-size: 36px;
+ height: 320px;
+ width: 460px;
+ background-color: lightgrey;
+ color: black;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}

src/app/components/heroSection/heroSection.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+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) {
+ return (
+ <div className={styles.heroSection}>
+ <div className={styles.videoPlaceholder}>Video playing here</div>
+ </div>
+ );
+}

src/app/page.tsx

@@ -1,5 +1,6 @@
 import CardsSection from "./components/cardsSection/cardsSection";
 import BannerSection from "./components/bannerSection/bannerSection";
+import HeroSection from "./components/heroSection/heroSection";
 import Navbar from "./components/navbar/navbar";
 import styles from "./page.module.css";
 
@@ -24,6 +25,7 @@ export default function Home() {
  return (
  <main className={styles.main}>
  <Navbar label={labelMap} />
+ <HeroSection label={labelMap} />
  <BannerSection label={labelMap} />
  <CardsSection label={labelMap} />
  </main>