From 216891325777dab07231dfc399eba2e60e9991ba Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:32:53 -0600
Subject: [PATCH 1/8] feat: remove new user view homepage toggle

---
 src/components/HomepageVideo.js | 171 ---------------
 src/pages/index.js              | 365 ++++++++++++--------------------
 2 files changed, 136 insertions(+), 400 deletions(-)
 delete mode 100644 src/components/HomepageVideo.js

diff --git a/src/components/HomepageVideo.js b/src/components/HomepageVideo.js
deleted file mode 100644
index 811ea496920..00000000000
--- a/src/components/HomepageVideo.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { css } from '@emotion/react';
-import {
-  SearchInput,
-  useTessen,
-  useTranslation,
-} from '@newrelic/gatsby-theme-newrelic';
-import { navigate } from '@reach/router';
-import curlyAndDotsBackground from './curlyAndDots.webp';
-import curlyAndDotsBackgroundDarkmode from './curlyAndDotsDM.webp';
-import InlineSignup from './InlineSignup';
-import { useMainLayoutContext } from './MainLayoutContext';
-
-const HomepageVideo = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const { t } = useTranslation();
-  const tessen = useTessen();
-  const [sidebar] = useMainLayoutContext();
-  const [mobileBreakpoint, setMobileBreakpoint] = useState('1050px');
-
-  useEffect(() => {
-    if (sidebar) {
-      setMobileBreakpoint('1300px');
-    } else {
-      setMobileBreakpoint('1050px');
-    }
-  }, [sidebar]);
-
-  return (
-    <>
-      <div
-        css={css`
-          padding-top: 7rem;
-          padding-bottom: 1rem;
-          width: 100%;
-          display: grid;
-          grid-template-areas: 'welcome video' 'break signup';
-          grid-template-columns: 2fr 3fr;
-          grid-gap: 1rem;
-          background-image: url(${curlyAndDotsBackground});
-          background-size: 70%;
-          background-repeat: no-repeat;
-          background-position: top -3vh right 20%;
-          .dark-mode & {
-            background-image: url(${curlyAndDotsBackgroundDarkmode});
-          }
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            background-image: none;
-            display: flex;
-            flex-direction: column;
-            padding-top: 2rem;
-            .dark-mode & {
-              background-image: none;
-            }
-          }
-        `}
-      >
-        <div
-          css={css`
-            grid-area: welcome;
-            padding-right: 3rem;
-            align-self: center;
-            margin-bottom: 6rem;
-            h1 {
-              font-size: 56px;
-              font-weight: 500;
-            }
-            @media screen and (max-width: ${mobileBreakpoint}) {
-              width: 100%;
-              padding-right: 0;
-              margin-bottom: 2rem;
-            }
-          `}
-        >
-          <h1>{t('homepageVideo.header')}</h1>
-          <p>{t('homepageVideo.p1')}</p>
-          <p>{t('homepageVideo.p2')}</p>
-          <SearchInput
-            placeholder={t('home.search.placeholder')}
-            size={SearchInput.SIZE.LARGE}
-            value={searchTerm || ''}
-            iconName={SearchInput.ICONS.SEARCH}
-            isIconClickable
-            alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-            }}
-            onSubmit={() => {
-              tessen.track({
-                eventName: 'videoViewSearch',
-                category: 'SearchInput',
-                searchTerm,
-              });
-              navigate(`?q=${searchTerm || ''}`);
-            }}
-            css={css`
-              @media screen and (max-width: ${mobileBreakpoint}) {
-                margin-bottom: 1rem;
-              }
-            `}
-          />
-        </div>
-        <div
-          css={css`
-            grid-area: video;
-            @media screen and (max-width: ${mobileBreakpoint}) {
-              width: 100%;
-            }
-          `}
-        >
-          <div
-            className="wistia_responsive_padding"
-            style={{ padding: '56.25% 0 0 ', position: 'relative' }}
-          >
-            <div
-              className="wistia_responsive_wrapper"
-              style={{
-                height: '100%',
-                left: '0',
-                position: 'absolute',
-                top: '0',
-                width: '100%',
-              }}
-            >
-              <iframe
-                title="Welcome to new relic"
-                src="https://fast.wistia.net/embed/iframe/wf5nv18wa4"
-                allowTransparency="true"
-                frameBorder="0"
-                scrolling="no"
-                className="wistia_embed"
-                name="wistia_embed"
-                allowFullScreen
-                height="100%"
-                width="100%"
-              />
-            </div>
-          </div>
-          <InlineSignup
-            showCTA={false}
-            hideWhenLoggedOut={false}
-            css={css`
-              margin-top: 2rem;
-
-              div:first-of-type {
-                margin-left: 0;
-              }
-              input {
-                height: 56px;
-                background-color: var(--secondary-background-color);
-                &::placeholder {
-                  color: var(--primary-font-color);
-                  font-size: 18px;
-                }
-              }
-              button {
-                height: 56px;
-                font-size: 18px;
-              }
-              p {
-                color: var(--primary-text-color);
-              }
-            `}
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default HomepageVideo;
diff --git a/src/pages/index.js b/src/pages/index.js
index 504355737cb..b10d8a5d58e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { navigate } from '@reach/router';
 import { css } from '@emotion/react';
 import { graphql } from 'gatsby';
@@ -10,76 +10,22 @@ import {
   useInstrumentedHandler,
   useTranslation,
   useTessen,
-  useLoggedIn,
 } from '@newrelic/gatsby-theme-newrelic';
 import HomepageBanner from '../components/HomepageBanner';
 import { DocTile } from '../components/DocTile';
 import FindYourQuickStart from '../components/FindYourQuickstart';
-import {
-  ToggleSelector,
-  ToggleView,
-  ToggleViewContext,
-  TOGGLE_VIEWS,
-} from '../components/ToggleView';
-import HomepageVideo from '../components/HomepageVideo';
 import ErrorBoundary from '../components/ErrorBoundary';
 
