Merge pull request #11558 from newrelic/sunny/quickstart-chooser

feat: create QuickstartChooser component
newrelic · Feb 17, 2023 · 19052d9 · 19052d9
2 parents bb5cfba + 5a7378a
commit 19052d9
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 0 deletions.
diff --git a/src/components/QuickstartChooser.js b/src/components/QuickstartChooser.js
@@ -0,0 +1,285 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import cx from 'classnames';
+import logos from '@newrelic/gatsby-theme-newrelic/src/icons/logo';
+import { useTranslation } from '@newrelic/gatsby-theme-newrelic';
+import dataism from '../images/dataism.png';
+
+const QUICKSTARTS = [
+  {
+    logo: logos.c,
+    name: 'C',
+    url:
+      'https://one.newrelic.com/nr1-core?state=4bb150a3-4e8a-0c89-56ba-32e99f6dadce',
+  },
+  {
+    logo: logos.go,
+    name: 'Go',
+    url:
+      'https://one.newrelic.com/nr1-core?state=f310f9fd-96b5-7d5e-045e-b151331293ca',
+  },
+  {
+    logo: logos.dotnet,
+    name: '.NET',
+    url:
+      'https://one.newrelic.com/nr1-core?state=fcaeee53-614a-4c29-92ee-694e0b128368',
+  },
+  {
+    logo: logos.java,
+    name: 'Java',
+    url:
+      'https://one.newrelic.com/nr1-core?state=f378c92c-1d6a-dc90-c26c-0c2ad930959a',
+  },
+  {
+    logo: logos.nodejs,
+    name: 'Node.js',
+    url:
+      'https://one.newrelic.com/nr1-core?state=c872674f-2350-7ec3-125f-a4335255e180',
+  },
+  {
+    logo: logos.php,
+    name: 'PHP',
+    url:
+      'https://one.newrelic.com/nr1-core?state=77aab820-3aaf-066b-c3fc-2f3437b403a8',
+  },
+  {
+    logo: logos.python,
+    name: 'Python',
+    url:
+      'https://one.newrelic.com/nr1-core?state=1ed82004-2854-1a4a-2a91-69302832ccc0',
+  },
+  {
+    logo: logos.ruby,
+    name: 'Ruby',
+    url:
+      'https://one.newrelic.com/nr1-core?state=d69143ab-605c-579b-25bf-cc6e5fee5b80',
+  },
+];
+
+const QuickstartChooser = ({
+  secondary = false,
+  quickstarts = QUICKSTARTS,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Container className={cx({ secondary })}>
+      <CtaContainer>
+        <h2>{t('quickstartChooser.heading')}</h2>
+        <p>
+          {t('quickstartChooser.blurbLineOne')}{' '}
+          {t('quickstartChooser.blurbLineTwo')}
+        </p>
+        <Arrow />
+      </CtaContainer>
+      <ChooserContainer>
+        {quickstarts.map((quickstart) => (
+          <li key={quickstart.name}>
+            <a aria-label={quickstart.name} href={quickstart.url}>
+              {quickstart.logo()}
+            </a>
+          </li>
+        ))}
+      </ChooserContainer>
+    </Container>
+  );
+};
+
+QuickstartChooser.propTypes = {
+  quickstarts: PropTypes.arrayOf(
+    PropTypes.shape({
+      logo: PropTypes.string,
+      url: PropTypes.string,
+      name: PropTypes.string,
+    })
+  ),
+};
+
+const ChooserContainer = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(4, 112px);
+  grid-row: 2 / 3;
+  gap: 4rem;
+  list-style: none;
+  padding: 0;
+  place-items: center;
+
+  @media (max-width: 1508px) {
+    gap: 2rem;
+    justify-content: center;
+  }
+
+  @media (max-width: 950px) {
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, 112px);
+  }
+
+  & a {
+    aspect-ratio: 1 / 1;
+    background: #fff;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    display: grid;
+    padding: 0;
+    place-items: center;
+    width: 100%;
+  }
+
+  & li {
+    aspect-ratio: 1 / 1;
+    display: grid;
+    margin: 0;
+    place-items: center;
+    transform-origin: center;
+    transition: 240ms scale ease;
+    width: 100%;
+  }
+
+  & li:hover {
+    scale: 1.2;
+  }
+
+  & svg {
+    --size: 80%;
+    height: var(--size);
+    width: var(--size);
+  }
+`;
+
+const Container = styled.div`
+  background: var(--system-text-primary-light);
+  background: #27393a;
+  background-image: url(${dataism}),
+    radial-gradient(
+      circle,
+      rgba(28, 231, 131, 0.08) 0%,
+      rgba(31, 52, 57, 0) 100%
+    ),
+    radial-gradient(circle, rgba(0, 62, 38, 0.31) 0%, rgba(31, 52, 57, 0) 100%);
+  background-position-x: 15%;
+  background-repeat: no-repeat;
+  display: grid;
+  gap: 0 5rem;
+  grid-template-columns: minmax(260px, 360px) auto;
+  grid-template-rows: auto auto auto;
+  justify-content: center;
+  margin: 0 calc(var(--site-content-padding) * -1);
+  padding: 54px 64px;
+  position: relative;
+
+  @media (max-width: 1585px) {
+    column-gap: 2vw;
+  }
+
+  @media (max-width: 1508px) {
+    background-position-y: 90%;
+    display: block;
+
+    & h2 {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  @media (max-width: 1100px) {
+    padding: 26px 32px;
+  }
+
+  @media (max-width: 780px) {
+    padding: 1rem;
+    max-width: 100vw;
+  }
+
+  &.secondary {
+    background: #f3f4f4;
+    display: block;
+
+    & h2 {
+      margin-bottom: 0.5rem;
+    }
+
+    & h2,
+    & p {
+      color: var(--system-text-primary-light);
+    }
+
+    & svg.arrow {
+      display: none;
+    }
+
+    & ${ChooserContainer} {
+      gap: 1.625rem;
+      grid-template-columns: repeat(auto-fit, 112px);
+    }
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    margin-bottom: 2rem;
+
+    @media (max-width: 1508px) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  p {
+    font-size: 1.125rem;
+  }
+
+  h2,
+  p {
+    color: #fafbfb;
+  }
+`;
+
+const CtaContainer = styled.div`
+  align-self: center;
+  grid-row: 1 / 4;
+  position: relative;
+`;
+
+const Arrow = ({ className }) => (
+  <svg
+    className={cx(className, 'arrow')}
+    css={css`
+      bottom: -4%;
+      left: 77%;
+      position: absolute;
+
+      @media (max-width: 1620px) {
+        bottom: -12%;
+      }
+      @media (max-width: 1585px) {
+        left: 60%;
+      }
+      @media (max-width: 1508px) {
+        display: none;
+      }
+    `}
+    width="151"
+    height="59"
+    viewBox="0 0 151 59"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_159_7562)">
+      <path
+        d="M149.973 17.4541C150.223 17.1447 150.284 16.9067 150.02 16.7801H150.01C149.979 16.7724 149.945 16.7686 149.908 16.7684C149.9 16.737 149.89 16.7043 149.88 16.6701C149.294 16.1964 148.753 16.3802 148.242 16.5538C148.116 16.5965 147.992 16.6385 147.87 16.6701L147.667 16.7237C147.051 16.8862 146.423 17.0519 145.82 17.2501C145.073 17.4956 144.296 17.632 143.532 17.7661C142.833 17.8887 142.145 18.0095 141.5 18.2101C141.337 18.2593 141.189 18.3474 141.04 18.436C140.887 18.5274 140.732 18.6193 140.56 18.6701C139.464 18.9868 138.324 19.1711 137.186 19.3551C136.527 19.4617 135.869 19.5681 135.22 19.7001C134.858 19.7751 134.496 19.8793 134.135 19.9835C133.676 20.1155 133.218 20.2474 132.76 20.3201C132.301 20.395 131.839 20.42 131.378 20.445C130.916 20.47 130.456 20.495 130 20.5701C129.484 20.6542 128.97 20.753 128.456 20.8518C127.627 21.0114 126.796 21.1713 125.95 21.2701C125.698 21.2992 125.439 21.2907 125.179 21.2821C124.904 21.2731 124.628 21.264 124.36 21.3001C123.849 21.364 123.338 21.481 122.828 21.5977C122.3 21.7185 121.774 21.8391 121.25 21.9001C121.001 21.9326 120.76 21.9093 120.519 21.8859C120.315 21.8662 120.111 21.8463 119.9 21.8601C119.808 21.8649 119.727 21.9286 119.646 21.9929C119.56 22.0611 119.473 22.1301 119.37 22.1301C119.264 22.1301 119.161 22.0772 119.058 22.0243C118.946 21.967 118.834 21.9097 118.72 21.9201C118.388 21.9469 118.061 22.0397 117.73 22.1339C117.443 22.2156 117.152 22.2983 116.85 22.3401C116.22 22.4201 115.54 22.4801 114.89 22.4801C113.28 22.5101 111.58 22.4701 109.93 22.3401C108.28 22.2101 106.64 22.0101 105.3 21.5801C105.108 21.5141 104.977 21.376 104.86 21.2524C104.782 21.17 104.71 21.0941 104.63 21.0501C104.603 21.0423 104.556 21.0497 104.502 21.0581C104.419 21.0712 104.321 21.0867 104.26 21.0501C104.148 20.9687 104.103 20.8677 104.064 20.7815C103.989 20.6136 103.939 20.5019 103.47 20.7001L103.49 20.7101C103.22 20.8501 103.15 21.0801 103.18 21.3501C103.24 21.5901 103.39 21.8501 103.51 21.9901C104.033 22.6931 104.651 22.8669 105.315 23.0534C105.425 23.0844 105.537 23.1158 105.65 23.1501C107.59 23.6601 109.62 23.9601 111.78 24.2201C112.32 24.0964 113.138 24.0991 114.026 24.1022C114.718 24.1045 115.452 24.107 116.13 24.0501C116.847 23.9976 117.574 23.8875 118.303 23.777C118.825 23.6978 119.348 23.6185 119.87 23.5601C122.68 23.2401 125.75 22.8901 128.44 22.5801C128.9 22.5209 129.338 22.4316 129.758 22.346C129.977 22.3014 130.191 22.2578 130.4 22.2201C135.15 21.4401 139.58 20.5501 143.5 19.5901C144.559 19.3304 145.425 19.0438 146.198 18.7876C146.475 18.6957 146.741 18.6078 146.999 18.5264C146.831 18.6518 146.673 18.7686 146.53 18.8701C145.687 19.4426 144.951 19.9953 144.244 20.5257C143.828 20.8384 143.422 21.1434 143.01 21.4401C142.783 21.6111 142.557 21.7829 142.33 21.9556C141.467 22.6112 140.589 23.2794 139.56 23.9601C133.46 28.1401 126.46 31.7901 118.84 34.8201C118.02 35.2401 117.01 35.7301 115.84 36.2301C115.022 36.5394 114.142 36.8677 113.221 37.2115C112.802 37.3679 112.374 37.5275 111.94 37.6901C110.042 38.4396 107.964 39.0757 105.928 39.6991C105.003 39.9822 104.087 40.2628 103.2 40.5501C102.975 40.6225 102.748 40.6966 102.52 40.771C102.181 40.8814 101.841 40.9925 101.5 41.1001C101.21 41.1801 100.92 41.2576 100.63 41.3351C100.34 41.4126 100.05 41.4901 99.7599 41.5701C99.1758 41.7298 98.5917 41.8871 98.0076 42.0444L98.0049 42.0451C97.4199 42.2026 96.8349 42.3601 96.2499 42.5201C95.8771 42.6189 95.5043 42.7217 95.1308 42.8247C94.3322 43.045 93.5307 43.2661 92.7199 43.4501C92.1249 43.5701 91.5274 43.6901 90.9299 43.8101L90.9245 43.8112C90.3288 43.9308 89.7331 44.0504 89.1399 44.1701L88.3579 44.3205C87.2651 44.5307 86.1658 44.7421 85.0599 44.9601C84.1922 45.1451 83.304 45.2528 82.4111 45.3611C81.9046 45.4225 81.3966 45.4841 80.8899 45.5601C79.493 45.7397 78.0862 45.9193 76.6793 46.0989L74.5599 46.3701L72.4399 46.5201C69.6099 46.7001 66.7899 46.8801 64.0299 47.0601L62.6754 47.0993C60.3729 47.166 58.1099 47.2315 55.9099 47.2901C54.838 47.3136 53.786 47.3447 52.7586 47.3751C51.1599 47.4224 49.621 47.4679 48.1599 47.4801C43.4899 47.5001 38.9099 47.3601 34.4599 46.8401C30.0299 46.3101 25.7199 45.3601 21.8199 43.6901C17.9199 42.0401 14.4899 39.6301 11.8299 36.5701C9.12994 33.5701 7.02994 30.2101 5.48994 26.7101C3.92994 23.0501 3.08994 19.7801 2.46994 16.8401C1.86994 13.8801 1.64994 11.2201 1.58994 8.65008C1.58994 7.61515 1.62835 6.81614 1.66214 6.11307C1.70737 5.17213 1.74435 4.403 1.66994 3.47008C1.64263 3.11508 1.63086 2.78546 1.62013 2.48499C1.5837 1.46504 1.55927 0.780912 0.979942 0.580078C-0.0700583 2.32008 -0.0300584 5.48008 0.0199416 7.98008C0.0599416 10.7901 0.259942 13.6501 0.789942 16.4101C1.78994 22.2701 3.61994 28.1401 6.76994 32.9401C7.22143 33.7032 7.79828 34.3409 8.38733 34.9921C8.7246 35.365 9.0659 35.7423 9.38994 36.1501C9.51176 36.2922 9.62698 36.4376 9.74163 36.5823C9.90933 36.794 10.0758 37.0041 10.2599 37.2001L11.2199 38.1601C11.4637 38.4001 11.7032 38.6443 11.9428 38.8885C12.3419 39.2955 12.7412 39.7026 13.1599 40.0901C13.4337 40.3106 13.703 40.534 13.9719 40.7569C14.4103 41.1205 14.8475 41.483 15.2999 41.8301C15.5335 41.9868 15.7661 42.1454 15.9989 42.3042C16.5237 42.662 17.0497 43.0207 17.5899 43.3601C20.7399 45.2601 24.2299 46.5601 27.7699 47.3601C30.9761 48.079 34.3051 48.3543 37.4815 48.617L37.7599 48.6401C41.4299 48.9201 45.0099 49.1701 48.6699 49.1701C52.829 49.1318 56.9236 48.9527 61.0525 48.7721C62.3138 48.7169 63.5793 48.6616 64.8499 48.6101C65.8487 48.5471 66.8544 48.5193 67.8627 48.4914C68.9341 48.4619 70.0084 48.4322 71.0799 48.3601C71.571 48.3219 72.0666 48.2815 72.5635 48.241C73.1088 48.1965 73.6558 48.1519 74.1999 48.1101C74.8652 48.0397 75.5263 47.9325 76.1886 47.8252C76.5617 47.7647 76.9352 47.7041 77.3099 47.6501C77.6594 47.5961 78.0087 47.5417 78.3575 47.4875C80.075 47.2204 81.7844 46.9545 83.4799 46.7301C85.2699 46.4901 86.9099 46.2701 88.7199 45.9601C89.0739 45.8931 89.3958 45.7758 89.7207 45.6574C90.0751 45.5283 90.433 45.3979 90.8399 45.3301C91.2609 45.2567 91.6675 45.2431 92.0714 45.2297C92.4927 45.2157 92.9111 45.2018 93.3399 45.1201C94.6728 44.7966 95.9902 44.3892 97.3267 43.9758C98.3865 43.648 99.4587 43.3164 100.56 43.0201C101.432 42.8056 102.314 42.5196 103.203 42.2314C103.558 42.1166 103.914 42.0012 104.27 41.8901C104.881 41.7009 105.492 41.5094 106.1 41.319L106.102 41.3184C106.746 41.1164 107.387 40.9156 108.02 40.7201C109.156 40.405 110.27 39.9934 111.39 39.5795C111.798 39.4285 112.208 39.2771 112.62 39.1301C113.093 38.9548 113.57 38.7833 114.047 38.6115C115.122 38.2247 116.2 37.8364 117.26 37.4001C117.699 37.2128 118.14 37.0262 118.581 36.8393C121.203 35.7287 123.848 34.6082 126.39 33.2901C132.39 30.3301 138.1 26.9001 143.07 23.1501C143.3 22.9787 143.53 22.816 143.759 22.6592C143.392 23.0364 143.019 23.4165 142.64 23.8001C142.379 24.3401 141.801 25.0281 141.177 25.7699C140.75 26.2781 140.302 26.8116 139.92 27.3401C139.453 27.9811 139.002 28.6532 138.549 29.3272C138.275 29.7363 137.999 30.146 137.72 30.5501C137.165 31.3066 136.594 32.0847 136.02 32.8672C134.803 34.5259 133.571 36.2045 132.45 37.7401C132.191 38.1007 131.969 38.4686 131.757 38.8198C131.616 39.0529 131.48 39.2787 131.34 39.4901C128.59 43.6501 126.12 47.6001 124.04 51.2301C123.452 52.2845 123.036 53.1911 122.664 54.0011C122.366 54.6507 122.097 55.2382 121.79 55.7901C121.697 55.9502 121.607 56.0835 121.526 56.2035C121.317 56.5107 121.168 56.7306 121.19 57.0901C121.195 57.1733 121.195 57.2506 121.194 57.3231C121.191 57.6599 121.189 57.8932 121.79 58.1401C122.535 57.9958 122.76 57.4597 122.975 56.9487C123.028 56.8222 123.08 56.6972 123.14 56.5801C123.216 56.4311 123.292 56.2816 123.369 56.1317C123.628 55.6275 123.889 55.1188 124.12 54.6101C124.467 53.8404 124.928 53.1325 125.382 52.4368C125.765 51.849 126.142 51.2701 126.44 50.6701C126.516 50.5183 126.553 50.3507 126.591 50.1823C126.633 49.9958 126.675 49.8083 126.77 49.6401C127.292 48.6258 127.936 47.6741 128.579 46.7247C128.994 46.111 129.409 45.4983 129.79 44.8701C130.018 44.5107 130.216 44.13 130.413 43.751C130.621 43.3498 130.828 42.9504 131.07 42.5801C131.338 42.1626 131.654 41.7849 131.97 41.4073C132.266 41.0525 132.563 40.6977 132.82 40.3101C133.097 39.8908 133.363 39.4653 133.629 39.0392C134.112 38.2661 134.596 37.4915 135.15 36.7501C135.3 36.5488 135.48 36.3649 135.662 36.1802C135.868 35.9704 136.075 35.7594 136.24 35.5201C136.526 35.098 136.79 34.6517 137.054 34.206C137.353 33.7013 137.651 33.1974 137.98 32.7301C138.123 32.5285 138.3 32.3634 138.48 32.1961C138.639 32.0482 138.799 31.8984 138.94 31.7201C138.997 31.6436 139.007 31.5396 139.016 31.4344C139.026 31.3197 139.037 31.2036 139.11 31.1201C139.183 31.0377 139.293 30.9929 139.403 30.9481C139.521 30.9004 139.638 30.8528 139.71 30.7601C139.919 30.4864 140.077 30.1694 140.236 29.8479C140.374 29.5704 140.514 29.2895 140.69 29.0301C141.07 28.4901 141.49 27.9201 141.92 27.3901C142.644 26.5183 143.401 25.6274 144.163 24.731C145.672 22.9539 147.201 21.155 148.53 19.4401C148.651 19.2767 148.814 19.1634 148.97 19.0546C149.11 18.957 149.245 18.8631 149.34 18.7401C149.367 18.7085 149.372 18.638 149.377 18.5583C149.383 18.4616 149.391 18.3514 149.44 18.2801C149.519 18.1643 149.628 18.066 149.729 17.9745C149.92 17.8013 150.085 17.6523 149.973 17.4541Z"
+        fill="#1CE783"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_159_7562">
+        <rect
+          width="150.21"
+          height="57.83"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default QuickstartChooser;
diff --git a/src/i18n/translations/en/translation.json b/src/i18n/translations/en/translation.json
@@ -83,5 +83,10 @@
     "validEmail": "Please provide a valid email",
     "submitButton": "Submit comment",
     "submitMessage": "Thank you for your feedback!"
+  },
+  "quickstartChooser": {
+   "blurbLineOne": "Click a logo to get started with APM.", 
+   "blurbLineTwo": "It takes just a few minutes!", 
+   "heading": "Want to save time with a single unified monitoring solution?"
   }
 }
diff --git a/src/images/dataism.png b/src/images/dataism.png