refactor: getting started

Author: segunadebayo

configs/styled-system.sidebar.json

@@ -74,7 +74,7 @@
             },
             {
               "title": "Advanced",
-              "path": "/docs/styled-system/advanced"
+              "path": "/docs/styled-system/advanced-theming"
             }
           ]
         }

content/getting-started/index.mdx

@@ -4,8 +4,7 @@ description: How to install and set up Chakra UI in your project
 tags: ['principles']
 ---
 
-Install Chakra UI in your project by running the following command in your
-terminal:
+To use Chakra UI in your project, run the following command in your terminal:
 
 ```bash
 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
@@ -16,9 +15,8 @@ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
 ```
 
 After installing Chakra UI, you need to set up the `ChakraProvider` at the root
-of your application. This can be either in your `index.jsx` or `index.tsx`
-
-Put in the following code:
+of your application. This can be either in your `index.jsx`, `index.tsx` or
+`App.jsx` depending on the framework you use.
 
 ```jsx live=false
 import * as React from 'react'
@@ -45,11 +43,15 @@ guides for these frameworks:
 
 ## Learn
 
-If you're new here, watch our free courses below
+Watch our official courses and dive into dozens of videos that will teach you
+everything you need to know about Chakra UI, from basics to advanced concepts.
 
-<EggheadCourseBanner href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106' />
+<FeaturesCourses />
 
 ## Contribute
 
-Please see our [contribution guidelines](/getting-started/contributing) to learn
-how you can contribute to this project.
+Whether you're a beginner or advanced Chakra UI user, joining our community is
+the best way to connect with like-minded people who build great products with
+the library.
+
+[Join our Discord](https://chakra-ui.com/discord)

next.config.js

@@ -15,6 +15,7 @@ module.exports = withContentlayer({
       'avatars1.githubusercontent.com',
       'avatars2.githubusercontent.com',
       'avatars3.githubusercontent.com',
+      'res.cloudinary.com',
     ],
   },
   productionBrowserSourceMaps: true,

public/course-banners/chakra-ui-for-beginners.png

@@ -1,12 +1,5 @@
-import {
-  Box,
-  Center,
-  Link as ChakraLink,
-  SimpleGrid,
-  Text,
-} from '@chakra-ui/react'
+import { Box, Link as ChakraLink, SimpleGrid, Text } from '@chakra-ui/react'
 import Link from 'next/link'
-import React from 'react'
 import {
   BlitzSvg,
   CreateReactAppSvg,
@@ -21,21 +14,24 @@ const FrameworkLink = (props) => {
   const { accentColor, href, children, name } = props
   return (
     <Link passHref href={href}>
-      <ChakraLink textDecoration='none' _hover={{ textDecoration: 'none' }}>
-        <Box boxShadow='md' bg='white' borderRadius='xl' pt='4'>
+      <ChakraLink
+        bg='white'
+        display='block'
+        shadow='md'
+        textDecoration='none'
+        borderRadius='xl'
+        overflow='hidden'
+        transform='auto'
+        transition='all 0.1s ease-in-out'
+        _hover={{ textDecoration: 'none', translateY: '-2px', shadow: 'md' }}
+      >
+        <Box pt='4'>
           {children}
-
-          <Center
-            bg={accentColor}
-            borderBottomStartRadius='lg'
-            borderBottomEndRadius='lg'
-            height='30px'
-            mt='4'
-          >
-            <Text color='white' fontSize='sm' fontWeight='bold'>
+          <Box bg={accentColor} mt='4' py='1' color='white'>
+            <Text textAlign='center' fontSize='sm' fontWeight='bold'>
               {name}
             </Text>
-          </Center>
+          </Box>
         </Box>
       </ChakraLink>
     </Link>

public/course-banners/egghead-course.png

@@ -0,0 +1,59 @@
+import { Box, LinkBox, LinkOverlay, SimpleGrid, Text } from '@chakra-ui/react'
+import NextImage from 'next/image'
+
+const CourseBanner = ({
+  href,
+  image,
+  title,
+  description,
+}: {
+  image: string
+  title: string
+  description: string
+  href: string
+}) => {
+  return (
+    <LinkBox role='group' mt='10'>
+      <Box mb='4' rounded='lg' overflow='hidden'>
+        <NextImage
+          src={image}
+          alt='Egghead Logo'
+          layout='responsive'
+          width='400'
+          height='200'
+        />
+      </Box>
+
+      <LinkOverlay href={href} target='_blank'>
+        <Text as='h3' fontWeight='semibold'>
+          {title}
+        </Text>
+      </LinkOverlay>
+
+      <Text mt='2' mb='4' fontSize='sm' color='fg-muted'>
+        {description}
+      </Text>
+    </LinkBox>
+  )
+}
+
+export const FeaturesCourses = () => {
+  return (
+    <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={{ base: '4', md: '8' }}>
+      <CourseBanner
+        image='/course-banners/egghead-course.png'
+        title='Egghead Course'
+        description='In this free course, you will learn the basics of Chakra UI and how to build well-designed, accessible user interfaces with speed!'
+        href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'
+      />
+      <CourseBanner
+        image='/course-banners/chakra-ui-for-beginners.png'
+        title='Chakra UI for beginners'
+        description='The complete course for absolute beginners to understand how Chakra UI works and get started building.'
+        href='https://www.chakrauiforbeginners.com/'
+      />
+    </SimpleGrid>
+  )
+}
+
+export default CourseBanner

public/egghead-banner/chakra.svg

@@ -4,7 +4,7 @@ import PropsTable from '../props-table'
 import CarbonAd from './carbon-ad'
 import CodeBlock from './codeblock/codeblock'
 import ComponentLinks from './component-links'
-import EggheadCourseBanner from './egghead-course-banner'
+import { FeaturesCourses } from './course-banner'
 import IconsList from './icons-list'
 import {
   ColorPalette,
@@ -89,7 +89,7 @@ export const MDXComponents = {
   ColorPalette,
   ColorPalettes,
   ColorWrapper,
-  EggheadCourseBanner,
+  FeaturesCourses,
   SandpackEmbed: (props) => (
     <Box my={6}>
       <SandpackEmbed {...props} />

public/egghead-banner/egghead.svg

@@ -125,7 +125,15 @@ const MainNavLink = ({ href, icon, children, isActive }: MainNavLinkProps) => {
         color={active ? 'accent' : 'fg-muted'}
         _hover={{ color: active ? undefined : 'fg' }}
       >
-        <Center w='6' h='6' bg='accent-static' rounded='base' color='white'>
+        <Center
+          w='6'
+          h='6'
+          borderWidth='1px'
+          bg={active ? 'accent-static' : 'transparent'}
+          borderColor={active ? 'accent-static' : undefined}
+          rounded='base'
+          color={active ? 'white' : 'accent'}
+        >
           {icon}
         </Center>
         <span>{children}</span>