chore: themeable

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

@@ -62,7 +62,7 @@ const HomeHero = (): JSX.Element => {
         maxWidth={SITE_CONTENT_MAX_WIDTH}
         marginLeft="auto"
         marginRight="auto"
-        zIndex="zIndex10"
+        // zIndex="zIndex10"
         overflow="hidden"
         element="HOME_HERO"
       >

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

@@ -0,0 +1,35 @@
+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 { WhatsNew } from "./WhatsNew";
+
+const NewSection: React.FC = (): React.ReactElement => {
+  return (
+    <Box display="flex" justifyContent="center">
+      <Box
+        element="NEW_SECTION"
+        display="flex"
+        flexDirection="row"
+        // width="100%"
+        justifyContent="space-between"
+        paddingY="space200"
+        width="size120"
+        maxWidth={SITE_CONTENT_MAX_WIDTH}
+      >
+        <WhatsNew showExternal href="#">
+          We&apos;re hiring a Product Designer! <Anchor href="#">Apply here</Anchor>
+        </WhatsNew>
+        <WhatsNew href="#">
+          Read more about our <Anchor href="#">latest release</Anchor>
+        </WhatsNew>
+        <WhatsNew href="#">
+          Check out <Anchor href="#">our roadmap</Anchor>
+        </WhatsNew>
+      </Box>
+    </Box>
+  );
+};
+
+export { NewSection };

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

@@ -0,0 +1,27 @@
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Heading } from "@twilio-paste/heading";
+import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
+import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
+import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon";
+import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
+
+interface SectionSeparatorProps {
+  children: React.ReactNode;
+}
+
+const SectionSeparator: React.FC<SectionSeparatorProps> = ({ children }) => {
+  return (
+    <Box width="100%">
+      <Text as="span" color="colorTextWeak" fontWeight="fontWeightSemibold">
+        {children}
+      </Text>
+      <Box borderStyle="dashed" borderColor="colorBorderWeaker" element="SECTION_SEPARATOR" />
+    </Box>
+  );
+};
+
+export { SectionSeparator };

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

@@ -0,0 +1,28 @@
+import { Box } from "@twilio-paste/box";
+import { Heading } from "@twilio-paste/heading";
+import * as React from "react";
+
+import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
+import { SectionSeparator } from "./SectionSeparator";
+
+const Themeable: 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}>
+        <SectionSeparator>Themeable and composable</SectionSeparator>
+        <Box paddingTop="space190" display="flex" flexDirection="row" justifyContent="space-between">
+          <Box>start from anywhere</Box>
+          <Box>component and primitive builder</Box>
+        </Box>
+        <Box maxWidth="size40" alignSelf="center" textAlign="center">
+          <Heading as="h3" variant="heading30">
+            Built with your favorite technologies, Typescript + React + Figma
+          </Heading>
+          <Box>ts logo react logo figma logo</Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export { Themeable };

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

@@ -0,0 +1,51 @@
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Heading } from "@twilio-paste/heading";
+import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
+import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
+import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon";
+import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
+
+interface WhatsNewProps {
+  children: React.ReactNode;
+  showExternal?: boolean;
+  href: string;
+}
+
+const WhatsNew: React.FC<WhatsNewProps> = ({ showExternal, href, children }) => {
+  return (
+    <Box
+      borderStyle="solid"
+      borderColor="colorBorderWeaker"
+      backgroundColor="colorBackgroundBody"
+      borderRadius="borderRadius30"
+      boxShadow="shadowLow"
+      width="size40"
+      zIndex="zIndex20"
+      paddingY="space40"
+      paddingX="space60"
+      textAlign="left"
+      display="flex"
+      alignItems="center"
+      columnGap="space30"
+      justifyContent="space-between"
+      element="WHATS_NEW"
+    >
+      <Heading as="h4" variant="heading40" marginBottom="space0">
+        {children}
+      </Heading>
+      <Button as="a" href={href} size="circle_small" variant="secondary">
+        {showExternal ? (
+          <LinkExternalIcon decorative={false} title="external link" />
+        ) : (
+          <ArrowForwardIcon decorative={false} title="internal link" />
+        )}
+      </Button>
+    </Box>
+  );
+};
+
+export { WhatsNew };

packages/paste-website/src/components/homepage/component-showcase/index.tsx

@@ -23,6 +23,7 @@ const ComponentShowcase: React.FC<React.PropsWithChildren> = () => {
       width="fit-content"
       borderBottomLeftRadius="borderRadius30"
       borderBottomRightRadius="borderRadius30"
+      zIndex="zIndex10"
       element="COMPONENT_SHOWCASE"
     >
       <Box

packages/paste-website/src/pages/index.tsx

@@ -6,7 +6,9 @@ import VisibilitySensor from "react-visibility-sensor";
 import { Experiment } from "../components/homepage/Experiment";
 import { GetStarted } from "../components/homepage/GetStarted";
 import { HomeHero } from "../components/homepage/HomeHero";
+import { NewSection } from "../components/homepage/NewSection";
 import { PopularComponentsAndPatterns } from "../components/homepage/Popular";
+import { Themeable } from "../components/homepage/Themeable";
 import { SiteWrapper } from "../components/site-wrapper";
 import { SiteMetaDefaults } from "../constants";
 import { getNavigationData } from "../utils/api";
@@ -32,7 +34,8 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticPr
         <meta key="description" name="description" content={SiteMetaDefaults.DESCRIPTION} />
       </Head>
       <HomeHero />
-      {/* <GetStarted /> */}
+      <NewSection />
+      <Themeable />
       <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={50}>
         {/* <PopularComponentsAndPatterns /> */}
       </VisibilitySensor>