feat: added sub header section (#6)

Author: Fran McDade

website/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts

@@ -0,0 +1,37 @@
+import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import { textBodySmall500 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import styled from "@emotion/styled";
+import { Chip as MChip } from "@mui/material";
+import {
+  Section,
+  sectionGrid,
+  SectionLayout as DefaultLayout,
+} from "../../section.styles";
+
+export const StyledSection = styled(Section)`
+  background-color: ${white};
+`;
+
+export const SectionLayout = styled(DefaultLayout)`
+  ${sectionGrid};
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: 96px 16px 102px;
+`;
+
+export const StyledChip = styled(MChip)`
+  min-width: 0;
+
+  .MuiChip-label {
+    ${textBodySmall500};
+    padding: 0 10px;
+  }
+`;
+
+export const Subhead = styled.h2`
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 48px;
+  margin: 0;
+  text-align: center;
+`;

website/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.tsx

@@ -0,0 +1,27 @@
+import {
+  SectionLayout,
+  StyledChip,
+  StyledSection as Section,
+  Subhead,
+} from "./sectionSubHero.styles";
+
+export const SectionSubHero = (): JSX.Element => {
+  return (
+    <Section>
+      <SectionLayout>
+        <StyledChip
+          color="default"
+          label="The NIAID Bioinformatics Resource Analytics Center"
+          variant="filled"
+        />
+        <Subhead>
+          BRC-Analytics is your new destination for comprehensive analysis of
+          biological data related to pathogens. Building on the legacy of
+          VeuPathDb, our platform currently supports analyses for 785 eukaryotic
+          pathogens and vectors, providing researchers with the tools they need
+          to advance their work.
+        </Subhead>
+      </SectionLayout>
+    </Section>
+  );
+};

website/app/components/Layout/components/Main/main.styles.ts

@@ -0,0 +1,6 @@
+import { Main as DXMain } from "@databiosphere/findable-ui/lib/components/Layout/components/Main/main";
+import styled from "@emotion/styled";
+
+export const StyledMain = styled(DXMain)`
+  flex-direction: column;
+`;

website/app/views/HomeView/homeView.tsx

@@ -1,10 +1,12 @@
 import { Fragment } from "react";
 import { SectionHero } from "../../components/Home/components/Section/components/SectionHero/sectionHero";
+import { SectionSubHero } from "../../components/Home/components/Section/components/SectionSubHero/sectionSubHero";
 
 export const HomeView = (): JSX.Element => {
   return (
     <Fragment>
       <SectionHero />
+      <SectionSubHero />
     </Fragment>
   );
 };

website/pages/index.tsx

@@ -1,4 +1,5 @@
 import { StyledAppLayout } from "../app/components/Layout/components/AppLayout/appLayout.styles";
+import { StyledMain } from "../app/components/Layout/components/Main/main.styles";
 import { HomeView } from "../app/views/HomeView/homeView";
 
 export const Home = (): JSX.Element => {
@@ -8,3 +9,4 @@ export const Home = (): JSX.Element => {
 export default Home;
 
 Home.AppLayout = StyledAppLayout;
+Home.Main = StyledMain;