Fixed styles on LandingPage using TW classes (#466)

Author: bzzz-coding

frontend/src/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import "tailwindcss/tailwind.css";
 import "./index.scss";
+import "tailwindcss/tailwind.css";
 
 if (process.env.MODE !== "production") {
   const reactAxe = require("@axe-core/react");

frontend/src/pages/LandingPage/LandingPageCop.tsx

@@ -28,28 +28,28 @@ function LandingPageCop() {
 
   return (
     <div className="flex-container align-center justify-center py-5">
-      <h2 className="col-12 text-center my-4">Communities of Practice (COP)</h2>
+      <h2 className="col-12 text-center text-4xl font-bold leading-normal my-8">Communities of Practice (COP)</h2>
       <div className="row paragraph-1 text-center mb-5 landing-cop-description">
         A Community of Practice (CoP) is a group of volunteers who share a
         common interest in a topic and meet regularly to fulfill both individual
         and group goals. We use CoPs to share effective practices and relevant
         domain knowledge to help our members grow.
       </div>
-      <div className="row m-5 landing-cop-circle-container">
+      <div className="row m-10 landing-cop-circle-container">
         {copData.map((cop) => {
           return (
             <CircleCard
               key={cop.id}
               size="lg"
-              addClass="m-4"
+              addClass="m-8"
               onClick={() => {
                 handleCopData(cop.id);
                 setIsDialogOpen(true);
               }}
               role="button"
             >
               <div className="flex-column">
-                <div className="pb-3 row justify-center">
+                <div className="pb-6 row justify-center">
                   <cop.icon strokeWidth="0.2" height="65" aria-hidden="true" />
                 </div>
                 <div className="title-4 landing-cop-circle-title text-center">
@@ -82,9 +82,9 @@ function LandingPageCop() {
                     key={cop.id}
                     isActive={isActive}
                     onClick={() => handleCopData(cop.id)}
-                    addClass="flex-container justify-center align-center p-1"
+                    addClass="flex-container justify-center align-center p-2"
                   >
-                    <div className="pr-1">
+                    <div className="pr-2">
                       <cop.icon
                         fill={isActive ? "white" : "black"}
                         stroke={isActive ? "white" : "black"}
@@ -101,11 +101,11 @@ function LandingPageCop() {
                 );
               })}
             </nav>
-            <div className="col-9 ml-2">
+            <div className="col-9 ml-4">
               <InnerCopCard addClass="landing-inner-cop-card-content">
                 <div>
                   <div className="title-3 flex-container pb-4 align-bottom">
-                    <div className="pr-2">
+                    <div className="pr-4">
                       {currentDatum.icon && (
                         <currentDatum.icon
                           fill="black"

frontend/src/pages/LandingPage/LandingPageIntro.tsx

@@ -7,14 +7,14 @@ import { Button } from "components/components";
 
 function LandingPageIntro() {
   return (
-    <div className="landing-container my-5">
+    <div className="landing-container my-10">
       <div className="flex-column align-center text-center landing-intro-container">
-        <h1 className="landing-intro-title mb-4">
+        <h1 className="md:text-5xl text-2xl font-bold md:leading-snug my-8">
           Together,
           <br />
           we can create greater civic change
         </h1>
-        <p className="paragraph-1 landing-intro-paragraph mb-5">
+        <p className="paragraph-1 landing-intro-paragraph mb-10">
           CivicTechJobs unites ambitious technology practitioners with volunteer
           opportunities from a central hub of listings to build digital
           products, programs, and services.
@@ -28,9 +28,9 @@ function LandingPageIntro() {
           Join us
         </Button>
       </div>
-      <div className="flex-column align-center text-center pb-5 landing-mission-container">
-        <img className="arrow-down mb-3" src={iconArrowDown} alt="" />
-        <h2 className="landing-mission-title mb-4">Our Mission</h2>
+      <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">
           We bring together civic-minded volunteers from diverse backgrounds
           such as YOU to help local communities and governments. Thanks to the

frontend/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",
     "./src/tw-components/*.tsx",
+    "./src/pages/LandingPage/*.tsx",
   ], // Will change to "./src/**/*.{js,jsx,tsx}", "./templates/index.html"
   theme: {
     screens: {