Merge pull request #58 from galaxyproject/fran/56-questions

feat: the return of "your questions answered!" (#56)
galaxyproject · Sep 13, 2024 · 9fc1f53 · 9fc1f53
2 parents fbb99fa + e16ac8d
commit 9fc1f53
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/...s/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts b/...s/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
@@ -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
@@ -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="[email protected]"
+              url="mailto:[email protected]"
+            />
+            . We&#39;re here to help!
+          </StyledSectionSubTitle>
+        </Headline>
         <Questions />
       </SectionLayout>
     </Section>