fix(website): Fast-follow with homepage improvements (#3794)

* chore: update figma link * fix: remove hero circle background element * fix: delete unused components * fix: animate line items later * fix: re-arrange carousel item order * fix: add more gap * fix: ref forwarding bug * fix: automatically loop through examples * fix: code editor rounded edges * fix: animate logos on hover * chore: component showcase small fixes * fix: shifting when toggling disclosure * chore: remove log spam * fix: implement accordion * fix: text overflow * fix: round bottom border * fix: tiny fixes homehero * chore: try rebuilding * fix: flickering background * fix: animating fadein better * chore: remove unused variable * fix: animate cloud * fix: template section alignment * fix: offset second row of icons * fix: text alignment in section and maxWidth * fix: footer design * fix: prevent autofocusing combobox on mount * fix: section max width * fix: footer bg color * fix: import order * fix: remove cheesy animation --------- Co-authored-by: “nora <[email protected]>
twilio-labs · Mar 1, 2024 · 72027af · 72027af
1 parent 4fd2d3b
commit 72027af
Show file tree

Hide file tree

Showing 23 changed files with 521 additions and 672 deletions.
diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
@@ -151,6 +151,8 @@
     "deepmerge": "4.2.2",
     "dogapi": "^2.8.4",
     "dotenv": "^16.0.0",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "github-slugger": "^2.0.0",
     "globby-esm": "npm:globby@^13.1.3",
     "gpt3-tokenizer": "^1.1.5",

diff --git a/packages/paste-website/src/components/color-swatch/ColorGradient.tsx b/packages/paste-website/src/components/color-swatch/ColorGradient.tsx
@@ -48,25 +48,50 @@ const StyledGradientSwatch = styled.div<{ backgroundColor: string }>`
   height: ${themeGet("space.space60")};
 `;
 
-const StyledGradientSwatchTall = styled.div<{ backgroundColor: string }>`
-background-color: ${(props: any) => props.backgroundColor};
-height: ${themeGet("space.space120")};
-`;
-
-export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean }>> = ({
-  aliasPrefix,
-  makeTall = "false",
-}) => {
+const StyledGradientSwatchTall = styled.div<{ backgroundColor: string; rounded: boolean }>((props) => {
+  return {
+    backgroundColor: props.backgroundColor,
+    // @ts-expect-error this works fine
+    height: props.theme.space.space120,
+    // @ts-expect-error this works fine
+    borderBottomLeftRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
+    // @ts-expect-error this works fine
+    borderBottomRightRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
+  };
+});
+
+export const ColorGradient: React.FC<
+  React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean; index?: number }>
+> = ({ aliasPrefix, makeTall = "false", index = 0 }) => {
+  const [show, setShow] = React.useState(false);
   const { theme } = useDarkModeContext();
   const aliasValues = getAliasValuesFromPrefix(aliasPrefix, theme);
+  const count = aliasValues.length - 1;
+
+  function handleVisibilityChange(isVisible: boolean): void {
+    if (!show) {
+      setTimeout(() => {
+        setShow(isVisible);
+      }, index * 50);
+    }
+  }
+
+  const styles = useSpring({
+    opacity: show ? 1 : 0.1,
+    config: {
+      duration: 500,
+    },
+  });
 
   if (makeTall) {
     return (
-      <Box borderRadius="borderRadius20" overflow="hidden">
-        {aliasValues.map((aliasValue) => (
-          <StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} />
-        ))}
-      </Box>
+      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 100 }}>
+        <AnimatedBox borderRadius="borderRadius20" overflow="hidden" style={styles}>
+          {aliasValues.map((aliasValue, _index) => (
+            <StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} rounded={_index === count} />
+          ))}
+        </AnimatedBox>
+      </VisibilitySensor>
     );
   }
   return (
@@ -79,36 +104,21 @@ export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: stri
 };
 
 export const ColorGradientRainbow: React.FC<{ omitGrays?: boolean }> = ({ omitGrays = false }): JSX.Element => {
-  const [show, setShow] = React.useState(false);
-
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
-    }
-  }
-
-  const styles = useSpring({
-    opacity: show ? 1 : 0.1,
-  });
-
   if (omitGrays)
     return (
-      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 150 }}>
-        <AnimatedBox
-          display="grid"
-          columnGap="space40"
-          marginBottom="space70"
-          gridTemplateColumns="repeat(6, 1fr)"
-          gridTemplateRows="max-content"
-          style={styles}
-        >
-          {aliasPrefixes
-            .filter((prefix) => prefix !== "palette-gray")
-            .map((prefix) => (
-              <ColorGradient makeTall aliasPrefix={prefix} key={useUID()} />
-            ))}
-        </AnimatedBox>
-      </VisibilitySensor>
+      <Box
+        display="grid"
+        columnGap="space40"
+        marginBottom="space70"
+        gridTemplateColumns="repeat(6, 1fr)"
+        gridTemplateRows="max-content"
+      >
+        {aliasPrefixes
+          .filter((prefix) => prefix !== "palette-gray")
+          .map((prefix, index) => (
+            <ColorGradient makeTall aliasPrefix={prefix} key={useUID()} index={index} />
+          ))}
+      </Box>
     );
   return (
     <Box display="grid" columnGap="space40" marginBottom="space70" gridTemplateColumns="repeat(7, 1fr)">

diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx
@@ -53,48 +53,50 @@ const Accessibility: React.FC = (): React.ReactElement => {
               <BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
             </Box>
           </Box>
-          <Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
-            <TabList aria-label="Horizontal product tabs">
-              <Tab id={selectedTabId}>Focus management</Tab>
-              <Tab>Screen reader support</Tab>
-              <Tab>Keyboard support</Tab>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
+          <Box flexShrink={0} minWidth="570px">
+            <Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
+              <TabList aria-label="Horizontal product tabs">
+                <Tab id={selectedTabId}>Focus management</Tab>
+                <Tab>Screen reader support</Tab>
+                <Tab>Keyboard support</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Box>
         </Box>
       </Box>
 

diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
@@ -60,8 +60,7 @@ const CommunityOfBuilders: React.FC = (): React.ReactElement => {
             <StatBox stat="30" description="Monthly Github Discussions" />
           </Box>
         </Box>
-
-        <Box width="size20" height="size10" position="absolute" bottom={-50} right={250}>
+        <Box width="size20" height="size10" position="absolute" bottom={-50} right={[50, 75, 250]}>
           <Image src={DesignTool} aria-hidden="true" role="img" alt="token colors illustration" />
         </Box>
       </Box>

diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx
@@ -48,10 +48,7 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
             efficient design and engineering collaboration.
           </Text>
           <Box fontWeight="fontWeightSemibold" fontSize="fontSize40" lineHeight="lineHeight40">
-            <BouncyAnchor
-              text="Find us on Figma Community"
-              href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
-            />
+            <BouncyAnchor text="Find us on Figma Community" href="https://www.figma.com/@twilio" />
           </Box>
           <Box
             marginTop="space170"
@@ -65,9 +62,16 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
             top={300}
             position="absolute"
           >
-            {someIcons.map((Icon) => (
-              <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
-            ))}
+            {someIcons.map((Icon, index) => {
+              if (index >= 22 && index < 44) {
+                return (
+                  <Box marginLeft="spaceNegative180">
+                    <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
+                  </Box>
+                );
+              }
+              return <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />;
+            })}
           </Box>
         </Box>
         <Box

diff --git a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx
@@ -35,6 +35,7 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
           textAlign="left"
           zIndex="zIndex10"
           marginY={["space0", "space0", "space0", "space200"]}
+          maxWidth={["100%", "100%", "100%", "size60"]}
         >
           <Text
             as="h3"
@@ -46,17 +47,29 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
           >
             For Twilions and Twilio customers alike
           </Text>
-          <Text as="p" color="colorTextInverse" marginBottom="space70">
+          <Text as="p" fontSize="fontSize40" lineHeight="lineHeight40" color="colorTextInverse" marginBottom="space70">
             Rapidly build enterprise-grade, inclusive, and extensible experiences that look and feel like your brand.
             Paste works great with Flex plugins, CodeExchange apps, and more.
           </Text>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box color="colorTextInverse" fontSize="fontSize40" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
             <BouncyAnchor href="/introduction/for-engineers/quickstart" text="Eng quick start" inverse />
           </Box>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box
+            color="colorTextInverse"
+            fontSize="fontSize40"
+            fontWeight="fontWeightSemibold"
+            lineHeight="lineHeight40"
+            marginTop="space20"
+          >
             <BouncyAnchor href="/customization" text="Customization overview" inverse />
           </Box>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box
+            color="colorTextInverse"
+            fontSize="fontSize40"
+            fontWeight="fontWeightSemibold"
+            lineHeight="lineHeight40"
+            marginTop="space20"
+          >
             <BouncyAnchor
               href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
               text="Figma Community file"

diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx
@@ -1,16 +1,13 @@
 import { Box } from "@twilio-paste/box";
 import { DisplayHeading } from "@twilio-paste/display-heading";
 import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
 
-import CircleIcon from "../icons/CircleIcon";
 import { BouncyAnchor } from "./BouncyAnchor";
 import { SearchBox } from "./SearchBox";
 import { SectionContainer } from "./SectionContainer";
 import { ComponentShowcase } from "./component-showcase";
 
 const HomeHero = (): JSX.Element => {
-  const theme = useTheme();
   return (
     <SectionContainer marginY="space0">
       <Box element="HOME_HERO" display="flex" columnGap="space100">
@@ -59,13 +56,6 @@ const HomeHero = (): JSX.Element => {
           <ComponentShowcase />
         </Box>
       </Box>
-      <Box zIndex="zIndex0" position="absolute" top="45rem" left="42%" element="CIRCLE">
-        <CircleIcon
-          css={{ height: theme.heights.size30, width: theme.widths.size30 }}
-          color={theme.backgroundColors.colorBackgroundBrandHighlight}
-          decorative
-        />
-      </Box>
     </SectionContainer>
   );
 };