LL-330

package.json

@@ -4,9 +4,10 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spring/web": "^9.7.3",
     "@testing-library/jest-dom": "^5.17.0",

src/App.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import FrontPage from "./components/FrontPage";
+import FrontPage from "./pages/FrontPage";
 import Login from "./components/Login";
 import { Route, Routes } from "react-router-dom";
-
 import "./App.css";
 import Register from "./components/Register";
 
@@ -16,4 +15,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/assets/cardData.ts

@@ -1,19 +1,30 @@
 import { Orientation, ICardData } from "../components/IconCard"
 
 export const iconCards: ICardData[] = [
+    {
+        headingText: "LuminosityLEDs",
+        bodyText: "Illuminate individual expression and creativity",
+        orientation: Orientation.east,
+        // https://fontawesome.com/icons/lightbulb?f=classic&s=solid
+        buttons: ["Login", "Register"],
+    },
     {
         headingText: "Illuminate individual expression and creativity...",
         bodyText: "...with just the touch of a button.  A service that makes it easy to light up a room.",
-        orientation: Orientation.south
+        orientation: Orientation.west,
+        // https://fontawesome.com/icons/lightbulb?f=classic&s=solid
+        icon: "lightbulb",
     },
     {
         headingText: "Seamless integration and connection",
         bodyText: "Lights are setup to hook up straight to Wi-Fi with a few easy steps.",
-        orientation: Orientation.east
+        orientation: Orientation.east,
+        icon: "wifi",
     },
     {
         headingText: "Track metrics and trends",
         bodyText: "Color, brightness, and whether or not the lights are on or off are tracked and easily accessible.",
-        orientation: Orientation.west
+        orientation: Orientation.west,
+        icon: "signal",
     }
 ]

src/components/Content.tsx

@@ -1,23 +1,6 @@
 import React from "react";
 import { IconCard } from "./IconCard";
 import { iconCards } from "../assets/cardData";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
-
-var icons = [
-  <FontAwesomeIcon
-    icon={icon({ name: "lightbulb" })}
-    className="h-[250px] text-light dark:text-dark"
-  />,
-  <FontAwesomeIcon
-    icon={icon({ name: "wifi" })}
-    className="h-[250px] text-light dark:text-dark"
-  />,
-  <FontAwesomeIcon
-    icon={icon({ name: "signal" })}
-    className="h-[250px] text-light dark:text-dark"
-  />,
-];
 
 export const Content = () => {
   const cards = iconCards.map((card, index) => (
@@ -29,7 +12,8 @@ export const Content = () => {
           ? "bg-white dark:bg-black"
           : "bg-card-light-blue dark:bg-card-dark-blue"
       }
-      icon={icons[index]}
+      icon={card.icon}
+      buttons={card.buttons}
     />
   ));
 

src/components/Footer.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
 
-const darkMode = 'dark:text-white  dark:hover:text-suva-grey';
-const lightMode = 'text-black hover:text-electric-blue';
+const darkMode = 'cursor-pointer dark:text-dark dark:hover:text-hover-dark';
+const lightMode = 'text-light hover:text-hover-light cursor-pointer';
 const footerButtonUtils = 'flex items-center py-2 px-4';
-const textPaddingSize = 'text-[32pt] p-3';
-const footerDivStyle = 'dark:bg-black flex justify-between position:static py-8 pt-4 ';
+const textPaddingSize = 'text-2xl p-3';
+const footerDivStyle = 'bg-electric-blue dark:bg-duke-blue flex position:static space-x-48 px-48 py-8 pt-4 ';
 
 const ICON_HEIGHT = "h-[48px]"
 const iconsFA = [
@@ -45,7 +45,7 @@ function FooterButton ({ href, icon, iconTextName}: FooterProps)
           <div className = {textPaddingSize} >
           {icon}
           </div>
-          <h1 className='text-[32pt]'>{iconTextName}</h1>
+          <h1 className='text-2xl'>{iconTextName}</h1>
         </a>
   );
 }
@@ -54,11 +54,17 @@ function Footer()
 {
   return (
     <div className = {`h-180 px-4 ${footerDivStyle}`}> 
-      <FooterButton href='#' icon={iconsFA[0]} iconTextName='About' />
-      <FooterButton href='#' icon={iconsFA[1]} iconTextName='Team' />
-      <FooterButton href='https://github.com/luminosityleds' icon={iconsFA[2]} iconTextName='GitHub' />
-      <FooterButton href='#' icon={iconsFA[3]} iconTextName="What's New" />
-      <FooterButton href='#' icon={iconsFA[4]} iconTextName='Discord' />
+      <div>
+        <span className = {`px-8 text-3xl font-bold dark:text-dark`}>Organization</span>
+        <FooterButton href='#' icon={iconsFA[0]} iconTextName='About' />
+        <FooterButton href='#' icon={iconsFA[1]} iconTextName='Team' />
+        <FooterButton href='#' icon={iconsFA[3]} iconTextName="What's New" />
+      </div>
+      <div>
+        <span className = {`px-8 text-3xl font-bold dark:text-dark`}>Contact Us</span>
+        <FooterButton href='https://github.com/luminosityleds' icon={iconsFA[2]} iconTextName='GitHub' />
+        <FooterButton href='#' icon={iconsFA[4]} iconTextName='Discord' />
+      </div>
     </div>
   );
 }