From a80be11f4e5371c881878d50ed5a2f89ed050d49 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 14:15:58 -0600
Subject: [PATCH 1/8] update hero banner

---
 src/components/hero-banner.js | 140 +++++++++++++++++++---------------
 src/components/layout.js      |  20 ++---
 2 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/src/components/hero-banner.js b/src/components/hero-banner.js
index 9d585b480..057b456db 100644
--- a/src/components/hero-banner.js
+++ b/src/components/hero-banner.js
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Container,
   Heading,
@@ -11,76 +12,89 @@ import { Image, Link } from '@/components/mdx'
 
 export const HeroBanner = () => {
   return (
-    <Container maxW={'6xl'}>
-      <Stack
-        align={'center'}
-        spacing={{ base: 8, md: 10 }}
-        py={{ base: 20, md: 28 }}
-        direction={{ base: 'column', md: 'row' }}
-      >
-        <Stack flex={1} spacing={{ base: 5, md: 10 }}>
-          <Heading
-            lineHeight={1.1}
-            fontWeight={600}
-            fontSize={{ base: '3xl', sm: '4xl', lg: '6xl' }}
-          >
+    <Box as='section'>
+      <Container maxW='container.xl' py={24} centerContent>
+        <Stack
+          align={'center'}
+          spacing={{ base: 8, md: 10 }}
+          justify={'center'}
+          direction={{ base: 'column', md: 'row' }}
+        >
+          <Stack flex={1} spacing={{ base: 5, md: 10 }}>
+            <Heading
+              lineHeight={1.1}
+              fontWeight={600}
+              fontSize={{ base: '3xl', sm: '4xl', lg: '6xl' }}
+            >
+              <Text
+                as={'span'}
+                position={'relative'}
+                _after={{
+                  content: "''",
+                  width: 'full',
+                  height: '30%',
+                  position: 'absolute',
+                  bottom: 1,
+                  left: 0,
+                  zIndex: -1,
+                }}
+              >
+                Xarray
+              </Text>
+              <br />
+              <Text as={'span'} color={'red.400'}>
+                N-D labeled arrays and datasets in Python
+              </Text>
+            </Heading>
             <Text
-              as={'span'}
-              position={'relative'}
-              _after={{
-                content: "''",
-                width: 'full',
-                height: '30%',
-                position: 'absolute',
-                bottom: 1,
-                left: 0,
-                zIndex: -1,
-              }}
+              color={useColorModeValue('gray.800', 'white')}
+              fontSize={'lg'}
             >
-              Xarray
-            </Text>
-            <br />
-            <Text as={'span'} color={'red.400'}>
-              N-D labeled arrays and datasets in Python
+              <strong>Xarray</strong> is an open source project and Python
+              package that introduces labels in the form of dimensions,
+              coordinates, and attributes on top of raw NumPy-like arrays, which
+              allows for more intuitive, more concise, and less error-prone user
+              experience.
+              <br />
+              <br />
+              Xarray includes a large and growing library of domain-agnostic
+              functions for advanced analytics and visualization with these data
+              structures.
             </Text>
-          </Heading>
-          <Text color={useColorModeValue('gray.800', 'white')} fontSize={'lg'}>
-            <strong>Xarray</strong> is an open source project and Python package
-            that introduces labels in the form of dimensions, coordinates, and
-            attributes on top of raw NumPy-like arrays, which allows for more
-            intuitive, more concise, and less error-prone user experience.
-            <br />
-            <br />
-            Xarray includes a large and growing library of domain-agnostic
-            functions for advanced analytics and visualization with these data
-            structures.
-          </Text>
-        </Stack>
-        <Stack flex={1} spacing={{ base: 10, md: 20 }}>
-          <Image
-            src={'/xarray-datastructure.png'}
-            alt='xarray data structure'
-            objectFit='contain'
-          ></Image>
+          </Stack>
+          <Stack flex={1} spacing={{ base: 10, md: 20 }}>
+            <Image
+              src={'/xarray-datastructure.png'}
+              alt='xarray data structure'
+              objectFit='contain'
+            ></Image>
 
-          <Stack
-            spacing={{ base: 4, sm: 6 }}
-            justify={'center'}
-            direction={{ base: 'column', sm: 'row' }}
-          >
-            <Button variant={'outline'} px={6} colorScheme={'blue'}>
-              <Link href='https://docs.xarray.dev/en/stable/getting-started-guide/quick-overview.html'>
+            <Stack
+              spacing={{ base: 4, sm: 6 }}
+              justify={'center'}
+              direction={{ base: 'column', sm: 'row' }}
+            >
+              <Button
+                useExternalIcon
+                as={Link}
+                variant={'outline'}
+                colorScheme={'blue'}
+                href='https://docs.xarray.dev/en/stable/getting-started-guide/quick-overview.html'
+              >
                 Get Started
-              </Link>
-            </Button>
-            <Button variant={'outline'} px={6}>
-              <Link href='https://docs.xarray.dev/en/stable/getting-started-guide/why-xarray.html'>
+              </Button>
+              <Button
+                useExternalIcon
+                as={Link}
+                variant={'outline'}
+                href='https://docs.xarray.dev/en/stable/getting-started-guide/why-xarray.html'
+              >
                 Why Xarray?
-              </Link>
-            </Button>
+              </Button>
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </Container>
+      </Container>
+    </Box>
   )
 }
diff --git a/src/components/layout.js b/src/components/layout.js
index 11c38027e..30bc242c5 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -2,7 +2,7 @@ import { Banner } from '@/components/banner'
 import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
 import { Link } from '@/components/mdx'
