Qa notes (#96)

* update hero image

* adjust spacing

* update DS

* adjust quote section

* update DS

* adjust feature section

* add footer gradient

* adjust gap y

* change hover state

* replace caret

* change header bg styles

* remove unused section

* remove unused images

* refresh assets

* adjust shadow

* switch icons to light mode

* join gradients

* reduce spacing on smaller screens

* fix text

package.json

@@ -39,7 +39,7 @@
     "@markdoc/markdoc": "0.4.0",
     "@markdoc/next.js": "0.2.2",
     "@open-draft/until": "2.1.0",
-    "@pluralsh/design-system": "3.53.0",
+    "@pluralsh/design-system": "3.54.0",
     "@react-types/shared": "3.22.0",
     "@tanstack/react-table": "8.10.7",
     "@tanstack/react-virtual": "3.0.1",

pages/about.tsx

@@ -26,7 +26,6 @@ export default function About({
       <HeaderPad
         as={GradientBG}
         size="cover"
-        // position="top middle"
         image="/images/gradients/gradient-bg-1.jpg"
       >
         <div
@@ -51,7 +50,7 @@ export default function About({
               <EqualColumn>
                 <h2 className="txt-mktg-hero-2 [text-wrap:balance] md:txt-mktg-hero-1">
                   Our mission is to democratize elite DevOps capabilities by
-                  simplifing tooling complexities, fostering a ZeroOps world
+                  simplifying tooling complexities, fostering a ZeroOps world
                   that accelerates software development.
                 </h2>
               </EqualColumn>

pages/index.tsx

@@ -185,7 +185,7 @@ export default function Index({
         as={GradientBG}
         position="50% 50%"
         size="cover"
-        image="/images/gradients/gradient-bg-10.png"
+        image="/images/gradients/hero-background.png"
       >
         <HomePageHero
           heading={<>Managing Kubernetes can be a cluster—</>}
@@ -208,7 +208,7 @@ export default function Index({
             </div>
           }
         />
-        <div className="pb-xxxxlarge pt-xxxlarge sm:pt-xxxxlarge md:pb-xxxxxxlarge md:pt-xxxxlarge lg:pt-0 ">
+        <div className="-mt-xxxlarge pb-xxxxlarge pt-xxxlarge sm:pt-xxxxlarge md:pb-xxxxxxlarge md:pt-xxxxlarge lg:pt-0">
           <StandardPageWidth>
             <HeroImages />
             <Button
@@ -294,9 +294,10 @@ export default function Index({
                   to automate and streamline the lifecycle management of
                   Kubernetes fleets. Plural provides a single pane of glass
                   interface for managing multiple clusters, automating upgrades,
-                  and provides advanced monitoring and security features, making
-                  Kubernetes accessible to engineers of all skill levels and
-                  reducing upgrade times.
+                  and advanced monitoring/observability complete w/ enterprise
+                  grade security features. We’re making Kubernetes accessible to
+                  engineers of all skill levels by reducing painful day 2
+                  operational challenges.
                 </p>
               }
               className="text-center"

src/components/DocSearchStyles.tsx

@@ -77,7 +77,7 @@ const GlobalStyles = createGlobalStyle(({ theme }) => ({
     },
 
   '.DocSearch-Form:focus-within': {
-    boxShadow: theme.boxShadows.focused,
+    boxShadow: theme.boxShadows.slight,
   },
   '.DocSearch-Hit-source': {
     ...theme.partials.marketingText.subtitle2,

src/components/FooterFull.tsx

@@ -28,15 +28,22 @@ export function FullFooter({
 
   return (
     <StickyFooterSC className={className}>
+      <div
+        className="absolute z-0 h-full w-full"
+        style={{
+          background:
+            'linear-gradient(0deg, rgba(14, 16, 21, 0.00) 0%, rgba(0,0,0,0.3) 100%)',
+        }}
+      />
       {showValueProp && (
-        <div className="pb-xlarge pt-xxxxxlarge md:pb-xxxxlarge md:pt-xxxxxxlarge">
+        <div className="relative z-20 pb-xlarge pt-xxxxxlarge md:pb-xxlarge md:pt-xxxxxxlarge">
           <FooterValueProp />
         </div>
       )}
       <div
         // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role
         role="contentinfo"
-        className="flex flex-col gap-y-xxxlarge pt-xxxxlarge"
+        className="relative z-20 flex flex-col gap-y-xxxlarge pt-xxxxlarge"
       >
         {showNav && <FooterNav />}
         <BasicFooter />
@@ -56,7 +63,7 @@ const StickyFooterSC = styled.footer(({ theme }) => ({
   [mqs.md]: {
     paddingBottom: theme.spacing.xlarge,
   },
-  backgroundImage: 'url(/images/gradients/gradient-bg-6.jpg)',
+  backgroundImage: 'url(/images/gradients/footer-background.png)',
   backgroundSize: 'cover',
   backgroundPosition: '0% 50%',
 }))

src/components/Navigation.tsx

@@ -141,9 +141,9 @@ export const MainLinkBase = styled.a.withConfig({
     '&[href]:hover, &:hover',
   ].join(', ')]: {
     color: theme.colors.text,
-    backgroundColor: theme.colors['fill-one-hover'],
+    backgroundColor: 'rgba(255, 255, 255, 0.03)',
     borderRadius: theme.borderRadiuses.medium,
-    boxShadow: `0px 0px 0px 1px ${theme.colors.grey[800]}`,
+    boxShadow: `0px 0px 0px 1px ${theme.colors['border-input']}`,
     '.hover-arrow': {
       opacity: '1',
     },
@@ -155,7 +155,7 @@ export const MainLinkBase = styled.a.withConfig({
   '.hover-arrow': {
     opacity: '0',
   },
-  padding: `${theme.spacing.small}px var(--top-nav-link-h-pad)`,
+  padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px `,
 }))
 
 export const SecondaryLink = styled.a(({ theme }) => ({

src/components/PageHeader.tsx

@@ -124,8 +124,8 @@ export function PageHeader({
 }
 
 const BackdropSC = styled.div(({ theme }) => {
-  const backdropFilter = `blur(7.5px) url(#${DARKEN_FILTER_ID})`
-  const basicBackdropFilter = `blur(7.5px)`
+  const backdropFilter = `blur(24px)`
+  const basicBackdropFilter = `blur(24px)`
 
   return {
     position: 'absolute',
@@ -138,7 +138,7 @@ const BackdropSC = styled.div(({ theme }) => {
     '&.show': {
       transform: 'translateY(var(--top-nav-banner-height))',
     },
-    backgroundColor: `${chroma(theme.colors['fill-zero']).alpha(0.83)}`,
+    backgroundColor: `rgba(14, 16, 21, 0.75)`,
     // Use basic filter on Safari (doesn't support svg filters)
     [`@supports (-webkit-backdrop-filter: ${basicBackdropFilter})`]: {
       '-webkitBackdropFilter': basicBackdropFilter,
@@ -147,7 +147,6 @@ const BackdropSC = styled.div(({ theme }) => {
     // Only tested on Chrome
     [`@supports (backdrop-filter: ${backdropFilter})`]: {
       backdropFilter,
-      backgroundColor: 'transparent',
     },
     // Downgrade Firefox to basic filter because its feColorMatrix rendering is ugly
     [`@-moz-document url-prefix()`]: {

src/components/PageHeros.tsx

@@ -33,7 +33,7 @@ export function HeroMainText({
       )}
       {...props}
     >
-      <div className="flex flex-col gap-y-xlarge">
+      <div className="flex flex-col gap-y-medium">
         <h1 className="txt-mktg-hero-2 [text-wrap:balance] md:txt-mktg-big-header">
           {preHeading && (
             <>

src/components/menu/Menu.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react'
 
 import {
-  CaretDownIcon,
+  DropdownArrowIcon,
   FillLevelProvider,
   useFloatingDropdown,
 } from '@pluralsh/design-system'
@@ -78,7 +78,7 @@ function MainLinkTriggerUnstyled({
         className="icon"
         aria-hidden
       >
-        <CaretDownIcon size={14} />
+        <DropdownArrowIcon size={14} />
       </div>
     </MainLinkBase>
   )

src/components/page-sections/Feature.tsx

@@ -1,23 +1,22 @@
 import { type ReactElement, type ReactNode, cloneElement, useRef } from 'react'
 
-import { ColorModeProvider } from '@pluralsh/design-system'
+import { ArrowRightIcon, Button } from '@pluralsh/design-system'
+import Link from 'next/link'
 
 import { useInView } from 'framer-motion'
 import styled from 'styled-components'
 
 import { breakpointIsGreaterOrEqual, mqs } from '@src/breakpoints'
 import { Columns, EqualColumn } from '@src/components/layout/Columns'
 import { Body2, ResponsiveText } from '@src/components/Typography'
-import { cn as classNames } from '@src/utils/cn'
 
 import { useBreakpoint } from '../contexts/BreakpointProvider'
 
 import { FeaturesImage } from './FeaturesImage'
 
 const FeatureSC = styled(Columns)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  rowGap: theme.spacing.xxxlarge,
+  background: `linear-gradient(90deg, ${theme.colors.grey[25]} 0%, ${theme.colors.grey[75]} 100%)`,
+  border: `1px solid ${theme.colors.grey[125]}`,
   [mqs.columns]: {
     '&:nth-child(2n)': {
       flexDirection: 'row-reverse',
@@ -59,7 +58,7 @@ export function Feature({
   }
 
   return (
-    <FeatureSC>
+    <FeatureSC className="flex w-full items-center gap-y-xxlarge rounded-large border px-xxlarge py-xxlarge">
       <EqualColumn className="flex flex-col gap-y-medium">
         <ResponsiveText
           ref={headingRef}
@@ -68,10 +67,23 @@ export function Feature({
         >
           {heading}
         </ResponsiveText>
-        <Body2 as="div">{children}</Body2>
+        <Body2 as="div">
+          {children}
+          <Button
+            tertiary
+            padding="none"
+            large
+            className="mt-large w-fit"
+            as={Link}
+            href="/contact-sales"
+            endIcon={<ArrowRightIcon />}
+          >
+            Book a demo
+          </Button>
+        </Body2>
       </EqualColumn>
-      <EqualColumn className="w-full">
-        <div className={classNames('w-full')}>{image}</div>
+      <EqualColumn className="flex w-full items-center justify-center">
+        <div className="w-5/6">{image}</div>
       </EqualColumn>
     </FeatureSC>
   )
@@ -88,14 +100,12 @@ export function FeatureItem({
 }) {
   return (
     <div className="mt-large flex items-center gap-xsmall">
-      <ColorModeProvider mode="dark">
-        <div
-          className="rounded-full flex items-center justify-center rounded-medium bg-fill-one p-xsmall text-icon-light"
-          aria-hidden
-        >
-          {icon}
-        </div>
-      </ColorModeProvider>
+      <div
+        className="rounded-full flex items-center justify-center rounded-medium border border-border-input bg-fill-three p-xsmall text-icon-light"
+        aria-hidden
+      >
+        {icon}
+      </div>
       <div>
         {title && <h3 className="txt-body-2-bold text-text">{title}</h3>}
         <p className="txt-body-2 text-text-light">{description}</p>