Merge pull request #19064 from newrelic/clark/trailing-slash-issue

fix: Remove old search input
newrelic · Oct 24, 2024 · 0802a54 · 0802a54
2 parents e8ccf5c + d37df1c
commit 0802a54
Showing 1 changed file with 6 additions and 86 deletions.
diff --git a/src/components/HomepageBanner.js b/src/components/HomepageBanner.js
@@ -1,20 +1,13 @@
-import React, { useState } from 'react';
-import { navigate } from '@reach/router';
+import React from 'react';
 
 import { css } from '@emotion/react';
-import {
-  Link,
-  SearchInput,
-  useTranslation,
-  addPageAction,
-} from '@newrelic/gatsby-theme-newrelic';
+import { useTranslation } from '@newrelic/gatsby-theme-newrelic';
 import bannerBackground from 'images/bannerBackground.svg';
 
 const HomepageBanner = () => {
-  const bannerHeight = '250px';
+  const bannerHeight = '200px';
   const mobileBreakpoint = '450px';
   const { t } = useTranslation();
-  const [searchTerm, setSearchTerm] = useState('');
 
   return (
     <section
@@ -26,30 +19,28 @@ const HomepageBanner = () => {
         background-size: cover;
         background-position: center;
         display: flex;
-        flex-direction: column;
         align-items: center;
         min-height: ${bannerHeight};
+        justify-content: center;
 
         @media screen and (max-width: 550px) {
           justify-content: center;
           background-size: 150%;
           background-position: center 20px;
         }
         @media screen and (max-width: ${mobileBreakpoint}) {
-          min-height: 200px;
           background-size: 200%;
           background-position: center 8px;
         }
       `}
     >
       <h1
         css={css`
-          font-size: 2.5rem;
+          font-size: 3rem;
           font-weight: 500;
           color: #1ce783;
-          padding-top: 3rem;
-          margin-bottom: 1.5rem;
           text-align: center;
+          margin: 0 20px;
 
           line-height: 1;
           @media screen and (max-width: 550px) {
@@ -63,77 +54,6 @@ const HomepageBanner = () => {
       >
         {t('strings.home.pageTitle')}
       </h1>
-      <SearchInput
-        placeholder={t('strings.home.search.placeholder')}
-        size={SearchInput.SIZE.MEDIUM}
-        value={searchTerm || ''}
-        iconName={SearchInput.ICONS.SEARCH}
-        isIconClickable
-        alignIcon={SearchInput.ICON_ALIGNMENT.RIGHT}
-        onChange={(e) => setSearchTerm(e.target.value)}
-        onSubmit={() => {
-          addPageAction({
-            eventName: 'swiftypeSearchInput',
-            category: 'SearchInput',
-            searchTerm,
-            searchLocation: 'homepage',
-          });
-          if (searchTerm !== '') {
-            navigate(`search-results/?query=${searchTerm}&page=1`);
-          }
-        }}
-        css={css`
-          max-width: 880px;
-          width: 80%;
-          svg {
-            color: var(--primary-text-color);
-          }
-        `}
-      />
-      <div
-        css={css`
-          margin-top: 0.75rem;
-          width: 40%;
-          color: white;
-          display: flex;
-          align-items: baseline;
-          justify-content: center;
-          width: 100%;
-          flex-wrap: wrap;
-          font-weight: 500;
-          font-size: 1rem;
-          a {
-            margin-left: 0.25rem;
-            &:hover {
-              color: var(--brand-button-primary-accent);
-            }
-          }
-          @media screen and (max-width: 550px) {
-            font-size: 0.75rem;
-          }
-
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            display: none;
-          }
-        `}
-      >
-        <p>{t('strings.home.search.popularSearches.title')}: </p>
-        <Link to="/search-results/?query=nrql&page=1">
-          {t('strings.home.search.popularSearches.options.0')},
-        </Link>
-        <Link to="/search-results/?query=logs&page=1">
-          {t('strings.home.search.popularSearches.options.1')},
-        </Link>
-        <Link to="/search-results/?query=alert&page=1">
-          {t('strings.home.search.popularSearches.options.2')},
-        </Link>
-        <Link to="/search-results/?query=best practices&page=1">
-          {t('strings.home.search.popularSearches.options.3')},
-        </Link>
-        <Link to="/search-results/?query=kubernetes&page=1">
-          {t('strings.home.search.popularSearches.options.4')}
-        </Link>
-      </div>
     </section>
   );
 };