Home hero updates (datacommonsorg#4790)

## Description The primary update of this PR is to convert the home page hero into columns (making use of the hero_columns component. In doing so, we also refactored the hero column to make it more flexible. This also includes separate minor updates to reflect updates requested in the meeting: * Section wrapper component padding fine-tuned for certain screen-sizes * Responsive typography size update on the build page's hero. * Minor padding updates in Knowledge-graph from the meeting. ### Screenshots #### Before <img width="1797" alt="desktop_before" src="https://github.com/user-attachments/assets/6f0fdbb4-43e9-46e2-bb86-ff6e7fa5c9a2" /> #### After <img width="1796" alt="desktop_after" src="https://github.com/user-attachments/assets/8c41cbd0-d6db-48c3-85c4-ba8a798ce949" /> --------- Co-authored-by: Pablo Noel <[email protected]>
Half-Integer · Dec 12, 2024 · 4459240 · 4459240
1 parent 0e30e41
commit 4459240
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 73 deletions.
diff --git a/static/js/apps/browser_landing/components/knowledge_graph_browser.tsx b/static/js/apps/browser_landing/components/knowledge_graph_browser.tsx
@@ -40,8 +40,8 @@ export const KnowledgeGraphBrowser = ({
         <article
           key={category.title}
           css={css`
-            padding-bottom: ${theme.spacing.huge}px;
-            margin-bottom: ${theme.spacing.huge}px;
+            padding-bottom: ${theme.spacing.xxl}px;
+            margin-bottom: ${theme.spacing.xxl}px;
             border-bottom: 1px solid rgba(220, 220, 220, 0.3);
             &:last-of-type {
               border-bottom: none;

diff --git a/static/js/apps/build/components/build_hero.tsx b/static/js/apps/build/components/build_hero.tsx
@@ -18,42 +18,74 @@
  * A component to display the build page hero.
  */
 
+/** @jsxImportSource @emotion/react */
+
+import { css, useTheme } from "@emotion/react";
 import React, { ReactElement } from "react";
 
 import { HeroColumns } from "../../../components/content/hero_columns";
 
 export const BuildHero = (): ReactElement => {
+  const theme = useTheme();
   return (
-    <HeroColumns>
+    <HeroColumns columnRatioVariant="left-larger">
       <HeroColumns.Left>
-        <h2>
+        <h2
+          css={css`
+            ${theme.typography.family.heading};
+            ${theme.typography.heading.lg};
+            color: ${theme.colors.text.primary.light};
+          `}
+        >
           Build your Data Commons, overlay your data with global data, and let
           everyone in your organization uncover insights with natural language
           questions.{" "}
           <a
             href="https://docs.datacommons.org/custom_dc?utm_source=buildpage_hero"
             title="Build your own Data Commons"
+            css={css`
+              ${theme.typography.family.heading};
+              ${theme.typography.heading.lg};
+              color: ${theme.colors.link.primary.light};
+            `}
           >
             Learn how
           </a>
         </h2>
       </HeroColumns.Left>
       <HeroColumns.Right>
-        <div>
+        <div
+          css={css`
+            & > h4 {
+              ${theme.typography.family.text};
+              ${theme.typography.text.md};
+              color: ${theme.colors.text.primary.light};
+              font-weight: 900;
+            }
+            & > p {
+              ${theme.typography.family.text};
+              ${theme.typography.text.md};
+              color: ${theme.colors.text.primary.light};
+              margin-bottom: ${theme.spacing.xxl}px;
+              @media (max-width: ${theme.breakpoints.sm}px) {
+                margin-bottom: ${theme.spacing.lg}px;
+              }
+              &:last-of-type {
+                margin-bottom: 0;
+              }
+            }
+          `}
+        >
           <h4>Build and deploy your own</h4>
           <p>
             Launch your own Data Commons and customize it with your own data to
             better engage your specific audience
           </p>
-        </div>
-        <div>
           <h4>Explore data with natural language</h4>
           <p>
             Ask questions in your own words and get answers directly from your
             data
           </p>
-        </div>
-        <div>
           <h4>Gain actionable insights</h4>
           <p>
             Find actionable insights from your data in connection to global data{" "}

diff --git a/static/js/apps/homepage/app.tsx b/static/js/apps/homepage/app.tsx
@@ -67,7 +67,7 @@ export function App({
 
   return (
     <ThemeProvider theme={theme}>
-      <Section colorVariant="light">
+      <Section colorVariant="light" variant="large">
         <HomeHero linkChips={topicLinkChips} />
       </Section>
 

diff --git a/static/js/apps/homepage/components/home_hero.tsx b/static/js/apps/homepage/components/home_hero.tsx
@@ -23,7 +23,7 @@
 import { css, useTheme } from "@emotion/react";
 import React, { ReactElement } from "react";
 
-import { HeroSimple } from "../../../components/content/hero_simple";
+import { HeroColumns } from "../../../components/content/hero_columns";
 import { LinkChips } from "../../../components/content/link_chips";
 import { Link, LinkChip } from "../../../components/elements/link_chip";
 
@@ -35,17 +35,18 @@ interface HomeHeroProps {
 export const HomeHero = ({ linkChips }: HomeHeroProps): ReactElement => {
   const theme = useTheme();
   return (
-    <HeroSimple>
-      <>
+    <HeroColumns>
+      <HeroColumns.Left>
         <h1
           css={css`
             ${theme.typography.heading.lg}
-            margin-bottom: ${theme.spacing.xxl}px;
           `}
         >
           Data Commons brings together the world&apos;s public data, harmonized
           for your exploration
         </h1>
+      </HeroColumns.Left>
+      <HeroColumns.Right>
         <LinkChips
           header={"Topics to explore"}
           headerComponent="h4"
@@ -66,7 +67,7 @@ export const HomeHero = ({ linkChips }: HomeHeroProps): ReactElement => {
             }}
           />
         </div>
-      </>
-    </HeroSimple>
+      </HeroColumns.Right>
+    </HeroColumns>
   );
 };
diff --git a/static/js/components/content/hero_columns.tsx b/static/js/components/content/hero_columns.tsx
@@ -27,6 +27,8 @@ interface HeroColumnsProps {
   //the content of the two hero columns, given as slot props:
   //<TextColumns.Left>...</TextColumns.Left><TextColumns.Right>...</TextColumns.Right>
   children: ReactElement | ReactElement[];
+  //the size ratio of the two columns, with the default being equal
+  columnRatioVariant?: "equal" | "left-larger" | "right-larger";
 }
 
 interface HeroColumnsSlotProps {
@@ -35,75 +37,35 @@ interface HeroColumnsSlotProps {
 }
 
 const HeroColumnsLeft = ({ children }: HeroColumnsSlotProps): ReactElement => {
-  const theme = useTheme();
-  return (
-    <header
-      id="hero"
-      css={css`
-        display: flex;
-        flex-direction: column;
-        gap: ${theme.spacing.xxl}px;
-        h2,
-        h1 {
-          ${theme.typography.family.heading};
-          ${theme.typography.heading.lg};
-        }
-        @media (max-width: ${theme.breakpoints.sm}px) {
-          gap: ${theme.spacing.md}px;
-        }
-      `}
-    >
-      {children}
-    </header>
-  );
+  return <header id="hero">{children}</header>;
 };
 
 const HeroColumnsRight = ({ children }: HeroColumnsSlotProps): ReactElement => {
-  const theme = useTheme();
-  return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        gap: ${theme.spacing.xxl}px;
-        @media (max-width: ${theme.breakpoints.sm}px) {
-          gap: ${theme.spacing.md}px;
-        }
-      `}
-    >
-      {children}
-    </div>
-  );
+  return <div>{children}</div>;
 };
 
-export const HeroColumns = ({ children }: HeroColumnsProps): ReactElement => {
+export const HeroColumns = ({
+  children,
+  columnRatioVariant = "equal",
+}: HeroColumnsProps): ReactElement => {
   const theme = useTheme();
+
+  const layout =
+    columnRatioVariant === "right-larger"
+      ? "4fr 6fr"
+      : columnRatioVariant === "left-larger"
+      ? "6fr 4fr"
+      : "5fr 5fr";
+
   return (
     <article
       css={css`
         display: grid;
-        grid-template-columns: 6fr 4fr;
+        grid-template-columns: ${layout};
         gap: ${theme.spacing.xl}px;
         @media (max-width: ${theme.breakpoints.sm}px) {
           grid-template-columns: 1fr;
         }
-        & > div,
-        & > header {
-          color: ${theme.colors.text.primary.light};
-          a {
-            color: ${theme.colors.link.primary.light};
-          }
-          h3,
-          h4 {
-            ${theme.typography.family.text};
-            ${theme.typography.text.md};
-            font-weight: 900;
-          }
-          p {
-            ${theme.typography.family.text};
-            ${theme.typography.text.md};
-          }
-        }
       `}
     >
       {children}

diff --git a/static/js/components/elements/layout/section.tsx b/static/js/components/elements/layout/section.tsx
@@ -71,6 +71,9 @@ export const Section = ({
           @media (max-width: ${theme.breakpoints.md}px) {
             max-width: 100%;
           }
+          @media (max-width: ${theme.breakpoints.sm}px) {
+            padding: ${theme.spacing.huge}px ${theme.spacing.lg}px;
+          }
         `}
       >
         {children}

diff --git a/static/js/theme/theme.ts b/static/js/theme/theme.ts
@@ -236,8 +236,8 @@ const theme: Theme = {
         lineHeight: "2.75rem",
         fontWeight: 300,
         [`@media (max-width: ${BREAKPOINTS.md}px)`]: {
-          fontSize: "2rem",
-          lineHeight: "2.7rem",
+          fontSize: "1.8rem",
+          lineHeight: "2.4rem",
         },
       },
       xl: {