-import { Container, Text } from '@chakra-ui/react'
+import { Box, Flex, Text } from '@chakra-ui/react'
 import Head from 'next/head'
 
 export const Layout = ({
@@ -38,23 +38,25 @@ export const Layout = ({
 
         <title>{title}</title>
       </Head>
-      <Container
-        maxW={'full'}
-        maxH={'full'}
+      <Flex
+        direction={'column'}
+        justify={'space-between'}
+        gap={0}
+        minHeight={'100vh'}
         backgroundImage={'/background.svg'}
       >
-        <Header />
-
-        <Container maxW={'6xl'} mt={10}>
+        <Box>
+          <Header />
           {enableBanner && (
             <Banner title={bannerTitle} description={bannerDescription}>
               {bannerChildren}
             </Banner>
           )}
           {children}
-        </Container>
+        </Box>
+
         <Footer />
-      </Container>
+      </Flex>
     </>
   )
 }

From b45841c53edfdf7ad1c9352070c4fb0bb97099a6 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 14:33:06 -0600
Subject: [PATCH 2/8] update features and repl

---
 src/components/features.js    | 15 ++++------
 src/components/hero-banner.js | 15 ++--------
 src/components/repl.js        | 54 ++++++++++++++---------------------
 3 files changed, 29 insertions(+), 55 deletions(-)

diff --git a/src/components/features.js b/src/components/features.js
index 20f8100bb..b273b6e42 100644
--- a/src/components/features.js
+++ b/src/components/features.js
@@ -4,7 +4,6 @@ import {
   HStack,
   Icon,
   SimpleGrid,
-  Stack,
   Text,
   VStack,
 } from '@chakra-ui/react'
@@ -17,9 +16,9 @@ import { CheckIcon } from '@chakra-ui/icons'
 export const Features = () => {
   const features = React.useMemo(() => data, [])
   return (
-    <Box id={'features'}>
-      <Stack as={Container} maxW={'6xl'} textAlign={'center'}>
-        <Heading as='h1' size='2xl' my={4}>
+    <Box id={'features'} as='section'>
+      <Container maxW='container.xl' centerContent>
+        <Heading as='h1' size='2xl'>
           Key Features & Capabilities
         </Heading>
         <Text fontSize={'lg'}>
@@ -28,13 +27,11 @@ export const Features = () => {
           functions for advanced analytics and visualization with these data
           structures.
         </Text>
-      </Stack>
 
-      <Container maxW={'6xl'} mt={10}>
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10}>
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={8} my={8}>
           {features.map((feature, index) => (
-            <HStack key={index} align={'top'}>
-              <Box color={'green.400'} px={2}>
+            <HStack key={index} align={'top'} my={2}>
+              <Box color={'green.400'}>
                 <Icon as={CheckIcon} />
               </Box>
               <VStack align={'start'}>
diff --git a/src/components/hero-banner.js b/src/components/hero-banner.js
index 057b456db..fa6f1f2b8 100644
--- a/src/components/hero-banner.js
+++ b/src/components/hero-banner.js
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  Container,
-  Heading,
-  Stack,
-  Text,
-  useColorModeValue,
-} from '@chakra-ui/react'
+import { Box, Button, Container, Heading, Stack, Text } from '@chakra-ui/react'
 
 import { Image, Link } from '@/components/mdx'
 
@@ -46,10 +38,7 @@ export const HeroBanner = () => {
                 N-D labeled arrays and datasets in Python
               </Text>
             </Heading>
-            <Text
-              color={useColorModeValue('gray.800', 'white')}
-              fontSize={'lg'}
-            >
+            <Text fontSize={'lg'}>
               <strong>Xarray</strong> is an open source project and Python
               package that introduces labels in the form of dimensions,
               coordinates, and attributes on top of raw NumPy-like arrays, which
diff --git a/src/components/repl.js b/src/components/repl.js
index 2d12e73ab..03aee99b6 100644
--- a/src/components/repl.js
+++ b/src/components/repl.js
@@ -1,11 +1,4 @@
-import {
-  AspectRatio,
-  Box,
-  Container,
-  SimpleGrid,
-  Stack,
-  Text,
-} from '@chakra-ui/react'
+import { AspectRatio, Box, Container, SimpleGrid, Text } from '@chakra-ui/react'
 
 import { Code, Heading } from '@/components/mdx'
 import { nord } from 'react-syntax-highlighter/dist/cjs/styles/prism'
@@ -65,31 +58,26 @@ data.isel(lon=0).plot();
 
 export const Repl = () => {
   return (
-    <Box id={'repl'}>
-      <Container maxW={'6xl'} py={'4'}>
-        <Stack spacing={4} as={Container} maxW={'6xl'} textAlign={'center'}>
-          <Heading as='h1' size='2xl' my={4}>
-            Try Xarray
-          </Heading>
-          <Text fontSize={'lg'}>
-            Try Xarray in a REPL directly in your browser (no installation
-            needed)!
-          </Text>
-        </Stack>
-        <SimpleGrid minChildWidth='400px' spacing='40px' mt={10}>
-          <Stack>
-            <Stack direction='column'>
-              <Code
-                language='python'
-                style={nord}
-                showLineNumbers={true}
-                wrapLongLines={false}
-                //wrapLines
-              >
-                {sampleCode}
-              </Code>
-            </Stack>
-          </Stack>
+    <Box id={'repl'} as='section'>
+      <Container maxW='container.xl' centerContent>
+        <Heading as='h1' size='2xl'>
+          Try Xarray
+        </Heading>
+        <Text fontSize={'lg'}>
+          Try Xarray in a REPL directly in your browser (no installation
+          needed)!
+        </Text>
+
+        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8} my={8}>
+          <Code
+            language='python'
+            style={nord}
+            showLineNumbers={true}
+            wrapLongLines={false}
+            //wrapLines
+          >
+            {sampleCode}
+          </Code>
 
           <AspectRatio ratio={4 / 3}>
             <iframe

From 98183c2fe77c6fff9b4daa6fedceffa530d87506 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 15:06:47 -0600
Subject: [PATCH 3/8] update libraries, donate, and sponsors sections

---
 src/components/array-libraries.js    |  6 ++--
 src/components/donate.js             | 54 +++++++++++++++++-----------
 src/components/ecosystem.js          | 25 ++++++++-----
 src/components/scientific-domains.js | 18 +++-------
 src/components/sponsors.js           | 43 +++++++++-------------
 5 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/src/components/array-libraries.js b/src/components/array-libraries.js
index 7c4f4c627..fa038744e 100644
--- a/src/components/array-libraries.js
+++ b/src/components/array-libraries.js
@@ -67,14 +67,14 @@ const Library = ({ name, description, repo, url, logo }) => {
 export const ArrayLibraries = () => {
   const libraries = React.useMemo(() => data, [])
   return (
-    <Box my={4}>
-      <Text color={useColorModeValue('gray.800', 'white')} fontSize={'lg'}>
+    <Box my={8}>
+      <Text fontSize={'lg'}>
         Xarray supports multiple array backends, allowing users to choose array
         types that work best for their application.
       </Text>
 
       <SimpleGrid
-        columns={{ base: 1, md: 3 }}
+        columns={{ base: 1, md: 2, lg: 3 }}
         spacing={8}
         my={8}
         align={'left'}
diff --git a/src/components/donate.js b/src/components/donate.js
index 2dad3342c..b29551292 100644
--- a/src/components/donate.js
+++ b/src/components/donate.js
@@ -1,4 +1,11 @@
-import { Box, Button, Center, Container, Stack, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Container,
+  SimpleGrid,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 
 import { Heading, Image, Link } from '@/components/mdx'
 
@@ -6,19 +13,20 @@ import { BiDonateHeart } from 'react-icons/bi'
 
 export const Donate = () => {
   return (
-    <Box id={'donate'}>
-      <Container maxW={'6xl'}>
-        <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
+    <Box id={'donate'} as='section'>
+      <Container maxW='container.xl' centerContent>
+        <Heading as='h1' size='2xl'>
           Donate
         </Heading>
-        <Stack
-          align={'center'}
-          py={{ base: 8, md: 8 }}
-          direction={{ base: 'column', md: 'row' }}
+        <SimpleGrid
+          columns={{ base: 1, md: 2 }}
+          spacing={8}
+          my={8}
+          justify={'center'}
+          alignItems={'center'}
         >
           <Stack
             flex={1}
-            px={10}
             spacing={{ base: 5, md: 10 }}
             justify={'center'}
             align={'center'}
@@ -30,13 +38,19 @@ export const Donate = () => {
                 as={Link}
                 href={'https://en.wikipedia.org/wiki/501(c)(3)_organization'}
                 color={'blue.400'}
+                useExternalIcon
               >
                 501(c)(3) nonprofit charity
               </Text>{' '}
               in the United States. NumFOCUS provides Xarray with fiscal, legal,
               and administrative support to help ensure the health and
               sustainability of the project. Visit{' '}
-              <Text as={Link} href={'https://numfocus.org/'} color={'blue.400'}>
+              <Text
+                as={Link}
+                useExternalIcon
+                href={'https://numfocus.org/'}
+                color={'blue.400'}
+              >
                 numfocus.org
               </Text>{' '}
               for more information.
@@ -46,25 +60,23 @@ export const Donate = () => {
               consider making a donation to support our efforts.
             </Text>
             <Button
-              size={'lg'}
+              as={Link}
               fontWeight={'normal'}
-              px={6}
               colorScheme={'red'}
               bg={'red.400'}
               _hover={{ bg: 'red.500' }}
               rightIcon={<BiDonateHeart />}
+              href={'https://numfocus.org/donate-to-xarray'}
             >
-              <Link href={'https://numfocus.org/donate-to-xarray'}>Donate</Link>
+              Donate
             </Button>
           </Stack>
-          <Stack flex={1} justify={'center'} align={'center'} w={'full'}>
-            <Center
-              as={Image}
-              src={'/NumFOCUS_sponsored_project_logo.svg'}
-              alt={'NumFocus logo'}
-            ></Center>
-          </Stack>
-        </Stack>
+
+          <Image
+            src={'/NumFOCUS_sponsored_project_logo.svg'}
+            alt={'NumFocus logo'}
+          ></Image>
+        </SimpleGrid>
       </Container>
     </Box>
   )
diff --git a/src/components/ecosystem.js b/src/components/ecosystem.js
index 6cc7fcce4..bbd085b6e 100644
--- a/src/components/ecosystem.js
+++ b/src/components/ecosystem.js
@@ -50,9 +50,9 @@ const GitHubStats = () => {
 
 export const Ecosystem = () => {
   return (
-    <Box id={'ecosystem'}>
-      <Stack as={Container} maxW={'6xl'} textAlign={'center'}>
-        <Heading as='h1' size='2xl' my={4}>
+    <Box id={'ecosystem'} as='section'>
+      <Container maxW='container.xl' centerContent>
+        <Heading as='h1' size='2xl'>
           Ecosystem
         </Heading>
         <Text fontSize={'lg'}>
@@ -60,14 +60,21 @@ export const Ecosystem = () => {
           on top of NumPy, Pandas, and Dask and supports a wide range of domain
           specific scientific applications.
         </Text>
-        <GitHubStats />
-      </Stack>
 
-      <Container maxW={'6xl'} mt={10}>
-        <Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
+        <Tabs
+          my={8}
+          align='center'
+          variant='enclosed'
+          isFitted
+          colorScheme='teal'
+        >
           <TabList>
-            <Tab>Scientific Domains</Tab>
-            <Tab>Array Libraries</Tab>
+            <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+              Scientific Domains
+            </Tab>
+            <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+              Array Libraries
+            </Tab>
           </TabList>
           <TabPanels>
             <TabPanel>
diff --git a/src/components/scientific-domains.js b/src/components/scientific-domains.js
index 1aeb4f638..fedf236c7 100644
--- a/src/components/scientific-domains.js
+++ b/src/components/scientific-domains.js
@@ -1,10 +1,4 @@
-import {
-  Button,
-  Container,
-  SimpleGrid,
-  Text,
-  useColorModeValue,
-} from '@chakra-ui/react'
+import { Box, Button, SimpleGrid, Text } from '@chakra-ui/react'
 import React from 'react'
 
 import { Link } from '@/components/mdx'
@@ -15,12 +9,8 @@ export const ScientificDomains = () => {
   const projects = React.useMemo(() => Projects, [])
 
   return (
-    <Container maxW={'6xl'} mt={10}>
-      <Text
-        color={useColorModeValue('gray.800', 'white')}
-        fontSize={'lg'}
-        my={4}
-      >
+    <Box my={8}>
+      <Text fontSize={'lg'}>
         This section lists some of the standalone packages, projects developed
         with xarray.
       </Text>
@@ -55,6 +45,6 @@ export const ScientificDomains = () => {
       >
         See More
       </Button>
-    </Container>
+    </Box>
   )
 }
diff --git a/src/components/sponsors.js b/src/components/sponsors.js
index eea0c3f36..bfc462ebc 100644
--- a/src/components/sponsors.js
+++ b/src/components/sponsors.js
@@ -1,13 +1,6 @@
 import React from 'react'
 
-import {
-  Box,
-  Container,
-  Flex,
-  Stack,
-  Text,
-  useColorModeValue,
-} from '@chakra-ui/react'
+import { Box, Container, Flex, SimpleGrid, Text } from '@chakra-ui/react'
 
 import { Heading, Image, Link } from '@/components/mdx'
 import { Sponsors as data } from '@/data/sponsors'
@@ -16,24 +9,20 @@ export const Sponsors = () => {
   const sponsors = React.useMemo(() => data, [])
 
   return (
-    <Box id={'sponsors'}>
-      <Container maxW={'6xl'} as={Stack}>
-        <Stack>
-          <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
-            Supported By
-          </Heading>
-          <Text
-            color={useColorModeValue('gray.800', 'white')}
-            fontSize={'lg'}
-            textAlign={'center'}
-          >
-            We thank these institutions for generously supporting the
-            development and maintenance of Xarray.
-          </Text>
-        </Stack>
-        <Stack
-          direction={{ base: 'column', md: 'row' }}
-          spacing={2}
+    <Box id={'sponsors'} as='section'>
+      <Container maxW='container.xl' centerContent>
+        <Heading as='h1' size='2xl'>
+          Supported By
+        </Heading>
+        <Text fontSize={'lg'}>
+          We thank these institutions for generously supporting the development
+          and maintenance of Xarray.
+        </Text>
+
+        <SimpleGrid
+          columns={{ base: 1, sm: 2, md: 2, lg: 4 }}
+          my={4}
+          spacing={'space-between'}
           align={'center'}
           justify={'center'}
         >
@@ -51,7 +40,7 @@ export const Sponsors = () => {
               <Image w={36} h={36} src={sponsor.logo} alt={sponsor.name} />
             </Flex>
           ))}
-        </Stack>
+        </SimpleGrid>
       </Container>
     </Box>
   )

From dc8f0bb2c2c6d81e850644763d2d9d391e06324a Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 15:24:35 -0600
Subject: [PATCH 4/8] Update footer and header

---
 src/components/desktop-nav.js | 2 +-
 src/components/footer.js      | 9 +++++----
 src/components/header.js      | 2 +-
 src/components/vercel.js      | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/desktop-nav.js b/src/components/desktop-nav.js
index a0d5f0d4f..bbff9a683 100644
--- a/src/components/desktop-nav.js
+++ b/src/components/desktop-nav.js
@@ -23,7 +23,7 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 p={2}
                 href={navItem.href ?? '/#'}
                 fontSize={'sm'}
-                fontWeight={500}
+                fontWeight={'bold'}
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 color={useColorModeValue('gray.600', 'gray.200')}
                 _hover={{
diff --git a/src/components/footer.js b/src/components/footer.js
index ded07850d..42ac0cee5 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -41,7 +41,7 @@ const SocialButton = ({ children, label, href }) => {
 
 const ListHeader = ({ children }) => {
   return (
-    <Text fontWeight={'500'} fontSize={'lg'} mb={2}>
+    <Text fontWeight={'bold'} my={2}>
       {children}
     </Text>
   )
@@ -52,11 +52,12 @@ export const Footer = () => {
     <Box
       bg={useColorModeValue('gray.50', 'gray.900')}
       color={useColorModeValue('gray.700', 'gray.200')}
+      as='footer'
     >
-      <Container as={Stack} maxW={'6xl'} py={10}>
+      <Container maxW='container.xl' centerContent>
         <SimpleGrid
-          templateColumns={{ sm: '1fr 1fr', md: '2fr 1fr 1fr 2fr' }}
-          spacing={8}
+          columns={{ base: 1, sm: 2, md: 4 }}
+          spacing={{ base: 2, md: 8 }}
         >
           <Stack spacing={6}>
             <Box>
diff --git a/src/components/header.js b/src/components/header.js
index 2b48440c1..d4e0d962b 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -41,7 +41,7 @@ export const Header = () => {
           ),
         }}
       >
-        <Container as={Flex} maxW={'6xl'} align={'center'}>
+        <Container as={Flex} maxW={'container.xl'} align={'center'}>
           <Flex
             flex={{ base: '0', md: 'auto' }}
             ml={{ base: -2 }}
diff --git a/src/components/vercel.js b/src/components/vercel.js
index a29a5aca3..89810c9f5 100644
--- a/src/components/vercel.js
+++ b/src/components/vercel.js
@@ -4,7 +4,7 @@ import { Box } from '@chakra-ui/react'
 export function VercelCallout() {
   return (
     <Box
-      mt='6'
+      my='6'
       fontSize='sm'
       fontWeight='semibold'
       display='inline-block'

From bd0762d3d7d2f9f9e63b3443d2d0850e1a10beac Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 15:38:43 -0600
Subject: [PATCH 5/8] update dashboard

---
 src/components/dashboard/issue-tracker.js   |  50 ++++-----
 src/components/dashboard/project-metrics.js | 106 ++++++++++----------
 2 files changed, 80 insertions(+), 76 deletions(-)

diff --git a/src/components/dashboard/issue-tracker.js b/src/components/dashboard/issue-tracker.js
index 8831e93f4..42bef8c05 100644
--- a/src/components/dashboard/issue-tracker.js
+++ b/src/components/dashboard/issue-tracker.js
@@ -1,4 +1,4 @@
-import { SimpleGrid } from '@chakra-ui/react'
+import { Box, Container, SimpleGrid } from '@chakra-ui/react'
 import { GiDuration } from 'react-icons/gi'
 
 import { TimelinePlotContainer } from '@/components/dashboard/timeline-plot-container'
@@ -7,28 +7,30 @@ import { Heading } from '@/components/mdx'
 
 export const IssueTracker = () => {
   return (
-    <>
-      <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
-        Xarray Issue Tracker
-      </Heading>
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-        {' '}
-        <TimeseriesAggStatsCard
-          title={'Median time a pull request is open'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27pull%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
-          }
-          icon={<GiDuration size={'3em'} />}
-        />
-        <TimeseriesAggStatsCard
-          title={'Median time an issue is open'}
-          icon={<GiDuration size={'3em'} />}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27issue%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
-          }
-        />
-      </SimpleGrid>
-      <TimelinePlotContainer />
-    </>
+    <Box as='section'>
+      <Container maxW='container.xl'>
+        <Heading as='h1' size='2xl' textAlign={'center'}>
+          Xarray Issue Tracker
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
+          {' '}
+          <TimeseriesAggStatsCard
+            title={'Median time a pull request is open'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27pull%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
+            }
+            icon={<GiDuration size={'3em'} />}
+          />
+          <TimeseriesAggStatsCard
+            title={'Median time an issue is open'}
+            icon={<GiDuration size={'3em'} />}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27issue%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
+            }
+          />
+        </SimpleGrid>
+        <TimelinePlotContainer />
+      </Container>
+    </Box>
   )
 }
diff --git a/src/components/dashboard/project-metrics.js b/src/components/dashboard/project-metrics.js
index 3eca2c625..eca771268 100644
--- a/src/components/dashboard/project-metrics.js
+++ b/src/components/dashboard/project-metrics.js
@@ -2,7 +2,7 @@ import { DatasetteStatsCard } from '@/components/dashboard/datasette-stats-card'
 import { StatisticsCard } from '@/components/dashboard/statistics-card'
 import { Heading } from '@/components/mdx'
 import { fetcher } from '@/lib/data-fetching'
-import { SimpleGrid, Spinner } from '@chakra-ui/react'
+import { SimpleGrid, Spinner, Box, Container } from '@chakra-ui/react'
 import { BsPeople, BsPerson } from 'react-icons/bs'
 import { GoBook, GoPackage, GoStar, GoTag } from 'react-icons/go'
 import useSWR from 'swr'
@@ -32,60 +32,62 @@ export const ProjectMetrics = () => {
   const year = dateObj.getFullYear()
 
   return (
-    <>
-      {' '}
-      <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
-        Xarray Project Metrics
-      </Heading>
-      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
-        <StatisticsCard
-          title={'Core Maintainers'}
-          stat={'15'}
-          icon={<BsPerson size={'3em'} />}
-          link={'https://docs.xarray.dev/en/stable/team.html'}
-        />
-        <DatasetteStatsCard
-          title={'Contributors'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
-          }
-          icon={<BsPeople size={'3em'} />}
-          link={'https://github.com/pydata/xarray/graphs/contributors'}
-        />
+    <Box as='section'>
+      <Container maxW='container.xl'>
+        {' '}
+        <Heading as='h1' size='2xl' textAlign={'center'}>
+          Xarray Project Metrics
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
+          <StatisticsCard
+            title={'Core Maintainers'}
+            stat={'15'}
+            icon={<BsPerson size={'3em'} />}
+            link={'https://docs.xarray.dev/en/stable/team.html'}
+          />
+          <DatasetteStatsCard
+            title={'Contributors'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
+            }
+            icon={<BsPeople size={'3em'} />}
+            link={'https://github.com/pydata/xarray/graphs/contributors'}
+          />
 
-        <DatasetteStatsCard
-          title={'Stargazers'}
-          icon={<GoStar size={'3em'} />}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
-          }
-          link={'https://github.com/pydata/xarray/stargazers'}
-        />
+          <DatasetteStatsCard
+            title={'Stargazers'}
+            icon={<GoStar size={'3em'} />}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
+            }
+            link={'https://github.com/pydata/xarray/stargazers'}
+          />
 
-        <DatasetteStatsCard
-          title={'Dependent Projects'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
-          }
-          icon={<GoPackage size={'3em'} />}
-          link={'https://github.com/pydata/xarray/network/dependents'}
-        />
+          <DatasetteStatsCard
+            title={'Dependent Projects'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
+            }
+            icon={<GoPackage size={'3em'} />}
+            link={'https://github.com/pydata/xarray/network/dependents'}
+          />
 
-        <StatisticsCard
-          title={`${month}/${year} Docs Visitors`}
-          stat={monthlyViews.users}
-          icon={<GoBook size={'3em'} />}
-        />
+          <StatisticsCard
+            title={`${month}/${year} Docs Visitors`}
+            stat={monthlyViews.users}
+            icon={<GoBook size={'3em'} />}
+          />
 
-        <DatasetteStatsCard
-          title={'Releases'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
-          }
-          icon={<GoTag size={'3em'} />}
-          link={'https://github.com/pydata/xarray/releases'}
-        />
-      </SimpleGrid>
-    </>
+          <DatasetteStatsCard
+            title={'Releases'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
+            }
+            icon={<GoTag size={'3em'} />}
+            link={'https://github.com/pydata/xarray/releases'}
+          />
+        </SimpleGrid>
+      </Container>
+    </Box>
   )
 }

From f786614510b7c27112158e234875bc8f19695b29 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 15:49:21 -0600
Subject: [PATCH 6/8] update blog

---
 src/pages/blog/[id].js  | 112 ++++++++++++++++-----------------
 src/pages/blog/index.js | 135 +++++++++++++++++++---------------------
 2 files changed, 119 insertions(+), 128 deletions(-)

diff --git a/src/pages/blog/[id].js b/src/pages/blog/[id].js
index 2d036b511..b5b7ea4e3 100644
--- a/src/pages/blog/[id].js
+++ b/src/pages/blog/[id].js
@@ -2,6 +2,7 @@ import {
   Avatar,
   Box,
   Button,
+  Container,
   Divider,
   Flex,
   Heading,
@@ -41,67 +42,62 @@ export default function Post({ source, frontmatter, postId }) {
       description={frontmatter.summary}
       url={`https://xarray.dev/blog/${postId}`}
     >
-      <Box
-        py={10}
-        spacing={8}
-        justifyContent='center'
-        alignItems='flex-start'
-        m='0 auto 4rem auto'
-        maxWidth='4xl'
-      >
-        <Box spacing='3' alignItems='start'>
-          <VStack paddingTop='30px' spacing='2' alignItems='center'>
-            <Heading as={'h1'} textAlign={'center'} size='xl' my={4}>
-              {frontmatter.title}
-            </Heading>
-            <Text fontSize={'sm'} color={'gray.700'}>
-              {formatDate(date)} ({distanceToNow(date)})
-            </Text>
+      <Box as={'section'}>
+        <Container maxW='container.xl' py={10}>
+          <Box spacing='3' alignItems='start'>
+            <VStack paddingTop='30px' spacing='2' alignItems='center'>
+              <Heading as={'h1'} textAlign={'center'} size='xl' my={4}>
+                {frontmatter.title}
+              </Heading>
+              <Text fontSize={'sm'} color={'gray.700'}>
+                {formatDate(date)} ({distanceToNow(date)})
+              </Text>
 
-            <Wrap spacing='20px'>
-              {frontmatter.authors.map((author) => {
-                return (
-                  <WrapItem key={author.name}>
-                    <Flex
-                      as={Link}
-                      href={`https://github.com/${author.github}`}
-                      align={'center'}
-                      my={2}
-                      direction={'column'}
-                      _hover={{
-                        textDecoration: 'none',
-                      }}
-                    >
-                      <Avatar
-                        src={`https://github.com/${author.github}.png`}
-                        name={author.name}
+              <Wrap spacing='20px'>
+                {frontmatter.authors.map((author) => {
+                  return (
+                    <WrapItem key={author.name}>
+                      <Flex
+                        as={Link}
+                        href={`https://github.com/${author.github}`}
+                        align={'center'}
                         my={2}
-                      />
-                      <Text fontWeight={600}>{author.name}</Text>
-                    </Flex>
-                  </WrapItem>
-                )
-              })}
-            </Wrap>
-            <Divider my={2} />
-          </VStack>
-          <br></br>
-          <MDXRemote {...source} components={MDXElements} />
-        </Box>
+                        direction={'column'}
+                        _hover={{
+                          textDecoration: 'none',
+                        }}
+                      >
+                        <Avatar
+                          src={`https://github.com/${author.github}.png`}
+                          name={author.name}
+                          my={2}
+                        />
+                        <Text fontWeight={600}>{author.name}</Text>
+                      </Flex>
+                    </WrapItem>
+                  )
+                })}
+              </Wrap>
+              <Divider my={2} />
+            </VStack>
+            <br></br>
+            <MDXRemote {...source} components={MDXElements} />
+          </Box>
 
-        <Button
-          my={8}
-          as={Link}
-          href={'/blog'}
-          variant={'outline'}
-          leftIcon={<ArrowBackIcon />}
-          colorScheme={'blue'}
-        >
-          Back to Blog
-        </Button>
-        <Divider my={8} />
-        <br />
-        <Giscus />
+          <Button
+            my={8}
+            as={Link}
+            href={'/blog'}
+            variant={'outline'}
+            leftIcon={<ArrowBackIcon />}
+            colorScheme={'blue'}
+          >
+            Back to Blog
+          </Button>
+          <Divider my={8} />
+          <br />
+          <Giscus />
+        </Container>
       </Box>
     </Layout>
   )
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index 60c7dadb4..54d19ca10 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -1,6 +1,7 @@
 import {
   Avatar,
   Box,
+  Container,
   Divider,
   Flex,
   Heading,
@@ -28,16 +29,9 @@ export default function Blog({ allPostsData }) {
         'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/dataset-diagram-logo.png'
       }
     >
-      <Box
-        py={20}
-        spacing={4}
-        justifyContent='center'
-        alignItems='flex-start'
-        m='0 auto 4rem auto'
-        maxWidth='4xl'
-      >
-        <Stack spacing={4}>
-          <Heading fontSize={'5xl'} textAlign={'center'}>
+      <Box as='section'>
+        <Container maxW='container.xl' py={20}>
+          <Heading as='h1' size='2xl' textAlign={'center'} my={4}>
             Blog
           </Heading>
           <Text
@@ -48,70 +42,71 @@ export default function Blog({ allPostsData }) {
             All the latest news, insights, and practices about Xarray from the
             Xarray team.
           </Text>
-        </Stack>
-        <Divider py={2} borderColor='gray.200' />
 
-        <VStack
-          divider={<StackDivider borderColor='gray.200' />}
-          spacing={4}
-          align='stretch'
-        >
-          {allPostsData.map((page) => {
-            const date = new Date(page.date)
-            return (
-              <Stack key={page.id}>
-                <Stack
-                  spacing='2'
-                  align='stretch'
-                  py={{ base: 5, md: 10 }}
-                  direction={{ base: 'column', md: 'row' }}
-                >
-                  <Box>
-                    <Link
-                      href={`/blog/${page.id}`}
-                      fontSize={'xl'}
-                      fontWeight={'bold'}
-                    >
-                      {page.title}
-                    </Link>
+          <Divider my={2} borderColor='gray.200' />
 
-                    <Text fontSize={'sm'} color={'gray.600'} py={4}>
-                      {formatDate(date)} ({distanceToNow(date)})
-                    </Text>
+          <VStack
+            divider={<StackDivider borderColor='gray.200' />}
+            spacing={4}
+            align='stretch'
+          >
+            {allPostsData.map((page) => {
+              const date = new Date(page.date)
+              return (
+                <Stack key={page.id}>
+                  <Stack
+                    spacing='2'
+                    align='stretch'
+                    my={{ base: 5, md: 10 }}
+                    direction={{ base: 'column', md: 'row' }}
+                  >
+                    <Box>
+                      <Link
+                        href={`/blog/${page.id}`}
+                        fontSize={'xl'}
+                        fontWeight={'bold'}
+                      >
+                        {page.title}
+                      </Link>
+
+                      <Text fontSize={'sm'} color={'gray.600'} py={4}>
+                        {formatDate(date)} ({distanceToNow(date)})
+                      </Text>
 
-                    <Text noOfLines={3} py={4}>
-                      {page.summary}
-                    </Text>
-                  </Box>
-                  <Spacer />
-                  <Box>
-                    <Wrap spacing={2}>
-                      {page.authors.map((author) => {
-                        return (
-                          <WrapItem key={author.name}>
-                            <Flex
-                              align={'center'}
-                              mt={1}
-                              direction={'column'}
-                              key={author.name}
-                            >
-                              <Avatar
-                                src={`https://github.com/${author.github}.png`}
-                                name={author.name}
-                                mb={1}
-                              />
-                            </Flex>
-                          </WrapItem>
-                        )
-                      })}
-                    </Wrap>
-                  </Box>
+                      <Text noOfLines={3} py={4}>
+                        {page.summary}
+                      </Text>
+                    </Box>
+                    <Spacer />
+                    <Box>
+                      <Wrap spacing={2}>
+                        {page.authors.map((author) => {
+                          return (
+                            <WrapItem key={author.name}>
+                              <Flex
+                                align={'center'}
+                                mt={1}
+                                direction={'column'}
+                                key={author.name}
+                              >
+                                <Avatar
+                                  src={`https://github.com/${author.github}.png`}
+                                  name={author.name}
+                                  mb={1}
+                                />
+                              </Flex>
+                            </WrapItem>
+                          )
+                        })}
+                      </Wrap>
+                    </Box>
+                  </Stack>
                 </Stack>
-              </Stack>
-            )
-          })}
-        </VStack>
-        <Divider py={2} borderColor='gray.200' />
+              )
+            })}
+          </VStack>
+          <Divider my={2} borderColor='gray.200' />
+        </Container>
       </Box>
     </Layout>
   )

From be2d6e88d7f0c1fd349023604e9e67be5a99932e Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 16:04:38 -0600
Subject: [PATCH 7/8] reduce container size

---
 src/components/dashboard/issue-tracker.js           | 2 +-
 src/components/dashboard/project-metrics.js         | 2 +-
 src/components/dashboard/timeline-plot-container.js | 8 +++++---
 src/pages/blog/[id].js                              | 2 +-
 src/pages/blog/index.js                             | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/issue-tracker.js b/src/components/dashboard/issue-tracker.js
index 42bef8c05..7ce4d427f 100644
--- a/src/components/dashboard/issue-tracker.js
+++ b/src/components/dashboard/issue-tracker.js
@@ -8,7 +8,7 @@ import { Heading } from '@/components/mdx'
 export const IssueTracker = () => {
   return (
     <Box as='section'>
-      <Container maxW='container.xl'>
+      <Container maxW='container.lg'>
         <Heading as='h1' size='2xl' textAlign={'center'}>
           Xarray Issue Tracker
         </Heading>
diff --git a/src/components/dashboard/project-metrics.js b/src/components/dashboard/project-metrics.js
index eca771268..0d33d963e 100644
--- a/src/components/dashboard/project-metrics.js
+++ b/src/components/dashboard/project-metrics.js
@@ -33,7 +33,7 @@ export const ProjectMetrics = () => {
 
   return (
     <Box as='section'>
-      <Container maxW='container.xl'>
+      <Container maxW='container.lg'>
         {' '}
         <Heading as='h1' size='2xl' textAlign={'center'}>
           Xarray Project Metrics
diff --git a/src/components/dashboard/timeline-plot-container.js b/src/components/dashboard/timeline-plot-container.js
index 6493ccc9d..58a8585af 100644
--- a/src/components/dashboard/timeline-plot-container.js
+++ b/src/components/dashboard/timeline-plot-container.js
@@ -35,7 +35,7 @@ export const TimelinePlotContainer = () => {
   const end = d3.max(data, (d) => d.time)
 
   return (
-    <Box mt={10}>
+    <Box my={8}>
       <Text fontSize={'md'} align={'center'}>
         This is a timeline of how many open issues and pull requests Xarray has
         on Github over time from {new Date(start).toLocaleDateString()} to{' '}
@@ -45,8 +45,10 @@ export const TimelinePlotContainer = () => {
       <br />
       <Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
         <TabList>
-          <Tab>Pull Requests</Tab>
-          <Tab>Issues</Tab>
+          <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+            Pull Requests
+          </Tab>
+          <Tab _selected={{ color: 'white', bg: 'teal.500' }}>Issues</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>
diff --git a/src/pages/blog/[id].js b/src/pages/blog/[id].js
index b5b7ea4e3..27d061753 100644
--- a/src/pages/blog/[id].js
+++ b/src/pages/blog/[id].js
@@ -43,7 +43,7 @@ export default function Post({ source, frontmatter, postId }) {
       url={`https://xarray.dev/blog/${postId}`}
     >
       <Box as={'section'}>
-        <Container maxW='container.xl' py={10}>
+        <Container maxW='container.lg' py={10}>
           <Box spacing='3' alignItems='start'>
             <VStack paddingTop='30px' spacing='2' alignItems='center'>
               <Heading as={'h1'} textAlign={'center'} size='xl' my={4}>
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index 54d19ca10..bc41578ae 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -30,7 +30,7 @@ export default function Blog({ allPostsData }) {
       }
     >
       <Box as='section'>
-        <Container maxW='container.xl' py={20}>
+        <Container maxW='container.lg' py={20}>
           <Heading as='h1' size='2xl' textAlign={'center'} my={4}>
             Blog
           </Heading>

From 7c792cfceada5988bb66fd62c9061b0ef5ed7973 Mon Sep 17 00:00:00 2001
From: Anderson Banihirwe <axbanihirwe@ualr.edu>
Date: Mon, 29 Aug 2022 16:08:34 -0600
Subject: [PATCH 8/8] reduce container size

---
 src/components/donate.js      | 2 +-
 src/components/ecosystem.js   | 2 +-
 src/components/features.js    | 2 +-
 src/components/footer.js      | 2 +-
 src/components/header.js      | 2 +-
 src/components/hero-banner.js | 2 +-
 src/components/repl.js        | 2 +-
 src/components/sponsors.js    | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/donate.js b/src/components/donate.js
index b29551292..15b6ea116 100644
--- a/src/components/donate.js
+++ b/src/components/donate.js
@@ -14,7 +14,7 @@ import { BiDonateHeart } from 'react-icons/bi'
 export const Donate = () => {
   return (
     <Box id={'donate'} as='section'>
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Donate
         </Heading>
diff --git a/src/components/ecosystem.js b/src/components/ecosystem.js
index bbd085b6e..786128df7 100644
--- a/src/components/ecosystem.js
+++ b/src/components/ecosystem.js
@@ -51,7 +51,7 @@ const GitHubStats = () => {
 export const Ecosystem = () => {
   return (
     <Box id={'ecosystem'} as='section'>
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Ecosystem
         </Heading>
diff --git a/src/components/features.js b/src/components/features.js
index b273b6e42..ae5aaf65b 100644
--- a/src/components/features.js
+++ b/src/components/features.js
@@ -17,7 +17,7 @@ export const Features = () => {
   const features = React.useMemo(() => data, [])
   return (
     <Box id={'features'} as='section'>
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Key Features & Capabilities
         </Heading>
diff --git a/src/components/footer.js b/src/components/footer.js
index 42ac0cee5..698cbf977 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -54,7 +54,7 @@ export const Footer = () => {
       color={useColorModeValue('gray.700', 'gray.200')}
       as='footer'
     >
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' my={8} centerContent>
         <SimpleGrid
           columns={{ base: 1, sm: 2, md: 4 }}
           spacing={{ base: 2, md: 8 }}
diff --git a/src/components/header.js b/src/components/header.js
index d4e0d962b..20559c10e 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -41,7 +41,7 @@ export const Header = () => {
           ),
         }}
       >
-        <Container as={Flex} maxW={'container.xl'} align={'center'}>
+        <Container as={Flex} maxW={'container.lg'} align={'center'}>
           <Flex
             flex={{ base: '0', md: 'auto' }}
             ml={{ base: -2 }}
diff --git a/src/components/hero-banner.js b/src/components/hero-banner.js
index fa6f1f2b8..5c96b9c86 100644
--- a/src/components/hero-banner.js
+++ b/src/components/hero-banner.js
@@ -5,7 +5,7 @@ import { Image, Link } from '@/components/mdx'
 export const HeroBanner = () => {
   return (
     <Box as='section'>
-      <Container maxW='container.xl' py={24} centerContent>
+      <Container maxW='container.lg' py={24} centerContent>
         <Stack
           align={'center'}
           spacing={{ base: 8, md: 10 }}
diff --git a/src/components/repl.js b/src/components/repl.js
index 03aee99b6..54b3b4a54 100644
--- a/src/components/repl.js
+++ b/src/components/repl.js
@@ -59,7 +59,7 @@ data.isel(lon=0).plot();
 export const Repl = () => {
   return (
     <Box id={'repl'} as='section'>
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Try Xarray
         </Heading>
diff --git a/src/components/sponsors.js b/src/components/sponsors.js
index bfc462ebc..233a91932 100644
--- a/src/components/sponsors.js
+++ b/src/components/sponsors.js
@@ -10,7 +10,7 @@ export const Sponsors = () => {
 
   return (
     <Box id={'sponsors'} as='section'>
-      <Container maxW='container.xl' centerContent>
+      <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl'>
           Supported By
         </Heading>