From af173cd761bc2b1bb12d8d5d9d78522fe6cae41c Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Fri, 1 Sep 2023 13:45:46 -0700 Subject: [PATCH 01/18] Modularize import for heroicons (#117) --- next.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/next.config.js b/next.config.js index b0bcc647..56e4be77 100644 --- a/next.config.js +++ b/next.config.js @@ -8,6 +8,16 @@ const nextConfig = { }, ], }, + // TODO: This has been merged into Next.js canary, but not in v13.4.9 yet + // https://github.com/vercel/next.js/pull/53902 + modularizeImports: { + '@heroicons/react/24/solid': { + transform: '@heroicons/react/24/solid/{{member}}', + }, + '@heroicons/react/24/outline': { + transform: '@heroicons/react/24/outline/{{member}}', + }, + }, }; module.exports = nextConfig; From c6387f50cf8719ff558e2144a36e909c56de6b12 Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:58:20 -0700 Subject: [PATCH 02/18] GIVCAMP-188 | Horizontal brochure poc; new CTA style (#118) * Masthead update * brochure first batch * Continue * Prepping for the horizontal sliding - separate things into 2 stacks * Add slide animation * Add 3rd slide * Keep going * More content * Separate different chapters so it's easier to read * Fix aria hidden of each slide * New CTA style with animation; fixup bookshelf set state types * Split typography poster slide within the brochure * More animation fixup; middle slides styles * I think this works * Add text animation * Just cleaning up imports --- components/AnimatedText/AnimatedText.tsx | 2 +- components/Bookshelf/Book.tsx | 2 +- components/Cta/Cta.styles.ts | 16 +- components/HeroIcon/HeroIcon.styles.tsx | 3 +- components/Masthead/Masthead.tsx | 4 +- components/StoryPoC/BrochureChapter2.tsx | 214 +++++++++++++++++ components/StoryPoC/BrochureStory.tsx | 264 +++++++++++++++++++++ components/StoryPoC/ProgressStory.tsx | 2 - components/StoryPoC/VideoScrollStory.tsx | 5 - components/Storyblok/SbStory.tsx | 6 +- components/Typography/Text.tsx | 2 +- components/Typography/typography.styles.ts | 2 +- 12 files changed, 504 insertions(+), 18 deletions(-) create mode 100644 components/StoryPoC/BrochureChapter2.tsx create mode 100644 components/StoryPoC/BrochureStory.tsx diff --git a/components/AnimatedText/AnimatedText.tsx b/components/AnimatedText/AnimatedText.tsx index 2d57414d..2e8c32b7 100644 --- a/components/AnimatedText/AnimatedText.tsx +++ b/components/AnimatedText/AnimatedText.tsx @@ -42,7 +42,7 @@ const child = { return ( >; + setExpanded?: React.Dispatch>; buttonClassName?: string; contentClassName?: string; imgSrc?: string; diff --git a/components/Cta/Cta.styles.ts b/components/Cta/Cta.styles.ts index f79cdbb4..f978311c 100644 --- a/components/Cta/Cta.styles.ts +++ b/components/Cta/Cta.styles.ts @@ -12,9 +12,13 @@ export const cta = 'group hocus:underline transition-all'; const ghostSwipeBase = 'relative z-[10] block w-fit decoration-2 decoration-transparent underline-offset-4 hocus:decoration-white/80 font-normal leading-display hocus:text-white border-2 border-current hocus:border-digital-red-light focus-visible:outline-none after:block after:content-[""] after:absolute after:top-0 after:left-0 after:w-[0] after:h-full after:bg-gradient-to-r after:from-digital-red after:to-cardinal-red after:transition-all after:z-[-1] hocus:after:w-full overflow-hidden'; const mainNavBase = 'group bg-clip-padding inline-block border-2 font-normal decoration-transparent decoration-1 underline-offset-4 hocus:ring-1 hocus:ring-inset'; -const mainNavWhite = 'text-white border-white hocus:text-white hocus:decoration-white hocus:ring-white'; +const mainNavWhite = 'text-white border-white bg-gc-black hocus:text-white hocus:decoration-white hocus:ring-white'; const mainNavDark = 'text-gc-black border-gc-black hocus:text-gc-black hocus:decoration-gc-black hocus:ring-gc-black'; +const brochureBase = 'inline-block font-bold font-serif no-underline hocus:no-underline leading-none text-current hocus:!text-current bg-gradient-to-b bg-no-repeat bg-[0_100%] bg-[length:0_5px] hocus:bg-[length:calc(100%-1.3em)_5px]'; +const brochureIlluminating = 'from-illuminating to-illuminating'; +const brochurePoppy = 'from-poppy to-poppy'; + export const ctaVariants = { solid: 'block w-fit relative z-[10] font-normal decoration-2 decoration-transparent underline-offset-4 hocus:decoration-white/80 leading-display bg-digital-red text-white hocus:text-white border-2 border-digital-red-light focus-visible:outline-none after:block after:content-[""] after:absolute after:top-0 after:left-0 after:w-[0] after:h-full after:bg-gradient-to-r after:from-cardinal-red after:to-cardinal-red-dark after:transition-all after:z-[-1] hocus:after:w-full overflow-hidden', inline: 'inline underline decoration-1 hocus:decoration-2 underline-offset-2', @@ -24,13 +28,15 @@ export const ctaVariants = { 'ghost-swipe-overlay': `${ghostSwipeBase} bg-black-true/40`, // Use for split poster over images link: 'font-normal decoration-transparent hocus:decoration-current leading-display text-current hocus:text-current hocus:decoration-2 focus-visible:ring-2 focus-visible:ring-lagunita-light focus-visible:outline-none focus-visible:rounded underline-offset-4', back: 'inline-block font-normal no-underline leading-none group-hocus:underline text-black hocus:text-lagunita focus-visible:ring-2 focus-visible:ring-lagunita-light focus-visible:ring-offset-4 focus:outline-none rounded-[1px]', - mainNav: `${mainNavBase} ${mainNavWhite} hocus-visible:bg-sapphire/50`, // Main nav buttons at the top of the page + mainNav: `${mainNavBase} ${mainNavWhite} hocus-visible:bg-digital-red`, // Main nav buttons at the top of the page mainNavUp: `${mainNavBase} ${mainNavWhite} hocus-visible:bg-digital-red`, // Main nav buttons when scrolling up mainNavBlack: `${mainNavBase} ${mainNavDark} hocus-visible:bg-lime`, // Main nav buttons when scrolling up close: 'inline-block font-semibold leading-none text-lagunita hocus:text-lagunita-dark focus:outline-none', 'close-x': 'leading-none', chip: 'inline-block leading-display no-underline text-current rounded-full border-2 border-current hocus:text-current font-normal underline-offset-4 decoration-transparent hocus-visible:decoration-current hocus-visible:decoration-2', storyCardTag: 'inline-block text-current hocus:text-current font-normal decoration-2 underline-offset-4 decoration-black-50 hocus:decoration-current hocus:decoration-4', + brochure: `${brochureBase} ${brochureIlluminating}`, + brochurePoppy: `${brochureBase} ${brochurePoppy}`, unset: '', }; @@ -70,10 +76,12 @@ export const ctaSizes: CtaSizeObjectType = { large: 'pl-28 pr-26 pt-16 pb-17 lg:pr-40 lg:pl-44 lg:pt-20 lg:pb-22 text-18 lg:text-24', link: 'text-16 lg:text-20', mainNav: 'text-14 px-10 pt-8 pb-9 lg:px-22 lg:py-15 lg:text-20', + mainNavUp: 'text-14 px-10 pt-7 pb-8 lg:px-16 lg:py-11 lg:text-15', back: 'text-16', close: 'text-18 md:text-21', chip: 'py-7 px-22 text-18', storyCardTag: 'text-16 lg:text-18', + brochure: 'text-20 xl:text-30 py-12', unset: '', }; @@ -85,7 +93,7 @@ export const ctaSizeMap: CtaSizeMapType = { 'ghost-swipe': 'default', 'ghost-swipe-overlay': 'default', mainNav: 'mainNav', - mainNavUp: 'mainNav', + mainNavUp: 'mainNavUp', mainNavBlack: 'mainNav', link: 'unset', close: 'close', @@ -93,6 +101,8 @@ export const ctaSizeMap: CtaSizeMapType = { back: 'back', chip: 'chip', storyCardTag: 'storyCardTag', + brochure: 'brochure', + brochurePoppy: 'brochure', unset: 'unset', }; diff --git a/components/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx index bf26cfc5..a38d7998 100644 --- a/components/HeroIcon/HeroIcon.styles.tsx +++ b/components/HeroIcon/HeroIcon.styles.tsx @@ -1,5 +1,6 @@ import { ArrowUpIcon, + ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpRightIcon, @@ -23,6 +24,7 @@ export const iconMap = { 'arrow-right': ArrowRightIcon, 'arrow-left': ArrowLeftIcon, 'arrow-up': ArrowUpIcon, + 'arrow-down': ArrowDownIcon, back: ArrowLeftIcon, 'chevron-down': ChevronDownIcon, 'chevron-right': ChevronRightIcon, @@ -72,5 +74,4 @@ export const iconBaseStyle: IconBaseStyleType = { more: 'w-08em', plus: 'w-08em', right: 'w-08em', - up: 'w-1em', }; diff --git a/components/Masthead/Masthead.tsx b/components/Masthead/Masthead.tsx index 9e0b5413..567745be 100644 --- a/components/Masthead/Masthead.tsx +++ b/components/Masthead/Masthead.tsx @@ -65,7 +65,7 @@ export const Masthead = ({ isLight, className }: MastheadProps) => { { className="" /> {/* The scale3d here solves a Firefox only rendering bug with blurry curved borders when using transform */} - + { + const [isCurrent, setIsCurrent] = useState(false); + + const handleButtonClick = (i: number | false) => { + setIsCurrent(i); + }; + + return ( +
+ + {/* Stack 1 - cover */} +
+ +
+
+ +
+ + Caption/credit lorem ipsum dolar sit amet vestibulum perimentium + +
+
+ Chapter 2. + + Catalyzing discovery in every field + + +
+ + The search for knowledge is at the core of everything Stanford does, + because curiosity is fundamental to our humanity. + +
+
+ + No matter what truths we uncover about the world, or what insights we discover about ourselves, + there is always more to learn. Propelled by new ways of thinking, working, and creating, + our students and scholars probe the frontiers of discovery, + revealing advances that drive progress and truths that are timeless. + +
+ +
+ + handleButtonClick(1)} + disabled={!!isCurrent} + icon="arrow-right" + variant="brochure" + color="black" + className="rs-mt-3 absolute bottom-60 right-70" + > + Continue reading + +
+ {/* Stack 2 */} +
+ {/* Stack 2 - slide 1 */} + + +
+ + + Duality is + +
+
+ + + in our DNA + +
+ + handleButtonClick(2)} + disabled={isCurrent !== 1} + icon="arrow-right" + variant="brochurePoppy" + color="black" + className="rs-mt-3 absolute bottom-60 right-70" + > + Next + + + {/* Stack 2 - slide 2 */} + = 2 ? '-100%' : 0 }} + transition={{ duration: 0.5 }} + > + +
+
+ +
+ + The O’Donohue Family Stanford Educational Farm is Stanford’s living laboratory for + sustainable agriculture.Through workshops, wellness courses, and volunteer opportunities students + and members of the general public can come together to get hands-on experience in sustainable + small-scale and urban agriculture. + +
+
+ + Where art and community come together + + +
+ + Artists of Asian descent have created work as varied and rich as their lives and histories + – yet their contributions have remained in the shadows of American art. + The Asian American art initiative is helping elevate their vital work + to its rightful place in American art. + + + Thanks in part to a Humanities Seed Grant, the AAAI is making targeted acquisitions, + providing meaningful opportunities for engagement, and bringing works of art to life for + new audiences. As a result, the Cantor Arts Center now houses one of the country’s + biggest collections of Asian American art. + +
+
+ + Through scholarship, accessibility, and outreach, the AAAI encourages audiences to navigate the + complexity of the term “Asian American” itself. In a time fraught with racism, discrimination, + and xenophobia, art that sheds light on these struggles is edifying and essential, + providing us with a common experience through which discussion and understanding flourish + between all members of society truly thriving and barely surviving. + +
+ +
+ + handleButtonClick(3)} + disabled={isCurrent !== 2} + icon="arrow-right" + variant="brochure" + color="white" + className="rs-mt-3 absolute bottom-60 right-70" + > + Next + + + {/* Stack 2 - slide 3 */} + +
+ + Room to discover + + + freedom to explore + +
+ handleButtonClick(false)} + icon="close" + variant="brochure" + color="white" + className="absolute bottom-60 right-70" + > + Close + + +
+ +
+ ); +}; diff --git a/components/StoryPoC/BrochureStory.tsx b/components/StoryPoC/BrochureStory.tsx new file mode 100644 index 00000000..68c9570d --- /dev/null +++ b/components/StoryPoC/BrochureStory.tsx @@ -0,0 +1,264 @@ +'use client'; + +import { useState } from 'react'; +import { m } from 'framer-motion'; +import { AnimatedText } from '../AnimatedText/AnimatedText'; +import { Container } from '../Container'; +import { Grid } from '../Grid'; +import { Heading, Paragraph, Text } from '../Typography'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; + +import { CtaButton } from '../Cta'; +import { BrochureChapter2 } from './BrochureChapter2'; +import { AnimateInView } from '../Animate'; + +export const BrochureStory = () => { + const bgImage = getProcessedImage('https://a-us.storyblok.com/f/1005200/3089x2048/aee2ea28c6/21664-18-0021_cmyk.jpg', '2000x0'); + const [isCurrent, setIsCurrent] = useState(false); + + const handleButtonClick = (i: number | false) => { + setIsCurrent(i); + }; + + return ( + + + Solve for now. To shape what’s next. + + + + + + To shape what’s next. + + +
+ + by Sarah Jane Staats + + + May 5, 2023 + +
+ + Vestibulum accumsan urna magna, eget aliquet magna luctus sit amet. + Ut sed velit tincidunt, dignissim nibh sed. + + + {/* Chapter 1 */} +
+ + {/* Stack 1 - cover */} +
+ +
+
+ +
+ + Caption/credit lorem ipsum dolar sit amet vestibulum perimentium + +
+
+ Chapter 1. + + Preparing citizens and leaders + + +
+ + They may not be fully ready for the world, but Stanford must be ready for them. + +
+
+ + Through a combination of groundbreaking new curriculum, enhanced resources and financial aid, + and revitalized residential experiences, Stanford will create a culture that prepares students + to live, work,and serve as active citizens, for the good of the world. + This includes an embedded focus on character, community, civic engagement, and ethics, + undergirded by an inclusive worldview. + +
+ +
+ + handleButtonClick(1)} + disabled={!!isCurrent} + icon="arrow-right" + variant="brochure" + color="black" + className="rs-mt-3 absolute bottom-60 right-70" + > + Continue reading + +
+ {/* Stack 2 */} +
+ {/* Stack 2 - slide 1 */} + + +
+
+ +
+ + The O’Donohue Family Stanford Educational Farm is Stanford’s living laboratory for + sustainable agriculture.Through workshops, wellness courses, and volunteer opportunities students + and members of the general public can come together to get hands-on experience in sustainable + small-scale and urban agriculture. + +
+
+ + The future grows on a farm + + +
+ + To change the world, one must first learn to engage with the world. + + + Ready to equip the next generation of leaders with skills to promote the public welfare and act + for the good of the world. To define personal success as inexorably linked to the + success of others. To act not only as individuals, but as members of society—global citizens + who embrace diversity of thought and experience. Through shared experiences, + Stanford undergraduates gain a sense of community and belonging that fosters + both intellectual and personal growth. + +
+
+ + It’s urgent that students find expanded opportunities to match a rapidly changing society. + When polarization is the norm and “social” media is anything but, + it’s imperative that we build inclusive communities outside the classroom. + Residential neighborhoods, community centers, and athletic opportunities that develop leaders + on and off the field provide connection and a rallying point for everyone at Stanford. + + + Every student, regardless of background or identity, deserves to feel a sense of belonging. + If we are to continue to invite future movers, shakers, and game-changers of our world, + our doors must always be wide open. + +
+ +
+ + handleButtonClick(2)} + disabled={isCurrent !== 1} + icon="arrow-right" + variant="brochurePoppy" + color="black" + className="rs-mt-3 absolute bottom-60 right-70" + > + Next + + + {/* Stack 2 - slide 2 */} + + +
+ + How can we live more meaningful lives? + + +
+ + Thanks to the Civic, Liberal, and Global Education (COLLEGE) core curriculum, + answering that question is how students start their time at Stanford. The course Why College? + Your Education and the Good Life introduces first-year students to the idea of liberal + education, explains its goals and history. + + + Led by Dan Edelstein, director of Stanford Introductory Studies and the William H. + Bonsall Professor in French in the School of Humanities and Sciences. + +
+
+ + Three different themes help students think about their core values, + engage with one another productively—even over contentious topics—and leave + Stanford with the skills and knowledge to understand current challenges in a global context. + + + Through meaningful discourse, respectful debate, and collaboration, + we prepare students to become better citizens in their communities and leaders in the world. + +
+
+ + + And it is the bridge connecting Jane and Leland Stanford’s conviction that education should be + a vehicle to “correct inequalities “with our hope that Stanford graduates + will work to shape a world that needs less correcting. + + + A comprehensive, need-based financial aid program makes it possible for all admitted students + to thrive, from the moment they arrive on the Farm to their last, wacky, step off campus. + + + + Financial aid is a bridge that connects talented and ambitious students with vibrant, + dynamic, and transformative educational opportunities, ensuring that Stanford is not an + island accessible only to those fortunate enough to be financially secure. + +
+ +
+ + handleButtonClick(false)} + icon="close" + variant="brochurePoppy" + color="black" + className="rs-mt-3 absolute bottom-100 right-150" + > + Close + + +
+ +
+ More sections + {/* Chapter 2 */} + + More + + + Our purpose changes the way we view the world. + And the way we shape it. + + + + ); +}; diff --git a/components/StoryPoC/ProgressStory.tsx b/components/StoryPoC/ProgressStory.tsx index 5ff79350..ef4bc96b 100644 --- a/components/StoryPoC/ProgressStory.tsx +++ b/components/StoryPoC/ProgressStory.tsx @@ -1,5 +1,3 @@ -import { useRef } from 'react'; -import { useScroll, m, useTransform } from 'framer-motion'; import { AnimateInView } from '../Animate'; import { AnimatedText } from '../AnimatedText/AnimatedText'; import { Container } from '../Container'; diff --git a/components/StoryPoC/VideoScrollStory.tsx b/components/StoryPoC/VideoScrollStory.tsx index 9ab536a4..8b1f362a 100644 --- a/components/StoryPoC/VideoScrollStory.tsx +++ b/components/StoryPoC/VideoScrollStory.tsx @@ -1,15 +1,10 @@ -'use client'; import { useRef } from 'react'; import { useScroll, m, useTransform } from 'framer-motion'; -import { scroll } from 'framer-motion/dom'; import { AnimateInView } from '../Animate'; import { Container } from '../Container'; -import { Grid } from '../Grid'; import { Heading, Paragraph, Text } from '../Typography'; -import { getProcessedImage } from '@/utilities/getProcessedImage'; import { getMaskedAsset } from '@/utilities/getMaskedAsset'; import { colorNameToHex } from '@/utilities/colorPalettePlugin'; -import { Paragraphs } from '../Temporary/Paragraphs'; export const VideoScrollStory = () => { const contentRef = useRef(null); diff --git a/components/Storyblok/SbStory.tsx b/components/Storyblok/SbStory.tsx index 96c68f02..97bf3bbb 100644 --- a/components/Storyblok/SbStory.tsx +++ b/components/Storyblok/SbStory.tsx @@ -10,6 +10,7 @@ import { MulticolumnStory } from '../StoryPoC/MulticolumnStory'; import { ChatbotStory } from '../StoryPoC/ChatbotStory'; import { VideoScrollStory } from '../StoryPoC/VideoScrollStory'; import { Bookshelf } from '../Bookshelf/Bookshelf'; +import { BrochureStory } from '../StoryPoC/BrochureStory'; import { getNumBloks } from '@/utilities/getNumBloks'; import { getProcessedImage } from '@/utilities/getProcessedImage'; @@ -49,7 +50,7 @@ export const SbStory = ({
- {!(title?.includes('Whereas') || title?.includes('Progress') || title?.includes('Video')) && ( + {!(title?.includes('Whereas') || title?.includes('Progress') || title?.includes('Video') || title?.includes('Solve')) && ( <> )} + {title?.includes('Solve') && ( + + )} {title?.includes('Progress') && ( )} diff --git a/components/Typography/Text.tsx b/components/Typography/Text.tsx index 5723893e..ef627f57 100644 --- a/components/Typography/Text.tsx +++ b/components/Typography/Text.tsx @@ -70,6 +70,7 @@ export const Text = ({ ) } > + {children} {icon && ( )} - {children} ); }; diff --git a/components/Typography/typography.styles.ts b/components/Typography/typography.styles.ts index 4bd1a6da..c8d1c6ba 100644 --- a/components/Typography/typography.styles.ts +++ b/components/Typography/typography.styles.ts @@ -80,4 +80,4 @@ export const textVariants = { overview: 'overview', }; -export const iconStyle = 'inline-block shrink-0 w-[1.2em] mr-04em'; +export const iconStyle = 'inline-block shrink-0 w-09em ml-03em -mt-01em'; From e6b40ac8f5dd5e22183bc3a7a7b7b4e99d6ac175 Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Thu, 14 Sep 2023 13:45:20 -0700 Subject: [PATCH 03/18] GIVCAMP-194 | Low budget data viz poc (#119) * Low budget barchart animation * touch up * Just some clean up --- components/ScrollyTelling/ScrollyDataViz.tsx | 79 ++++++++++++++++++++ components/Storyblok/SbStory.tsx | 2 + 2 files changed, 81 insertions(+) create mode 100644 components/ScrollyTelling/ScrollyDataViz.tsx diff --git a/components/ScrollyTelling/ScrollyDataViz.tsx b/components/ScrollyTelling/ScrollyDataViz.tsx new file mode 100644 index 00000000..fa0e116a --- /dev/null +++ b/components/ScrollyTelling/ScrollyDataViz.tsx @@ -0,0 +1,79 @@ +import { useRef } from 'react'; +import { useInView } from 'framer-motion'; +import { cnb } from 'cnbuilder'; +import { Container } from '../Container'; +import { FlexBox } from '../FlexBox'; +import { Grid } from '../Grid'; +import { Heading, Text } from '../Typography'; +import { Paragraphs } from '../Temporary/Paragraphs'; + +export const ScrollyDataViz = () => { + // Chapter 4 + const section1Ref = useRef(null); + const section2Ref = useRef(null); + const section1InView = useInView(section1Ref); + const section2InView = useInView(section2Ref); + const section2AtTop = !section1InView && section2InView; + + return ( + + +
+ +
+ + Chapter 4 + +
+
+ + Number of UFO sightings in {section2AtTop ? '2023' : '2022'} + + + {/* Bars */} +
+ {section2AtTop ? '80' : '40'} +
+
+ {section2AtTop ? '20' : '100'} +
+
+ {section2AtTop ? '100' : '60'} +
+
+ {section2AtTop ? '70' : '30'} +
+
+ {section2AtTop ? '30' : '70'} +
+
+ {section2AtTop ? '60' : '20'} +
+ + + {/* numbers */} + USA + Japan + Ethiopia + Canada + France + Australia + +
+ +
+
+
+ Heading 1 + +
+
+ Heading 2 + + +
+
+ + + ); +}; diff --git a/components/Storyblok/SbStory.tsx b/components/Storyblok/SbStory.tsx index 97bf3bbb..30c84cb8 100644 --- a/components/Storyblok/SbStory.tsx +++ b/components/Storyblok/SbStory.tsx @@ -5,6 +5,7 @@ import { Masthead } from '@/components/Masthead'; import { StoryHero, type StoryHeroProps } from '@/components/Hero'; import { ScrollyTelling } from '@/components/ScrollyTelling/ScrollyTelling'; import { ScrollyFullwidth } from '../ScrollyTelling/ScrollyFullwidth'; +import { ScrollyDataViz } from '../ScrollyTelling/ScrollyDataViz'; import { ProgressStory } from '../StoryPoC/ProgressStory'; import { MulticolumnStory } from '../StoryPoC/MulticolumnStory'; import { ChatbotStory } from '../StoryPoC/ChatbotStory'; @@ -102,6 +103,7 @@ export const SbStory = ({ <> + )} {getNumBloks(blok.ankle) > 0 && ( From 51bd8e0503c39e5d3dbb1d2a86b1274102c74855 Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Tue, 19 Sep 2023 13:52:22 -0700 Subject: [PATCH 04/18] GIVCAMP-197 | Changemaker card and section (#120) * Changemaker card and section * Flip it * Animation and back content * Comment out sections on homepage * animate in view and other finetuning * Fix issue with card front text opacity not changing when clicked/tabbed to (focused) --- .../ChangemakerCard/ChangemakerCard.styles.ts | 7 ++ .../ChangemakerCard/ChangemakerCard.tsx | 93 +++++++++++++++ components/ChangemakerCard/index.ts | 1 + components/HeroIcon/HeroIcon.styles.tsx | 2 + components/Homepage/Changemaker.tsx | 111 ++++++++++++++++++ components/ImageOverlay.tsx | 1 + .../PortraitCard/PortraitCard.styles.ts | 7 +- components/PortraitCard/PortraitCard.tsx | 2 - components/StoryPoC/BrochureStory.tsx | 1 - components/Storyblok/SbHomepage.tsx | 30 ++--- 10 files changed, 233 insertions(+), 22 deletions(-) create mode 100644 components/ChangemakerCard/ChangemakerCard.styles.ts create mode 100644 components/ChangemakerCard/ChangemakerCard.tsx create mode 100644 components/ChangemakerCard/index.ts create mode 100644 components/Homepage/Changemaker.tsx diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts new file mode 100644 index 00000000..53478c4f --- /dev/null +++ b/components/ChangemakerCard/ChangemakerCard.styles.ts @@ -0,0 +1,7 @@ +export const root = 'group relative [perspective:100rem] w-full max-w-[35rem] mx-auto break-words transition-transform focus-visible:outline-none'; +export const cardInner = 'relative w-full aspect-w-1 aspect-h-2 group-hocus:[transform:rotateY(180deg)] [transform-style:preserve-3d] transform-gpu duration-1000'; +export const cardFront = 'absolute w-full h-full top-0 left-0'; +export const cardBack = 'backface-hidden absolute w-full h-full top-0 left-0 rs-px-2 rs-py-3 bg-cardinal-red/80 [transform:rotateY(180deg)]'; +export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2'; +export const heading = 'mb-02em group-hocus:opacity-50 transition-opacity delay-100'; +export const content = 'group-hocus:opacity-50 transition-opacity delay-100 rs-pt-3 rs-px-2 rs-pb-9 absolute w-full bottom-0 left-0'; diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx new file mode 100644 index 00000000..e9b08265 --- /dev/null +++ b/components/ChangemakerCard/ChangemakerCard.tsx @@ -0,0 +1,93 @@ +import { cnb } from 'cnbuilder'; +import {AnimateInView, type AnimationType } from '../Animate'; +import { CtaButton } from '../Cta/CtaButton'; +import { + Heading, type HeadingType, Paragraph, Text, +} from '../Typography'; +import { FlexBox } from '../FlexBox'; +import { HeroIcon } from '../HeroIcon'; +import { ImageOverlay } from '../ImageOverlay'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import * as styles from './ChangemakerCard.styles'; + + +export type ChangemakerCardProps = React.HTMLAttributes & { + heading?: string; + headingLevel?: HeadingType; + body?: string; + imageSrc?: string; + imageFocus?: string; + ctaLabel?: string; + ctaSrText?: string; + animation?: AnimationType; + delay?: number; + // children serves as what's on the back of the card + children?: React.ReactNode; +}; + +export const ChangemakerCard = ({ + heading, + headingLevel = 'h3', + body, + imageSrc, + imageFocus, + ctaLabel, + ctaSrText, + animation = 'none', + delay, + children, + className, + ...props +}: ChangemakerCardProps) => ( + +
+
+ {/* Front of the card */} +
+ {imageSrc && ( +
+ +
+ )} +
+ {heading && ( + + {heading} + + )} + {body && ( + {body} + )} + + + + {ctaLabel} + + +
+
+ {/* Back of the card */} + + {children} + +
+
+ +); diff --git a/components/ChangemakerCard/index.ts b/components/ChangemakerCard/index.ts new file mode 100644 index 00000000..733718dc --- /dev/null +++ b/components/ChangemakerCard/index.ts @@ -0,0 +1 @@ +export * from './ChangemakerCard'; diff --git a/components/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx index a38d7998..7b2b10fa 100644 --- a/components/HeroIcon/HeroIcon.styles.tsx +++ b/components/HeroIcon/HeroIcon.styles.tsx @@ -8,6 +8,7 @@ import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, + CursorArrowRaysIcon, EnvelopeIcon, LinkIcon, MinusIcon, @@ -32,6 +33,7 @@ export const iconMap = { 'triangle-down': PlayIcon, 'triangle-right': PlayIcon, 'triangle-up': PlayIcon, + cursor: CursorArrowRaysIcon, close: XMarkIcon, email: EnvelopeIcon, external: ArrowUpRightIcon, diff --git a/components/Homepage/Changemaker.tsx b/components/Homepage/Changemaker.tsx new file mode 100644 index 00000000..40ce4319 --- /dev/null +++ b/components/Homepage/Changemaker.tsx @@ -0,0 +1,111 @@ +'use client'; + +import { AnimateInView } from '../Animate'; +import { Container } from '../Container'; +import { Grid } from '../Grid'; +import { Heading, Paragraph, Text } from '../Typography'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import { ChangemakerCard } from '@/components/ChangemakerCard'; + +export const Changemaker = () => { + const bgImage = getProcessedImage('https://a-us.storyblok.com/f/1005200/3089x2048/aee2ea28c6/21664-18-0021_cmyk.jpg', '2000x0'); + + return ( + + + + + + Makers. Doers. + + + + + Boundary Pushers. + + + + + Risk-takers. + + + + + + The Stanford community overflows with curious people unafraid to try, + change, and try again.
+ Meet some of them. + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. Morbi varius ornare arcu, + quis scelerisque urna ultricies sed. Nunc eu est leo. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. Morbi varius ornare arcu, + quis scelerisque urna ultricies sed. Nunc eu est leo. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. Morbi varius ornare arcu, + quis scelerisque urna ultricies sed. Nunc eu est leo. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam tempor sed tellus ac vulputate. Morbi varius ornare arcu, + quis scelerisque urna ultricies sed. Nunc eu est leo. + + + + + + ); +}; diff --git a/components/ImageOverlay.tsx b/components/ImageOverlay.tsx index f3f8981d..01d4b019 100644 --- a/components/ImageOverlay.tsx +++ b/components/ImageOverlay.tsx @@ -8,6 +8,7 @@ export const overlays = { 'black-70': 'bg-black-true/70', 'black-80': 'bg-black-true/80', 'black-gradient': 'bg-gradient-to-b from-transparent via-black-true/20 to-black-true/50', + 'black-gradient-dark': 'bg-gradient-to-b from-transparent via-black-true/30 to-black-true/80', 'black-top-bottom': 'bg-gradient-to-b from-gc-black via-transparent via-40% to-gc-black', 'black-top-sm': 'bg-gradient-to-b from-gc-black via-periwinkle via-20% to-transparent', }; diff --git a/components/PortraitCard/PortraitCard.styles.ts b/components/PortraitCard/PortraitCard.styles.ts index b3bdcade..4f738dce 100644 --- a/components/PortraitCard/PortraitCard.styles.ts +++ b/components/PortraitCard/PortraitCard.styles.ts @@ -1,4 +1,4 @@ -export const root = 'relative overflow-hidden max-w-400 mx-auto md:max-w-none'; +export const root = 'relative overflow-hidden max-w-400 mx-auto md:max-w-none break-words'; export const curves = { tl: 'rounded-tl-[30vw] md:rounded-tl-[15vw] xl:rounded-tl-[20rem]', @@ -7,7 +7,4 @@ export const curves = { export type CurvesType = keyof typeof curves; export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2'; -export const content = 'rs-pt-3 rs-px-2 rs-pb-4 bg-black-true/50 absolute bottom-0 left-0'; -export const heading = ''; -export const body = ''; -export const ctaLink = ''; +export const content = 'rs-pt-3 rs-px-2 rs-pb-4 bg-black-true/50 w-full absolute bottom-0 left-0'; diff --git a/components/PortraitCard/PortraitCard.tsx b/components/PortraitCard/PortraitCard.tsx index 64ede466..30f63e56 100644 --- a/components/PortraitCard/PortraitCard.tsx +++ b/components/PortraitCard/PortraitCard.tsx @@ -62,7 +62,6 @@ export const PortraitCard = ({ {heading} @@ -91,7 +90,6 @@ export const PortraitCard = ({ variant="link" icon="arrow-right" srText={ctaSrText} - className={styles.ctaLink} > {ctaLabel} diff --git a/components/StoryPoC/BrochureStory.tsx b/components/StoryPoC/BrochureStory.tsx index 68c9570d..7adfa1e2 100644 --- a/components/StoryPoC/BrochureStory.tsx +++ b/components/StoryPoC/BrochureStory.tsx @@ -7,7 +7,6 @@ import { Container } from '../Container'; import { Grid } from '../Grid'; import { Heading, Paragraph, Text } from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; - import { CtaButton } from '../Cta'; import { BrochureChapter2 } from './BrochureChapter2'; import { AnimateInView } from '../Animate'; diff --git a/components/Storyblok/SbHomepage.tsx b/components/Storyblok/SbHomepage.tsx index 45b326d8..2381c83f 100644 --- a/components/Storyblok/SbHomepage.tsx +++ b/components/Storyblok/SbHomepage.tsx @@ -8,6 +8,7 @@ import { Masthead } from '../Masthead'; import { ThemeSection } from '../Homepage/ThemeSection'; import { FindPurposeSection } from '../Homepage/FindPurposeSection'; import { ProgressStorySection } from '../Homepage/ProgressStorySection'; +import { Changemaker } from '../Homepage/Changemaker'; import { BlockBanner } from '../Homepage/BlockBanner'; import { BelowBlockBanner } from '../Homepage/BelowBlockBanner'; import { getNumBloks } from '@/utilities/getNumBloks'; @@ -63,25 +64,25 @@ export const SbHomepagePage = ({
{title || 'Homepage'} - - + {/* */} + {/* + /> */} - - + */} + - {getNumBloks(ankle) > 0 && ( + {/* {getNumBloks(ankle) > 0 && ( - )} + )} */}
From 343215144764b299c0ce27562dd58757cc624ba1 Mon Sep 17 00:00:00 2001 From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com> Date: Wed, 20 Sep 2023 23:45:58 -0700 Subject: [PATCH 05/18] GIVCAMP-198 | homepage Ideal fellow section with parallax explore (#121) * Ideal fellow parallax * Ideal fellow section * maybe this * need to shift image up a bit to avoid gap due to parallax motion * Try backdrop blur that Kerri requested * tiny tweak * Add link and hocus styles --- components/Homepage/Changemaker.tsx | 2 -- components/Homepage/IdealFellow.tsx | 51 +++++++++++++++++++++++++++++ components/Storyblok/SbHomepage.tsx | 2 ++ 3 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 components/Homepage/IdealFellow.tsx diff --git a/components/Homepage/Changemaker.tsx b/components/Homepage/Changemaker.tsx index 40ce4319..232a8a41 100644 --- a/components/Homepage/Changemaker.tsx +++ b/components/Homepage/Changemaker.tsx @@ -1,5 +1,3 @@ -'use client'; - import { AnimateInView } from '../Animate'; import { Container } from '../Container'; import { Grid } from '../Grid'; diff --git a/components/Homepage/IdealFellow.tsx b/components/Homepage/IdealFellow.tsx new file mode 100644 index 00000000..d3c64c8e --- /dev/null +++ b/components/Homepage/IdealFellow.tsx @@ -0,0 +1,51 @@ +import Link from 'next/link'; +import { AnimateInView } from '../Animate'; +import { Container } from '../Container'; +import { Heading, Text } from '../Typography'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import { Parallax } from '../Parallax/Parallax'; +import { HeroIcon } from '../HeroIcon'; +import { Hero } from '../Hero'; + +export const IdealFellow = () => { + const bgImage = getProcessedImage('https://a-us.storyblok.com/f/1005200/2560x1707/c4fba877e8/firefly-20230919145441.png', '2000x1600'); + return ( + + +
+ +
+ +
+ + Shape + what’s + next + +
+ Preparing citizens + + + Untangling the web of racial inequality + + + + + by Sarah Jane Staats + + + May 5, 2023 + + + Photo: 2022-23 IDEAL Fellow Hector Callejas + +
+ + ); +}; diff --git a/components/Storyblok/SbHomepage.tsx b/components/Storyblok/SbHomepage.tsx index 2381c83f..df9a35ce 100644 --- a/components/Storyblok/SbHomepage.tsx +++ b/components/Storyblok/SbHomepage.tsx @@ -9,6 +9,7 @@ import { ThemeSection } from '../Homepage/ThemeSection'; import { FindPurposeSection } from '../Homepage/FindPurposeSection'; import { ProgressStorySection } from '../Homepage/ProgressStorySection'; import { Changemaker } from '../Homepage/Changemaker'; +import { IdealFellow } from '../Homepage/IdealFellow'; import { BlockBanner } from '../Homepage/BlockBanner'; import { BelowBlockBanner } from '../Homepage/BelowBlockBanner'; import { getNumBloks } from '@/utilities/getNumBloks'; @@ -79,6 +80,7 @@ export const SbHomepagePage = ({ themeCardAcceleration={themeCardAcceleration} themeCardPlanet={themeCardPlanet} /> */} + From 15c35aaa504daa9d1b7bb13bad5742dd1200b8e4 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 03:15:11 -0700 Subject: [PATCH 06/18] New homepage hero --- components/Homepage/HomepageSplitHero.tsx | 78 +++++++++++++++++++++++ components/Storyblok/SbHomepage.tsx | 24 +------ 2 files changed, 81 insertions(+), 21 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..6848ebaa --- /dev/null +++ b/components/Homepage/HomepageSplitHero.tsx @@ -0,0 +1,78 @@ +'use client'; + +import { useRef } from 'react'; +import { useScroll, useSpring, m } from 'framer-motion'; +import { CtaLink } from '../Cta'; +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'); + const introRef = useRef(null); + + return ( + +
+
+
+ +
+ +
+ + 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 && ( - - )} */}
); - From e8413a8ab086fe2158a4b65eb48a0e0c5327b71c Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 03:20:17 -0700 Subject: [PATCH 07/18] sr only H1 --- components/Homepage/HomepageSplitHero.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index 6848ebaa..6f804080 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -20,6 +20,7 @@ export const HomepageSplitHero = () => { className="relative pb-[25vw] bg-black-true pt-[17vw] bg-no-repeat bg-cover [background-position-y:100px]" style={{ backgroundImage: `url('${bg}')` }} > + Homepage
From 42d3b51772b7c09cf13636ed0aa287288f05fc65 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 14:23:08 -0700 Subject: [PATCH 08/18] make font size fluid; positioning of hero elements --- components/Homepage/HomepageSplitHero.tsx | 93 ++++++++++++-------- components/Typography/typography.styles.ts | 7 +- tailwind/plugins/components/gc-typography.js | 3 + 3 files changed, 67 insertions(+), 36 deletions(-) diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index 6f804080..ef142820 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -2,7 +2,6 @@ import { useRef } from 'react'; import { useScroll, useSpring, m } from 'framer-motion'; -import { CtaLink } from '../Cta'; import { Container } from '../Container'; import { Grid } from '../Grid'; import { Heading, Paragraph, Text } from '../Typography'; @@ -17,60 +16,84 @@ export const HomepageSplitHero = () => { return (
Homepage
-
- -
- -
- +
+
+ +
+ + {/*
+ + How will we + + + come together + +
*/} +
+
+ + {/*
+ + all in service of + + + Tomorrow? + +
*/} +
+ +
+
+ +
+ 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. - +
+ + 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/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); From 389404e99d04ce7b9d79cbbee2730f7494ba1619 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 15:03:43 -0700 Subject: [PATCH 09/18] Play with hero animation --- components/Homepage/HomepageSplitHero.tsx | 68 +++++++++++++---------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index ef142820..44905367 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -16,66 +16,78 @@ export const HomepageSplitHero = () => { return (
Homepage
- -
+ + + - {/*
- - How will we - - - come together - -
*/} -
-
+ + + - {/*
- - all in service of - - - Tomorrow? - -
*/} -
+
- -
+ + How will we come together -
-
+ + all in service of Tomorrow? -
+
@@ -83,7 +95,7 @@ export const HomepageSplitHero = () => {
- + We’re all in this together.
From be0f92ec01a88b292319e82fcd376d282066537f Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 15:42:45 -0700 Subject: [PATCH 10/18] Clean up --- components/Homepage/HomepageSplitHero.tsx | 37 +++++++++++------------ 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index 44905367..7e57c43b 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -1,7 +1,5 @@ -'use client'; - -import { useRef } from 'react'; -import { useScroll, useSpring, m } from 'framer-motion'; +import { m } from 'framer-motion'; +import { AnimatedText } from '../AnimatedText/AnimatedText'; import { Container } from '../Container'; import { Grid } from '../Grid'; import { Heading, Paragraph, Text } from '../Typography'; @@ -11,7 +9,6 @@ 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'); - const introRef = useRef(null); return ( @@ -93,22 +90,22 @@ export const HomepageSplitHero = () => {
- -
- - 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. - -
-
+
+ + + 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. + - +
+ ); }; From e795c9f17459fe341990dfb7b9606c58321e2b89 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 25 Sep 2023 16:04:46 -0700 Subject: [PATCH 11/18] More finetuning responsive --- components/Homepage/HomepageSplitHero.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index 7e57c43b..b870b62c 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -1,5 +1,4 @@ import { m } from 'framer-motion'; -import { AnimatedText } from '../AnimatedText/AnimatedText'; import { Container } from '../Container'; import { Grid } from '../Grid'; import { Heading, Paragraph, Text } from '../Typography'; @@ -13,14 +12,14 @@ export const HomepageSplitHero = () => { return (
Homepage
- + { animation="slideInFromLeft" delay={0.6} duration={0.3} - className="relative -top-[6.5vw] right-0 justify-self-end" + className="relative -top-[10vw] xl:-top-[8vw] 4xl:-top-[16rem] right-0 justify-self-end" > How will we 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 12/18] 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); From 7ab1cde9db028b3e52195eba780e09188e501284 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 26 Sep 2023 00:23:26 -0700 Subject: [PATCH 13/18] Create Blurry Poster component --- .../BlurryPoster/BlurryPoster.styles.tsx | 1 + components/BlurryPoster/BlurryPoster.tsx | 41 +++++++++++++++++++ components/Homepage/HomepageSplitHero.tsx | 2 +- 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 components/BlurryPoster/BlurryPoster.styles.tsx create mode 100644 components/BlurryPoster/BlurryPoster.tsx diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx new file mode 100644 index 00000000..45179054 --- /dev/null +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -0,0 +1 @@ +export const root = ''; diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx new file mode 100644 index 00000000..3dc76993 --- /dev/null +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -0,0 +1,41 @@ +import { HTMLAttributes } from 'react'; +import { Container } from '../Container'; +import { FlexBox } from '../FlexBox'; +import { Grid } from '../Grid'; +import { type HeadingType } from '../Typography'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import * as styles from './BlurryPoster.styles'; + +type BlurryPosterProps = HTMLAttributes & { + bgImageSrc?: string; + bgImageFocus?: string; + headingLevel?: HeadingType; + heading?: string; + body?: string; + imageSrc?: string; + imageFocus?: string; + cta?: React.ReactNode; +}; + +export const BlurryPoster = ({ + bgImageSrc, + bgImageFocus, + heading, + headingLevel = 'h2', + body, + imageSrc, + imageFocus, + cta, + className, + ...props +}: BlurryPosterProps) => { + const bgImageStyle = bgImageSrc ? { backgroundImage: `url('${getProcessedImage(bgImageSrc, '1000x1000', bgImageFocus)}')` } : undefined; + + return ( + + + + + + ); +}; diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index b870b62c..3a92852b 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -12,7 +12,7 @@ export const HomepageSplitHero = () => { return (
Homepage From 72ce66953d26a0258cf4d719af4f2677164b4bea Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 26 Sep 2023 15:48:56 -0700 Subject: [PATCH 14/18] BlurryPoster and new MVP Homepage components; better typing for StoryblokData in some SB components --- .../BlurryPoster/BlurryPoster.styles.tsx | 3 +- components/BlurryPoster/BlurryPoster.tsx | 41 +++++++++++++-- components/BlurryPoster/index.ts | 1 + components/Homepage/HomepageSplitHero.tsx | 1 - components/RichText.tsx | 7 ++- components/Storyblok/SbBanner.tsx | 4 +- components/Storyblok/SbBlurryPoster.tsx | 51 +++++++++++++++++++ components/Storyblok/SbGrid.tsx | 4 +- components/Storyblok/SbHomepage.tsx | 6 +-- components/Storyblok/SbHomepageMvp.tsx | 46 +++++++++++++++++ components/StoryblokProvider.tsx | 10 ++-- 11 files changed, 157 insertions(+), 17 deletions(-) create mode 100644 components/BlurryPoster/index.ts create mode 100644 components/Storyblok/SbBlurryPoster.tsx create mode 100644 components/Storyblok/SbHomepageMvp.tsx diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx index 45179054..36cf7b52 100644 --- a/components/BlurryPoster/BlurryPoster.styles.tsx +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -1 +1,2 @@ -export const root = ''; +export const root = 'h-[140rem] bg-no-repeat bg-cover bg-center'; +export const blurWrapper = 'w-full h-full backdrop-blur-md rs-py-8'; diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx index 3dc76993..f313c2b2 100644 --- a/components/BlurryPoster/BlurryPoster.tsx +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react'; import { Container } from '../Container'; import { FlexBox } from '../FlexBox'; import { Grid } from '../Grid'; -import { type HeadingType } from '../Typography'; +import { Heading, Paragraph, type HeadingType } from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './BlurryPoster.styles'; @@ -11,7 +11,11 @@ type BlurryPosterProps = HTMLAttributes & { bgImageFocus?: string; headingLevel?: HeadingType; heading?: string; + isSmallHeading?: boolean; + customHeading?: React.ReactNode; body?: string; + byline?: string; + publishedDate?: string; imageSrc?: string; imageFocus?: string; cta?: React.ReactNode; @@ -22,20 +26,49 @@ export const BlurryPoster = ({ bgImageFocus, heading, headingLevel = 'h2', + isSmallHeading, + customHeading, body, + byline, + publishedDate, imageSrc, imageFocus, cta, className, ...props }: BlurryPosterProps) => { - const bgImageStyle = bgImageSrc ? { backgroundImage: `url('${getProcessedImage(bgImageSrc, '1000x1000', bgImageFocus)}')` } : undefined; + const bgImageStyle = bgImageSrc ? { backgroundImage: `url('${getProcessedImage(bgImageSrc, '1800x1200', bgImageFocus)}')` } : undefined; return ( - +
+ +
+ {heading && ( + + {heading} + + )} + {customHeading && ( +
+ {customHeading} +
+ )} + {body && ( + {body} + )} +
+
- +
+ +
); }; diff --git a/components/BlurryPoster/index.ts b/components/BlurryPoster/index.ts new file mode 100644 index 00000000..184693da --- /dev/null +++ b/components/BlurryPoster/index.ts @@ -0,0 +1 @@ +export * from './BlurryPoster'; diff --git a/components/Homepage/HomepageSplitHero.tsx b/components/Homepage/HomepageSplitHero.tsx index 3a92852b..00c82bc9 100644 --- a/components/Homepage/HomepageSplitHero.tsx +++ b/components/Homepage/HomepageSplitHero.tsx @@ -15,7 +15,6 @@ export const HomepageSplitHero = () => { className="relative pb-[27vw] bg-black-true pt-[24vw] md:pt-[22vw] xl:pt-[18vw] 2xl:pt-[16vw] 4xl:pt-[34rem] bg-no-repeat bg-cover [background-position-y:160px]" style={{ backgroundImage: `url('${bg}')` }} > - Homepage
diff --git a/components/RichText.tsx b/components/RichText.tsx index f7e2cc72..c6de3611 100644 --- a/components/RichText.tsx +++ b/components/RichText.tsx @@ -11,6 +11,11 @@ import { type TextAlignType, } from './Typography'; +/** + * TW classes used in Richtext WYSIWYG to pre-generate + * -top-04em (used in BlurryPoster) + */ + export type RichTextProps = { wysiwyg: StoryblokRichtext; isLightText?: boolean; @@ -71,7 +76,7 @@ export const RichText = ({ const headingSize = 7 - level; return ( - + {children} ); diff --git a/components/Storyblok/SbBanner.tsx b/components/Storyblok/SbBanner.tsx index e9c8a981..b0a5c40e 100644 --- a/components/Storyblok/SbBanner.tsx +++ b/components/Storyblok/SbBanner.tsx @@ -1,4 +1,4 @@ -import { storyblokEditable } from '@storyblok/react/rsc'; +import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; import { Banner } from '../Banner'; import { CreateBloks } from '../CreateBloks'; @@ -13,7 +13,7 @@ type SbBannerProps = { heading?: string; isSmallHeading?: boolean; body: StoryblokRichtext; - cta?: any[]; + cta?: SbBlokData[]; image?: SbImageType; bgColor?: BgTextColorPairBlackWhiteType; }; diff --git a/components/Storyblok/SbBlurryPoster.tsx b/components/Storyblok/SbBlurryPoster.tsx new file mode 100644 index 00000000..c643801b --- /dev/null +++ b/components/Storyblok/SbBlurryPoster.tsx @@ -0,0 +1,51 @@ +import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; +import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; +import { BlurryPoster } from '../BlurryPoster'; +import { CreateBloks } from '../CreateBloks'; +import { RichText } from '../RichText'; +import { type HeadingType } from '../Typography'; +import { type SbImageType } from './Storyblok.types'; +import { hasRichText } from '@/utilities/hasRichText'; + +type SbBlurryPosterProps = { + blok: { + _uid: string; + heading?: string; + headingLevel?: HeadingType; + isSmallHeading?: boolean; + body: string; + cta?: SbBlokData[]; + image?: SbImageType; + bgImage?: SbImageType; + }, +}; + +export const SbBlurryPoster = ({ + blok: { + heading, + headingLevel, + isSmallHeading, + body, + cta, + image: { filename, focus } = {}, + bgImage: { filename: bgImageSrc, focus: bgImageFocus } = {}, + }, + blok, +}: SbBlurryPosterProps) => { + const Cta = ; + + return ( + + ); +}; diff --git a/components/Storyblok/SbGrid.tsx b/components/Storyblok/SbGrid.tsx index 558c4628..82fdd318 100644 --- a/components/Storyblok/SbGrid.tsx +++ b/components/Storyblok/SbGrid.tsx @@ -1,4 +1,4 @@ -import { storyblokEditable } from '@storyblok/react/rsc'; +import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; import { Grid, type GridGapType, type GridNumColsType } from '../Grid'; import { CreateBloks } from '../CreateBloks'; @@ -6,7 +6,7 @@ type SbGridProps = { blok: { _uid: string; gap?: GridGapType; - items: any[]; + items: SbBlokData[]; /** * Currently we're only providing 1-4 columns in Storyblok even though GridNumColsType also supports 6 and 12 * We could add support for 6 and 12 in the future if needed diff --git a/components/Storyblok/SbHomepage.tsx b/components/Storyblok/SbHomepage.tsx index 555137e3..5f06cd7f 100644 --- a/components/Storyblok/SbHomepage.tsx +++ b/components/Storyblok/SbHomepage.tsx @@ -17,7 +17,7 @@ import { getNumBloks } from '@/utilities/getNumBloks'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import { type SbImageType } from './Storyblok.types'; -type SbHomepagePageProps = { +type SbHomepageProps = { blok: { _uid: string; title?: string; @@ -39,7 +39,7 @@ type SbHomepagePageProps = { }; }; -export const SbHomepagePage = ({ +export const SbHomepage = ({ blok: { title, intro, @@ -59,7 +59,7 @@ export const SbHomepagePage = ({ ankle, }, blok, -}: SbHomepagePageProps) => ( +}: SbHomepageProps) => (
diff --git a/components/Storyblok/SbHomepageMvp.tsx b/components/Storyblok/SbHomepageMvp.tsx new file mode 100644 index 00000000..5d1472f5 --- /dev/null +++ b/components/Storyblok/SbHomepageMvp.tsx @@ -0,0 +1,46 @@ +import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; +import { CreateBloks } from '../CreateBloks'; +import { Heading } from '../Typography'; +import { HomepageSplitHero } from '../Homepage/HomepageSplitHero'; +import { Masthead } from '../Masthead'; +import { Changemaker } from '../Homepage/Changemaker'; +import { IdealFellow } from '../Homepage/IdealFellow'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import { type SbImageType } from './Storyblok.types'; + +type SbHomepageMvpProps = { + blok: { + _uid: string; + title?: string; + intro: string; + featuredStories?: SbBlokData[]; + content?: SbBlokData[]; + ankle?: SbBlokData[]; + }; +}; + +export const SbHomepageMvp = ({ + blok: { + title, + intro, + featuredStories, + content, + ankle, + }, + blok, +}: SbHomepageMvpProps) => ( +
+ +
+
+ {title || 'Homepage'} + + + + + + +
+
+
+); diff --git a/components/StoryblokProvider.tsx b/components/StoryblokProvider.tsx index 6f0447f3..81d93a40 100644 --- a/components/StoryblokProvider.tsx +++ b/components/StoryblokProvider.tsx @@ -1,14 +1,16 @@ 'use client'; import { storyblokInit, apiPlugin } from '@storyblok/react/rsc'; -import { LazyMotion, domAnimation, domMax } from 'framer-motion'; +import { LazyMotion, domMax } from 'framer-motion'; import { SbBanner } from './Storyblok/SbBanner'; import { SbBasicPage } from './Storyblok/SbBasicPage'; +import { SbBlurryPoster } from './Storyblok/SbBlurryPoster'; import { SbBracketCard } from './Storyblok/SbBracketCard'; import { SbCta } from './Storyblok/SbCta'; import { SbGrid } from './Storyblok/SbGrid'; import { SbGridAlternating } from './Storyblok/SbGridAlternating'; -import { SbHomepagePage } from './Storyblok/SbHomepage'; +import { SbHomepage } from './Storyblok/SbHomepage'; +import { SbHomepageMvp } from './Storyblok/SbHomepageMvp'; import { SbInitiativeCard } from './Storyblok/SbInitiativeCard'; import { SbLogo } from './Storyblok/SbLogo'; import { SbPortraitCard } from './Storyblok/SbPortraitCard'; @@ -24,11 +26,13 @@ import { SbWysiwyg } from './Storyblok/SbWysiwyg'; const components = { sbBanner: SbBanner, sbBasicPage: SbBasicPage, + sbBlurryPoster: SbBlurryPoster, sbBracketCard: SbBracketCard, sbCta: SbCta, sbGrid: SbGrid, sbGridAlternating: SbGridAlternating, - sbHomepage: SbHomepagePage, + sbHomepage: SbHomepage, + sbHomepageMvp: SbHomepageMvp, sbInitiativeCard: SbInitiativeCard, sbLogo: SbLogo, sbPortraitCard: SbPortraitCard, From 79ab80f4f1a54e7ce915b5aa12f4dbd28a2515fc Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 26 Sep 2023 16:44:20 -0700 Subject: [PATCH 15/18] more styles --- .../BlurryPoster/BlurryPoster.styles.tsx | 4 +- components/BlurryPoster/BlurryPoster.tsx | 37 +++++++++++++++---- components/Homepage/IdealFellow.tsx | 2 +- components/Storyblok/SbBlurryPoster.tsx | 6 +++ 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx index 36cf7b52..572e9163 100644 --- a/components/BlurryPoster/BlurryPoster.styles.tsx +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -1,2 +1,2 @@ -export const root = 'h-[140rem] bg-no-repeat bg-cover bg-center'; -export const blurWrapper = 'w-full h-full backdrop-blur-md rs-py-8'; +export const root = 'relative bg-no-repeat bg-cover bg-center'; +export const blurWrapper = 'w-full h-full backdrop-blur-md'; diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx index f313c2b2..02f88284 100644 --- a/components/BlurryPoster/BlurryPoster.tsx +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react'; import { Container } from '../Container'; import { FlexBox } from '../FlexBox'; import { Grid } from '../Grid'; -import { Heading, Paragraph, type HeadingType } from '../Typography'; +import { Heading, Paragraph, Text, type HeadingType } from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './BlurryPoster.styles'; @@ -38,34 +38,55 @@ export const BlurryPoster = ({ ...props }: BlurryPosterProps) => { const bgImageStyle = bgImageSrc ? { backgroundImage: `url('${getProcessedImage(bgImageSrc, '1800x1200', bgImageFocus)}')` } : undefined; + const date = publishedDate && new Date(publishedDate); + const formattedDate = date && date.toLocaleDateString('en-US', { + month: 'long', + day: '2-digit', + year: 'numeric', + }); return ( - +
- -
+ +
{heading && ( {heading} )} {customHeading && ( -
+
{customHeading}
)} {body && ( {body} )} + {byline && ( + {byline} + )} + {date && ( + + )} + {cta && ( +
+ {cta} +
+ )}
- +
diff --git a/components/Homepage/IdealFellow.tsx b/components/Homepage/IdealFellow.tsx index d3c64c8e..77614d9a 100644 --- a/components/Homepage/IdealFellow.tsx +++ b/components/Homepage/IdealFellow.tsx @@ -10,7 +10,7 @@ import { Hero } from '../Hero'; export const IdealFellow = () => { const bgImage = getProcessedImage('https://a-us.storyblok.com/f/1005200/2560x1707/c4fba877e8/firefly-20230919145441.png', '2000x1600'); return ( - +
Date: Tue, 26 Sep 2023 16:48:40 -0700 Subject: [PATCH 16/18] linter and clean up --- components/BlurryPoster/BlurryPoster.tsx | 5 +++-- components/Homepage/IdealFellow.tsx | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx index 02f88284..4dbca230 100644 --- a/components/BlurryPoster/BlurryPoster.tsx +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -1,8 +1,9 @@ import { HTMLAttributes } from 'react'; import { Container } from '../Container'; -import { FlexBox } from '../FlexBox'; import { Grid } from '../Grid'; -import { Heading, Paragraph, Text, type HeadingType } from '../Typography'; +import { + Heading, Paragraph, Text, type HeadingType, +} from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './BlurryPoster.styles'; diff --git a/components/Homepage/IdealFellow.tsx b/components/Homepage/IdealFellow.tsx index 77614d9a..1303874d 100644 --- a/components/Homepage/IdealFellow.tsx +++ b/components/Homepage/IdealFellow.tsx @@ -5,7 +5,6 @@ import { Heading, Text } from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import { Parallax } from '../Parallax/Parallax'; import { HeroIcon } from '../HeroIcon'; -import { Hero } from '../Hero'; export const IdealFellow = () => { const bgImage = getProcessedImage('https://a-us.storyblok.com/f/1005200/2560x1707/c4fba877e8/firefly-20230919145441.png', '2000x1600'); From f09565d40a39ecd4a3018310a9f52cc341f6dd61 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 28 Sep 2023 02:40:44 -0700 Subject: [PATCH 17/18] Image on left option --- components/BlurryPoster/BlurryPoster.styles.tsx | 17 ++++++++++++++++- components/BlurryPoster/BlurryPoster.tsx | 9 ++++++--- components/Storyblok/SbBlurryPoster.tsx | 8 ++++---- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx index 572e9163..e7aa1476 100644 --- a/components/BlurryPoster/BlurryPoster.styles.tsx +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -1,2 +1,17 @@ -export const root = 'relative bg-no-repeat bg-cover bg-center'; +import { cnb } from "cnbuilder"; + +export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden'; export const blurWrapper = 'w-full h-full backdrop-blur-md'; + +export const heading = (imageOnLeft: boolean) => cnb('lg:rs-mt-7 rs-mb-5 lg:w-[140%]', { + 'lg:ml-[-40%]': imageOnLeft, +}); + +export const contentWrapper = (imageOnLeft: boolean) => cnb('z-10', { + 'order-last lg:rs-pl-4': imageOnLeft, + 'order-first lg:rs-pr-2': !imageOnLeft, +}); + +export const imageWrapper = (imageOnLeft: boolean) => cnb('', { + 'order-first': imageOnLeft, +}); diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx index 4dbca230..4c276cf6 100644 --- a/components/BlurryPoster/BlurryPoster.tsx +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -6,10 +6,12 @@ import { } from '../Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './BlurryPoster.styles'; +import { image } from '../Banner'; type BlurryPosterProps = HTMLAttributes & { bgImageSrc?: string; bgImageFocus?: string; + imageOnLeft?: boolean; headingLevel?: HeadingType; heading?: string; isSmallHeading?: boolean; @@ -25,6 +27,7 @@ type BlurryPosterProps = HTMLAttributes & { export const BlurryPoster = ({ bgImageSrc, bgImageFocus, + imageOnLeft, heading, headingLevel = 'h2', isSmallHeading, @@ -50,14 +53,14 @@ export const BlurryPoster = ({
-
+
{heading && ( {heading} @@ -82,7 +85,7 @@ export const BlurryPoster = ({
)}
-
+
Date: Thu, 28 Sep 2023 02:51:54 -0700 Subject: [PATCH 18/18] eslint update and lint fix --- .../BlurryPoster/BlurryPoster.styles.tsx | 2 +- package-lock.json | 90 +++++++++---------- package.json | 2 +- 3 files changed, 47 insertions(+), 47 deletions(-) diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx index e7aa1476..88bb45a8 100644 --- a/components/BlurryPoster/BlurryPoster.styles.tsx +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -1,4 +1,4 @@ -import { cnb } from "cnbuilder"; +import { cnb } from 'cnbuilder'; export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden'; export const blurWrapper = 'w-full h-full backdrop-blur-md'; diff --git a/package-lock.json b/package-lock.json index 3d1d2242..734ebd2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@types/react-dom": "^18.2.7", "autoprefixer": "^10.4.14", "decanter": "^7.1.1", - "eslint": "^8.46.0", + "eslint": "^8.50.0", "eslint-config-next": "^13.4.13", "postcss": "^8.4.27", "tailwindcss": "^3.3.3", @@ -107,9 +107,9 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz", - "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", + "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==", "dev": true, "dependencies": { "ajv": "^6.12.4", @@ -130,9 +130,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.46.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz", - "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz", + "integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -156,9 +156,9 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", - "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==", + "version": "0.11.11", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", + "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==", "dev": true, "dependencies": { "@humanwhocodes/object-schema": "^1.2.1", @@ -2392,16 +2392,16 @@ } }, "node_modules/eslint": { - "version": "8.46.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz", - "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz", + "integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.1", - "@eslint/js": "^8.46.0", - "@humanwhocodes/config-array": "^0.11.10", + "@eslint/eslintrc": "^2.1.2", + "@eslint/js": "8.50.0", + "@humanwhocodes/config-array": "^0.11.11", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "ajv": "^6.12.4", @@ -2411,7 +2411,7 @@ "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", "eslint-scope": "^7.2.2", - "eslint-visitor-keys": "^3.4.2", + "eslint-visitor-keys": "^3.4.3", "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", @@ -2768,9 +2768,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3288,9 +3288,9 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, "node_modules/globals": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", - "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", + "version": "13.22.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz", + "integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -6877,9 +6877,9 @@ "dev": true }, "@eslint/eslintrc": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz", - "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", + "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==", "dev": true, "requires": { "ajv": "^6.12.4", @@ -6894,9 +6894,9 @@ } }, "@eslint/js": { - "version": "8.46.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz", - "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz", + "integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==", "dev": true }, "@fastify/accept-negotiator": { @@ -6912,9 +6912,9 @@ "requires": {} }, "@humanwhocodes/config-array": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", - "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==", + "version": "0.11.11", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", + "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==", "dev": true, "requires": { "@humanwhocodes/object-schema": "^1.2.1", @@ -8399,16 +8399,16 @@ "dev": true }, "eslint": { - "version": "8.46.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz", - "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz", + "integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==", "dev": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.1", - "@eslint/js": "^8.46.0", - "@humanwhocodes/config-array": "^0.11.10", + "@eslint/eslintrc": "^2.1.2", + "@eslint/js": "8.50.0", + "@humanwhocodes/config-array": "^0.11.11", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "ajv": "^6.12.4", @@ -8418,7 +8418,7 @@ "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", "eslint-scope": "^7.2.2", - "eslint-visitor-keys": "^3.4.2", + "eslint-visitor-keys": "^3.4.3", "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", @@ -8700,9 +8700,9 @@ } }, "eslint-visitor-keys": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true }, "espree": { @@ -9064,9 +9064,9 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, "globals": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", - "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", + "version": "13.22.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz", + "integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==", "dev": true, "requires": { "type-fest": "^0.20.2" diff --git a/package.json b/package.json index 3c9cf3fa..220e3cf1 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@types/react-dom": "^18.2.7", "autoprefixer": "^10.4.14", "decanter": "^7.1.1", - "eslint": "^8.46.0", + "eslint": "^8.50.0", "eslint-config-next": "^13.4.13", "postcss": "^8.4.27", "tailwindcss": "^3.3.3",