From bcd8dab3841f5c4500ab223867885ecbf615626a Mon Sep 17 00:00:00 2001
From: candicecz <czech.candice@gmail.com>
Date: Thu, 19 Sep 2024 15:44:35 -0400
Subject: [PATCH] style: knowledge center hero banner #258

---
 src/components/page-header/index.tsx       | 125 --------------------
 src/components/page-header/styles.ts       |  80 -------------
 src/pages/knowledge-center/[[...slug]].tsx |  14 +--
 src/pages/news.tsx                         |  56 ++++++---
 src/views/docs/components/HeroBanner.tsx   |  65 ++++++++++
 src/views/home/components/HeroBanner.tsx   | 131 +++++++++++++++------
 6 files changed, 205 insertions(+), 266 deletions(-)
 delete mode 100644 src/components/page-header/index.tsx
 delete mode 100644 src/components/page-header/styles.ts
 create mode 100644 src/views/docs/components/HeroBanner.tsx

diff --git a/src/components/page-header/index.tsx b/src/components/page-header/index.tsx
deleted file mode 100644
index c0de87be..00000000
--- a/src/components/page-header/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import { PageContent } from 'src/components/page-container';
-import {
-  Box,
-  Flex,
-  FlexProps,
-  Heading,
-  HeadingProps,
-  Text,
-  TextProps,
-} from '@chakra-ui/react';
-import { theme } from 'src/theme';
-import { StyledSection } from './styles';
-
-interface PageHeaderProps extends FlexProps {
-  bg?: string;
-  bgImg?: string;
-  body?: string[];
-  bodyProps?: TextProps;
-  children?: React.ReactNode;
-  color?: string;
-  subtitle?: string;
-  subtitleProps?: TextProps;
-  title?: string;
-  titleProps?: HeadingProps;
-}
-
-export const PageHeader: React.FC<PageHeaderProps> = ({
-  bg,
-  bgImg,
-  body,
-  bodyProps,
-  children,
-  color,
-  subtitle,
-  subtitleProps,
-  title,
-  titleProps,
-  ...props
-}) => {
-  return (
-    <>
-      <PageContent
-        bg={
-          bg ||
-          `linear-gradient(180deg, ${theme.colors.primary[500]}, ${theme.colors.tertiary[700]})`
-        }
-        bgImg={bgImg || '/assets/home-bg.webp'}
-        backgroundSize='cover'
-        flexWrap='wrap'
-        minH='unset'
-        justifyContent={{ xl: 'center' }}
-        px={0}
-        py={0}
-        {...props}
-      >
-        {/* Header section */}
-        <StyledSection
-          id='header'
-          flexDirection='column'
-          alignItems={{ base: 'flex-start', xl: 'center' }}
-          textAlign={{ xl: 'center' }}
-          px={{ base: 6, sm: 10, lg: 16, xl: '5vw' }}
-          py={{ base: 6, sm: 10, xl: 16 }}
-        >
-          <Box w='100%' maxW='680px'>
-            {title && (
-              <Heading
-                as='h1'
-                size='h1'
-                color={color || '#fff'}
-                fontWeight='bold'
-                letterSpacing={1}
-                lineHeight='shorter'
-                {...titleProps}
-              >
-                {title}
-              </Heading>
-            )}
-            {subtitle && (
-              <Text
-                color={color || '#fff'}
-                fontSize='xl'
-                fontWeight='semibold'
-                mt={4}
-                {...subtitleProps}
-              >
-                {subtitle}
-              </Text>
-            )}
-            {body &&
-              body.length > 0 &&
-              body.map((text, i) => {
-                return (
-                  <Text
-                    key={i}
-                    color={color || 'whiteAlpha.800'}
-                    fontWeight='medium'
-                    fontSize='lg'
-                    lineHeight='tall'
-                    maxWidth={{ base: '400px', xl: 'unset' }}
-                    mt={2}
-                    {...bodyProps}
-                  >
-                    {text}
-                  </Text>
-                );
-              })}
-          </Box>
-          {children && (
-            <Flex w='100%' justifyContent='center'>
-              <Flex
-                flexDirection='column'
-                maxW={{ base: '600px', xl: '1000px' }}
-                w='100%'
-              >
-                {children}
-              </Flex>
-            </Flex>
-          )}
-        </StyledSection>
-      </PageContent>
-    </>
-  );
-};
diff --git a/src/components/page-header/styles.ts b/src/components/page-header/styles.ts
deleted file mode 100644
index 78d22b04..00000000
--- a/src/components/page-header/styles.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  ButtonGroup,
-  ButtonGroupProps,
-  Flex,
-  FlexProps,
-  Heading,
-  HeadingProps,
-  keyframes,
-  Text,
-  TextProps,
-} from '@chakra-ui/react';
-import styled from '@emotion/styled';
-
-// Styles for the home page
-export const fade = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-`;
-
-export const StyledSection = styled(Flex)<FlexProps>(props => ({}));
-
-StyledSection.defaultProps = {
-  as: 'section',
-  w: '100%',
-  px: [2, 4, 6],
-  py: [2, 4, 8],
-  flexWrap: ['wrap', 'wrap', 'nowrap'],
-  flexDirection: ['column', 'column', 'row'],
-  alignItems: ['flex-start', 'center', 'center'],
-  justifyContent: ['center', 'center', 'center', 'space-between'],
-  maxWidth: ['100%', '100%', '1280px'],
-};
-
-export const StyledSectionHeading = styled(Heading)<HeadingProps>(
-  props => ({}),
-);
-
-StyledSectionHeading.defaultProps = {
-  as: 'h2',
-  color: 'text.body',
-  fontWeight: 'regular',
-};
-
-export const StyledText = styled(Text)<TextProps>(props => ({}));
-
-StyledText.defaultProps = {
-  mt: 4,
-  fontSize: ['lg'],
-  fontWeight: 'light',
-  lineHeight: 'short',
-};
-
-export const StyledBody = styled(Box)<BoxProps>(props => ({}));
-
-StyledBody.defaultProps = {
-  maxWidth: ['unset', 'unset', '410px'],
-  textAlign: ['start', 'center', 'start'],
-};
-
-export const StyledSectionButtonGroup = styled(ButtonGroup)<ButtonGroupProps>(
-  props => ({}),
-);
-
-StyledSectionButtonGroup.defaultProps = {
-  flexWrap: ['wrap', 'nowrap'],
-  my: [6, 6],
-  spacing: [0, 4],
-  w: '100%',
-  justifyContent: ['flex-start', 'center', 'flex-start'],
-  // max size for buttons in button group
-  sx: { a: { maxWidth: 300 } },
-};
diff --git a/src/pages/knowledge-center/[[...slug]].tsx b/src/pages/knowledge-center/[[...slug]].tsx
index 86defc47..16f1d4c2 100644
--- a/src/pages/knowledge-center/[[...slug]].tsx
+++ b/src/pages/knowledge-center/[[...slug]].tsx
@@ -13,7 +13,6 @@ import {
 import { Link } from 'src/components/link';
 import type { GetStaticProps, NextPage } from 'next';
 import { PageContainer, PageContent } from 'src/components/page-container';
-import { PageHeader } from 'src/components/page-header';
 import DOCUMENTATION_COPY from 'configs/docs.json';
 import { Error } from 'src/components/error';
 import axios from 'axios';
@@ -32,6 +31,7 @@ import MainContent, {
 import Empty from 'src/components/empty';
 import IntegrationMain from 'src/views/integration/components/Main';
 import { DocsSearchBar } from 'src/views/docs/components/SearchBar';
+import { HeroBanner } from 'src/views/docs/components/HeroBanner';
 
 export interface DocumentationByCategories {
   id: number;
@@ -130,18 +130,12 @@ const Docs: NextPage<{
       py={0}
       disableSearchBar
     >
-      <PageHeader
+      <HeroBanner
         title={DOCUMENTATION_COPY.sections.hero.heading}
-        titleProps={{
-          size: 'h3',
-        }}
         subtitle={DOCUMENTATION_COPY.sections.hero.subtitle}
-        body={!props.slug ? [DOCUMENTATION_COPY.sections.hero.body] : []}
-        bodyProps={{
-          maxW: 'unset',
-          mt: 10,
-        }}
+        body={DOCUMENTATION_COPY.sections.hero.body}
       />
+
       <Flex
         w='100%'
         justifyContent='flex-end'
diff --git a/src/pages/news.tsx b/src/pages/news.tsx
index 93ea8d3e..06c5db36 100644
--- a/src/pages/news.tsx
+++ b/src/pages/news.tsx
@@ -16,7 +16,6 @@ import {
 import { Link } from 'src/components/link';
 import type { NextPage } from 'next';
 import { PageContainer, PageContent } from 'src/components/page-container';
-import { PageHeader } from 'src/components/page-header';
 import { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { Error } from 'src/components/error';
 import axios from 'axios';
@@ -29,6 +28,10 @@ import { fetchNews } from 'src/views/home/components/NewsCarousel';
 import { useQuery } from '@tanstack/react-query';
 import SectionCard from 'src/views/news/components/SectionCard';
 import { fetchAllFeaturedPages } from 'src/views/features/helpers';
+import {
+  HeroBannerContainer,
+  HeroBannerText,
+} from 'src/views/home/components/HeroBanner';
 
 export interface NewsOrEventsObject {
   compiledMDX: MDXRemoteSerializeResult;
@@ -231,24 +234,41 @@ const News: NextPage<NewsProps> = props => {
       py={0}
       disableSearchBar
     >
-      <PageHeader
-        title='News & Updates'
-        titleProps={{
-          size: 'h3',
-        }}
-        body={['Latest news and events from the NIAID Data Discovery Portal']}
-        bodyProps={{
-          color: '#fff',
-          mt: 10,
-        }}
+      <HeroBannerContainer
+        justifyContent={{ base: 'flex-start', md: 'center' }}
         bgImg='/assets/news-01.jpg'
-        sx={{
-          '#header': {
-            minW: '100%',
-            bg: 'blackAlpha.600',
-          },
-        }}
-      />
+        backgroundSize='cover'
+        px='0px'
+        minHeight='unset'
+      >
+        <Flex
+          bg='blackAlpha.600'
+          flexDirection='column'
+          alignItems={{ base: 'flex-start', xl: 'center' }}
+          textAlign={{ xl: 'center' }}
+          px={{ base: 6, sm: 10, lg: 16, xl: '5vw' }}
+          py={{ base: 6, sm: 10, xl: 16 }}
+          w='100%'
+        >
+          <HeroBannerText
+            title='News & Updates'
+            body='Latest news and events from the NIAID Data Discovery Portal'
+            alignItems={{ base: 'flex-start', lg: 'center' }}
+            color='#fff'
+            maxWidth={{ md: '500px', xl: '680px' }}
+            mt={0}
+            mb={0}
+            spacing={10}
+            textAlign={{ base: 'left', lg: 'center' }}
+            sx={{
+              h1: {
+                letterSpacing: '1px',
+              },
+            }}
+          ></HeroBannerText>
+        </Flex>
+      </HeroBannerContainer>
+
       <PageContent
         bg='#fff'
         maxW={{ base: 'unset', lg: '1600px' }}
diff --git a/src/views/docs/components/HeroBanner.tsx b/src/views/docs/components/HeroBanner.tsx
new file mode 100644
index 00000000..142fcd13
--- /dev/null
+++ b/src/views/docs/components/HeroBanner.tsx
@@ -0,0 +1,65 @@
+import { Box, Flex, Image } from '@chakra-ui/react';
+import {
+  HeroBannerContainer,
+  HeroBannerText,
+} from 'src/views/home/components/HeroBanner';
+
+interface HeroBannerProps {
+  title?: string;
+  subtitle?: string;
+  body?: string;
+  children?: React.ReactNode;
+}
+
+export const HeroBanner: React.FC<HeroBannerProps> = ({
+  title,
+  subtitle,
+  body,
+  children,
+}) => {
+  return (
+    <HeroBannerContainer justifyContent={{ base: 'flex-start', md: 'center' }}>
+      <Box width='100%' height='100%' overflow='hidden' position='absolute'>
+        <Image
+          alt='A complex network of interconnected lines and nodes, resembling a molecular or neural network structure. The image features various shades of blue and white, with nodes of different sizes connected by thin lines, creating a web-like pattern.'
+          src='/assets/homepage/ecosystem-hero-nodes.png'
+          position='absolute'
+          objectFit='cover'
+          width={{ base: '100%', lg: '100%', xl: '100%' }}
+          height={{ base: '100%', lg: 'unset', xl: '100%' }}
+          maxWidth={{ base: '100%', '2xl': 'unset' }}
+          bottom={{ base: '-50%', lg: 'unset' }}
+          opacity={{ base: 0.2, lg: 0.35 }}
+        />
+      </Box>
+
+      <Flex
+        id='hero-gradient'
+        zIndex={3}
+        bgGradient={{
+          base: 'linear(to-r, #ddf4fde6 0%, #ddf4fde6 75%, #ffc0cb00 100%)',
+          md: 'linear(to-r, #ffc0cb00 0%, #ddf4fde6 20%, #ddf4fde6 75%, #ffc0cb00 100%)',
+        }}
+        borderRadius='semi'
+        w='100%'
+        alignItems='center'
+        justifyContent={{ base: 'flex-start', lg: 'center' }}
+      >
+        <HeroBannerText
+          title={title}
+          subtitle={subtitle}
+          body={body}
+          maxWidth={{ md: '500px', xl: '680px' }}
+          textAlign={{ base: 'left', lg: 'center' }}
+          alignItems={{ base: 'flex-start', lg: 'center' }}
+          justifyContent={{ base: 'flex-start', lg: 'center' }}
+          spacing={4}
+          px={{ base: 4 }}
+          py={{ base: 4, sm: 10 }}
+        />
+      </Flex>
+
+      {children}
+    </HeroBannerContainer>
+  );
+};
diff --git a/src/views/home/components/HeroBanner.tsx b/src/views/home/components/HeroBanner.tsx
index 103326d6..ee8352c5 100644
--- a/src/views/home/components/HeroBanner.tsx
+++ b/src/views/home/components/HeroBanner.tsx
@@ -1,4 +1,13 @@
-import { Box, Flex, Heading, Image, Text, VStack } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  FlexProps,
+  Heading,
+  Image,
+  StackProps,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
 
 interface HeroBannerProps {
   title?: string;
@@ -14,18 +23,7 @@ export const HeroBanner: React.FC<HeroBannerProps> = ({
   children,
 }) => {
   return (
-    <Flex
-      id='hero-banner'
-      position='relative'
-      bgGradient='linear(to-r,#ddf4fd 50%, #c1e0eb)' // small gradient to lighten up scene
-      minHeight={{
-        base: '320px',
-        sm: '360px',
-        md: '350px',
-      }}
-      justifyContent={{ base: 'flex-start', '2xl': 'center' }}
-      px={{ base: 2, sm: 6, lg: 10, xl: '5vw' }}
-    >
+    <HeroBannerContainer>
       {/* Nodes background image */}
       <Box width='100%' height='100%' overflow='hidden' position='absolute'>
         <Image
@@ -71,29 +69,96 @@ export const HeroBanner: React.FC<HeroBannerProps> = ({
         />
 
         {/* Headings */}
-        <VStack
-          maxWidth='350px'
-          spacing={4}
-          alignItems='flex-start'
-          zIndex={2}
-          mt={10}
-          mb={4}
-        >
-          {title && (
-            <Heading as='h1' fontSize='4xl' fontWeight='bold'>
-              {title}
-            </Heading>
-          )}
-          {subtitle && (
-            <Heading as='h2' fontSize='md' fontWeight='semibold'>
-              {subtitle}
-            </Heading>
-          )}
-          {body && <Text lineHeight='shorter'>{body}</Text>}
-        </VStack>
+        <HeroBannerText title={title} subtitle={subtitle} body={body} />
 
         {children}
       </VStack>
+    </HeroBannerContainer>
+  );
+};
+
+interface HeroBannerContainerProps extends FlexProps {}
+export const HeroBannerContainer = ({
+  children,
+  ...rest
+}: HeroBannerContainerProps) => {
+  return (
+    <Flex
+      id='hero-banner'
+      position='relative'
+      bgGradient='linear(to-r,#ddf4fd 50%, #c1e0eb)' // small gradient to lighten up scene
+      minHeight={{
+        base: '320px',
+        sm: '360px',
+        md: '350px',
+      }}
+      justifyContent={{ base: 'flex-start', '2xl': 'center' }}
+      px={{ base: 2, sm: 6, lg: 10, xl: '5vw' }}
+      {...rest}
+    >
+      {children}
     </Flex>
   );
 };
+
+interface HeroBannerTextProps extends StackProps {
+  title?: HeroBannerProps['title'];
+  subtitle?: HeroBannerProps['subtitle'];
+  body?: HeroBannerProps['body'];
+}
+export const HeroBannerText = ({
+  title,
+  subtitle,
+  body,
+  children,
+  ...rest
+}: HeroBannerTextProps) => {
+  return (
+    <VStack
+      maxWidth='350px'
+      spacing={4}
+      alignItems='flex-start'
+      zIndex={2}
+      mt={10}
+      mb={4}
+      color='text.heading'
+      {...rest}
+    >
+      {title && (
+        <Heading
+          className='hero-title'
+          as='h1'
+          fontSize='4xl'
+          fontWeight='bold'
+          color='inherit'
+        >
+          {title}
+        </Heading>
+      )}
+      {subtitle && (
+        <Heading
+          as='h2'
+          className='hero-subtitle'
+          fontSize='md'
+          fontWeight='semibold'
+          color='inherit'
+        >
+          {subtitle}
+        </Heading>
+      )}
+      {body && (
+        <Text
+          className='hero-body'
+          lineHeight='tall'
+          fontSize='lg'
+          fontWeight='medium'
+          color='inherit'
+        >
+          {body}
+        </Text>
+      )}
+
+      {children}
+    </VStack>
+  );
+};