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 */