diff --git a/website/components/cta-hero/img/cta-image.jpg b/website/components/cta-hero/img/cta-image.jpg new file mode 100644 index 0000000000..cc44a82c2b Binary files /dev/null and b/website/components/cta-hero/img/cta-image.jpg differ diff --git a/website/components/cta-hero/index.jsx b/website/components/cta-hero/index.jsx new file mode 100644 index 0000000000..e60fb66cd4 --- /dev/null +++ b/website/components/cta-hero/index.jsx @@ -0,0 +1,47 @@ +import Button from '@hashicorp/react-button' +import TextSplit from '@hashicorp/react-text-split' +import s from './style.module.css' + +export default function CtaHero() { + return ( +
+ + + +
+ ) +} + +function Cta() { + return ( +
+ Consul stack +
+
+

Try HCP Consul

+
+
+

+ Hosted on HashiCorp Cloud Platform, HCP Consul is a fully managed + service mesh that discovers and securely connects any service. +

+
+
+
+ ) +} diff --git a/website/components/cta-hero/style.module.css b/website/components/cta-hero/style.module.css new file mode 100644 index 0000000000..812a5c27ab --- /dev/null +++ b/website/components/cta-hero/style.module.css @@ -0,0 +1,98 @@ +.ctaHero { + & :global(.g-text-split) :global(.g-grid-container) { + @media (width < 1120px) { + flex-direction: column-reverse; + } + + & > div { + @media (768px < width < 1120px) { + width: 40em; + } + + &:last-child { + @media (width < 1120px) { + margin-bottom: 64px; + text-align: center; + } + + & p { + @media (width < 1120px) { + margin: 16px auto; + } + } + } + } + + /** + * HACK: + * Overrides the H2 with styling from + * our global g-type-display-1 class. + * + * This was because there's no way to + * override the heading in + * with the designed h1 styling. + * + * TODO: + * Address this at the component + * level or revert to just using h2 + * as is default. + */ + & h2 { + font-size: 2.125rem; + letter-spacing: -0.008em; + line-height: 1.265em; + + @media (--medium-up) { + font-size: 2.625rem; + letter-spacing: -0.01em; + line-height: 1.19em; + } + + @media (--large) { + font-size: 3.125rem; + line-height: 1.2em; + } + } + + & p { + max-width: 440px; + } + } +} + +.cta { + padding: 24px; + padding-bottom: 51px; + border: 1px solid var(--gray-5); + + & img { + max-height: 50%; + max-width: 100%; + margin-bottom: 36px; + } +} + +.ctaContent { + display: flex; + @media (width < 520px) { + flex-direction: column; + } + + & .ctaHeading { + @media (width >= 520px) { + width: 40%; + } + + & h4 { + margin-top: 0; + @media (width >= 520px) { + width: 100px; + } + } + } + + & p { + margin-top: 0; + margin-bottom: 24px; + } +} diff --git a/website/package-lock.json b/website/package-lock.json index 745ffe368f..29a2084927 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1631,6 +1631,37 @@ } } }, + "@hashicorp/react-callouts": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-callouts/-/react-callouts-7.0.0.tgz", + "integrity": "sha512-Jy7tEgf2hi7fuXMjKLjs58+hkYjcNGxPcWGL6E4MQdTxKuYv4WjEukCrkMWr2Ke3d8cWPfnKF2+gZkBJq2OuuA==", + "requires": { + "@hashicorp/react-button": "^5.0.0", + "@hashicorp/react-inline-svg": "^1.0.2" + }, + "dependencies": { + "@hashicorp/react-button": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-5.0.0.tgz", + "integrity": "sha512-kzwmCtCKpZX+3TihBOyEakQ9cSlmO4wIZUDRtDASleza/J7KL9ANU22baqNXpV9plCXVHlKJOeMt9t74LLOIgg==", + "requires": { + "@hashicorp/react-inline-svg": "^1.0.0", + "classnames": "^2.2.6", + "slugify": "1.3.6" + } + }, + "@hashicorp/react-inline-svg": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz", + "integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw==" + }, + "slugify": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.6.tgz", + "integrity": "sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ==" + } + } + }, "@hashicorp/react-code-block": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@hashicorp/react-code-block/-/react-code-block-3.0.3.tgz", diff --git a/website/package.json b/website/package.json index fe533f5a7e..d1f17365e8 100644 --- a/website/package.json +++ b/website/package.json @@ -9,6 +9,7 @@ "@hashicorp/react-alert-banner": "5.0.0", "@hashicorp/react-button": "4.0.0", "@hashicorp/react-call-to-action": "1.0.3", + "@hashicorp/react-callouts": "^7.0.0", "@hashicorp/react-docs-page": "10.4.0", "@hashicorp/react-featured-slider": "1.1.10", "@hashicorp/react-hashi-stack-menu": "^1.1.0", diff --git a/website/pages/home/img/kubernetes/communication-arrows.svg b/website/pages/home/img/kubernetes/communication-arrows.svg new file mode 100644 index 0000000000..bc894626a0 --- /dev/null +++ b/website/pages/home/img/kubernetes/communication-arrows.svg @@ -0,0 +1 @@ + diff --git a/website/pages/home/img/kubernetes/logo.svg b/website/pages/home/img/kubernetes/logo.svg new file mode 100644 index 0000000000..e4c83bb380 --- /dev/null +++ b/website/pages/home/img/kubernetes/logo.svg @@ -0,0 +1 @@ + diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index cf1e43b9af..e0e9ca35fb 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -1,77 +1,119 @@ import UseCases from '@hashicorp/react-use-cases' -import BasicHero from '../../components/basic-hero' +import CtaHero from 'components/cta-hero' import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul' 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 Callouts from '@hashicorp/react-callouts' import MiniCTA from '../../components/mini-cta' export default function HomePage() { return (
- + @@ -92,7 +134,8 @@ export default function HomePage() { title: 'Migrate to Microservices on Kubernetes', category: 'Step-by-Step Tutorials', time: '45 mins', - link: 'https://learn.hashicorp.com/collections/consul/microservices', + link: + 'https://learn.hashicorp.com/collections/consul/microservices', image: require('./img/learn/kubernetes.svg?url'), }, ]} diff --git a/website/pages/home/style.css b/website/pages/home/style.css index b5e9033413..57d5b30445 100644 --- a/website/pages/home/style.css +++ b/website/pages/home/style.css @@ -43,4 +43,23 @@ } } } + + & .g-callouts { + & > .g-grid-container > .items.layout-two-up > .callout-item-wrapper { + padding: 0; + } + + & .callout-item.layout-two-up { + padding: 70px; + + &.theme-light { + background-color: #f2f2f3; + transition: filter 0.25s ease; + + &:hover { + filter: brightness(97%); + } + } + } + } } diff --git a/website/pages/style.css b/website/pages/style.css index 78d8e8490c..16bc2aa2bf 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -10,6 +10,7 @@ @import '~@hashicorp/react-alert-banner/style.css'; @import '~@hashicorp/react-button/styles/index.css'; +@import '~@hashicorp/react-callouts/style.css'; @import '~@hashicorp/react-call-to-action/style.css'; @import '~@hashicorp/react-code-block/style.css'; @import '~@hashicorp/react-consent-manager/style.css';