fix: homepage static illustration and switch nav chevrons (#3040)

Co-authored-by: Shadi <[email protected]>

Author: SiTaggart

packages/paste-website/src/components/homepage/HomeHeroIllustration.tsx

@@ -4,6 +4,7 @@ import type {ValueOf} from '@twilio-paste/types';
 import {useReducedMotion} from '@twilio-paste/animation-library';
 import lottie from 'lottie-web';
 import VisibilitySensor from 'react-visibility-sensor';
+import Image from 'next/future/image';
 
 import HomeHeroIllu from '../../assets/illustrations/home_hero.svg';
 import {inCypress} from '../../utils/inCypress';
@@ -18,7 +19,7 @@ type IllustrationStatesType = ValueOf<typeof IllustrationStates>;
 const IllustrationChildren: React.FC<{state: IllustrationStatesType}> = ({state}) => {
   switch (state) {
     case IllustrationStates.STATIC:
-      return <HomeHeroIllu />;
+      return <Image src={HomeHeroIllu} aria-hidden="true" role="img" alt="" fill />;
     // null for dynamic because lottie injects children
     case IllustrationStates.DYNAMIC:
     case IllustrationStates.UNINITIALIZED:
@@ -89,6 +90,7 @@ const HomeHeroIllustration: React.FC = () => {
         maxWidth="size70"
         height={['400px', '400px', '500px']}
         marginLeft="auto"
+        position="relative"
         ref={containerRef}
       >
         <IllustrationChildren state={illustrationState} />

packages/paste-website/src/components/site-wrapper/sidebar/sidebar-disclosure/SidebarDisclosureButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Box} from '@twilio-paste/box';
 import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
 import {DisclosurePrimitive} from '@twilio-paste/disclosure-primitive';
-import {ChevronDisclosureExpandedIcon} from '@twilio-paste/icons/esm/ChevronDisclosureExpandedIcon';
+import {ChevronDisclosureIcon} from '@twilio-paste/icons/esm/ChevronDisclosureIcon';
 
 import {SidebarDisclosureContext} from './SidebarDisclosureContext';
 
@@ -64,14 +64,10 @@ const StyledButton = React.forwardRef<HTMLButtonElement, SidebarDisclosureButton
         as="span"
         alignItems="center"
         display="flex"
-        transform={props['aria-expanded'] ? 'rotate(0deg)' : 'rotate(-90deg)'}
+        transform={props['aria-expanded'] ? 'rotate(90deg)' : 'rotate(0deg)'}
         transition="transform 100ms ease-out"
       >
-        <ChevronDisclosureExpandedIcon
-          color="colorTextIcon"
-          decorative
-          size={['sizeIcon40', 'sizeIcon40', 'sizeIcon10']}
-        />
+        <ChevronDisclosureIcon color="colorTextIcon" decorative size={['sizeIcon40', 'sizeIcon40', 'sizeIcon10']} />
       </Box>
       <Box flexGrow={1}>{props.children}</Box>
     </Box>