Merge pull request #758 from iron-fish/rahul/get-started

New Get Started Page

Author: dgca

content/get-started/sidebar.ts

@@ -1,7 +1,6 @@
 import { SidebarDefinition } from "@/lib/markdown";
 
 export const sidebar: SidebarDefinition = [
-  "get-started",
   "mining",
   // "ledger", // TODO: Uncomment after Ledger Live launch
   "glossary",

lib/ui/src/components/NavBar/Desktop/DesktopVariant.tsx

@@ -112,7 +112,7 @@ export function DesktopVariant({ content }: { content: NavItems }) {
         })}
       </HStack>
       <HStack alignItems="center">
-        <Button size="lg" as={Link} href="/use/get-started">
+        <Button size="lg" as={Link} href="/get-started">
           <Box mr={4}>Get Started</Box>
           <FancyArrowRight />
         </Button>

lib/ui/src/components/NavBar/Mobile/MobileVariant.tsx

@@ -164,7 +164,7 @@ export function MobileVariant({ content }: { content: NavItems }) {
               );
             })}
             <Box py={6}>
-              <Button size="lg" as={Link} href="/use/get-started">
+              <Button size="lg" as={Link} href="/get-started">
                 <Box mr={4}>Get Started</Box>
                 <FancyArrowRight />
               </Button>

lib/ui/src/components/ShadowBox/ShadowBox.tsx

@@ -1,8 +1,9 @@
-import { Box, BoxProps, ChakraComponent } from "@chakra-ui/react";
+import { Box, BoxProps, ChakraComponent, useBoolean } from "@chakra-ui/react";
 
 export type ShadowBoxProps = {
   children: React.ReactNode;
   shadowColor?: BoxProps["bg"];
+  hoverShadowColor?: BoxProps["bg"];
   borderColor?: BoxProps["borderColor"];
   offset?: string;
   containerProps?: BoxProps;
@@ -11,6 +12,7 @@ export type ShadowBoxProps = {
 export const ShadowBox: ChakraComponent<"div", ShadowBoxProps> = ({
   children,
   shadowColor = "pink.500",
+  hoverShadowColor,
   offset = "6px",
   borderRadius = "1.5px",
   borderWidth = "1.5px",
@@ -19,6 +21,8 @@ export const ShadowBox: ChakraComponent<"div", ShadowBoxProps> = ({
   containerProps,
   ...rest
 }: ShadowBoxProps) => {
+  const [isHovered, setHovered] = useBoolean(false);
+
   return (
     <Box
       position="relative"
@@ -28,6 +32,8 @@ export const ShadowBox: ChakraComponent<"div", ShadowBoxProps> = ({
       alignItems="stretch"
       justifyContent="stretch"
       w={width}
+      onMouseEnter={setHovered.on}
+      onMouseLeave={setHovered.off}
       {...containerProps}
     >
       <Box
@@ -37,7 +43,7 @@ export const ShadowBox: ChakraComponent<"div", ShadowBoxProps> = ({
         inset={0}
         mt={offset}
         ml={offset}
-        bg={shadowColor}
+        bg={isHovered ? hoverShadowColor : shadowColor}
       />
       <Box
         bg="white"

next.config.js

@@ -75,7 +75,12 @@ ${isDev ? '' : 'upgrade-insecure-requests;'}
       },
       {
         source: "/use/get-started",
-        destination: "/use/get-started/get-started",
+        destination: "/get-started",
+        permanent: false,
+      },
+      {
+        source: "/learn/get-started",
+        destination: "/get-started",
         permanent: false,
       },
       {