From 445924024cbceba5244212fa354adb857dccf08a Mon Sep 17 00:00:00 2001 From: Nicholas Blumberg <41446765+nick-next@users.noreply.github.com> Date: Thu, 12 Dec 2024 08:44:45 -0800 Subject: [PATCH] Home hero updates (#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 desktop_before #### After desktop_after --------- Co-authored-by: Pablo Noel --- .../components/knowledge_graph_browser.tsx | 4 +- .../js/apps/build/components/build_hero.tsx | 46 ++++++++++-- static/js/apps/homepage/app.tsx | 2 +- .../js/apps/homepage/components/home_hero.tsx | 13 ++-- static/js/components/content/hero_columns.tsx | 72 +++++-------------- .../js/components/elements/layout/section.tsx | 3 + static/js/theme/theme.ts | 4 +- 7 files changed, 71 insertions(+), 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 index 2e40e3b861..45032f4c7c 100644 --- 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 = ({
{ + const theme = useTheme(); return ( - + -

+

Build your Data Commons, overlay your data with global data, and let everyone in your organization uncover insights with natural language questions.{" "} Learn how

-
+
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; + } + } + `} + >

Build and deploy your own

Launch your own Data Commons and customize it with your own data to better engage your specific audience

-
-

Explore data with natural language

Ask questions in your own words and get answers directly from your data

-
-

Gain actionable insights

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 index b4cb196e4a..0dee2c5d5c 100644 --- a/static/js/apps/homepage/app.tsx +++ b/static/js/apps/homepage/app.tsx @@ -67,7 +67,7 @@ export function App({ return ( -

+
diff --git a/static/js/apps/homepage/components/home_hero.tsx b/static/js/apps/homepage/components/home_hero.tsx index 30df7eeead..c06aa5710d 100644 --- 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 ( - - <> + +

Data Commons brings together the world's public data, harmonized for your exploration

+ + { }} />
- - + + ); }; diff --git a/static/js/components/content/hero_columns.tsx b/static/js/components/content/hero_columns.tsx index 0cf89ab964..9facf3a937 100644 --- 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: //...... 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 ( -
- {children} -
- ); + return
{children}
; }; const HeroColumnsRight = ({ children }: HeroColumnsSlotProps): ReactElement => { - const theme = useTheme(); - return ( -
- {children} -
- ); + return
{children}
; }; -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 (
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 index 48401ae836..e9a9f699b5 100644 --- 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 index 437e3276a0..16b1269e99 100644 --- 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: {