Website updates for HCP (2/2)

website: prep hcp ctas Add in updated HCP section Fix broken link website: remove superflous heading website: add new try cloud cta to nav website: adjust homepage hero CTAs Update HCP description to match latest Clean up Hero CTAs Updates banner
4 years ago · 132e27436f
10 changed files with 220 additions and 96 deletions
--- a/website/components/basic-hero/index.jsx
+++ b/website/components/basic-hero/index.jsx
@ -1,6 +1,4 @@
 import Button from '@hashicorp/react-button'
-import InlineSvg from '@hashicorp/react-inline-svg'
-import RightArrowIcon from './img/right-arrow-icon.svg?include'

 export default function BasicHero({
  heading,
@ -19,13 +17,11 @@ export default function BasicHero({
            <div className="links">
              {links.slice(0, 2).map((link, stableIdx) => {
                const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
-                const linkType = link.type || 'inbound'
-
                return (
                  <Button
                    // eslint-disable-next-line react/no-array-index-key
                    key={stableIdx}
-                    linkType={linkType}
+                    linkType={link.type}
                    theme={{
                      variant: buttonVariant,
                      brand,
@ -39,16 +35,17 @@ export default function BasicHero({
            </div>
            {links[2] && (
              <div className="third-link">
-                <a
-                  href={links[2].url}
-                >
-                  <span className="g-type-buttons-and-standalone-links">
-                    {links[2].text}
-                  </span>
-                  <span className="icon">
-                    <InlineSvg src={RightArrowIcon} />
-                  </span>
-                </a>
+                <Button
+                  // eslint-disable-next-line react/no-array-index-key
+                  linkType={links[2].type}
+                  theme={{
+                    variant: 'tertiary-neutral',
+                    brand,
+                    background: 'light',
+                  }}
+                  title={links[2].text}
+                  url={links[2].url}
+                />
              </div>
            )}
          </>
--- a/website/components/basic-hero/style.css
+++ b/website/components/basic-hero/style.css
@ -49,16 +49,11 @@
    display: flex;
    justify-content: center;
    margin-top: 32px;
-
    & a {
-      display: flex;
-      align-items: center;
-      color: var(--gray-4);
-
-      & .icon {
-        margin-left: 8px;
-        height: 24px;
-      }
+      color: var(--gray-3);
+    }
+    & svg * {
+      stroke: var(--gray-2) !important;
    }
  }

--- a/website/components/enterprise-comparison/consul/index.jsx
+++ b/website/components/enterprise-comparison/consul/index.jsx
@ -10,11 +10,13 @@ export default function ConsulEnterpriseComparison() {
        imageUrl: require('./img/consul-oss.svg?url'),
        description:
          'Consul Open Source enables individuals to discover services and securely manage connections between them across cloud, on-prem, and hybrid environments.',
-        link: {
-          text: 'View Open Source Features',
-          url: 'https://www.hashicorp.com/products/consul/pricing/',
-          type: 'outbound',
-        },
+        links: [
+          {
+            text: 'View Open Source Features',
+            url: 'https://www.hashicorp.com/products/consul/pricing/',
+            type: 'outbound',
+          },
+        ],
      }}
      itemTwo={{
        title: 'Organizational Complexity',
@ -22,11 +24,18 @@ export default function ConsulEnterpriseComparison() {
        imageUrl: require('./img/consul-enterprise.svg?url'),
        description:
          'Consul Enterprise provides the foundation for organizations to build an enterprise-ready service networking environment for multiple teams by enabling governance capabilities.',
-        link: {
-          text: 'View Enterprise Features',
-          url: 'https://www.hashicorp.com/products/consul/pricing/',
-          type: 'outbound',
-        },
+        links: [
+          {
+            text: 'View Cloud Features',
+            url: 'https://cloud.hashicorp.com',
+            type: 'outbound',
+          },
+          {
+            text: 'View Self-Managed Features',
+            url: 'https://www.hashicorp.com/products/consul/pricing/',
+            type: 'outbound',
+          },
+        ],
      }}
      brand="consul"
    />
--- a/website/components/enterprise-comparison/index.jsx
+++ b/website/components/enterprise-comparison/index.jsx
@ -21,12 +21,17 @@ export default function EnterpriseComparison({
            <h4 className="g-type-display-4">{itemOne.title}</h4>

            <p className="g-type-body">{itemOne.description}</p>
-            <Button
-              url={itemOne.link.url}
-              title={itemOne.link.text}
-              linkType={itemOne.link.type}
-              theme={{ variant: 'tertiary', brand }}
-            />
+
+            {itemOne.links.map((link) => (
+              <div key="stable">
+                <Button
+                  url={link.url}
+                  title={link.text}
+                  linkType={link.type}
+                  theme={{ variant: 'tertiary', brand }}
+                />
+              </div>
+            ))}
          </div>
          <div className="spacer">
            <div className="vertical-spacer"></div>
@ -38,12 +43,17 @@ export default function EnterpriseComparison({
            <h4 className="g-type-display-4">{itemTwo.title}</h4>

            <p className="g-type-body">{itemTwo.description}</p>
-            <Button
-              url={itemTwo.link.url}
-              title={itemTwo.link.text}
-              linkType={itemTwo.link.type}
-              theme={{ variant: 'tertiary', brand }}
-            />
+            {itemTwo.links.map((link) => (
+              <div key="stable">
+                <Button
+                  key="stable"
+                  url={link.url}
+                  title={link.text}
+                  linkType={link.type}
+                  theme={{ variant: 'tertiary', brand }}
+                />
+              </div>
+            ))}
          </div>
        </div>
      </div>
--- a/website/components/hcp-callout-section/HCPCalloutSection.module.css
+++ b/website/components/hcp-callout-section/HCPCalloutSection.module.css
@ -0,0 +1,82 @@
+.hcpCalloutSection {
+  composes: g-grid-container from global;
+  padding-top: 88px;
+  padding-bottom: 88px;
+
+  & .header {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 88px;
+    @media (max-width: 1120px) {
+      margin-bottom: 48px;
+    }
+    & h2 {
+      margin: 0;
+      text-align: center;
+      max-width: 450px;
+    }
+  }
+
+  & .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @media (max-width: 1120px) {
+      flex-direction: column-reverse;
+
+      & .info {
+        margin-top: 32px;
+      }
+    }
+
+    & .info {
+      max-width: 488px;
+      margin-right: 32px;
+
+      & h1 {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      & .chin {
+        color: var(--gray-4);
+      }
+      & .description {
+        color: var(--gray-4);
+        margin-top: 28px;
+        margin-bottom: 0;
+
+        @media (max-width: 900px) {
+          margin-top: 18px;
+        }
+      }
+      & .links {
+        margin-top: 32px;
+        display: inline-flex;
+        flex-direction: column;
+
+        & > * {
+          &:not(:last-child) {
+            margin-bottom: 24px;
+          }
+        }
+      }
+    }
+
+    & > img {
+      align-self: center;
+      margin-right: -48px;
+      @media (max-width: 670px) {
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+.chin {
+  composes: g-type-label from global;
+}
+
+.description {
+  composes: g-type-long-body from global;
+}
--- a/website/components/hcp-callout-section/index.jsx
+++ b/website/components/hcp-callout-section/index.jsx
@ -0,0 +1,44 @@
+import styles from './HCPCalloutSection.module.css'
+import Button from '@hashicorp/react-button'
+
+export default function HcpCalloutSection({
+  id,
+  header,
+  title,
+  description,
+  chin,
+  image,
+  links,
+}) {
+  return (
+    <div className={styles.hcpCalloutSection} id={id}>
+      <div className={styles.header}>
+        <h2>{header}</h2>
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.info}>
+          <h1>{title}</h1>
+          <span className={styles.chin}>{chin}</span>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.links}>
+            {links.map((link, index) => {
+              const variant = index === 0 ? 'primary' : 'tertiary'
+              return (
+                <div key={link.text}>
+                  <Button
+                    title={link.text}
+                    linkType={link.type}
+                    url={link.url}
+                    theme={{ variant, brand: 'neutral', background: 'light' }}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </div>
+        <img alt={title} src={image} />
+      </div>
+    </div>
+  )
+}
--- a/website/components/subnav/index.jsx
+++ b/website/components/subnav/index.jsx
@ -6,13 +6,19 @@ export default function ConsulSubnav() {
  const router = useRouter()
  return (
    <Subnav
+      hideGithubStars={true}
      titleLink={{
        text: 'consul',
        url: '/',
      }}
      ctaLinks={[
-        { text: 'GitHub', url: 'https://www.github.com/hashicorp/consul' },
+        {
+          text: 'GitHub',
+          url: 'https://www.github.com/hashicorp/consul',
+        },
+
        { text: 'Download', url: '/downloads' },
+        { text: 'Try Cloud', url: 'https://cloud.hashicorp.com' },
      ]}
      currentPath={router.pathname}
      menuItemsAlign="right"
--- a/website/data/alert-banner.js
+++ b/website/data/alert-banner.js
@ -2,12 +2,11 @@ export const ALERT_BANNER_ACTIVE = true

 // https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
 export default {
-  tag: 'Webinar',
-  url:
-    'https://www.hashicorp.com/events/webinars/cloud-service-networking-secrets-management',
-  text: 'Getting Started with Service Networking & Secrets Management on Cloud',
-  linkText: 'Register Now',
+  tag: 'Announcement',
+  url: 'https://cloud.hashicorp.com',
+  text: 'HashiCorp Consul is now generally available on HCP',
+  linkText: 'Learn More',
  // Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
  // if you'd like the component to stop showing at or after a certain date
-  expirationDate: '2021-02-09T11:59:00-05:00',
+  expirationDate: '2021-02-14T11:59:00-05:00',
 }
--- a/website/pages/home/img/hcp-consul.svg
+++ b/website/pages/home/img/hcp-consul.svg
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@ -1,11 +1,11 @@
 import UseCases from '@hashicorp/react-use-cases'
 import BasicHero from '../../components/basic-hero'
 import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
-import CloudOfferingsList from '../../components/cloud-offerings-list'
 import PrefooterCTA from '../../components/prefooter-cta'
 import LearnCallout from '../../components/learn-callout'
 import CaseStudyCarousel from '../../components/case-study-carousel'
 import ProductFeaturesList from '@hashicorp/react-product-features-list'
+import HcpCalloutSection from 'components/hcp-callout-section'
 import MiniCTA from '../../components/mini-cta'

 export default function HomePage() {
@ -19,17 +19,15 @@ export default function HomePage() {
          {
            text: 'Get Started',
            url: 'https://learn.hashicorp.com/consul',
-            type: 'outbound',
          },
          {
-            text: 'Download',
-            url: '/downloads',
-            type: 'download',
+            text: 'Try Cloud',
+            url: 'https://cloud.hashicorp.com/',
          },
          {
-            text: 'Learn more about Consul cloud offerings',
-            url: '/#cloud-offerings',
-            type: 'inbound',
+            text: 'Download CLI',
+            url: '/downloads',
+            type: 'download',
          },
        ]}
        backgroundImage
@ -93,8 +91,7 @@ export default function HomePage() {
            title: 'Secure Consul with Vault',
            category: 'Step-by-Step Tutorials',
            time: '45 mins',
-            link:
-              'https://learn.hashicorp.com/collections/consul/vault-secure',
+            link: 'https://learn.hashicorp.com/collections/consul/vault-secure',
            image: require('./img/learn/Vault.svg?url'),
          },
        ]}
@ -221,40 +218,24 @@ export default function HomePage() {
        />
      </div>

-      <section
+      <HcpCalloutSection
        id="cloud-offerings"
-        className="cloud-offerings g-grid-container"
-      >
-        <h2 className="g-type-display-2">
-          Learn more about Consul cloud offerings
-        </h2>
-        <CloudOfferingsList
-          offerings={[
-            {
-              image: require('./img/cloud/hcs.jpg?url'),
-              eyebrow: 'General Availability',
-              title: 'HashiCorp Consul Service on Azure',
-              description: 'Native Azure Experience',
-              link: {
-                text: 'Get Started',
-                url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
-                type: 'outbound',
-              },
-            },
-            {
-              image: require('./img/cloud/hcp.jpg?url'),
-              eyebrow: 'General Availability',
-              title: 'HCP Consul on AWS',
-              description: 'HashiCorp Cloud Platform',
-              link: {
-                text: 'Get Started',
-                url: 'https://portal.cloud.hashicorp.com',
-                type: 'outbound',
-              },
-            },
-          ]}
-        />
-      </section>
+        title="HCP Consul"
+        chin="Available on AWS"
+        description="A fully managed service mesh to discover and securely connect any service."
+        image={require('./img/hcp-consul.svg?url')}
+        links={[
+          {
+            text: 'Learn More',
+            url: 'https://cloud.hashicorp.com/',
+          },
+          {
+            text: 'Looking for Consul Service on Azure?',
+            url: 'https://www.hashicorp.com/products/consul/service-on-azure',
+            type: 'inbound',
+          },
+        ]}
+      />

      <ConsulEnterpriseComparison />
      <PrefooterCTA />