diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx
index 2368321805..340b94cba8 100644
--- a/packages/paste-website/src/components/homepage/HomeHero.tsx
+++ b/packages/paste-website/src/components/homepage/HomeHero.tsx
@@ -1,74 +1,129 @@
+import { Anchor } from "@twilio-paste/anchor";
+import { Badge } from "@twilio-paste/badge";
 import { Box } from "@twilio-paste/box";
-import { DisplayHeading } from "@twilio-paste/display-heading";
+import { Column, Grid } from "@twilio-paste/grid";
+import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
+import { NewIcon } from "@twilio-paste/icons/esm/NewIcon";
 import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
+import * as React from "react";
 
 import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
-import CircleIcon from "../icons/CircleIcon";
-import { BouncyAnchor } from "./BouncyAnchor";
-import { SearchBox } from "./SearchBox";
-import { ComponentShowcase } from "./component-showcase";
+import { event } from "../../lib/gtag";
+import { SlantedBackgroundGradient } from "../SlantedBackgroundGradient";
+import { HomeHeroIllustration } from "./HomeHeroIllustration";
+import { NewComponentBanner } from "./NewComponentBanner";
+import { NewComponentBannerLink } from "./NewComponentBannerLink";
+import { NewComponentBannerText } from "./NewComponentBannerText";
+
+const SeeRoadmapAnchor = (): JSX.Element => {
+  const [hovered, setHovered] = React.useState(false);
+
+  const handleMouseEnter = (): void => {
+    setHovered(true);
+  };
+  const handleMouseLeave = (): void => {
+    setHovered(false);
+  };
 
-const HomeHero = (): JSX.Element => {
-  const theme = useTheme();
   return (
-    <Box element="HOME_HERO_WRAPPER">
+    <Box as="span" display="flex" alignItems="center">
+      <Anchor
+        href="/roadmap"
+        variant="inverse"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={() =>
+          event({
+            category: "Hero",
+            action: "click-see-roadmap",
+            label: "See our roadmap",
+          })
+        }
+      >
+        See our roadmap
+      </Anchor>
       <Box
-        paddingX={["space90", "space180"]}
-        position="relative"
-        display="grid"
-        gridTemplateColumns="600px min-content"
-        maxWidth={SITE_CONTENT_MAX_WIDTH}
-        marginLeft="auto"
-        marginRight="auto"
-        overflow="hidden"
-        element="HOME_HERO"
+        as="span"
+        display="flex"
+        transform={hovered ? "translateY(1px) translateX(4px)" : "translateY(1px) translateX(0)"}
+        transition="all 100ms ease"
       >
+        <ArrowForwardIcon decorative display="inline-block" size="sizeIcon40" />
+      </Box>
+    </Box>
+  );
+};
+
+const HomeHero = (): JSX.Element => {
+  return (
+    <Box
+      paddingX={["space90", "space180"]}
+      paddingTop={["space90", "space200"]}
+      paddingBottom={["space90", "space160", "space160"]}
+      position="relative"
+    >
+      <SlantedBackgroundGradient skewAngle={0} startColor="colorBackgroundBrandStrong" endColor="colorBackgroundBrand">
         <Box
-          display="flex"
-          flexDirection="column"
-          rowGap="space130"
-          paddingTop="space200"
-          paddingRight="space130"
-          alignSelf="center"
-          element="HEADER"
+          maxWidth={SITE_CONTENT_MAX_WIDTH}
+          marginLeft="auto"
+          marginRight="auto"
+          position="relative"
+          zIndex="zIndex10"
         >
-          <Box display="flex" flexDirection="column" rowGap="space50">
-            <DisplayHeading as="h1" variant="displayHeading10" marginBottom="space0">
-              Paste
-            </DisplayHeading>
-            <Text
-              as="div"
-              fontSize="fontSize90"
-              lineHeight="lineHeight90"
-              fontWeight="fontWeightSemibold"
-              letterSpacing="-2%"
-            >
-              Build inclusive, delightful customer experiences with Twilio’s open-source design system.
-            </Text>
-          </Box>
-          <SearchBox />
-          <Box
-            display="flex"
-            flexDirection="column"
-            rowGap="space50"
-            fontWeight="fontWeightBold"
-            fontSize="fontSize60"
-            lineHeight="lineHeight60"
-          >
-            <BouncyAnchor text="Get started for developers" href="/introduction/for-engineers/quickstart" />
-            <BouncyAnchor text="Get started for designers" href="/introduction/for-designers/design-guidelines" />
-          </Box>
+          <Grid vertical={[true, false, false]}>
+            <Column span={6}>
+              <NewComponentBanner>
+                <Badge as="span" variant="new">
+                  <NewIcon decorative />
+                  New
+                </Badge>
+                <NewComponentBannerText>The Page Header component is here!</NewComponentBannerText>
+                <NewComponentBannerLink
+                  href="/components/page-header"
+                  onClick={() =>
+                    event({
+                      category: "Hero",
+                      action: "click-new-banner",
+                      label: "Page header announcement",
+                    })
+                  }
+                >
+                  See more
+                </NewComponentBannerLink>
+              </NewComponentBanner>
+              <Text
+                as="h1"
+                color="colorTextInverse"
+                fontFamily="fontFamilyDisplay"
+                fontSize={["fontSizeDisplay10", "fontSizeDisplay20", "fontSizeDisplay20", "fontSizeDisplay30"]}
+                fontWeight="fontWeightExtrabold"
+                lineHeight={[
+                  "lineHeightDisplay10",
+                  "lineHeightDisplay20",
+                  "lineHeightDisplay20",
+                  "lineHeightDisplay30",
+                ]}
+                marginTop={["space80", "space120"]}
+              >
+                Build inclusive, delightful Twilio customer experiences with Paste.
+              </Text>
+              <Text
+                as="div"
+                color="colorTextInverse"
+                fontSize="fontSize40"
+                fontWeight="fontWeightBold"
+                lineHeight="lineHeight40"
+                marginTop="space120"
+              >
+                <SeeRoadmapAnchor />
+              </Text>
+            </Column>
+            <Column span={6} height="100%">
+              <HomeHeroIllustration />
+            </Column>
+          </Grid>
         </Box>
-        <ComponentShowcase />
-      </Box>
-      <Box zIndex="zIndex0" position="absolute" top="50rem" left="40%">
-        <CircleIcon
-          css={{ height: theme.heights.size30, width: theme.widths.size30 }}
-          color={theme.backgroundColors.colorBackgroundBrandHighlight}
-          decorative
-        />
-      </Box>
+      </SlantedBackgroundGradient>
     </Box>
   );
 };
diff --git a/packages/paste-website/src/components/homepage/NewHomeHero.tsx b/packages/paste-website/src/components/homepage/NewHomeHero.tsx
new file mode 100644
index 0000000000..50aa4b7459
--- /dev/null
+++ b/packages/paste-website/src/components/homepage/NewHomeHero.tsx
@@ -0,0 +1,76 @@
+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 { 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 theme = useTheme();
+  return (
+    <Box element="HOME_HERO_WRAPPER">
+      <Box
+        paddingX={["space90", "space180"]}
+        position="relative"
+        display="grid"
+        gridTemplateColumns="600px min-content"
+        maxWidth={SITE_CONTENT_MAX_WIDTH}
+        marginLeft="auto"
+        marginRight="auto"
+        overflow="hidden"
+        element="HOME_HERO"
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          rowGap="space130"
+          paddingTop="space200"
+          paddingRight="space130"
+          alignSelf="center"
+          element="HEADER"
+        >
+          <Box display="flex" flexDirection="column" rowGap="space50">
+            <DisplayHeading as="h1" variant="displayHeading10" marginBottom="space0">
+              Paste
+            </DisplayHeading>
+            <Text
+              as="div"
+              fontSize="fontSize90"
+              lineHeight="lineHeight90"
+              fontWeight="fontWeightSemibold"
+              letterSpacing="-2%"
+            >
+              Build inclusive, delightful customer experiences with Twilio’s open-source design system.
+            </Text>
+          </Box>
+          <SearchBox />
+          <Box
+            display="flex"
+            flexDirection="column"
+            rowGap="space50"
+            fontWeight="fontWeightBold"
+            fontSize="fontSize60"
+            lineHeight="lineHeight60"
+          >
+            <BouncyAnchor text="Get started for developers" href="/introduction/for-engineers/quickstart" />
+            <BouncyAnchor text="Get started for designers" href="/introduction/for-designers/design-guidelines" />
+          </Box>
+        </Box>
+        <ComponentShowcase />
+      </Box>
+      <Box zIndex="zIndex0" position="absolute" top="50rem" left="40%">
+        <CircleIcon
+          css={{ height: theme.heights.size30, width: theme.widths.size30 }}
+          color={theme.backgroundColors.colorBackgroundBrandHighlight}
+          decorative
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export { NewHomeHero };
diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx
index 0c1af20245..2ddfef1405 100644
--- a/packages/paste-website/src/pages/index.tsx
+++ b/packages/paste-website/src/pages/index.tsx
@@ -1,23 +1,16 @@
-import { Box } from "@twilio-paste/box";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import Head from "next/head";
 import * as React from "react";
 import VisibilitySensor from "react-visibility-sensor";
 
-import { Accessibility } from "../components/homepage/Accessibility";
-import { CommunityOfBuilders } from "../components/homepage/CommunityOfBuilders";
-import { DesignEfficiency } from "../components/homepage/DesignEfficiency";
-import { ForTwilioCustomers } from "../components/homepage/ForTwilioCustomers";
+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 { Templates } from "../components/homepage/Templates";
-import { Themeable } from "../components/homepage/Themeable";
-import { WeDoTheThinking } from "../components/homepage/WeDoTheThinking";
+import { PopularComponentsAndPatterns } from "../components/homepage/Popular";
 import { SiteWrapper } from "../components/site-wrapper";
 import { SiteMetaDefaults } from "../constants";
 import { getNavigationData } from "../utils/api";
 import type { Feature } from "../utils/api";
-
 const Homepage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticProps>): React.ReactElement => {
   /*
    * Only load the Experiment section iframe when the user scrolls down to
@@ -29,7 +22,6 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticPr
       setShowIframe(isVisible);
     }
   }
-
   return (
     <SiteWrapper navigationData={navigationData}>
       <Head>
@@ -38,29 +30,20 @@ const Homepage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticPr
         <meta key="description" name="description" content={SiteMetaDefaults.DESCRIPTION} />
       </Head>
       <HomeHero />
-      <NewSection />
-      <Themeable />
-      <ForTwilioCustomers />
-      <Templates />
-      <DesignEfficiency />
-      <CommunityOfBuilders />
-      <WeDoTheThinking />
-      <Accessibility />
+      <GetStarted />
       <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={50}>
-        <Box />
+        <PopularComponentsAndPatterns />
       </VisibilitySensor>
+      <Experiment showIframe={showIframe} />
     </SiteWrapper>
   );
 };
-
 export const getStaticProps: GetStaticProps<{ navigationData: Feature[] }> = async () => {
   const navigationData = await getNavigationData();
-
   return {
     props: {
       navigationData,
     },
   };
 };
-
 export default Homepage;
diff --git a/packages/paste-website/src/pages/new/index.tsx b/packages/paste-website/src/pages/new/index.tsx
new file mode 100644
index 0000000000..615ad40cdb
--- /dev/null
+++ b/packages/paste-website/src/pages/new/index.tsx
@@ -0,0 +1,65 @@
+import { Box } from "@twilio-paste/core";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import Head from "next/head";
+import * as React from "react";
+import VisibilitySensor from "react-visibility-sensor";
+
+import { Accessibility } from "../../components/homepage/Accessibility";
+import { CommunityOfBuilders } from "../../components/homepage/CommunityOfBuilders";
+import { DesignEfficiency } from "../../components/homepage/DesignEfficiency";
+import { ForTwilioCustomers } from "../../components/homepage/ForTwilioCustomers";
+import { NewHomeHero } from "../../components/homepage/NewHomeHero";
+import { NewSection } from "../../components/homepage/NewSection";
+import { Templates } from "../../components/homepage/Templates";
+import { Themeable } from "../../components/homepage/Themeable";
+import { WeDoTheThinking } from "../../components/homepage/WeDoTheThinking";
+
+import { SiteWrapper } from "../../components/site-wrapper";
+import { SiteMetaDefaults } from "../../constants";
+import { getNavigationData } from "../../utils/api";
+import type { Feature } from "../../utils/api";
+
+const NewHomePage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticProps>): React.ReactElement => {
+  /*
+   * Only load the Experiment section iframe when the user scrolls down to
+   * the Popular section (the section prior)
+   */
+  const [showIframe, setShowIframe] = React.useState(false);
+  function handleVisibilityChange(isVisible: boolean): void {
+    if (!showIframe) {
+      setShowIframe(isVisible);
+    }
+  }
+  return (
+    <SiteWrapper navigationData={navigationData}>
+      <Head>
+        <title>{SiteMetaDefaults.TITLE}</title>
+        <link rel="canonical" href="https://paste.twilio.design/customization" />
+        <meta key="description" name="description" content="" />
+      </Head>
+      <NewHomeHero />
+      <NewSection />
+      <Themeable />
+      <ForTwilioCustomers />
+      <Templates />
+      <DesignEfficiency />
+      <CommunityOfBuilders />
+      <WeDoTheThinking />
+      <Accessibility />
+      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={50}>
+        <Box />
+      </VisibilitySensor>
+    </SiteWrapper>
+  );
+};
+
+export const getStaticProps: GetStaticProps<{ navigationData: Feature[] }> = async () => {
+  const navigationData = await getNavigationData();
+  return {
+    props: {
+      navigationData,
+    },
+  };
+};
+
+export default NewHomePage;