Merge pull request #9677 from hashicorp/km.hcp

website: 2/2 Updates for HCP

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
+                <Button
-                  href={links[2].url}
+                  // eslint-disable-next-line react/no-array-index-key
-                >
+                  linkType={links[2].type}
-                  <span className="g-type-buttons-and-standalone-links">
+                  theme={{
-                    {links[2].text}
+                    variant: 'tertiary-neutral',
-                  </span>
+                    brand,
-                  <span className="icon">
+                    background: 'light',
-                    <InlineSvg src={RightArrowIcon} />
+                  }}
-                  </span>
+                  title={links[2].text}
-                </a>
+                  url={links[2].url}
+                />
               </div>
             )}
           </>

website/components/basic-hero/style.css

@@ -49,16 +49,11 @@
     display: flex;
     justify-content: center;
     margin-top: 32px;
-
     & a {
-      display: flex;
+      color: var(--gray-3);
-      align-items: center;
-      color: var(--gray-4);
-
-      & .icon {
-        margin-left: 8px;
-        height: 24px;
     }
+    & svg * {
+      stroke: var(--gray-2) !important;
     }
   }
 

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: {
+        links: [
+          {
             text: 'View Open Source Features',
             url: 'https://www.hashicorp.com/products/consul/pricing/',
             type: 'outbound',
           },
+        ],
       }}
       itemTwo={{
         title: 'Organizational Complexity',
@@ -22,11 +24,19 @@ 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: {
+        links: [
-          text: 'View Enterprise Features',
+          {
+            text: 'View Cloud Features',
+            url:
+              'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=ent_comparison',
+            type: 'outbound',
+          },
+          {
+            text: 'View Self-Managed Features',
             url: 'https://www.hashicorp.com/products/consul/pricing/',
             type: 'outbound',
           },
+        ],
       }}
       brand="consul"
     />

website/components/enterprise-comparison/index.jsx

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

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;
+}

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>
+  )
+}

website/components/subnav/index.jsx

@@ -6,13 +6,23 @@ 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/?utm_source=consul_io&utm_content=top_nav',
+        },
       ]}
       currentPath={router.pathname}
       menuItemsAlign="right"

website/data/alert-banner.js

@@ -2,12 +2,12 @@ export const ALERT_BANNER_ACTIVE = true
 
 // https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
 export default {
-  tag: 'Webinar',
+  tag: 'Announcement',
   url:
-    'https://www.hashicorp.com/events/webinars/cloud-service-networking-secrets-management',
+    'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=alert_banner',
-  text: 'Getting Started with Service Networking & Secrets Management on Cloud',
+  text: 'HashiCorp Consul is now generally available on HCP',
-  linkText: 'Register Now',
+  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',
 }

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,18 +19,17 @@ export default function HomePage() {
           {
             text: 'Get Started',
             url: 'https://learn.hashicorp.com/consul',
-            type: 'outbound',
           },
           {
-            text: 'Download',
+            text: 'Try Cloud',
+            url:
+              'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hero',
+          },
+          {
+            text: 'Download CLI',
             url: '/downloads',
             type: 'download',
           },
-          {
-            text: 'Learn more about Consul cloud offerings',
-            url: '/#cloud-offerings',
-            type: 'inbound',
-          },
         ]}
         backgroundImage
       />
@@ -93,8 +92,7 @@ export default function HomePage() {
             title: 'Secure Consul with Vault',
             category: 'Step-by-Step Tutorials',
             time: '45 mins',
-            link:
+            link: 'https://learn.hashicorp.com/collections/consul/vault-secure',
-              'https://learn.hashicorp.com/collections/consul/vault-secure',
             image: require('./img/learn/Vault.svg?url'),
           },
         ]}
@@ -221,40 +219,25 @@ export default function HomePage() {
         />
       </div>
 
-      <section
+      <HcpCalloutSection
         id="cloud-offerings"
-        className="cloud-offerings g-grid-container"
+        title="HCP Consul"
-      >
+        chin="Available on AWS"
-        <h2 className="g-type-display-2">
+        description="A fully managed service mesh to discover and securely connect any service."
-          Learn more about Consul cloud offerings
+        image={require('./img/hcp-consul.svg?url')}
-        </h2>
+        links={[
-        <CloudOfferingsList
-          offerings={[
           {
-              image: require('./img/cloud/hcs.jpg?url'),
+            text: 'Learn More',
-              eyebrow: 'General Availability',
+            url:
-              title: 'HashiCorp Consul Service on Azure',
+              'https://cloud.hashicorp.com/?utm_source=consul_io&utm_content=hcp_consul_detail',
-              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'),
+            text: 'Looking for Consul Service on Azure?',
-              eyebrow: 'General Availability',
+            url: 'https://www.hashicorp.com/products/consul/service-on-azure',
-              title: 'HCP Consul on AWS',
+            type: 'inbound',
-              description: 'HashiCorp Cloud Platform',
-              link: {
-                text: 'Get Started',
-                url: 'https://portal.cloud.hashicorp.com',
-                type: 'outbound',
-              },
           },
         ]}
       />
-      </section>
 
       <ConsulEnterpriseComparison />
       <PrefooterCTA />