Update landing page

package.json

@@ -24,6 +24,7 @@
     "@apollo/brand": "^0.2.1",
     "@apollo/chakra-helpers": "^2.0.0",
     "@apollo/client": "^3.5.10",
+    "@apollo/icons": "^0.0.4",
     "@apollo/pedia": "^3.1.0",
     "@apollo/signup-tracer": "^2.0.0",
     "@apollo/space-kit": "8.11.0",

src/components/DocsetMenu/DocsetMenu.js

@@ -18,62 +18,79 @@ import {
   Stack,
   useDisclosure
 } from '@chakra-ui/react';
-import {BsListOl} from 'react-icons/bs';
-import {ReactComponent as Explorer} from '../../assets/icons/explorer.svg';
-import {ReactComponent as Federation} from '../../assets/icons/federation.svg';
-import {FiChevronDown, FiGrid} from 'react-icons/fi';
+import {ReactComponent as ChevronDown} from "@apollo/icons/default/IconChevronDown.svg";
+import {ReactComponent as Connectors} from "@apollo/icons/default/IconConnectors.svg";
+import {ReactComponent as Document} from "@apollo/icons/default/IconDocument.svg";
+import {ReactComponent as Education} from "@apollo/icons/default/IconEducation.svg";
+import {ReactComponent as Enterprise} from "@apollo/icons/default/IconEnterpriseFeatures.svg";
+import {ReactComponent as Explorer} from "@apollo/icons/default/IconExplorer.svg";
+import {FaJava, FaNodeJs} from 'react-icons/fa';
+import {ReactComponent as Federation} from "@apollo/icons/default/IconHierarchy.svg";
 import {Link as GatsbyLink} from 'gatsby';
-import {GoTerminal} from 'react-icons/go';
-import {IoDocumentTextOutline, IoRocketSharp} from 'react-icons/io5';
-import {ReactComponent as Router} from '../../assets/icons/router.svg';
-import {RxComponent1} from 'react-icons/rx';
-import {ReactComponent as Satellite} from '../../assets/icons/satellite.svg';
-import {ReactComponent as Schema} from '../../assets/icons/schema.svg';
-import {SiKotlin, SiReact, SiSwift} from 'react-icons/si';
-import {SlChart} from 'react-icons/sl';
-import {TbRoute} from 'react-icons/tb';
-import {VscOrganization} from 'react-icons/vsc';
+import {ReactComponent as GraphQL} from "@apollo/icons/default/IconGraphQL.svg";
+import {ReactComponent as Home} from "@apollo/icons/default/IconHome.svg";
+import {ReactComponent as Insights} from "@apollo/icons/default/IconInsights.svg";
+import {ReactComponent as Kotlin} from "@apollo/icons/default/IconKotlin.svg";
+import {ReactComponent as LayoutModule} from "@apollo/icons/default/IconLayoutModule.svg";
+import {ReactComponent as Pipeline} from "@apollo/icons/default/IconPipeline.svg";
+import {ReactComponent as ReactIcon} from "@apollo/icons/default/IconReact.svg";
+import {ReactComponent as Rocket} from "@apollo/icons/default/IconRocket.svg";
+import {ReactComponent as Router} from "@apollo/icons/default/IconRouter.svg";
+import {ReactComponent as Satellite} from "@apollo/icons/default/IconSatellite3.svg";
+import {ReactComponent as Schema} from "@apollo/icons/default/IconSchema.svg";
+import {SiCsharp} from 'react-icons/si';
+import {ReactComponent as Success} from "@apollo/icons/default/IconSuccess.svg";
+import {ReactComponent as Swift} from "@apollo/icons/default/IconSwift.svg";
+import {ReactComponent as Team} from "@apollo/icons/default/IconTeam.svg";
+import {ReactComponent as Terminal} from "@apollo/icons/default/IconAppWindow.svg";
 
