style: knowledge center hero banner #258

NIAID-Data-Ecosystem · Sep 20, 2024 · bcd8dab · bcd8dab
1 parent 7f123ab
commit bcd8dab
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 266 deletions.
diff --git a/src/components/page-header/index.tsx b/src/components/page-header/index.tsx
diff --git a/src/components/page-header/styles.ts b/src/components/page-header/styles.ts
diff --git 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
@@ -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
@@ -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>
+  );
+};