chore(website): update site wrapper design, new homepage (#3764)

Co-authored-by: TheSisb <[email protected]>
twilio-labs · Feb 16, 2024 · 539975b · 539975b
1 parent f9e8d1c
commit 539975b
Show file tree

Hide file tree

Showing 26 changed files with 1,460 additions and 80 deletions.
diff --git a/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx b/packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx
@@ -7,56 +7,12 @@ import Image from "next/image";
 import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrowLarge";
 import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png";
 import WhyPasteImg from "../../assets/images/customization/why-paste.png";
-import { useDarkModeContext } from "../../context/DarkModeContext";
-import { useSlantedSkew } from "../SlantedBackgroundGradient";
 import { A11yIcon } from "../icons/A11yIcon";
 import { CustomizableIcon } from "../icons/CustomizableIcon";
 import { ThemableIcon } from "../icons/ThemableIcon";
 import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayoutUtils";
 import { ReasonBlock } from "./ReasonBlock";
 
-const WhyPasteTopAngle = (): JSX.Element => {
-  const [skewOffset] = useSlantedSkew();
-  const { theme } = useDarkModeContext();
-
-  return (
-    <Box
-      // @ts-expect-error combat semi opaque dark mode token value
-      backgroundColor={theme === "dark" ? "#2a3342" : "colorBackgroundPrimaryWeakest"}
-      borderRadius="borderRadius20"
-      height="95%"
-      left={0}
-      position="absolute"
-      right={0}
-      top={skewOffset}
-      transform="skewY(10deg)"
-      transformOrigin="100% 0"
-      zIndex="zIndex0"
-    />
-  );
-};
-
-const WhyPasteBottomAngle = (): JSX.Element => {
-  const [skewOffset] = useSlantedSkew(-0.35);
-  const { theme } = useDarkModeContext();
-
-  return (
-    <Box
-      // @ts-expect-error combat semi opaque dark mode token value
-      backgroundColor={theme === "dark" ? "#2a3342" : "colorBackgroundPrimaryWeakest"}
-      borderRadius="borderRadius20"
-      bottom={skewOffset}
-      height="100%"
-      left={0}
-      position="absolute"
-      right={0}
-      transform="skewY(10deg)"
-      transformOrigin="100% 0"
-      zIndex="zIndex0"
-    />
-  );
-};
-
 export const WhyPaste = (): JSX.Element => {
   return (
     <LandingPageSection
@@ -66,8 +22,6 @@ export const WhyPaste = (): JSX.Element => {
       maxWidth="96%"
       marginX="auto"
     >
-      <WhyPasteTopAngle />
-      <WhyPasteBottomAngle />
       <Box position="relative" maxWidth="1400px" marginX="auto">
         <LandingPageSectionContent variant="narrow" zIndex="zIndex10">
           <Box maxWidth="size60" marginBottom="space130">

diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx
@@ -19,7 +19,7 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
 import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 import { BouncyAnchor } from "./BouncyAnchor";
 import { SectionSeparator } from "./SectionSeparator";
 
@@ -32,7 +32,13 @@ const Accessibility: React.FC = (): React.ReactElement => {
 
   return (
     <Box display="flex" justifyContent="center" marginY="space200">
-      <Box element="ACCESSIBILITY" display="flex" flexDirection="column" width="100%" maxWidth={SITE_CONTENT_MAX_WIDTH}>
+      <Box
+        element="ACCESSIBILITY"
+        display="flex"
+        flexDirection="column"
+        width="100%"
+        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
+      >
         <SectionSeparator>Accessibility</SectionSeparator>
         <Box
           display="flex"
@@ -48,18 +54,18 @@ const Accessibility: React.FC = (): React.ReactElement => {
             <Paragraph>
               Accessibility is more than just color contrast. We believe in designing for each user, not just “all
               users”. We build with these considerations in mind:
-              <UnorderedList>
-                <ListItem>
-                  Screen magnification, voice dictation, color blindness, and those who require help with fine motor
-                  control.
-                </ListItem>
-                <ListItem>Semantic HTML to better communicate with assistive technologies.</ListItem>
-                <ListItem>UI controls that are designed to be instantly recognizable and easy to see.</ListItem>
-                <ListItem>
-                  Keyboard navigation and focus management to allow task completion through a variety of input devices.
-                </ListItem>
-              </UnorderedList>
             </Paragraph>
+            <UnorderedList>
+              <ListItem>
+                Screen magnification, voice dictation, color blindness, and those who require help with fine motor
+                control.
+              </ListItem>
+              <ListItem>Semantic HTML to better communicate with assistive technologies.</ListItem>
+              <ListItem>UI controls that are designed to be instantly recognizable and easy to see.</ListItem>
+              <ListItem>
+                Keyboard navigation and focus management to allow task completion through a variety of input devices.
+              </ListItem>
+            </UnorderedList>
             <BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
           </Box>
           <Box>

diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import * as React from "react";
 
 import DesignTool from "../../assets/illustrations/illo_design-tool.svg";
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 
 const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, description }): React.ReactElement => {
   return (
@@ -36,7 +36,7 @@ const CommunityOfBuilders: React.FC = (): React.ReactElement => {
           display="flex"
           flexDirection="column"
           width="100%"
-          maxWidth={SITE_CONTENT_MAX_WIDTH}
+          maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
           backgroundColor="colorBackgroundWarningWeakest"
           paddingY="space170"
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment

diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx
@@ -7,13 +7,19 @@ import Image from "next/image";
 import * as React from "react";
 
 import TokenColors from "../../assets/illustrations/token_colors.svg";
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 import { SectionSeparator } from "./SectionSeparator";
 
 const DesignEfficiency: React.FC = (): React.ReactElement => {
   return (
     <Box display="flex" justifyContent="center" marginY="space200">
-      <Box element="THEMEABLE" display="flex" flexDirection="column" width="100%" maxWidth={SITE_CONTENT_MAX_WIDTH}>
+      <Box
+        element="THEMEABLE"
+        display="flex"
+        flexDirection="column"
+        width="100%"
+        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
+      >
         <SectionSeparator>Design efficiency</SectionSeparator>
         <Box display="flex" justifyContent="space-between">
           <Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40">

diff --git a/packages/paste-website/src/components/homepage/NewHomeHero.tsx b/packages/paste-website/src/components/homepage/NewHomeHero.tsx
@@ -3,13 +3,13 @@ import { DisplayHeading } from "@twilio-paste/display-heading";
 import { Text } from "@twilio-paste/text";
 import { useTheme } from "@twilio-paste/theme";
 
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 import CircleIcon from "../icons/CircleIcon";
 import { BouncyAnchor } from "./BouncyAnchor";
 import { SearchBox } from "./SearchBox";
 import { ComponentShowcase } from "./component-showcase";
 
-const NewHomeHero = (): JSX.Element => {
+const HomeHero = (): JSX.Element => {
   const theme = useTheme();
   return (
     <Box element="HOME_HERO_WRAPPER">
@@ -18,10 +18,10 @@ const NewHomeHero = (): JSX.Element => {
         position="relative"
         display="grid"
         gridTemplateColumns="600px min-content"
-        maxWidth={SITE_CONTENT_MAX_WIDTH}
+        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
         marginLeft="auto"
         marginRight="auto"
-        overflow="hidden"
+        overflow="visible"
         element="HOME_HERO"
       >
         <Box
@@ -73,4 +73,4 @@ const NewHomeHero = (): JSX.Element => {
   );
 };
 
-export { NewHomeHero };
+export { HomeHero };
diff --git a/packages/paste-website/src/components/homepage/NewSection.tsx b/packages/paste-website/src/components/homepage/NewSection.tsx
@@ -2,7 +2,7 @@ import { Anchor } from "@twilio-paste/anchor";
 import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 import { WhatsNew } from "./WhatsNew";
 
 const NewSection: React.FC = (): React.ReactElement => {
@@ -16,7 +16,7 @@ const NewSection: React.FC = (): React.ReactElement => {
         justifyContent="space-between"
         paddingY="space200"
         width="size120"
-        maxWidth={SITE_CONTENT_MAX_WIDTH}
+        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
       >
         <WhatsNew showExternal href="#">
           We&apos;re hiring a Product Designer! <Anchor href="#">Apply here</Anchor>

diff --git a/packages/paste-website/src/components/homepage/Templates.tsx b/packages/paste-website/src/components/homepage/Templates.tsx
@@ -5,12 +5,12 @@ import { Pagination, PaginationArrow, PaginationItems } from "@twilio-paste/pagi
 import { Text } from "@twilio-paste/text";
 import * as React from "react";
 
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 
 const Templates: React.FC = (): React.ReactElement => {
   return (
     <Box display="flex" justifyContent="center" marginY="space200">
-      <Box display="flex" justifyContent="space-between" position="relative" maxWidth={SITE_CONTENT_MAX_WIDTH}>
+      <Box display="flex" justifyContent="space-between" position="relative" maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}>
         <Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40">
           <Heading as="h3" variant="heading20">
             Explore our templates

diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx
@@ -8,7 +8,7 @@ import * as React from "react";
 import FigmaLogo from "../../assets/illustrations/figma-logo.svg";
 import ReactLogo from "../../assets/illustrations/react-logo.svg";
 import TypescriptLogo from "../../assets/illustrations/ts-logo.svg";
-import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
 import { SectionSeparator } from "./SectionSeparator";
 
 const Themeable: React.FC = (): React.ReactElement => {
@@ -23,7 +23,7 @@ const Themeable: React.FC = (): React.ReactElement => {
         justifyItems="center"
         rowGap="space100"
         width="100%"
-        maxWidth={SITE_CONTENT_MAX_WIDTH}
+        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
       >
         <SectionSeparator gridArea="separator">Themeable and composable</SectionSeparator>
         <Box element="THISONE" gridArea="row1" width="100%">

diff --git a/packages/paste-website/src/components/icons/NewHeartDoodleIcon.tsx b/packages/paste-website/src/components/icons/NewHeartDoodleIcon.tsx
@@ -0,0 +1,36 @@
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+
+export interface HeartDoodleIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  title?: string;
+  decorative?: boolean;
+}
+
+const HeartDoodleIcon = React.memo(
+  ({ title = "Heart Doodle Icon", decorative = true, className, color, size }: HeartDoodleIconProps) => {
+    const titleId = useUID();
+    return (
+      <span style={{ color, width: size, height: size, display: "inline-block" }} className={className}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          viewBox="0 0 45 45"
+          width="100%"
+          height="100%"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            d="M21.0706 6.6932C20.7316 5.84668 20.2855 5.0471 19.7432 4.314C18.7661 2.9948 17.4898 1.92641 16.0192 1.19671C13.7562 0.0589267 11.1751 -0.280369 8.69502 0.233934C6.21492 0.748237 3.98155 2.08593 2.35766 4.02973C0.430432 6.41169 -0.250985 9.76257 0.0802788 13.0204C0.261545 14.6863 0.654011 16.3225 1.24822 17.8894C1.82808 19.5072 2.54112 21.0741 3.38001 22.574C6.76222 28.693 12.0389 33.9969 17.8814 38.3222C18.2426 38.5986 18.6186 38.8571 18.9872 39.1234L19.5437 39.5192C19.7797 39.7101 20.0513 39.8523 20.3426 39.9375C20.6788 40.026 21.0328 40.0204 21.3659 39.9214C21.6588 39.827 21.9293 39.6736 22.1607 39.4708L23.2296 38.6318C24.6443 37.5058 26.0286 36.3569 27.3826 35.1851C30.0467 32.8926 32.5895 30.4628 35.0007 27.9056C37.333 25.4983 39.3591 22.8122 41.033 19.9083C42.5612 17.1694 43.3038 14.062 43.1791 10.9282C43.115 9.49023 42.7951 8.07518 42.2346 6.74941C41.7065 5.5185 40.9312 4.40918 39.9568 3.49022C38.3233 1.94306 36.2748 0.904742 34.0613 0.501933C32.4678 0.202371 30.826 0.283354 29.2697 0.738286C28.4424 0.989447 27.6478 1.33773 26.9025 1.77585C25.2975 2.72551 23.9378 4.03863 22.9329 5.60956C22.2266 6.73098 22.0114 7.48703 22.1068 7.6575C22.221 7.84179 22.6394 7.43635 23.5249 6.48218C24.8742 4.93584 26.4925 3.64666 28.3013 2.67703C28.9745 2.348 29.6855 2.10245 30.4183 1.94585C31.8049 1.67221 33.2362 1.72569 34.5985 2.10204C36.5303 2.60956 38.2685 3.67793 39.5937 5.17233C41.0455 6.83095 41.8702 9.32764 41.7872 12.0399C41.6807 14.9677 40.7989 17.8147 39.232 20.2902C37.4482 23.0503 35.3868 25.6207 33.0799 27.9613C30.6419 30.483 28.0789 32.8807 25.4005 35.1455C24.0372 36.3028 22.644 37.4436 21.2236 38.5521C21.1375 38.627 21.0321 38.6762 20.9194 38.694C20.8067 38.7118 20.6913 38.6974 20.5864 38.6525C20.4266 38.5611 20.2735 38.4588 20.1279 38.3461L19.5751 37.9559C18.8342 37.4436 18.1233 36.8893 17.4009 36.3512C11.7109 31.9651 6.68021 26.6022 3.69193 20.5759C2.2176 17.5714 1.14134 14.4417 1.15792 11.3995C1.13074 8.38038 2.16507 5.50268 4.14252 3.75145C5.95496 2.10457 8.29192 1.15252 10.7392 1.06402C12.6825 1.02309 14.5992 1.51974 16.2781 2.49919C17.4261 3.18835 18.4167 4.1108 19.1858 5.20689C19.5595 5.735 19.8799 6.29894 20.1422 6.89039C21.0969 9.07839 21.2692 10.2998 21.5313 10.2638C21.6898 10.2606 21.9068 8.9761 21.0706 6.6932Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    );
+  },
+);
+
+export default HeartDoodleIcon;