LL-257: Create Team Page

src/components/Footer.tsx

@@ -2,6 +2,7 @@ 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 footerButtonUtils = 'flex items-center py-2 px-4';
@@ -11,7 +12,7 @@ const footerDivStyle = 'dark:bg-black flex justify-between position:static py-8
 const ICON_HEIGHT = "h-[48px]"
 const iconsFA = [
   <FontAwesomeIcon
-    icon={icon({ name: 'info-circle'})}
+    icon={icon({ name: 'info-circle' })}
     className={ICON_HEIGHT}
   />,
   <FontAwesomeIcon
@@ -23,39 +24,36 @@ const iconsFA = [
     className={ICON_HEIGHT}
   />,
   <FontAwesomeIcon
-    icon={icon({ name: 'lightbulb'})}
+    icon={icon({ name: 'lightbulb' })}
     className={ICON_HEIGHT}
   />,
   <FontAwesomeIcon
-    icon={icon({ name: 'discord', style: 'brands'})}
+    icon={icon({ name: 'discord', style: 'brands' })}
     className={ICON_HEIGHT}
   />
 ];
-interface FooterProps
- {
+interface FooterProps {
   href: string; //
   icon: React.ReactNode;
   iconTextName: string;
 }
 
-function FooterButton ({ href, icon, iconTextName}: FooterProps) 
-{
+function FooterButton({ href, icon, iconTextName }: FooterProps) {
   return (
-        <a href={href} className= {`${darkMode} ${lightMode} ${footerButtonUtils}`}>
-          <div className = {textPaddingSize} >
-          {icon}
-          </div>
-          <h1 className='text-[32pt]'>{iconTextName}</h1>
-        </a>
+    <a href={href} className={`${darkMode} ${lightMode} ${footerButtonUtils}`}>
+      <div className={textPaddingSize} >
+        {icon}
+      </div>
+      <h1 className='text-[32pt]'>{iconTextName}</h1>
+    </a>
   );
 }
 
-function Footer() 
-{
+function Footer() {
   return (
-    <div className = {`h-180 px-4 ${footerDivStyle}`}> 
+    <div className={`h-180 px-4 ${footerDivStyle}`}>
       <FooterButton href='#' icon={iconsFA[0]} iconTextName='About' />
-      <FooterButton href='#' icon={iconsFA[1]} iconTextName='Team' />
+      <FooterButton href='/Team' 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' />

src/components/Header.tsx

@@ -75,7 +75,7 @@ export const Header = () => {
           </li>
           <li>
             <Link to="/register">
-            <button className="px-4 py-2 text-light rounded hover:bg-A6EDF2 hover:text-hover-light font-sans text-[32px] dark:text-dark dark:hover:text-hover-dark">
+              <button className="px-4 py-2 text-light rounded hover:bg-A6EDF2 hover:text-hover-light font-sans text-[32px] dark:text-dark dark:hover:text-hover-dark">
                 Sign Up
               </button>
             </Link>

src/components/IconCard.tsx

@@ -5,7 +5,7 @@ const HORIZONTAL_TEXT_WIDTH = "w-[500px]"
 const VERTICAL_TEXT_WIDTH = "w-[1200px]"
 const HORIZONTAL_CENTER = "justify-around"
 const VERTICAL_CENTER = "items-center"
-const HORIZONTAL_GAP =  "" //"gap-20"
+const HORIZONTAL_GAP = "" //"gap-20"
 const VERTICAL_GAP = "" //"gap-10"
 const HEADING_SIZE = "text-[64px]"
 const BODY_SIZE = "text-[48px]"
@@ -29,24 +29,24 @@ export type IconCardProps = {
 
 }
 
-export const IconCard = ({data, bgColor, icon}: IconCardProps) => {
+export const IconCard = ({ data, bgColor, icon }: IconCardProps) => {
 
     var size, center, flexDirection, gap, align
 
     if (isHorizontal(data.orientation)) {
         size = HORIZONTAL_TEXT_WIDTH
         center = HORIZONTAL_CENTER
         gap = HORIZONTAL_GAP
-        flexDirection = (data.orientation===Orientation.west) ? "flex-row-reverse" : "flex-row"
+        flexDirection = (data.orientation === Orientation.west) ? "flex-row-reverse" : "flex-row"
     }
     else { //vertical
         size = VERTICAL_TEXT_WIDTH
         center = VERTICAL_CENTER
         gap = VERTICAL_GAP
-        flexDirection = (data.orientation===Orientation.north) ? "flex-col-reverse" : "flex-col"
+        flexDirection = (data.orientation === Orientation.north) ? "flex-col-reverse" : "flex-col"
     }
 
-    return(
+    return (
         <div className={`px-8 py-20 flex ${flexDirection} ${gap} ${bgColor} ${center} ${align}`}>
             {textContainer(data.headingText, data.bodyText, size)}
             <div className="m-16 flex items-center">
@@ -57,7 +57,7 @@ export const IconCard = ({data, bgColor, icon}: IconCardProps) => {
 }
 
 function textContainer(headingText: string, bodyText: string, width: string) {
-    return(
+    return (
         <div className={`${width} text-light dark:text-dark`}>
             <p className={`${HEADING_SIZE} pb-2`}>{headingText}</p>
             <p className={BODY_SIZE}>{bodyText}</p>
@@ -66,7 +66,7 @@ function textContainer(headingText: string, bodyText: string, width: string) {
 }
 
 export function isHorizontal(orientation: Orientation) {
-    return(Boolean(orientation % 2))
+    return (Boolean(orientation % 2))
 }
 
 export default IconCard;

src/components/Login.tsx

@@ -14,29 +14,26 @@ export const Login = () => {
 
   return (
     <div
-      className={`"App" ${
-        lightMode ? "bg-card-light-blue" : "dark bg-card-dark-blue"
-      } min-h-screen flex flex-col`}
+      className={`"App" ${lightMode ? "bg-card-light-blue" : "dark bg-card-dark-blue"
+        } min-h-screen flex flex-col`}
     >
       <Header />
       <div className="relative flex flex-grow">
         <div className="flex flex-col items-center justify-center flex-1">
           <button
-            className={`${
-              lightMode
+            className={`${lightMode
                 ? "bg-card-sky-blue border-black hover:bg-electric-blue"
                 : "bg-black text-white hover:bg-charcoal-black"
-            } border-[3px] rounded-[15px] border-radius: 15px w-[720px] h-[120px] py-2 px-12 mb-24 flex items-center justify-center`}
+              } border-[3px] rounded-[15px] border-radius: 15px w-[720px] h-[120px] py-2 px-12 mb-24 flex items-center justify-center`}
           >
             <FontAwesomeIcon
               icon={icon({ name: "github", style: "brands" })}
               className="mr-2 h-12"
             />
             <span className="flex-grow text-base">
               <p
-                className={`${
-                  lightMode ? "text-duke-blue" : "text-white"
-                } text-[48px] ml-2`}
+                className={`${lightMode ? "text-duke-blue" : "text-white"
+                  } text-[48px] ml-2`}
               >
                 Log In with Github
               </p>
@@ -45,21 +42,19 @@ export const Login = () => {
 
           <button
             onClick={() => googleLogin()}
-            className={`${
-              lightMode
+            className={`${lightMode
                 ? "bg-card-sky-blue border-black hover:bg-electric-blue"
                 : "bg-black text-white hover:bg-charcoal-black"
-            } border-[3px] rounded-[15px] w-[720px] h-[120px] py-2 px-12 mb-12 flex items-center justify-center`}
+              } border-[3px] rounded-[15px] w-[720px] h-[120px] py-2 px-12 mb-12 flex items-center justify-center`}
           >
             <FontAwesomeIcon
               icon={icon({ name: "google", style: "brands" })}
               className="mr-2 h-12"
             />
             <span className="flex-grow text-base">
               <p
-                className={`${
-                  lightMode ? "text-duke-blue" : "text-white"
-                } text-[48px] ml-2`}
+                className={`${lightMode ? "text-duke-blue" : "text-white"
+                  } text-[48px] ml-2`}
               >
                 Log In with Google
               </p>
@@ -68,23 +63,21 @@ export const Login = () => {
 
           <div className="text-[24px] mb-10">
             <span
-              className={`${
-                lightMode
+              className={`${lightMode
                   ? "text-duke-blue hover:text-sapphire-blue"
                   : "text-white hover:text-suva-grey"
-              }`}
+                }`}
             >
               Forgot Password?{" "}
             </span>
             <span className={`${lightMode ? "text-duke-blue" : "text-white"}`}>
               |
             </span>
             <span
-              className={`${
-                lightMode
+              className={`${lightMode
                   ? "text-duke-blue hover:text-sapphire-blue"
                   : "text-white hover:text-suva-grey"
-              }`}
+                }`}
             >
               {" "}
               Register

src/components/Team.tsx

@@ -0,0 +1,74 @@
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import Header from './Header';
+import Footer from './Footer';
+import { useToggle } from "../ts/ToggleHeader";
+
+const darkMode = 'dark:text-white  ';
+const lightMode = 'text-black ';
+
+const iconsFA = [
+  <FontAwesomeIcon
+    icon={icon({ name: 'user' })}
+  />,
+  <FontAwesomeIcon
+    icon={icon({ name: 'linkedin', style: 'brands' })}
+  />,
+  <FontAwesomeIcon
+    icon={icon({ name: 'github', style: 'brands' })}
+  />,
+  <FontAwesomeIcon
+    icon={icon({ name: 'instagram', style: 'brands' })}
+  />,
+  <FontAwesomeIcon
+  icon={icon({ name: 'globe' })}
+    />,
+  <FontAwesomeIcon
+    icon={icon({ name: 'discord', style: 'brands' })}
+  />
+];
+interface TeamProps {
+  href: string; //
+  icon: React.ReactNode;
+  iconTextName: string;
+  LLrole: string;
+}
+
+function TeamButton({ href, icon, iconTextName, LLrole }: TeamProps) {
+  return (
+    <div className="flex justify-around ">
+      <div className="bg-gray-200 rounded-lg p-6 m-6 py-16 ">
+        <h1 className="flex items-center justify-center text-2xl">{icon}</h1>
+        <h2 className=" flex items-center justify-center text-xl font-semibold mb-2">{iconTextName}</h2>
+        <h1 className=" flex items-center justify-center text-sm ">{LLrole}</h1>
+        <div className="flex  space-x-2">
+          <a href="#" >LinkedIn</a>
+          <a href="#" >Github</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Team() {
+  return (
+    <span className="text-white px-2 ">
+        Meet The<br />
+        Team
+
+    <div className=' '>
+        <div className='grid grid-cols-3  '>
+            <TeamButton href='#' icon={iconsFA[0]} iconTextName='Name1' LLrole='Role Example' />
+            <TeamButton href='#'  icon={iconsFA[0]} iconTextName='Name2' LLrole='Role Example' />
+            <TeamButton href='#' icon={iconsFA[0]} iconTextName='Name3' LLrole='Role Example' />
+            <TeamButton href='#' icon={iconsFA[0]} iconTextName='Name4' LLrole='Role Example' />
+            <TeamButton href='#'  icon={iconsFA[0]} iconTextName='Name5' LLrole='Role Example' />
+            <TeamButton href='#' icon={iconsFA[0]} iconTextName='Name6' LLrole='Role Example' />
+      </div>
+    </div>
+    </span>
+  );
+}
+export default Team;