diff --git a/website/components/case-study-carousel/style.css b/website/components/case-study-carousel/style.css index 31a0dd1c76..1a7e188fd2 100644 --- a/website/components/case-study-carousel/style.css +++ b/website/components/case-study-carousel/style.css @@ -3,7 +3,8 @@ flex-direction: column; align-items: center; position: relative; - padding-top: 128px; + padding-top: 0 !important; + padding-bottom: 0 !important; & h2 { margin-bottom: 30px; diff --git a/website/components/mini-cta/index.jsx b/website/components/mini-cta/index.jsx new file mode 100644 index 0000000000..02d5faff33 --- /dev/null +++ b/website/components/mini-cta/index.jsx @@ -0,0 +1,23 @@ +import Button from '@hashicorp/react-button' + +export default function MiniCTA({ title, description, link }) { + return ( +
+
+
+
{title}
+ {description &&

{description}

} +
+
+ ) +} diff --git a/website/components/mini-cta/style.css b/website/components/mini-cta/style.css new file mode 100644 index 0000000000..8df3092540 --- /dev/null +++ b/website/components/mini-cta/style.css @@ -0,0 +1,36 @@ +.g-mini-cta { + background: var(--gray-7); + text-align: center; + padding-bottom: 64px; + padding-top: 48px; + + & hr { + width: 64px; + color: var(--gray-5); + margin: 0 auto 64px auto; + + @media (max-width: 800px) { + margin: 0 auto 24px auto; + } + } + + & h5 { + margin: 0; + margin-bottom: 14px; + } + + & p { + margin: 0; + margin-bottom: 24px; + + @media (max-width: 800px) { + margin-bottom: 16px; + } + } + + & .g-btn { + & span { + font-weight: 500; + } + } +} diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index 2442872514..1e77b060bb 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -6,6 +6,7 @@ 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 MiniCTA from '../../components/mini-cta' export default function HomePage() { return ( @@ -84,14 +85,16 @@ export default function HomePage() { title: 'Deploy Consul Service Mesh on Kubernetes', category: 'Step-by-Step Tutorial', time: '10 mins', - link: 'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy', + link: + 'https://learn.hashicorp.com/tutorials/consul/service-mesh-deploy', image: require('./img/learn/getting-started.svg?url'), }, { title: 'Observe Layer 7 Traffic', category: 'Step-by-Step Tutorial', time: '15 mins', - link: 'https://learn.hashicorp.com/tutorials/consul/service-mesh-features', + link: + 'https://learn.hashicorp.com/tutorials/consul/service-mesh-features', image: require('./img/learn/kubernetes.svg?url'), }, ]} @@ -161,6 +164,15 @@ export default function HomePage() { ], }} /> +

Use Cases

@@ -209,32 +221,37 @@ export default function HomePage() { />
-
-

Learn more about Consul cloud offerings

+
+

+ Learn more about Consul cloud offerings +

diff --git a/website/pages/style.css b/website/pages/style.css index ed2f689962..cdc29ac81f 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -44,6 +44,7 @@ @import '../components/learn-callout/style.css'; @import '../components/case-study-carousel/style.css'; @import '../components/cloud-offerings-list/style.css'; +@import '../components/mini-cta/style.css'; @import '../components/search-bar/style.css'; /* Layouts */