Refactor LandingPageIntro (#498)

* Refactored LandingPageIntro with Tailwind * Added MemoryRouter for testing the Link component
hackforla · Feb 8, 2024 · fd766f0 · fd766f0
1 parent 5fb889c
commit fd766f0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 96 deletions.
diff --git a/frontend/src/assets/images/images.tsx b/frontend/src/assets/images/images.tsx
@@ -31,7 +31,6 @@ import IconX from "./svgs/icons/icon-x.svg";
 import IconChevronLeft from "./svgs/icons/icon-chevron-left.svg";
 import IconChevronRight from "./svgs/icons/icon-chevron-right.svg";
 
-import iconArrowDown from "./svgs/icons/icon-arrow-down.svg?url";
 import iconArrowLeft from "./svgs/icons/icon-arrow-left.svg?url";
 import iconCheckboxY from "./svgs/icons/icon-checkbox-yes.svg?url";
 import iconCheckboxN from "./svgs/icons/icon-checkbox-no.svg?url";
@@ -47,8 +46,6 @@ import iconSearch from "./svgs/icons/icon-search.svg?url";
 import iconX from "./svgs/icons/icon-x.svg?url";
 
 // Group Background Image
-import landingPageFg from "./svgs/landing-page-fg.svg?url";
-import landingPageBg from "./svgs/landing-page-bg.svg?url";
 import notFoundPageImg from "./svgs/not-found-page.svg?url";
 
 // CTJ Logos
@@ -192,7 +189,6 @@ export {
   IconPlus,
   IconSearch,
   IconX,
-  iconArrowDown,
   iconArrowLeft,
   iconCheckboxY,
   iconCheckboxN,
@@ -239,3 +235,6 @@ export { default as creditsPageBgTop } from "./svgs/credits-page-bg-top.svg?url"
 export { default as creditsPageBgBottom } from "./svgs/credits-page-bg-bottom.svg?url";
 export { default as creditsPageHighFive } from "./svgs/credits-page-high-five.svg?url";
 export { default as landingPageCreativeTeam } from "./svgs/landing-page-creative-team.svg?url";
+export { default as LandingPageBg } from "./svgs/landing-page-bg.svg?url";
+export { default as LandingPageFg } from "./svgs/landing-page-fg.svg?url";
+export { default as iconArrowDown } from "./svgs/icons/icon-arrow-down.svg?url";
diff --git a/frontend/src/pages/LandingPage/LandingPageIntro.tsx b/frontend/src/pages/LandingPage/LandingPageIntro.tsx
@@ -1,37 +1,52 @@
 // External Imports
 import React from "react";
+import { Link } from "react-router-dom";
 
 // Internal Imports
-import { iconArrowDown } from "assets/images/images";
-import { Button } from "components/components";
+import {
+  iconArrowDown,
+  LandingPageBg,
+  LandingPageFg,
+} from "assets/images/images";
 
 function LandingPageIntro() {
   return (
-    <div className="landing-container my-10">
-      <div className="flex-column align-center text-center landing-intro-container">
-        <h1 className="md:text-5xl text-2xl font-bold md:leading-snug my-8">
+    <div className="my-10 flex flex-col">
+      <div className="flex-grow flex flex-col align-center text-center">
+        <h1 className="px-10 text-3xl md:text-5xl font-bold md:leading-snug my-8">
           Together,
           <br />
           we can create greater civic change
         </h1>
-        <p className="paragraph-1 landing-intro-paragraph mb-10">
+        <p className="w-4/5 md:w-1/2 text-xl md:text-2xl mb-10">
           CivicTechJobs unites ambitious technology practitioners with volunteer
           opportunities from a central hub of listings to build digital
           products, programs, and services.
         </p>
-        <Button
-          length="long"
-          size="lg"
-          addClass="landing-intro-btn"
-          href="/qualifier/1"
+        <Link
+          to="qualifier/1"
+          className="h-min-12 px-14 py-3 mb-10 rounded-x-large text-xl font-bold bg-blue-dark hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused text-white"
         >
           Join us
-        </Button>
+        </Link>
+        <div
+          className="w-full h-fit bg-cover bg-no-repeat flex items-center justify-center -z-20"
+          style={{ backgroundImage: `url(${LandingPageBg})` }}
+        >
+          <img className="mt-[-10%] w-10/12 -z-10" src={LandingPageFg} alt="" />
+        </div>
       </div>
-      <div className="flex-column align-center text-center pb-10 landing-mission-container">
-        <img className="arrow-down mb-6" src={iconArrowDown} alt="" />
-        <h2 className="landing-mission-title text-4xl font-bold leading-normal mb-8">Our Mission</h2>
-        <p className="paragraph-2 landing-mission-paragraph">
+
+      <div className="flex-grow flex flex-col align-center  text-center bg-tan-light py-10">
+        <img
+          className="arrow-down mb-6 md:hidden"
+          src={iconArrowDown}
+          alt="Arrow Down Icon"
+        />
+        <h2 className="text-2xl md:text-4xl font-bold leading-normal mb-8">
+          Our Mission
+        </h2>
+        <p className="w-4/5 md:w-3/5 text-xl md:text-2xl">
           We bring together civic-minded volunteers from diverse backgrounds
           such as YOU to help local communities and governments. Thanks to the
           power of our volunteers, we are able to positively impact the

diff --git a/frontend/src/pages/LandingPage/_LandingPageIntro.scss b/frontend/src/pages/LandingPage/_LandingPageIntro.scss
diff --git a/frontend/src/pages/LandingPage/_index.scss b/frontend/src/pages/LandingPage/_index.scss
@@ -1,3 +1,2 @@
-@forward "LandingPageIntro";
 @forward "LandingPageCop";
 @forward "LandingPageCopCards";
diff --git a/frontend/tests/pages/LandingPage.test.tsx b/frontend/tests/pages/LandingPage.test.tsx
@@ -8,14 +8,19 @@ import { config } from "react-transition-group";
 
 // Internal imports
 import { LandingPage } from "pages/LandingPage/LandingPage";
+import { MemoryRouter } from "react-router-dom";
 
 // Disables animation transition time so it will not hamper testing
 config.disabled = true;
 
 describe("Landing Page", () => {
   test("Landing Page dialog", async () => {
     const user = userEvent.setup();
-    render(<LandingPage />);
+    render(
+      <MemoryRouter>
+        <LandingPage />
+      </MemoryRouter>
+    );
 
     expect(screen.getByRole("presentation")).toHaveClass("hidden");