From 101f207033a030aebc3996be0e247cb3e205370a Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Mon, 25 Sep 2023 22:15:25 -0700 Subject: [PATCH] GIVCAMP-199 | New homepage hero (#122) * New homepage hero * sr only H1 * make font size fluid; positioning of hero elements * Play with hero animation * Clean up * More finetuning responsive --- components/Homepage/HomepageSplitHero.tsx | 110 +++++++++++++++++++ components/Storyblok/SbHomepage.tsx | 24 +--- components/Typography/typography.styles.ts | 7 +- tailwind/plugins/components/gc-typography.js | 3 + 4 files changed, 122 insertions(+), 22 deletions(-) create mode 100644 components/Homepage/HomepageSplitHero.tsx diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx new file mode 100644 index 00000000..b870b62c --- /dev/null +++ b/components/Homepage/HomepageSplitHero.tsx @@ -0,0 +1,110 @@ +import { m } from 'framer-motion'; +import { Container } from '../Container'; +import { Grid } from '../Grid'; +import { Heading, Paragraph, Text } from '../Typography'; +import { AnimateInView } from '../Animate'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; + + +export const HomepageSplitHero = () => { + const bg = getProcessedImage('https://a-us.storyblok.com/f/1005200/2100x2028/bef2e6a13e/masthead-top-structured.jpg', '3000x0'); + + return ( + +
+ Homepage +
+
+
+ + + + + + + + + + +
+
+ + + + How will we + + + come together + + + + + all in service of + + + Tomorrow? + + + +
+
+
+ +
+ + + We’re all in this together. + + + + + Sustaining a thriving planet. Accelerating solutions and empowering the next generation of leaders. + + + Meet your community of changemakers, explore what you’re passionate about, and join the conversation. + + +
+ + + ); +}; diff --git a/components/Storyblok/SbHomepage.tsx b/components/Storyblok/SbHomepage.tsx index df9a35ce..555137e3 100644 --- a/components/Storyblok/SbHomepage.tsx +++ b/components/Storyblok/SbHomepage.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import { CreateBloks } from '../CreateBloks'; import { Heading } from '../Typography'; import { HomepageHero } from '../Homepage/HomepageHero'; +import { HomepageSplitHero } from '../Homepage/HomepageSplitHero'; import { Intro } from '../Homepage/Intro'; import { Masthead } from '../Masthead'; import { ThemeSection } from '../Homepage/ThemeSection'; @@ -64,15 +65,7 @@ export const SbHomepagePage = ({
{title || 'Homepage'} - - {/* */} + {/* + {/* */} - - {/* {getNumBloks(ankle) > 0 && ( - - )} */}
); - diff --git a/components/Typography/typography.styles.ts b/components/Typography/typography.styles.ts index c8d1c6ba..78831f32 100644 --- a/components/Typography/typography.styles.ts +++ b/components/Typography/typography.styles.ts @@ -33,6 +33,7 @@ export const fontSizes = { f9: 'fluid-type-9', // Curated font size for homepage hero slightly smaller than f9 splash: 'gc-splash', + hero: 'hero', }; // Line heights @@ -72,11 +73,15 @@ export const textVariants = { subheading: 'subheading', /** * Campaign typography styles - * (-gc ones are Deccanter styles with Campaign modifications) + * (-gc ones are Decanter styles with Campaign modifications) */ caption: 'gc-caption', card: 'gc-card', intro: 'gc-intro-text', + /** + * Campaign only styles + * No gc- prefix because no Decanter equivalent + */ overview: 'overview', }; diff --git a/tailwind/plugins/components/gc-typography.js b/tailwind/plugins/components/gc-typography.js index f98f9784..1c44381f 100644 --- a/tailwind/plugins/components/gc-typography.js +++ b/tailwind/plugins/components/gc-typography.js @@ -58,6 +58,9 @@ module.exports = function () { '.gc-splash': { fontSize: 'clamp(5.8rem, 8.95vw + 2.58rem, 16rem)', }, + '.hero': { + fontSize: 'clamp(5.5rem, 7.71vw - 0.42rem, 15rem)', + }, }; addComponents(components);