Feat(HomePage): Create Home Page

components/AboutUs.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { aboutUs } from '../config.yaml';
+import Image from '../components/Image';
+import Button, { ButtonType } from '../components/Button';
+// css
+import styles from '../styles/components/AboutUs.module.scss';
+
+export default function AboutUs() {
+  return (
+    <div className={styles.AboutUs}>
+      <div className={styles.TextAndButton}>
+        <p className={styles.AboutUsText}>{aboutUs.text}</p>
+        <Button type={ButtonType.LIGHT} className={styles.AboutUsButton}>
+          Learn More
+        </Button>
+      </div>
+      <Image
+        src={aboutUs.image}
+        alt={aboutUs.altText}
+        width={100}
+        height={100}
+        className={styles.AboutUsImage}
+      />
+    </div>
+  );
+}

components/SectionHeader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from '../styles/components/SectionHeader.module.scss';
+
+type Location = 'justify-start' | 'justify-end';
+
+interface Props {
+  title: string;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  textColor?: string;
+  location?: Location;
+}
+
+export default function SectionHeader({
+  title,
+  backgroundColor = 'bg-color-1',
+  foregroundColor = 'bg-dark-gray',
+  textColor = 'text-color-2',
+  location = 'justify-start',
+}: Props) {
+  return (
+    <div className={`${styles.sectionHeader} ${backgroundColor} ${location}`}>
+      <div className={`${styles.sectionHeaderContainer} ${foregroundColor}`}>
+        <h2 className={`${styles.sectionHeaderTitle} ${textColor}`}>{title}</h2>
+      </div>
+    </div>
+  );
+}

config.d.ts

@@ -16,10 +16,17 @@ declare module '*.yaml' {
     path: string;
   }
 
+  interface AboutUs {
+    text: string;
+    image: string;
+    altText: string;
+  }
+
   interface Config {
     pageInfo: PageInfo[];
     bannerInfo: BannerInfo;
     heroIcons: HeroIcon[];
+    aboutUs: AboutUs;
   }
 
   const value: Config;

config.yaml

@@ -27,3 +27,7 @@ heroIcons:
   - altText: Link to TCSCA Discord
     link: https://discord.gg/serea2sPAd
     path: /Icons/discord.svg
+aboutUs:
+  text: The Trent Computer Science Club Association (TCSCA) is a club that aims to provide a supportive community for computer science students at Trent University. Our mission is to create a welcoming and inclusive environment where students can learn, grow, and have fun while developing their skills and interests. We love Open Source and are always looking for new ways to contribute to the community. CHANGE ME!!!
+  image: /AboutUsPlaceHolder.jpg
+  altText: About Us Image

pages/index.tsx

@@ -1,9 +1,10 @@
-// Style
 import styles from '../styles/Home.module.scss';
 // Internal Components
 import NavBar from '../components/NavBar';
 import EventBanner from '../components/EventBanner';
 import HeroBanner from '../components/HeroBanner';
+import SectionHeader from '../components/SectionHeader';
+import AboutUs from '../components/AboutUs';
 
 export default function Home() {
   return (
@@ -13,6 +14,8 @@ export default function Home() {
       <section className={styles.container}>
         <main className={styles.MainArea}>
           <HeroBanner imagePath='logo.svg' altText='TCSCA Logo' />
+          <SectionHeader title='About Us' location='justify-start' />
+          <AboutUs />
         </main>
       </section>
     </>

styles/components/AboutUs.module.scss

@@ -0,0 +1,31 @@
+.AboutUs {
+  @apply grid grid-cols-2 gap-4 p-4;
+  @apply bg-dark-gray;
+  @apply py-16;
+  @apply px-10;
+}
+
+.TextAndButton {
+  @apply col-span-1;
+}
+
+.AboutUsText {
+  @apply text-color-2;
+  @apply leading-relaxed;
+  @apply text-xl;
+  @apply pr-4;
+}
+
+.AboutUsButton {
+  @apply mt-4;
+  @apply object-cover;
+  @apply px-4;
+}
+
+.AboutUsImage {
+  @apply col-span-1;
+  @apply rounded-xl;
+  @apply w-full;
+  @apply bg-black;
+  @apply self-center;
+}

styles/components/SectionHeader.module.scss

@@ -0,0 +1,16 @@
+.sectionHeader {
+  @apply w-full;
+  @apply pt-4 px-4;
+  @apply flex;
+}
+
+.sectionHeaderContainer {
+  @apply rounded-t-lg;
+  @apply px-4 py-2;
+  @apply shrink;
+  @apply flex-grow-0;
+}
+
+.sectionHeaderTitle {
+  @apply text-2xl font-bold text-center;
+}

tailwind.config.ts

@@ -14,11 +14,12 @@ const config: Config = {
         'color-1': '#0f3b26', // Main Green
         'color-2': '#f9f7f7', // NavBar Off White
         'color-3': '#575555', // Aside Gray
+        'dark-gray': '#222', // Dark Gray
         'active-1': '#4db6ac', // TODO: Decide on a color for this
         'hover-1': '#4db6ac', // TODO: Decide on a color for this
         'hover-2': '#89B4FA', // TODO: Decide on a color for this
         'event-banner': '#5E18EB', // Event Banner Background
-        socials: '#7BD4CB', // Social
+        'socials': '#7BD4CB', // Social
       },
     },
   },