-const CustomIcon = ({icon}) => <Box fill="current" boxSize="1em" as={icon} />;
+const CustomIcon = ({icon}) => <Box fill="color" boxSize="1em" as={icon} />;
 
 CustomIcon.propTypes = {
   icon: PropTypes.elementType.isRequired
 };
 
 export const DOCSET_ICONS = {
   default: <CustomIcon icon={ApolloMark} />,
-  'apollo-client': <SiReact />,
-  'apollo-ios': <SiSwift />,
-  'apollo-kotlin': <SiKotlin />,
+  'apollo-client': <CustomIcon icon={ReactIcon} />,
+  'apollo-ios': <CustomIcon icon={Swift} />,
+  'apollo-kotlin': <CustomIcon icon={Kotlin} />,
   'apollo-server': <CustomIcon icon={Satellite} />,
+  check: <CustomIcon icon={Success} />,
+  connectors: <CustomIcon icon={Connectors} />,
+  csharp: <SiCsharp />,
+  delivery: <CustomIcon icon={Pipeline} />,
+  education: <CustomIcon icon={Education} />,
+  enterprise: <CustomIcon icon={Enterprise} />,
+  explorer: <CustomIcon icon={Explorer} />,
   federation: <CustomIcon icon={Federation} />,
   graphos: <CustomIcon icon={Schema} />,
-  rover: <GoTerminal />,
+  graphql: <CustomIcon icon={GraphQL} />,
+  home: <CustomIcon icon={Home} />,
+  java: <FaJava />,
+  metrics: <CustomIcon icon={Insights} />,
+  nodejs: <FaNodeJs />,
+  odyssey: <CustomIcon icon={Rocket} />,
+  org: <CustomIcon icon={Team} />,
+  rover: <CustomIcon icon={Terminal} />,
   router: <CustomIcon icon={Router} />,
-  odyssey: <IoRocketSharp />,
-  technotes: <IoDocumentTextOutline />,
-  metrics: <SlChart />,
-  org: <VscOrganization />,
-  delivery: <TbRoute />,
-  explorer: <CustomIcon icon={Explorer} />,
-  enterprise: <RxComponent1 />,
-  principled: <BsListOl />
+  technotes: <CustomIcon icon={Document} />
 };
 
 export function DocsetMenu({docset, versions = [], currentVersion, ...props}) {
   const {isOpen, onOpen, onClose} = useDisclosure();
   return (
     <>
       <ButtonGroup isAttached {...props}>
-        <Button rightIcon={<FiGrid />} onClick={onOpen} colorScheme="indigo">
+        <Button rightIcon={<CustomIcon icon={LayoutModule} />} onClick={onOpen} colorScheme="indigo">
           {docset}
         </Button>
         {versions.length > 1 && (
           <Menu>
             <MenuButton
               as={Button}
               variant="outline"
-              rightIcon={<FiChevronDown />}
+              rightIcon={<CustomIcon icon={ChevronDown} />}
               borderLeft="none"
             >
               {currentVersion}

src/components/HomePage.js

@@ -12,11 +12,16 @@ import {
   Text,
   useToken
 } from '@chakra-ui/react';
-import {FiArrowRight} from 'react-icons/fi';
-import {Link as GatsbyLink} from 'gatsby';
-import {PrimaryLink} from './RelativeLink';
+import {FiArrowRight, FiExternalLink} from 'react-icons/fi';
 
-export function Odyssey() {
+const linkIcon = (path) => {
+  if(/^https:\/\//.test(path)){
+    return <FiExternalLink />;
+  }
+  return <FiArrowRight />;
+}
+
+export function GradientCard ({icon, title, description, path, cta}) {
   const lightGradient = useToken('colors', ['blue.100', 'indigo.300']);
   const darkGradient = useToken('colors', ['indigo.400', 'indigo.500']);
   return (
@@ -32,20 +37,24 @@ export function Odyssey() {
       }}
     >
       <div>
+      <Heading as="h3" size="lg" mb="4">
+          <HStack spacing="3">
+            {icon}
+            <span>{title}</span>
+          </HStack>
+        </Heading>
         <Text fontSize="lg">
-          <strong>Welcome!</strong> 👋 Our learning platform, Odyssey, provides{' '}
-          <strong>interactive tutorials</strong> with videos and code challenges
-          to help you launch your journey with GraphQL and Apollo.
+          {description}
         </Text>
       </div>
       <div>
         <Button
           as="a"
-          href="https://www.apollographql.com/tutorials"
+          href={path}
           colorScheme="indigo"
-          rightIcon={<FiArrowRight />}
+          leftIcon={linkIcon(path)}
         >
-          Explore Tutorials
+          {cta}
         </Button>
       </div>
     </Grid>
@@ -56,8 +65,6 @@ export const DocsetGrid = props => (
   <SimpleGrid spacing="4" minChildWidth="250px" {...props} />
 );
 
-export const CTA_LEARN = 'Learn about %s';
-
 export function Docset({
   title,
   children,
@@ -76,9 +83,20 @@ export function Docset({
           </HStack>
         </Heading>
         {description && <Text mb="4">{description}</Text>}
-        <PrimaryLink mt="auto" fontWeight="semibold" as={GatsbyLink} to={path}>
+        <Button
+          variant="link"
+          as="a"
+          _dark={{
+            color: 'indigo.100'
+          }}
+          mt="auto"
+          fontWeight="semibold"
+          fontSize="lg"
+          href={path}
+          leftIcon={linkIcon(path)}
+        >
           {cta.replace('%s', title)}
-        </PrimaryLink>
+        </Button>
       </Flex>
       {children}
     </Flex>

src/components/Sidebar/LeftSidebarNav.js

@@ -1,5 +1,4 @@
 import React, {useContext} from 'react';
-import {AiOutlineHome} from '@react-icons/all-files/ai/AiOutlineHome';
 import {
   Box,
   Button,
@@ -15,7 +14,6 @@ import {
   SidebarCategoryLink
 } from './SidebarCategory';
 import {Link as GatsbyLink} from 'gatsby';
-import {IoSchoolOutline} from 'react-icons/io5';
 import {Rocket} from 'lucide-react';
 
 export const SIDEBAR_WIDTH = 280;
@@ -46,8 +44,8 @@ export function LeftSidebarNav(props) {
         }
       >
         <SidebarCategory title="Welcome">
-          <SidebarCategoryLink docset="/" icon={<AiOutlineHome />} />
-          <SidebarCategoryLink docset="odyssey" icon={<IoSchoolOutline />} />
+          <SidebarCategoryLink docset="/" icon={DOCSET_ICONS.home} />
+          <SidebarCategoryLink docset="odyssey" icon={DOCSET_ICONS.education} />
         </SidebarCategory>
         <SidebarCategory title="SDKs">
           <SidebarCategoryLink