-const SAVED_TOGGLE_VIEW_KEY = 'docs-website/homepage-selected-view';
-
 const HomePage = ({ data }) => {
   const {
     site: { layout },
     allMarkdownRemark: { edges: whatsNewPosts },
   } = data;
   const tessen = useTessen();
-  const { loggedIn } = useLoggedIn();
   const [searchTerm, setSearchTerm] = useState('');
-  const hasToggled = useRef(false);
-  const [currentView, setCurrentView] = useState(TOGGLE_VIEWS.newUserView);
-  const [showTooltip, setShowTooltip] = useState(); // used for tooltip
-  const updateView = (id) => {
-    hasToggled.current = true;
-    setCurrentView(id);
-  };
 
   const { t } = useTranslation();
 
-  /* `useLocalStorage` hook doesn't work here because SSR doesn't have access to
-   * localStorage, so when it gets to the client, the current tab is already set
-   * and the client doesn't know to update it.
-   *
-   */
-  useEffect(() => {
-    const storedToggleView = window.localStorage.getItem(SAVED_TOGGLE_VIEW_KEY);
-    const chooseViewByLoggedIn = loggedIn
-      ? TOGGLE_VIEWS.defaultView
-      : TOGGLE_VIEWS.newUserView;
-
-    if (!storedToggleView && loggedIn !== null) {
-      setCurrentView(chooseViewByLoggedIn);
-    }
-
-    /* prevents the tooltip from continuing to show on every render
-     * of the defaultview if it's triggered by the toggle buttons
-     * and only on initial page load to defaultview
-     */
-    if (loggedIn) {
-      setShowTooltip(storedToggleView !== TOGGLE_VIEWS.newUserView);
-    } else if (!loggedIn) {
-      setShowTooltip(storedToggleView === TOGGLE_VIEWS.defaultView);
-    }
-
-    if (storedToggleView) {
-      setCurrentView(storedToggleView);
-    }
-  }, [setCurrentView, loggedIn]);
-
-  useEffect(() => {
-    if (hasToggled.current) {
-      window.localStorage.setItem(SAVED_TOGGLE_VIEW_KEY, currentView);
-    }
-  }, [currentView]);
-
   const mobileBreakpoint = '450px';
 
   const latestWhatsNewPosts = whatsNewPosts.map((edge) => {
@@ -92,191 +38,152 @@ const HomePage = ({ data }) => {
 
   return (
     <ErrorBoundary eventName="homepage">
-      <ToggleViewContext.Provider value={[currentView, updateView]}>
+      <h1
+        css={css`
+          font-size: 3.5rem;
+          font-weight: 500;
+          line-height: 1;
+          @media screen and (max-width: ${mobileBreakpoint}) {
+            font-size: 1.5rem;
+          }
+        `}
+      >
+        {t('home.pageTitle')}
+      </h1>
+      <SearchInput
+        placeholder={t('home.search.placeholder')}
+        size={SearchInput.SIZE.LARGE}
+        value={searchTerm || ''}
+        iconName={SearchInput.ICONS.SEARCH}
+        isIconClickable
+        alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        onSubmit={() => {
+          tessen.track({
+            eventName: 'defaultViewSearch',
+            category: 'SearchInput',
+          });
+          navigate(`?q=${searchTerm || ''}`);
+        }}
+        css={css`
+          @media screen and (max-width: ${mobileBreakpoint}) {
+            margin-bottom: 1rem;
+          }
+        `}
+      />
+      <div
+        css={css`
+          margin-top: 1rem;
+          width: 40%;
+          display: flex;
+          width: 100%;
+          flex-wrap: wrap;
+          a {
+            margin-left: 0.75rem;
+          }
+          @media screen and (max-width: ${mobileBreakpoint}) {
+            display: none;
+          }
+        `}
+      >
+        <p>{t('home.search.popularSearches.title')}: </p>
+        <Link to="?q=nrql">{t('home.search.popularSearches.options.0')}</Link>
+        <Link to="?q=logs">{t('home.search.popularSearches.options.1')}</Link>
+        <Link to="?q=alert">{t('home.search.popularSearches.options.2')}</Link>
+        <Link to="?q=best practices">
+          {t('home.search.popularSearches.options.3')}
+        </Link>
+        <Link to="?q=kubernetes">
+          {t('home.search.popularSearches.options.4')}
+        </Link>
+      </div>
+      <HomepageBanner />
+      <Section
+        layout={layout}
+        css={css`
+          border: none;
+          background: var(--tertiary-background-color);
+        `}
+      >
+        <SectionTitle title={t('home.popularDocs.title')} />
         <div
           css={css`
             display: grid;
-            gap: 1rem;
-            justify-content: space-between;
-            grid-template-columns: 1fr max-content;
-            align-items: center;
-            @media (max-width: 920px) {
-              grid-template-columns: 1fr auto;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 1rem;
+            counter-reset: welcome-tile;
+            flex: 2;
+            align-self: flex-start;
+            @media screen and (max-width: 1500px) {
+              align-self: auto;
+            }
+            @media screen and (max-width: 1050px) {
+              grid-template-columns: 1fr;
+            }
+            @media screen and (max-width: 760px) {
+              grid-template-columns: repeat(3, 1fr);
+            }
+            @media screen and (max-width: 650px) {
+              grid-template-columns: 1fr;
             }
           `}
         >
-          <ToggleSelector
-            showTooltip={showTooltip}
-            css={css`
-              justify-self: end;
-              @media screen and (max-width: 760px) {
-                display: none;
-              }
-            `}
-          />
-        </div>
-        <ToggleView id={TOGGLE_VIEWS.newUserView}>
-          <HomepageVideo />
-        </ToggleView>
-        <ToggleView id={TOGGLE_VIEWS.defaultView}>
-          <h1
-            css={css`
-              font-size: 3.5rem;
-              font-weight: 500;
-              line-height: 1;
-              @media screen and (max-width: ${mobileBreakpoint}) {
-                font-size: 1.5rem;
-              }
-            `}
+          <DocTile
+            label={{ text: 'Get started', color: '#F4CBE7' }}
+            path="/docs/apm/new-relic-apm/getting-started/introduction-apm"
           >
-            {t('home.pageTitle')}
-          </h1>
-          <SearchInput
-            placeholder={t('home.search.placeholder')}
-            size={SearchInput.SIZE.LARGE}
-            value={searchTerm || ''}
-            iconName={SearchInput.ICONS.SEARCH}
-            isIconClickable
-            alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            onSubmit={() => {
-              tessen.track({
-                eventName: 'defaultViewSearch',
-                category: 'SearchInput',
-              });
-              navigate(`?q=${searchTerm || ''}`);
-            }}
-            css={css`
-              @media screen and (max-width: ${mobileBreakpoint}) {
-                margin-bottom: 1rem;
-              }
-            `}
-          />
-          <div
-            css={css`
-              margin-top: 1rem;
-              width: 40%;
-              display: flex;
-              width: 100%;
-              flex-wrap: wrap;
-              a {
-                margin-left: 0.75rem;
-              }
-              @media screen and (max-width: ${mobileBreakpoint}) {
-                display: none;
-              }
-            `}
+            {t('home.popularDocs.t1.title')}
+          </DocTile>
+          <DocTile
+            label={{ text: 'Get started', color: '#F4CBE7' }}
+            path="/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/"
           >
-            <p>{t('home.search.popularSearches.title')}: </p>
-            <Link to="?q=nrql">
-              {t('home.search.popularSearches.options.0')}
-            </Link>
-            <Link to="?q=logs">
-              {t('home.search.popularSearches.options.1')}
-            </Link>
-            <Link to="?q=alert">
-              {t('home.search.popularSearches.options.2')}
-            </Link>
-            <Link to="?q=best practices">
-              {t('home.search.popularSearches.options.3')}
-            </Link>
-            <Link to="?q=kubernetes">
-              {t('home.search.popularSearches.options.4')}
-            </Link>
-          </div>
-          <HomepageBanner />
-          <Section
-            layout={layout}
-            css={css`
-              border: none;
-              background: var(--tertiary-background-color);
-            `}
+            {t('home.popularDocs.t2.title')}
+          </DocTile>
+          <DocTile
+            label={{ text: 'Get started', color: '#F4CBE7' }}
+            path="/docs/synthetics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring/"
           >
-            <SectionTitle title={t('home.popularDocs.title')} />
-            <div
-              css={css`
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                grid-gap: 1rem;
-                counter-reset: welcome-tile;
-                flex: 2;
-                align-self: flex-start;
-                @media screen and (max-width: 1500px) {
-                  align-self: auto;
-                }
-                @media screen and (max-width: 1050px) {
-                  grid-template-columns: 1fr;
-                }
-                @media screen and (max-width: 760px) {
-                  grid-template-columns: repeat(3, 1fr);
-                }
-                @media screen and (max-width: 650px) {
-                  grid-template-columns: 1fr;
-                }
-              `}
-            >
-              <DocTile
-                label={{ text: 'Get started', color: '#F4CBE7' }}
-                path="/docs/apm/new-relic-apm/getting-started/introduction-apm"
-              >
-                {t('home.popularDocs.t1.title')}
-              </DocTile>
-              <DocTile
-                label={{ text: 'Get started', color: '#F4CBE7' }}
-                path="/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/"
-              >
-                {t('home.popularDocs.t2.title')}
-              </DocTile>
-              <DocTile
-                label={{ text: 'Get started', color: '#F4CBE7' }}
-                path="/docs/synthetics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring/"
-              >
-                {t('home.popularDocs.t3.title')}
-              </DocTile>
-            </div>
-          </Section>
-          <Section layout={layout}>
-            <SectionTitle title={t('home.whatsNew.title')} />
-            <div
-              css={css`
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                grid-gap: 1rem;
-                counter-reset: welcome-tile;
-                flex: 2;
-                align-self: flex-start;
-                @media screen and (max-width: 1500px) {
-                  align-self: auto;
-                }
-                @media screen and (max-width: 1050px) {
-                  grid-template-columns: 1fr;
-                }
+            {t('home.popularDocs.t3.title')}
+          </DocTile>
+        </div>
+      </Section>
+      <Section layout={layout}>
+        <SectionTitle title={t('home.whatsNew.title')} />
+        <div
+          css={css`
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 1rem;
+            counter-reset: welcome-tile;
+            flex: 2;
+            align-self: flex-start;
+            @media screen and (max-width: 1500px) {
+              align-self: auto;
+            }
+            @media screen and (max-width: 1050px) {
+              grid-template-columns: 1fr;
+            }
 
-                @media screen and (max-width: 760px) {
-                  grid-template-columns: repeat(3, 1fr);
-                }
+            @media screen and (max-width: 760px) {
+              grid-template-columns: repeat(3, 1fr);
+            }
 
-                @media screen and (max-width: 650px) {
-                  grid-template-columns: 1fr;
-                }
-              `}
-            >
-              {latestWhatsNewPosts.map((post) => (
-                <DocTile
-                  key={post.title}
-                  date={post.releaseDate}
-                  path={post.path}
-                >
-                  {post.title}
-                </DocTile>
-              ))}
-            </div>
-          </Section>
-          <Section layout={layout}>
-            <FindYourQuickStart />
-          </Section>
-        </ToggleView>
-      </ToggleViewContext.Provider>
+            @media screen and (max-width: 650px) {
+              grid-template-columns: 1fr;
+            }
+          `}
+        >
+          {latestWhatsNewPosts.map((post) => (
+            <DocTile key={post.title} date={post.releaseDate} path={post.path}>
+              {post.title}
+            </DocTile>
+          ))}
+        </div>
+      </Section>
+      <Section layout={layout}>
+        <FindYourQuickStart />
+      </Section>
     </ErrorBoundary>
   );
 };

From 6556b135b9dbecd6afca6ab923bac252b76f2ce5 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:34:36 -0600
Subject: [PATCH 2/8] chore: remove unused translation text

---
 src/i18n/translations/en/translation.json | 85 +--------------------
 src/i18n/translations/jp/translation.json | 77 +------------------
 src/i18n/translations/kr/translation.json | 91 +----------------------
 3 files changed, 6 insertions(+), 247 deletions(-)

diff --git a/src/i18n/translations/en/translation.json b/src/i18n/translations/en/translation.json
index 514b3d5a4e8..4bb865a0b40 100644
--- a/src/i18n/translations/en/translation.json
+++ b/src/i18n/translations/en/translation.json
@@ -22,73 +22,7 @@
   "whatsNew": {
     "title": "What's new in New Relic"
   },
-  "homepageVideo": {
-    "header": "New Relic docs",
-    "p1": "Welcome! We're here to help you monitor, debug, and improve your entire stack—with data.",
-    "p2": "If you're ready to jump in, search or browse the docs. Or create a New Relic account for free. Need some inspiration first? Check out this intro video. Let's begin!"
-  },
   "home": {
-    "personas": {
-      "default": {
-        "1": "Frontend devs",
-        "2": "Back-end devs",
-        "3": "Dev-ops and SREs"
-      },
-      "active": {
-        "1": "Frontend developers",
-        "2": "Back-end developers",
-        "3": "Dev-ops and SREs"
-      },
-      "blurbs": {
-        "1": "Click the tiles below to learn how you can use New Relic to monitor the performance of your application, troubleshoot frontend issues your users face, and monitor your site's core web vitals.",
-        "2": "Click the tiles below to learn how you can use New Relic to monitor the performance of your infrastructure, monitor your application, and manage all your logs.",
-        "3": "Click the tiles below to learn how you can use New Relic to monitor your infrastructure, track your changes and deployments, and define service levels between teams."
-      },
-      "tiles": {
-        "1": [
-          {
-            "label": "Monitor your apps",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "Monitor user experience",
-            "url": "https://docs.newrelic.com/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/"
-          },
-          {
-            "label": "Measure core web vitals",
-            "url": "https://docs.newrelic.com/docs/browser/new-relic-browser/guides/guide-to-monitoring-core-web-vitals/"
-          }
-        ],
-        "2": [
-          {
-            "label": "Monitor your infrastructure",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "Monitor your apps",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "Manage your logs",
-            "url": "https://docs.newrelic.com/docs/logs/get-started/get-started-log-management/"
-          }
-        ],
-        "3": [
-          {
-            "label": "Monitor your infrastructure",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "Track changes and deployments",
-            "url": "https://docs.newrelic.com/docs/change-tracking/change-tracking-introduction/"
-          },
-          {
-            "label": "Define SLIs and SLOs",
-            "url": "https://docs.newrelic.com/docs/service-level-management/create-slm/"
-          }
-        ]
-      }
-    },
     "banner": {
       "title": "Getting started",
       "intro": {
@@ -97,20 +31,9 @@
       "button1": "Create a free account",
       "button2": "Install New Relic"
     },
-    "toggle": {
-      "newUserView": "New user view",
-      "defaultView": "Default view",
-      "tooltip": "<0>👋 Hey there! Are you a new user? </0><1> Check out our <1>new</1> introduction view here! </1>"
-    },
     "search": {
       "popularSearches": {
-        "options": [
-          "NRQL",
-          "logs",
-          "alert",
-          "best practices",
-          "Kubernetes"
-        ],
+        "options": ["NRQL", "logs", "alert", "best practices", "Kubernetes"],
         "title": "Popular searches"
       },
       "placeholder": "What are you looking for?"
@@ -157,10 +80,6 @@
     "submitError": "An error occurred trying to create your account. Please try again later.",
     "terms": "100 GB + 1 user free. Forever. No credit card required.<1 />By signing up you're agreeing to <4>Terms of Service</4> and <8>Services Privacy Notice.</8>"
   },
-  "personaSignup": {
-    "terms": "100 GB + 1 user free. Forever. No credit card required.",
-    "conditions": "By signing up you're agreeing to <2>Terms of Service</2> and <6>Services Privacy Notice.</6>"
-  },
   "installFeedback": {
     "question": "Did this doc help with your installation?",
     "prompt": "Tell us how can we do this better.",
@@ -246,4 +165,4 @@
     "blurbLineTwo": "It takes just a few minutes!",
     "heading": "Ready to try APM?"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/translations/jp/translation.json b/src/i18n/translations/jp/translation.json
index 1859c22c490..d38cc05b81e 100644
--- a/src/i18n/translations/jp/translation.json
+++ b/src/i18n/translations/jp/translation.json
@@ -22,73 +22,7 @@
   "whatsNew": {
     "title": "New Relicの新機能"
   },
-  "homepageVideo": {
-    "header": "New Relicドキュメント",
-    "p1": "ようこそ！データを使用して、スタック全体のモニター、デバッグ、改善のお手伝いをします。",
-    "p2": "ジャンプする準備ができたら、ドキュメントを検索または参照してください。または、New Relicアカウントを無料で作成してください。まずインスピレーションが必要ですか？この紹介ビデオをご覧ください。始めましょう！"
-  },
   "home": {
-    "personas": {
-      "default": {
-        "1": "フロントエンド開発",
-        "2": "バックエンド開発",
-        "3": "開発オペレーションとSRE"
-      },
-      "active": {
-        "1": "フロントエンド開発者",
-        "2": "バックエンド開発者",
-        "3": "開発オペレーションとSRE"
-      },
-      "blurbs": {
-        "1": "以下のタイルをクリックして、New Relicを使用したアプリケーションのパフォーマンス監視、ユーザーが直面するフロントエンド問題のトラブルシューティング、サイトのコアウェブバイタルの監視を行う方法をご覧ください。",
-        "2": "以下のタイルをクリックして、New Relicを使用したインフラストラクチャのパフォーマンス監視、アプリケーション監視、すべてのログの管理方法をご覧ください。",
-        "3": "以下のタイルをクリックして、New Relicを使用したインフラストラクチャの監視、変更とデプロイメントの追跡、チーム間のサービスレベルの定義方法をご覧ください。"
-      },
-      "tiles": {
-        "1": [
-          {
-            "label": "アプリケーションの監視",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "ユーザーエクスペリエンスの監視",
-            "url": "https://docs.newrelic.com/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/"
-          },
-          {
-            "label": "コアウェブバイタルの測定",
-            "url": "https://docs.newrelic.com/docs/browser/new-relic-browser/guides/guide-to-monitoring-core-web-vitals/"
-          }
-        ],
-        "2": [
-          {
-            "label": "インフラストラクチャの監視",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "アプリケーションの監視",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "ログの管理",
-            "url": "https://docs.newrelic.com/docs/logs/get-started/get-started-log-management/"
-          }
-        ],
-        "3": [
-          {
-            "label": "インフラストラクチャの監視",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "変更とデプロイメントの追跡",
-            "url": "https://docs.newrelic.com/docs/change-tracking/change-tracking-introduction/"
-          },
-          {
-            "label": "SLIとSLOの定義",
-            "url": "https://docs.newrelic.com/docs/service-level-management/create-slm/"
-          }
-        ]
-      }
-    },
     "banner": {
       "title": "はじめに",
       "intro": {
@@ -97,11 +31,6 @@
       "button1": "無料アカウントを作成",
       "button2": "New Relicのインストール"
     },
-    "toggle": {
-      "newUserView": "ユーザーガイドビュー",
-      "defaultView": "デフォルトビュー",
-      "tooltip": "<0>👋 こんにちは！新規ユーザーですか？</0><1><1>新しい</1>ユーザーガイドはこちらからご覧ください。</1>"
-    },
     "search": {
       "popularSearches": {
         "options": [
@@ -157,10 +86,6 @@
     "submitError": "アカウントの作成中にエラーが発生しました。後でもう一度お試しください。",
     "terms": "100GB + 1ユーザー無料。期間無制限です。クレジットカードは不要です。<1/>サインアップすると、<4>利用規約</4>および<8>サービスプライバシー通知</8>に同意したことになります。"
   },
-  "personaSignup": {
-    "terms": "100GB + 1ユーザー無料。期間無制限です。クレジットカードは不要です。",
-    "conditions": "サインアップすると、<2>利用規約</2>および<6>サービスプライバシー通知に同意したことになります。</6>"
-  },
   "installFeedback": {
     "question": "このドキュメントはインストールで役立ちましたか。",
     "prompt": "これをうまく進めるために何ができるかをお話しください。",
@@ -244,4 +169,4 @@
     "blurbLineTwo": "数分で完了します！",
     "heading": "単一の統合モニタリングソリューションで時間を節約したいですか？"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/translations/kr/translation.json b/src/i18n/translations/kr/translation.json
index f145ed85f33..44ca5d84b6a 100644
--- a/src/i18n/translations/kr/translation.json
+++ b/src/i18n/translations/kr/translation.json
@@ -22,73 +22,7 @@
   "whatsNew": {
     "title": "뉴렐릭 새로워진 사항"
   },
-  "homepageVideo": {
-    "header": "뉴렐릭 문서",
-    "p1": "환영합니다! 데이터를 사용해 전체 스택을 모니터링, 디버깅 및 개선하는 방법을 확인해보십시오.",
-    "p2": "시작할 준비가 되셨다면 지금 문서를 둘러보거나 무료로 뉴렐릭 계정을 생성하십시오. 먼저 개괄적인 정보를 살펴보길 원하시나요? 지금 이 소개 비디오를 먼저 확인해 보십시오."
-  },
   "home": {
-    "personas": {
-      "default": {
-        "1": "프론트엔드 개발자",
-        "2": "백엔드 개발자",
-        "3": "데브옵스 및 SRE"
-      },
-      "active": {
-        "1": "프론트엔드 개발자",
-        "2": "백엔드 개발자",
-        "3": "데브옵스 및 SRE"
-      },
-      "blurbs": {
-        "1": "아래 타일을 클릭하면 뉴렐릭을 사용해 애플리케이션의 성능을 모니터링하고, 사용자가 직면하는 프런트 엔드 문제를 해결하며, 사이트의 코어 웹 바이탈을 모니터링하는 방법을 확인하실 수 있습니다.",
-        "2": "아래 타일을 클릭하면 뉴렐릭을 사용해 인프라의 성능과 애플리케이션을 모니터링하고, 모든 로그를 효과적으로 관리하는 방법을 확인하실 수 있습니다.",
-        "3": "아래 타일을 클릭하면 뉴렐릭을 사용하여 인프라를 모니터링하고, 변경 사항과 배포를 추적하며, 팀 간에 서비스 수준을 정의하는 방법을 확인하실 수 있습니다."
-      },
-      "tiles": {
-        "1": [
-          {
-            "label": "앱 모니터링",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "사용자 경험 모니터링",
-            "url": "https://docs.newrelic.com/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/"
-          },
-          {
-            "label": "코어 웹 바이탈 측정",
-            "url": "https://docs.newrelic.com/docs/browser/new-relic-browser/guides/guide-to-monitoring-core-web-vitals/"
-          }
-        ],
-        "2": [
-          {
-            "label": "인프라 모니터링",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "앱 모니터링",
-            "url": "https://docs.newrelic.com/introduction-apm/"
-          },
-          {
-            "label": "로그 관리",
-            "url": "https://docs.newrelic.com/docs/logs/get-started/get-started-log-management/"
-          }
-        ],
-        "3": [
-          {
-            "label": "인프라 모니터링",
-            "url": "https://docs.newrelic.com/docs/infrastructure/infrastructure-monitoring/get-started/get-started-infrastructure-monitoring/"
-          },
-          {
-            "label": "변경 및 배포 모니터링",
-            "url": "https://docs.newrelic.com/docs/change-tracking/change-tracking-introduction/"
-          },
-          {
-            "label": "SLI 및 SLO 정의",
-            "url": "https://docs.newrelic.com/docs/service-level-management/create-slm/"
-          }
-        ]
-      }
-    },
     "banner": {
       "title": "시작하기",
       "intro": {
@@ -97,20 +31,9 @@
       "button1": "무료 계정 생성",
       "button2": "뉴렐릭 설치"
     },
-    "toggle": {
-      "newUserView": "사용자 가이드 보기",
-      "defaultView": "기본 뷰",
-      "tooltip": "<0>👋 안녕하세요! 뉴렐릭이 처음이신가요?</0><1> 여기에서 <1>새로운</1> 사용자 가이드 뷰를 확인해보세요!</1>"
-    },
     "search": {
       "popularSearches": {
-        "options": [
-          "NRQL",
-          "로그",
-          "알림",
-          "모범 사례",
-          "쿠버네티스"
-        ],
+        "options": ["NRQL", "로그", "알림", "모범 사례", "쿠버네티스"],
         "title": "자주 찾는 검색"
       },
       "placeholder": "무엇을 찾고 계신가요?"
@@ -157,10 +80,6 @@
     "submitError": "계정을 생성하는 동안 오류가 발생했습니다. 나중에 다시 시도해주십시오.",
     "terms": "100 GB + 사용자 1명. 무료로 액세스하십시오. 신용카드는 필요하지 않습니다.<1/> 계정을 신청하시면 뉴렐릭의 <4>서비스 이용 약관</4> 및 <8>개인정보 취급방침</8>에 동의하는 것으로 간주합니다."
   },
-  "personaSignup": {
-    "terms": "100 GB + 사용자 1명. 무료로 액세스하십시오. 신용카드는 필요하지 않습니다.",
-    "conditions": "계정을 신청하시면 뉴렐릭의 <2>서비스 이용 약관</2> 및 <6>개인정보 취급방침</6>에 동의하는 것으로 간주합니다."
-  },
   "installFeedback": {
     "question": "이 문서가 설치하는데 도움이 되셨나요?",
     "prompt": "이 문서를 어떻게 더 개선할 수 있을까요?",
@@ -189,11 +108,7 @@
       "subTitle": "모든 서비스의 상태를 한눈에 확인"
     },
     "block2": {
-      "list": [
-        "메트릭, 이벤트, 트레이스",
-        "즉각적인 로그 관리",
-        "취약점 보고"
-      ],
+      "list": ["메트릭, 이벤트, 트레이스", "즉각적인 로그 관리", "취약점 보고"],
       "title": "APM 그 이상",
       "text": "뉴렐릭의 에이전트는 다음을 자동으로 계측하고 보고합니다."
     },
@@ -244,4 +159,4 @@
     "blurbLineTwo": "몇 분이면 가능합니다.",
     "heading": "단일 통합 모니터링 솔루션으로 시간을 절약하고 싶으신가요?"
   }
-}
\ No newline at end of file
+}

From 24a474130d1a656a8c1204c2b4e204840a56b033 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:35:32 -0600
Subject: [PATCH 3/8] chore: delete unused components

---
 src/components/ToggleView/ToggleSelector.js   | 172 ------------------
 src/components/ToggleView/ToggleView.js       |  30 ---
 .../ToggleView/ToggleViewContext.js           |   4 -
 src/components/ToggleView/index.js            |   3 -
 4 files changed, 209 deletions(-)
 delete mode 100644 src/components/ToggleView/ToggleSelector.js
 delete mode 100644 src/components/ToggleView/ToggleView.js
 delete mode 100644 src/components/ToggleView/ToggleViewContext.js
 delete mode 100644 src/components/ToggleView/index.js

diff --git a/src/components/ToggleView/ToggleSelector.js b/src/components/ToggleView/ToggleSelector.js
deleted file mode 100644
index 2827e950a53..00000000000
--- a/src/components/ToggleView/ToggleSelector.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/react';
-
-import {
-  useTessen,
-  useTranslation,
-  Trans,
-} from '@newrelic/gatsby-theme-newrelic';
-
-import { useToggleViewContext } from './ToggleViewContext';
-
-import Tooltip from '../Tooltip';
-import usePosition from '../../hooks/usePosition';
-
-export const TOGGLE_VIEWS = {
-  newUserView: 'new-user-view',
-  defaultView: 'default-view',
-};
-
-const mobileBreakpoint = '450px';
-
-const ToggleSelector = ({ className, showTooltip }) => {
-  const [currentView, setCurrentView] = useToggleViewContext();
-  const tessen = useTessen();
-  const { t } = useTranslation();
-  const [anchorRef, { left, top }] = usePosition();
-
-  return (
-    <div
-      css={css`
-        display: grid;
-        place-items: center;
-        margin-right: 1.5rem;
-      `}
-      className={className}
-      ref={anchorRef}
-    >
-      <div
-        css={css`
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          position: relative;
-
-          button {
-            font-size: 0.75rem;
-            border: none;
-            cursor: pointer;
-            padding: 8px 16px;
-          }
-
-          @media screen and (max-width: 800px) {
-            align-items: flex-end;
-            flex-direction: column;
-            justify-content: center;
-          }
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            display: none;
-          }
-        `}
-      >
-        {showTooltip && (
-          <Tooltip
-            css={css`
-              position: absolute;
-              top: calc(${top}px - var(--height) - 12px);
-              left: calc(${left}px - 64px);
-              & p:nth-of-type(2) {
-                font-size: 12px;
-              }
-            `}
-          >
-            <Trans i18nKey="home.toggle.tooltip">
-              <p>👋 Hey there! Are you a new user?</p>
-              <p>
-                Check out our <strong>new</strong> introduction view here!
-              </p>
-            </Trans>
-          </Tooltip>
-        )}
-        <button
-          type="button"
-          onClick={() => {
-            setCurrentView(TOGGLE_VIEWS.newUserView);
-            tessen.track({
-              eventName: 'homepageToggleClick',
-              category: 'HomepageToggle',
-              tabView: 'newUserView',
-            });
-          }}
-          css={css`
-            background-color: #eceded;
-            border-radius: 4px 0 0 4px;
-            padding: 8px 16px 8px 16px;
-            box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.25);
-            &:hover {
-              color: var(--primary-text-color);
-            }
-            .dark-mode & {
-              box-shadow: inset 0px 0px 2px rgba(255, 255, 255, 0.25);
-              background-color: var(--secondary-background-color);
-              color: var(--system-text-disabled-dark);
-            }
-
-            @media (max-width: 920px) {
-              border-radius: 4px;
-            }
-
-            ${currentView === TOGGLE_VIEWS.newUserView &&
-            css`
-              box-shadow: unset;
-              color: #293338;
-              background-color: var(--brand-button-primary-accent);
-              .dark-mode & {
-                color: #293338;
-                background-color: var(--brand-button-primary-accent);
-              }
-            `}
-          `}
-        >
-          {t('home.toggle.newUserView')}
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            setCurrentView(TOGGLE_VIEWS.defaultView);
-            tessen.track({
-              eventName: 'homepageToggleClick',
-              category: 'HomepageToggle',
-              tabView: 'defaultView',
-            });
-          }}
-          css={css`
-            background-color: #eceded;
-            border-radius: 0 4px 4px 0;
-            padding: 8px 16px 8px 16px;
-            color: #9ea5a9;
-            box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.25);
-            &:hover {
-              color: var(--primary-text-color);
-            }
-            .dark-mode & {
-              box-shadow: inset 0px 0px 2px rgba(255, 255, 255, 0.25);
-              background-color: var(--secondary-background-color);
-              color: var(--system-text-disabled-dark);
-            }
-
-            @media (max-width: 920px) {
-              border-radius: 4px;
-            }
-
-            ${currentView === TOGGLE_VIEWS.defaultView &&
-            css`
-              box-shadow: unset;
-              color: #293338;
-              background-color: var(--brand-button-primary-accent);
-              .dark-mode & {
-                color: #293338;
-                background-color: var(--brand-button-primary-accent);
-              }
-            `}
-          `}
-        >
-          {t('home.toggle.defaultView')}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default ToggleSelector;
diff --git a/src/components/ToggleView/ToggleView.js b/src/components/ToggleView/ToggleView.js
deleted file mode 100644
index f58eebdfcd7..00000000000
--- a/src/components/ToggleView/ToggleView.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
-
-import { useToggleViewContext } from './ToggleViewContext';
-
-const ToggleView = ({ children, id }) => {
-  const [currentView] = useToggleViewContext();
-
-  return (
-    <div
-      id={id}
-      css={
-        id !== currentView &&
-        css`
-          display: none;
-        `
-      }
-    >
-      {children}
-    </div>
-  );
-};
-
-ToggleView.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-};
-
-export default ToggleView;
diff --git a/src/components/ToggleView/ToggleViewContext.js b/src/components/ToggleView/ToggleViewContext.js
deleted file mode 100644
index 1944e9b6b20..00000000000
--- a/src/components/ToggleView/ToggleViewContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const ToggleViewContext = createContext();
-export const useToggleViewContext = () => useContext(ToggleViewContext);
diff --git a/src/components/ToggleView/index.js b/src/components/ToggleView/index.js
deleted file mode 100644
index e238da52737..00000000000
--- a/src/components/ToggleView/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ToggleSelector, TOGGLE_VIEWS } from './ToggleSelector';
-export { default as ToggleView } from './ToggleView';
-export { ToggleViewContext } from './ToggleViewContext';

From e0ac6803557aae06f93331051b310c9fff863943 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:37:36 -0600
Subject: [PATCH 4/8] chore: remove hideNav logic

---
 gatsby-node.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 9077182af52..5be45432cad 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -99,7 +99,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
               type
               subject
               redirects
-              hideNavs
             }
           }
         }
@@ -352,7 +351,6 @@ exports.createSchemaCustomization = (
   type Frontmatter {
     isFeatured: Boolean
     translationType: String
-    hideNavs: Boolean
     eolDate: String
     downloadLink: String
     signupBanner: SignupBanner
@@ -456,10 +454,6 @@ exports.createResolvers = ({ createResolvers }) => {
             ? source.translationType
             : null,
       },
-      hideNavs: {
-        resolve: (source) =>
-          hasOwnProperty(source, 'hideNavs') ? source.hideNavs : null,
-      },
       eolDate: {
         resolve: (source) =>
           hasOwnProperty(source, 'eolDate') ? source.eolDate : null,
@@ -573,7 +567,7 @@ const createPageFromNode = (
   defer = false
 ) => {
   const {
-    frontmatter: { subject: agentName, hideNavs },
+    frontmatter: { subject: agentName },
     fields: { fileRelativePath, slug },
   } = node;
 
@@ -621,7 +615,6 @@ const createPageFromNode = (
       context: {
         ...context,
         fileRelativePath,
-        hideNavs,
         slug,
         slugRegex: `${slug}/.+/`,
         disableSwiftype,

From f7952fad3fc8a2af085cb15ccbddbb5db31caba3 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:38:02 -0600
Subject: [PATCH 5/8] chore: remove gatsby options for sourcing i18n MDX file
 as homepage content

---
 gatsby-node.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 5be45432cad..4812bab04c1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -495,20 +495,6 @@ exports.createResolvers = ({ createResolvers }) => {
 exports.onCreatePage = ({ page, actions }) => {
   const { createPage } = actions;
 
-  if (page.path === '/') {
-    page.context.quicklaunchSlug =
-      'docs/new-relic-solutions/get-started/quick-launch-guide';
-    page.context.layout = 'homepage';
-  }
-  if (page.path === '/jp/') {
-    page.context.quicklaunchSlug =
-      'jp/docs/new-relic-solutions/get-started/quick-launch-guide';
-  }
-  if (page.path === '/kr/') {
-    page.context.quicklaunchSlug =
-      'kr/docs/new-relic-solutions/get-started/quick-launch-guide';
-  }
-
   if (page.path.match(/404/)) {
     page.context.layout = 'basic';
   }

From 3afe147d3971ace7653a8fd0762435a052a1a1a9 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 10:38:13 -0600
Subject: [PATCH 6/8] chore: update webdriver tests

---
 scripts/actions/webdriver-desktop.mjs | 8 +++-----
 scripts/actions/webdriver-mobile.mjs  | 8 +-------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/scripts/actions/webdriver-desktop.mjs b/scripts/actions/webdriver-desktop.mjs
index 4aafb91590a..20d242d3923 100644
--- a/scripts/actions/webdriver-desktop.mjs
+++ b/scripts/actions/webdriver-desktop.mjs
@@ -94,11 +94,8 @@ const searchTest = async () => {
 
 const tileTest = async () => {
   const initialUrl = await driver.getCurrentUrl();
-  const [defaultViewTab] = await waitForXPath(
-    '//main//button[text()="Default view"]'
-  );
-  console.log('clicking Default view tab button');
-  await defaultViewTab.click();
+
+  console.log('clicking Homepage doctile');
 
   // Added this xpath for the scroll function.
   // for some reason, when running in headless mode the site
@@ -114,6 +111,7 @@ const tileTest = async () => {
     'arguments[0].scrollIntoView()',
     popularDocsSection
   );
+
   await firstDocTile.click();
   await driver.wait(
     until.stalenessOf(firstDocTile),
diff --git a/scripts/actions/webdriver-mobile.mjs b/scripts/actions/webdriver-mobile.mjs
index e45af618e60..8a86606abae 100644
--- a/scripts/actions/webdriver-mobile.mjs
+++ b/scripts/actions/webdriver-mobile.mjs
@@ -29,6 +29,7 @@ const main = async () => {
   // running on develop builds because the url is static
   // github workflow triggers on PRs to main
   const testUrl =
+    // TODO: search modal click breaks page on mobile localhost
     process.env.WEBDRIVER_ENV === 'main'
       ? 'https://docswebsitedevelop.gatsbyjs.io/'
       : 'http://localhost:8000/';
@@ -41,13 +42,6 @@ const main = async () => {
   await collapserTest();
   await searchTest();
 
-  // there's no way to switch the homepage view on mobile with the UI so this is a bit of a hack
-  // in synthetics, this step is being done within the tileTest,
-  // but it's not registering in time here
-  await driver.executeScript(
-    "localStorage.setItem('docs-website/homepage-selected-view', 'default-view')"
-  );
-
   await driver.get(testUrl);
   await tileTest();
   await navTest();

From 7d676866e133e14d23653054514c79a5d13b149c Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 13:20:42 -0600
Subject: [PATCH 7/8] chore: remove VSU page query

---
 src/pages/index.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index b10d8a5d58e..81adddb9519 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -211,18 +211,12 @@ HomePage.propTypes = {
   }),
 };
 export const pageQuery = graphql`
-  query($quicklaunchSlug: String!) {
+  query {
     site {
       layout {
         contentPadding
       }
     }
-    quicklaunch: mdx(slug: { eq: $quicklaunchSlug }) {
-      body
-      frontmatter {
-        title
-      }
-    }
     allMarkdownRemark(
       sort: {
         fields: [frontmatter___releaseDate, frontmatter___title]

From 5377359fad1a3cd6328b71af8ffeed5e6b17dc8c Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Wed, 6 Dec 2023 14:01:06 -0600
Subject: [PATCH 8/8] chore: remove experimental introduction-apm page

---
 gatsby-node.js                                |   6 +-
 .../IntroductionApm/FeaturedContent.js        | 248 ------------------
 .../IntroductionApm/SectionWrapper.js         |  11 -
 .../IntroductionApm/SmallStackedContent.js    |  41 ---
 .../IntroductionApm/StackedContent.js         |  69 -----
 src/components/IntroductionApm/TitleBlock.js  | 133 ----------
 src/components/IntroductionApm/index.js       |   5 -
 src/i18n/translations/en/translation.json     |  69 -----
 src/i18n/translations/jp/translation.json     |  67 -----
 src/i18n/translations/kr/translation.json     |  63 -----
 src/nav/apm.yml                               |  24 +-
 src/pages/introduction-apm.js                 | 228 ----------------
 12 files changed, 15 insertions(+), 949 deletions(-)
 delete mode 100644 src/components/IntroductionApm/FeaturedContent.js
 delete mode 100644 src/components/IntroductionApm/SectionWrapper.js
 delete mode 100644 src/components/IntroductionApm/SmallStackedContent.js
 delete mode 100644 src/components/IntroductionApm/StackedContent.js
 delete mode 100644 src/components/IntroductionApm/TitleBlock.js
 delete mode 100644 src/components/IntroductionApm/index.js
 delete mode 100644 src/pages/introduction-apm.js

diff --git a/gatsby-node.js b/gatsby-node.js
index 4812bab04c1..350329284dd 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -306,10 +306,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 
-  // Redirect for VSU page to new Introduction to APM doc
+  // Redirect for old VSU Introduction to APM .js doc
   createRedirect({
-    fromPath: '/docs/apm/new-relic-apm/getting-started/introduction-apm/',
-    toPath: '/introduction-apm',
+    fromPath: '/introduction-apm',
+    toPath: '/docs/apm/new-relic-apm/getting-started/introduction-apm/',
     isPermanent: false,
     redirectInBrowser: true,
   });
diff --git a/src/components/IntroductionApm/FeaturedContent.js b/src/components/IntroductionApm/FeaturedContent.js
deleted file mode 100644
index a42826dc4ea..00000000000
--- a/src/components/IntroductionApm/FeaturedContent.js
+++ /dev/null
@@ -1,248 +0,0 @@
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import VisibilitySensor from 'react-visibility-sensor';
-import { animated, useTrail } from 'react-spring';
-import { useMedia } from 'react-use';
-
-import { Icon, useTessen } from '@newrelic/gatsby-theme-newrelic';
-
-export const FeaturedContent = ({
-  alt,
-  category,
-  children,
-  lineIcon,
-  lineIconOnly,
-  img,
-  list,
-  offset = 0,
-  subTitle,
-  text,
-  title,
-}) => {
-  const isMobileScreen = useMedia('(max-width: 1240px)');
-  const [visible, setVisible] = useState(isMobileScreen);
-
-  const tessen = useTessen();
-
-  const updateVisibility = (isVisible) => {
-    if (isVisible) {
-      setVisible(true);
-
-      // Only the Sections with categories are being animated/tracked.
-      if (category) {
-        tessen.track({
-          eventName: 'apmIntroVisiblityTrigger',
-          category,
-          path: location.pathname,
-        });
-      }
-    }
-  };
-
-  const spring = useTrail(6, {
-    config: { mass: 1, tension: 400, friction: 40 },
-    from: {
-      opacity: 0,
-      y: '6%',
-    },
-    to: {
-      opacity: visible ? 1 : 0,
-      y: visible ? '0%' : '6%',
-    },
-  });
-
-  return (
-    <VisibilitySensor
-      onChange={isMobileScreen ? null : updateVisibility}
-      partialVisibility={offset && true}
-      offset={{ bottom: offset }}
-    >
-      <Container addMargin={lineIcon}>
-        {!lineIconOnly && (
-          <>
-            <TextContainer separator={title}>
-              {title && <Title>{title}</Title>}
-              {subTitle && (
-                <SubTitle as={animated.h2} style={spring[1]}>
-                  {subTitle}
-                </SubTitle>
-              )}
-              {text && text.map((paragraph, i) => <p key={i}>{paragraph}</p>)}
-              {list && (
-                <ListWrapper>
-                  {list.map((item, i) => (
-                    <ListItem key={i} as={animated.div} style={spring[3 + i]}>
-                      <Icon
-                        name="fe-check"
-                        css={css`
-                          margin-right: 8px;
-                          width: 36px;
-                        `}
-                      />
-                      <li>{item}</li>
-                    </ListItem>
-                  ))}
-                </ListWrapper>
-              )}
-            </TextContainer>
-            {img && (
-              <ImageWrapper
-                separator={title}
-                as={animated.div}
-                style={spring[2]}
-              >
-                <img alt={alt} src={img} />
-              </ImageWrapper>
-            )}
-          </>
-        )}
-        {lineIcon && (
-          <>
-            <Spacer>
-              <IconBorder>
-                <LineIconWrapper as={animated.div} style={spring[0]}>
-                  <LineIcon
-                    name={lineIcon}
-                    css={css`
-                      width: 36px;
-                    `}
-                  />
-                </LineIconWrapper>
-              </IconBorder>
-              <GreenLine visible={visible} />
-            </Spacer>
-            {children}
-          </>
-        )}
-      </Container>
-    </VisibilitySensor>
-  );
-};
-
-const Container = styled.div`
-cubic-bezier(0, 0.3, 0.4, 1);
-display: flex;
-margin-left: ${(p) => (p.addMargin ? '24px' : '0')};
-padding: 48px 40px;
-position: relative;
-width: 100%;
-
-&.no-animate {
-  opacity: 1;
-}
-
-  @media screen and (max-width: 1240px) {
-    flex-direction: column;
-    margin-left: 0;
-    margin-top: 0;
-    padding: 0;
-  }
-`;
-
-const GreenLine = styled.div`
-  background-color: var(--brand-button-primary-accent);
-  height: ${(p) => (p.visible ? '100%' : '0px')};
-  position: absolute;
-  top: 0;
-  transition: height 750ms;
-  width: 2px;
-  z-index: 0;
-
-  @media screen and (max-width: 1240px) {
-    display: none;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  ${(p) => p.separator && `padding-left: 32px`};
-  width: 30%;
-
-  img {
-    object-fit: contain;
-    width: 100%;
-  }
-
-  @media screen and (max-width: 1240px) {
-    width: 100%;
-  }
-`;
-
-const IconBorder = styled.div`
-  background: var(--primary-background-color);
-  padding: 1rem 0;
-  z-index: 10;
-`;
-
-const LineIcon = styled(Icon)`
-  color: var(--secondary-text-color);
-  height: 33px;
-  width: 33px;
-`;
-
-const LineIconWrapper = styled.div`
-  align-items: center;
-  background: var(--primary-background-color);
-  border: 4px solid var(--secondary-text-color);
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-`;
-
-const ListItem = styled.li`
-  align-items: center;
-  display: flex;
-  margin-bottom: 16px;
-`;
-
-const ListWrapper = styled.ul`
-  list-style-type: none;
-  padding: 0;
-`;
-
-const SubTitle = styled.h2`
-  font-size: 28px;
-  margin-bottom: 32px;
-`;
-
-const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 36px 0;
-  padding-right: ${(p) => (p.separator ? `32px` : `16px`)};
-  width: 66%;
-
-  @media screen and (max-width: 1240px) {
-    border: 0;
-    padding: 0;
-    width: 100%;
-  }
-`;
-
-const Spacer = styled.div`
-  align-items: center;
-  background: var(--primary-background-color);
-  bottom: 0;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  left: -48px;
-  padding: 12px;
-  position: absolute;
-
-  @media screen and (max-width: 1240px) {
-    display: none;
-  }
-`;
-
-const Title = styled.h1`
-  font-size: 44px;
-
-  @media screen and (max-width: 1240px) {
-    font-size: 32px;
-  }
-`;
diff --git a/src/components/IntroductionApm/SectionWrapper.js b/src/components/IntroductionApm/SectionWrapper.js
deleted file mode 100644
index 5a031a563de..00000000000
--- a/src/components/IntroductionApm/SectionWrapper.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-export const SectionWrapper = ({ children, column }) => (
-  <Wrapper column={column}>{children}</Wrapper>
-);
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: ${(p) => (p.column ? `column` : `row`)};
-`;
diff --git a/src/components/IntroductionApm/SmallStackedContent.js b/src/components/IntroductionApm/SmallStackedContent.js
deleted file mode 100644
index 54b7199a2ad..00000000000
--- a/src/components/IntroductionApm/SmallStackedContent.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-export const SmallStackedContent = ({ alt, img, subTitle, text }) => (
-  <Container>
-    <ImageWrapper>
-      <img alt={alt} src={img} />
-    </ImageWrapper>
-    <SubTitle>{subTitle}</SubTitle>
-    <Text>{text}</Text>
-  </Container>
-);
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 32px;
-`;
-
-const ImageWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin: 32px 0;
-
-  img {
-    object-fit: contain;
-    width: 100%;
-  }
-`;
-
-const SubTitle = styled.h2`
-  font-size: 18px;
-  text-align: center;
-`;
-
-const Text = styled.p`
-  font-size: 14px;
-  text-align: center;
-`;
diff --git a/src/components/IntroductionApm/StackedContent.js b/src/components/IntroductionApm/StackedContent.js
deleted file mode 100644
index 0acf9f4dd30..00000000000
--- a/src/components/IntroductionApm/StackedContent.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-import { Icon } from '@newrelic/gatsby-theme-newrelic';
-
-export const StackedContent = ({ alt, img, list, subTitle }) => (
-  <Container>
-    {subTitle && <SubTitle>{subTitle}</SubTitle>}
-    <ImageWrapper>
-      <img alt={alt} src={img} />
-    </ImageWrapper>
-    {list && (
-      <ListWrapper>
-        {list.map((item, i) => (
-          <ListItemWrapper key={i}>
-            <Icon
-              name="fe-check"
-              css={css`
-                margin-right: 8px;
-                width: 36px;
-              `}
-            />
-            <ListItem>{item}</ListItem>
-          </ListItemWrapper>
-        ))}
-      </ListWrapper>
-    )}
-  </Container>
-);
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0 40px;
-  width: 80%;
-`;
-
-const ListItem = styled.li`
-  width: 85%;
-`;
-
-const ListItemWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  margin-bottom: 16px;
-`;
-
-const ListWrapper = styled.ul`
-  list-style-type: none;
-  padding: 0;
-`;
-
-const ImageWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin: 32px 0;
-
-  img {
-    object-fit: contain;
-    width: 100%;
-  }
-`;
-
-const SubTitle = styled.h2`
-  font-size: 28px;
-  text-align: center;
-`;
diff --git a/src/components/IntroductionApm/TitleBlock.js b/src/components/IntroductionApm/TitleBlock.js
deleted file mode 100644
index 69f5dffff43..00000000000
--- a/src/components/IntroductionApm/TitleBlock.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { animated, useTrail } from 'react-spring';
-import VisibilitySensor from 'react-visibility-sensor';
-import { useMedia } from 'react-use';
-
-import { Icon, useTessen } from '@newrelic/gatsby-theme-newrelic';
-
-export const TitleBlock = ({ list, text, title }) => {
-  const isMobileScreen = useMedia('(max-width: 1240px)');
-  const [visible, setVisible] = useState(isMobileScreen);
-
-  const tessen = useTessen();
-
-  const updateVisibility = (isVisible) => {
-    if (isVisible) {
-      setVisible(true);
-
-      !visible &&
-        tessen.track({
-          eventName: 'apmIntroVisiblityTrigger',
-          category: 'MoreThanJustAPM',
-          path: location.pathname,
-        });
-    }
-  };
-
-  const spring = useTrail(5, {
-    from: {
-      opacity: 0,
-      y: '6%',
-    },
-    to: {
-      opacity: visible ? 1 : 0,
-      y: visible ? '0%' : '6%',
-    },
-  });
-
-  return (
-    <VisibilitySensor onChange={updateVisibility} offset={{ bottom: 200 }}>
-      <Container>
-        <TextContainer>
-          <Title as={animated.h1} style={spring[0]}>
-            {title}
-          </Title>
-          <Text as={animated.p} style={spring[1]}>
-            {text}
-          </Text>
-          <ListWrapper>
-            {list.map((item, i) => (
-              <ListItem as={animated.div} key={i} style={spring[2 + i]}>
-                <Icon
-                  name="fe-check"
-                  css={css`
-                    margin-right: 8px;
-                    width: 36px;
-                  `}
-                />
-                <li>{item}</li>
-              </ListItem>
-            ))}
-          </ListWrapper>
-        </TextContainer>
-        <GreenLine visible={visible} />
-      </Container>
-    </VisibilitySensor>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 48px 40px;
-  position: relative;
-  width: 100%;
-
-  @media screen and (max-width: 1240px) {
-    margin: 32px 0;
-    padding: 0;
-  }
-`;
-
-const GreenLine = styled.div`
-  background-color: var(--brand-button-primary-accent);
-  height: ${(p) => (p.visible ? '100%' : '0%')};
-  left: 17px;
-  position: absolute;
-  top: 0;
-  transition: height 750ms;
-  width: 2px;
-  z-index: 0;
-
-  @media screen and (max-width: 1240px) {
-    display: none;
-  }
-`;
-
-const ListItem = styled.div`
-  align-items: center;
-  display: flex;
-  margin-right: 8px;
-`;
-
-const ListWrapper = styled.ul`
-  display: flex;
-  justify-content: center;
-  list-style-type: none;
-  margin-top: 1rem;
-  padding: 0;
-
-  @media screen and (max-width: 1240px) {
-    flex-direction: column;
-  }
-`;
-
-const Text = styled.p`
-  font-size: 14px;
-  text-align: center;
-`;
-
-const TextContainer = styled.div`
-  width: 80%;
-`;
-
-const Title = styled.h1`
-  font-size: 44px;
-  text-align: center;
-
-  @media screen and (max-width: 1240px) {
-    font-size: 28px;
-  }
-`;
diff --git a/src/components/IntroductionApm/index.js b/src/components/IntroductionApm/index.js
deleted file mode 100644
index dad948235e5..00000000000
--- a/src/components/IntroductionApm/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { FeaturedContent } from './FeaturedContent';
-export { SectionWrapper } from './SectionWrapper';
-export { StackedContent } from './StackedContent';
-export { SmallStackedContent } from './SmallStackedContent';
-export { TitleBlock } from './TitleBlock';
diff --git a/src/i18n/translations/en/translation.json b/src/i18n/translations/en/translation.json
index 17922a5502c..74557d0a1b1 100644
--- a/src/i18n/translations/en/translation.json
+++ b/src/i18n/translations/en/translation.json
@@ -91,75 +91,6 @@
     "submitButton": "Submit comment",
     "submitMessage": "Thank you for your feedback!"
   },
-  "apm": {
-    "intro": {
-      "title": "Improve your app performance with APM",
-      "text": [
-        "Our application performance monitoring (APM) provides a unified monitoring service for all your apps and microservices.",
-        "Monitor everything from the hundreds of dependencies of a modern stack down to simple web-transaction times and throughput of an app. Keep track of your app's health in real-time by monitoring your metrics, events, logs, and transactions (MELT) through pre-built and custom dashboards."
-      ]
-    },
-    "block1": {
-      "list": [
-        "Observe the performance of your application by installing one of our agents - it takes just minutes!",
-        "Monitor the performance and health of all your services in one place",
-        "Pair New Relic with OpenTelemetry or other open source tools"
-      ],
-      "subTitle": "See the health of all your services in a glance"
-    },
-    "block2": {
-      "list": [
-        "Metrics, events, and traces",
-        "Instant log management",
-        "Vulnerability reporting"
-      ],
-      "title": "Monitor more than just your app's performance.",
-      "text": "Our agents automatically instrument and report:"
-    },
-    "block3": [
-      {
-        "list": [
-          "Ingest all your logs automatically with our APM agents",
-          "See all your logs in one place.",
-          "Find problems faster, reduce context switching."
-        ],
-        "subTitle": "Log Management"
-      },
-      {
-        "list": [
-          "Ingest common vulnerabilities and exposures (CVEs) automatically with our APM agents",
-          "Manage the security of your services with zero config.",
-          "Overcome security blindspots and collaborate on remediation by assigning CVEs."
-        ],
-        "subTitle": "Vulnerability management"
-      }
-    ],
-    "block4": {
-      "list": [
-        "Monitor latency, errors, traffic, saturation, and Apdex scores to identify bottlenecks and optimize performance for your users",
-        "Use prebuilt dashboards to identify and triage errors and other poor user experiences"
-      ],
-      "subTitle": "Ensure a great user experience"
-    },
-    "block5": [
-      {
-        "subTitle": "Proactive error management",
-        "text": "Is your early-access software still slightly unstable? Proactively monitor and solve those errors before they affect your users with errors inbox."
-      },
-      {
-        "subTitle": "Measure user satisfaction",
-        "text": "Do your users always comment on how speedy your web app is and you want to quantify that feedback? Measure their satisfaction by monitoring your Apdex at a glance."
-      },
-      {
-        "subTitle": "Automatic log ingest",
-        "text": "Need somewhere to store your logs? Our agents automatically ingest them."
-      },
-      {
-        "subTitle": "Track dependancies",
-        "text": "Does your modern stack has dozens or even hundreds of dependencies to keep track of? Easily track them with automap and external services."
-      }
-    ]
-  },
   "quickstartChooser": {
     "blurbLineOne": "Choose your app's language below to install an APM agent.",
     "blurbLineTwo": "It takes just a few minutes!",
diff --git a/src/i18n/translations/jp/translation.json b/src/i18n/translations/jp/translation.json
index d38cc05b81e..77f3a8ff085 100644
--- a/src/i18n/translations/jp/translation.json
+++ b/src/i18n/translations/jp/translation.json
@@ -97,73 +97,6 @@
     "submitButton": "コメントを送信",
     "submitMessage": "フィードバックを頂きありがとうございました。"
   },
-  "apm": {
-    "intro": {
-      "title": "完璧な可視性と分析を指先で簡単に",
-      "text": [
-        "当社のAPM(Application Performance Monitoring)は、貴社の全てのアプリケーションとマイクロサービスについて統合されたモニタリングサービスを提供します。",
-        "最新のスタックの数百もの依存関係から、アプリのシンプルなウェブトランザクションタイムとスループットまで、すべての項目を監視します。事前に構築されたカスタムダッシュボードを通じて、メトリクス、イベント、ログ、トランザクション（MELT）を監視することで、アプリの健全性をリアルタイムで追跡します。"
-      ]
-    },
-    "block1": {
-      "list": [
-        "エージェントをインストールしてアプリケーションのパフォーマンスを観察してください。数分で完了します！",
-        "すべてのサービスのパフォーマンスと健全性を1か所でモニタリング",
-        "New RelicをOpenTelemetryまたはその他のオープンソースツールとペアリング"
-      ],
-      "subTitle": "すべてのサービスの健全性を一目で確認"
-    },
-    "block2": {
-      "list": [
-        "メトリクス、イベント、トレース",
-        "即時的なログ管理",
-        "脆弱性報告"
-      ],
-      "title": "単なるAPMではありません",
-      "text": "当社のエージェントは、自動的に以下のインストゥルメントとレポートを行います。"
-    },
-    "block3": [
-      {
-        "list": [
-          "APMエージェントですべてのログを自動的にインジェスト",
-          "すべてのログを1か所で表示"
-        ],
-        "subTitle": "ログ管理"
-      },
-      {
-        "list": [
-          "当社のAPMエージェントを使用して、一般的な脆弱性とエクスポージャー（CVE）を自動的にインジェスト",
-          "ゼロ設定でサービスのセキュリティを管理"
-        ],
-        "subTitle": "脆弱性管理"
-      }
-    ],
-    "block4": {
-      "list": [
-        "レイテンシ、エラー、トラフィック、飽和度、Apdexスコアをモニタリングしてボトルネックを特定し、ユーザーのパフォーマンスを最適化",
-        "事前に構築されたダッシュボードを使用して、エラーやその他の不十分なユーザーエクスペリエンスを特定してトリアージ"
-      ],
-      "subTitle": "優れたユーザーエクスペリエンスを保証"
-    },
-    "block5": [
-      {
-        "subTitle": "先回りしたエラーの管理",
-        "text": "早期アクセスソフトウェアはまだ完全には安定していませんか？エラー受信トレイでユーザーに影響を与える前に、エラーをプロアクティブに監視して解決します。"
-      },
-      {
-        "subTitle": "ユーザー満足度の測定",
-        "text": "ウェブアプリの速度についてユーザーが常にコメントし、お客様はそのフィードバックを定量化していますか？Apdexを一目で監視して、満足度を測定します。"
-      },
-      {
-        "subTitle": "自動ログ取込み",
-        "text": "ログを保存する場所が必要ですか？当社のエージェントは自動的にそれらを取り込みます。"
-      },
-      {
-        "subTitle": "依存関係の追跡",
-        "text": "最新のスタックに追跡する数十、あるいは数百の依存関係がありますか？自動マップと外部サービスで簡単に追跡できます。"
-      }
-    ]
-  },
   "quickstartChooser": {
     "blurbLineOne": "ロゴをクリックしてAPMを開始してください。",
     "blurbLineTwo": "数分で完了します！",
diff --git a/src/i18n/translations/kr/translation.json b/src/i18n/translations/kr/translation.json
index 44ca5d84b6a..2581bfdecc4 100644
--- a/src/i18n/translations/kr/translation.json
+++ b/src/i18n/translations/kr/translation.json
@@ -91,69 +91,6 @@
     "submitButton": "의견 보내기",
     "submitMessage": "피드백을 주셔서 감사합니다!"
   },
-  "apm": {
-    "intro": {
-      "title": "간단하게 완전한 가시성 및 분석 확보",
-      "text": [
-        "애플리케이션 성능 모니터링의 약자인 APM은 모든 애플리케이션과 마이크로서비스에 대한 통합 모니터링 서비스를 제공합니다.",
-        "최신 스택의 수백여 개 종속성부터 간단한 웹 트랜잭션 시간과 앱 처리량에 이르기까지 모든 것을 모니터링할 수 있습니다. 사전 구축된 커스텀 대시보드를 통해 메트릭, 이벤트, 로그 및 트랜잭션을 모니터링하여 앱의 상태를 실시간으로 추적할 수 있습니다."
-      ]
-    },
-    "block1": {
-      "list": [
-        "에이전트를 설치하면 단 몇 분 내에 애플리케이션의 성능에 대한 가시성을 확보할 수 있습니다.",
-        "모든 서비스의 성능과 상태를 한 곳에서 모니터링",
-        "OpenTelemetry 또는 기타 오픈소스 툴과 뉴렐릭 결합"
-      ],
-      "subTitle": "모든 서비스의 상태를 한눈에 확인"
-    },
-    "block2": {
-      "list": ["메트릭, 이벤트, 트레이스", "즉각적인 로그 관리", "취약점 보고"],
-      "title": "APM 그 이상",
-      "text": "뉴렐릭의 에이전트는 다음을 자동으로 계측하고 보고합니다."
-    },
-    "block3": [
-      {
-        "list": [
-          "APM 에이전트로 모든 로그를 자동으로 인제스트",
-          "모든 로그를 한 곳에 확인"
-        ],
-        "subTitle": "로그 관리"
-      },
-      {
-        "list": [
-          "APM 에이전트를 사용해 일반적인 취약점 및 노출(CVE)을 자동으로 수집",
-          "구성이 필요하지 않은 서비스 보안 관리"
-        ],
-        "subTitle": "취약점 관리"
-      }
-    ],
-    "block4": {
-      "list": [
-        "레이턴시, 오류, 트래픽, 포화도 및 Apdex 점수를 모니터링하여 병목 지점을 식별하고 사용자 성능 최적화",
-        "사전 구축된 대시보드를 사용해 오류와 기타 열악한 사용자 경험을 파악 및 분류"
-      ],
-      "subTitle": "탁월한 사용자 경험 보장"
-    },
-    "block5": [
-      {
-        "subTitle": "선제적 오류 관리",
-        "text": "조기 액세스 소프트웨어가 아직도 조금 불안정한가요? 에러스 인박스(errors inbox) 기능을 사용하면 사용자에게 영향을 미치기 전에 이러한 오류를 선제적으로 모니터링하고 해결할 수 있습니다."
-      },
-      {
-        "subTitle": "사용자 만족도 측정",
-        "text": "사용자들이 항상 웹 앱의 속도에 대해 언급하고 있고, 그러한 피드백을 정량화하고 싶으신가요? Apdex를 한눈에 모니터링하여 만족도를 측정하십시오."
-      },
-      {
-        "subTitle": "자동 로그 인제스트",
-        "text": "로그를 저장할 공간이 필요하신가요? 뉴렐릭 에이전트가 자동으로 인제스트해줍니다."
-      },
-      {
-        "subTitle": "종속성 추적",
-        "text": "최신 스택에 추적해야 할 종속성이 수십 개 또는 수백 개에 달하나요? automap과 외부 서비스로 쉽게 추적할 수 있습니다."
-      }
-    ]
-  },
   "quickstartChooser": {
     "blurbLineOne": "APM을 시작하려면 로고를 클릭하세요.",
     "blurbLineTwo": "몇 분이면 가능합니다.",
diff --git a/src/nav/apm.yml b/src/nav/apm.yml
index 58f0cfc30ac..086452eaedd 100644
--- a/src/nav/apm.yml
+++ b/src/nav/apm.yml
@@ -2,20 +2,20 @@ title: Application performance monitoring
 path: /docs/apm
 pages:
   - title: Get started with APM
-    path: /introduction-apm
+    path: /docs/apm/new-relic-apm/getting-started/introduction-apm
   - title: My app is slow
     label: Tutorial
     path: /docs/tutorial-app-slow/root-causes
   - title: Guides
     pages:
-    - title: Troubleshoot with the summary page
-      path: /docs/apm/agents/manage-apm-agents/agent-data/triage-run-diagnostics
-    - title: APM best practice guide
-      path: /docs/new-relic-solutions/best-practices-guides/full-stack-observability/apm-best-practices-guide
-    - title: 'Measure user satisfaction with Apdex'
-      path: /docs/apm/new-relic-apm/apdex/apdex-measure-user-satisfaction
-    - title: APM data security
-      path: /docs/apm/new-relic-apm/getting-started/apm-agent-data-security
+      - title: Troubleshoot with the summary page
+        path: /docs/apm/agents/manage-apm-agents/agent-data/triage-run-diagnostics
+      - title: APM best practice guide
+        path: /docs/new-relic-solutions/best-practices-guides/full-stack-observability/apm-best-practices-guide
+      - title: 'Measure user satisfaction with Apdex'
+        path: /docs/apm/new-relic-apm/apdex/apdex-measure-user-satisfaction
+      - title: APM data security
+        path: /docs/apm/new-relic-apm/getting-started/apm-agent-data-security
   - title: Installation and configuration
     pages:
       - title: Go monitoring
@@ -849,7 +849,7 @@ pages:
               - title: Browser and Django templates
                 path: /docs/apm/agents/python-agent/supported-features/optional-manual-browser-instrumentation-django-templates
               - title: Browser monitoring
-                path: /docs/apm/agents/python-agent/supported-features/browser-monitoring-python-agent            
+                path: /docs/apm/agents/python-agent/supported-features/browser-monitoring-python-agent
               - title: Certificate Bundle
                 path: /docs/apm/agents/python-agent/supported-features/certificate-bundle
               - title: Code-level metrics
@@ -867,7 +867,7 @@ pages:
               - title: Python message queues
                 path: /docs/apm/agents/python-agent/supported-features/python-message-queues
               - title: Python runtime metrics
-                path: /docs/apm/agents/python-agent/supported-features/python-runtime-metrics  
+                path: /docs/apm/agents/python-agent/supported-features/python-runtime-metrics
               - title: Python tips and tricks
                 path: /docs/apm/agents/python-agent/supported-features/python-tips-tricks
           - title: Backend services
@@ -1385,7 +1385,7 @@ pages:
             path: /docs/apm/applications-menu/events/view-alert-history
           - title: Thread profiler tool
             path: /docs/apm/apm-ui-pages/events/thread-profiler-tool
-      - title: Errors  
+      - title: Errors
         path: /docs/errors-inbox/apm-tab
       - title: Legacy errors
         path: /docs/apm/apm-ui-pages/error-analytics/errors-page-find-fix-verify-problems
diff --git a/src/pages/introduction-apm.js b/src/pages/introduction-apm.js
deleted file mode 100644
index 90405c05c27..00000000000
--- a/src/pages/introduction-apm.js
+++ /dev/null
@@ -1,228 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Side,
-  SideBySide,
-  useTessen,
-  useTranslation,
-} from '@newrelic/gatsby-theme-newrelic';
-import { animated, useTrail } from 'react-spring';
-import VisibilitySensor from 'react-visibility-sensor';
-import { useMedia } from 'react-use';
-import styled from '@emotion/styled';
-
-import {
-  FeaturedContent,
-  SmallStackedContent,
-  StackedContent,
-  TitleBlock,
-} from '../components/IntroductionApm';
-import QuickstartChooser from '../components/QuickstartChooser';
-import ErrorBoundary from '../components/ErrorBoundary';
-
-import introImage from 'images/new-apm-images/intro.webp';
-import entitiesImage from 'images/new-apm-images/entities.webp';
-import logManagement from 'images/new-apm-images/log-management.webp';
-import vulnerabilityManagement from 'images/new-apm-images/vulnerability-management.webp';
-import apdex from 'images/new-apm-images/apdex.webp';
-import errorManagement from 'images/new-apm-images/error-management.webp';
-import userSatisfaction from 'images/new-apm-images/user-satisfaction.webp';
-import autoLogInjest from 'images/new-apm-images/auto-log-injest.webp';
-import trackDeps from 'images/new-apm-images/track-deps.webp';
-
-const IntroductionApm = () => {
-  const { t } = useTranslation();
-  const isMobileScreen = useMedia('(max-width: 1240px)');
-  const [twoColumnVisible, setTwoColumnVisible] = useState(isMobileScreen);
-  const [fourColumnVisible, setFourColumnVisible] = useState(isMobileScreen);
-
-  const tessen = useTessen();
-
-  const twoColumn = useTrail(2, {
-    config: { mass: 1, tension: 500, friction: 100 },
-    delay: 500,
-    from: {
-      opacity: 0,
-      y: '6%',
-    },
-    to: {
-      opacity: twoColumnVisible ? 1 : 0,
-      y: twoColumnVisible ? '0%' : '6%',
-    },
-  });
-
-  const handleTwoColumn = (isVisible) => {
-    if (isVisible) {
-      setTwoColumnVisible(true);
-
-      !twoColumnVisible &&
-        tessen.track({
-          eventName: 'apmIntroVisiblityTrigger',
-          category: 'TwoColumnSection',
-          path: location.pathname,
-        });
-    }
-  };
-
-  const fourColumn = useTrail(4, {
-    config: { mass: 1, tension: 500, friction: 100 },
-    from: {
-      opacity: 0,
-      y: '6%',
-    },
-    to: {
-      opacity: fourColumnVisible ? 1 : 0,
-      y: fourColumnVisible ? '0%' : '6%',
-    },
-  });
-
-  const handleFourColumn = (isVisible) => {
-    if (isVisible) {
-      setFourColumnVisible(true);
-
-      !fourColumnVisible &&
-        tessen.track({
-          eventName: 'apmIntroVisiblityTrigger',
-          category: 'FourColumnSection',
-          path: location.pathname,
-        });
-    }
-  };
-
-  useEffect(() => {
-    const gatsbyFocusWrapper = document.querySelectorAll(
-      '#gatsby-focus-wrapper'
-    );
-
-    if (gatsbyFocusWrapper.length > 1) {
-      gatsbyFocusWrapper[1].remove();
-    }
-  }, []);
-
-  return (
-    <ErrorBoundary eventName="apm">
-      <FeaturedContent
-        text={[t('apm.intro.text.0'), t('apm.intro.text.1')]}
-        title={t('apm.intro.title')}
-        img={introImage}
-        alt="Complete visibility and analytics at your fingertips"
-      />
-      <QuickstartChooser />
-      <SectionWrapper>
-        <FeaturedContent
-          list={[
-            t('apm.block1.list.0'),
-            t('apm.block1.list.1'),
-            t('apm.block1.list.2'),
-          ]}
-          subTitle={t('apm.block1.subTitle')}
-          img={entitiesImage}
-          alt="See the health of all your services in a glance"
-          lineIcon="monitor"
-          category="SeeHealthOfServices"
-        />
-        <TitleBlock
-          list={[
-            t('apm.block2.list.0'),
-            t('apm.block2.list.1'),
-            t('apm.block2.list.2'),
-          ]}
-          text={t('apm.block2.text')}
-          title={t('apm.block2.title')}
-        />
-        <FeaturedContent lineIcon="lock" lineIconOnly offset={600}>
-          <VisibilitySensor
-            onChange={handleTwoColumn}
-            partialVisibility
-            offset={{ bottom: 300 }}
-          >
-            <SideBySide>
-              <animated.div style={twoColumn[0]}>
-                <Side>
-                  <StackedContent
-                    list={[t('apm.block3.0.list.0'), t('apm.block3.0.list.1')]}
-                    subTitle={t('apm.block3.0.subTitle')}
-                    img={logManagement}
-                    alt="Log Management"
-                    isVisible={twoColumnVisible}
-                  />
-                </Side>
-              </animated.div>
-              <animated.div style={twoColumn[1]}>
-                <Side>
-                  <StackedContent
-                    list={[t('apm.block3.1.list.0'), t('apm.block3.1.list.1')]}
-                    subTitle={t('apm.block3.1.subTitle')}
-                    img={vulnerabilityManagement}
-                    alt="Vulnerability management"
-                    isVisible={twoColumnVisible}
-                  />
-                </Side>
-              </animated.div>
-            </SideBySide>
-          </VisibilitySensor>
-        </FeaturedContent>
-        <FeaturedContent
-          list={[t('apm.block4.list.0'), t('apm.block4.list.1')]}
-          subTitle={t('apm.block4.subTitle')}
-          img={apdex}
-          lineIcon="thumbsup"
-          alt="Ensure a great user experience"
-          animate
-          category="GreatUserExperience"
-        />
-      </SectionWrapper>
-      <VisibilitySensor onChange={handleFourColumn}>
-        <SideBySide>
-          <animated.div style={fourColumn[0]}>
-            <Side>
-              <SmallStackedContent
-                subTitle={t('apm.block5.0.subTitle')}
-                img={errorManagement}
-                text={t('apm.block5.0.text')}
-                alt="Proactive error management"
-              />
-            </Side>
-          </animated.div>
-          <animated.div style={fourColumn[1]}>
-            <Side>
-              <SmallStackedContent
-                subTitle={t('apm.block5.1.subTitle')}
-                img={userSatisfaction}
-                text={t('apm.block5.1.text')}
-                alt="Measure user satisfaction"
-              />
-            </Side>
-          </animated.div>
-          <animated.div style={fourColumn[2]}>
-            <Side>
-              <SmallStackedContent
-                subTitle={t('apm.block5.2.subTitle')}
-                img={autoLogInjest}
-                text={t('apm.block5.2.text')}
-                alt="Automatic log ingest"
-              />
-            </Side>
-          </animated.div>
-          <animated.div style={fourColumn[3]}>
-            <Side>
-              <SmallStackedContent
-                subTitle={t('apm.block5.3.subTitle')}
-                img={trackDeps}
-                text={t('apm.block5.3.text')}
-                alt="Track dependancies"
-              />
-            </Side>
-          </animated.div>
-        </SideBySide>
-      </VisibilitySensor>
-      <QuickstartChooser secondary />
-    </ErrorBoundary>
-  );
-};
-
-export default IntroductionApm;
-
-const SectionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;