From e16ac8d96beb755ff4c7156e0e0364c554ba69f0 Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Fri, 13 Sep 2024 14:49:27 +1000
Subject: [PATCH] feat: the return of "your questions answered!" (#56)

---
 .../components/Questions/questions.styles.ts  |  6 ++++
 .../SectionHelp/sectionHelp.styles.ts         | 34 +++++++++++++++++++
 .../components/SectionHelp/sectionHelp.tsx    | 20 ++++++++++-
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts
index a660f831..d6161e97 100644
--- a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts
+++ b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts
@@ -1,3 +1,4 @@
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
 import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import {
   textBodyLarge4002Lines,
@@ -12,6 +13,11 @@ export const Grid = styled.div`
   ${sectionGrid};
   grid-column: 1 / -1;
   grid-template-columns: 1fr;
+
+  ${mediaTabletUp} {
+    grid-column: 6 / -1;
+    grid-template-columns: repeat(7, 1fr);
+  }
 `;
 
 export const StyledAccordion = styled(MAccordion)`
diff --git a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts
index 2e1a7a63..b10b0645 100644
--- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts
+++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts
@@ -1,3 +1,4 @@
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
 import {
   smokeMain,
   white,
@@ -7,6 +8,11 @@ import {
   sectionGrid,
   SectionLayout as DefaultLayout,
 } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
+import {
+  SectionHeadline,
+  SectionSubtitle,
+  SectionTitle,
+} from "../../section.styles";
 
 export const Section = styled.section`
   background-color: ${white};
@@ -18,3 +24,31 @@ export const SectionLayout = styled(DefaultLayout)`
   ${sectionGrid};
   padding: 85px 16px 150px;
 `;
+
+export const Headline = styled(SectionHeadline)`
+  align-content: flex-start;
+  grid-column: 1 / -1;
+  max-width: 504px;
+
+  ${mediaTabletUp} {
+    grid-column: 1 / 5;
+    max-width: unset;
+  }
+`;
+
+export const StyledSectionTitle = styled(SectionTitle)`
+  max-width: 276px;
+`;
+
+export const StyledSectionSubTitle = styled(SectionSubtitle)`
+  line-height: 28px;
+
+  .MuiLink-root {
+    color: #28285b;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
diff --git a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx
index 22464451..f78cac09 100644
--- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx
+++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx
@@ -1,10 +1,28 @@
+import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { Questions } from "./components/Questions/questions";
-import { Section, SectionLayout } from "./sectionHelp.styles";
+import {
+  Headline,
+  Section,
+  SectionLayout,
+  StyledSectionSubTitle,
+  StyledSectionTitle,
+} from "./sectionHelp.styles";
 
 export const SectionHelp = (): JSX.Element => {
   return (
     <Section>
       <SectionLayout>
+        <Headline>
+          <StyledSectionTitle>Your questions, answered</StyledSectionTitle>
+          <StyledSectionSubTitle>
+            If you need further assistance, feel free to reach out to us at{" "}
+            <DXLink
+              label="help@brc-analytics.org"
+              url="mailto:help@brc-analytics.org"
+            />
+            . We&#39;re here to help!
+          </StyledSectionSubTitle>
+        </Headline>
         <Questions />
       </SectionLayout>
     </Section>