Add Using in Production Question (#8718)

* website: add using in prod question

* adjust padding

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;

website/components/mini-cta/index.jsx

@@ -0,0 +1,23 @@
+import Button from '@hashicorp/react-button'
+
+export default function MiniCTA({ title, description, link }) {
+  return (
+    <div className="g-mini-cta">
+      <div className="g-grid-container">
+        <hr />
+        <h5 className="g-type-display-4">{title}</h5>
+        {description && <p className="g-type-body">{description}</p>}
+        <Button
+          title={link.text}
+          url={link.url}
+          theme={{
+            variant: 'tertiary-neutral',
+            brand: 'neutral',
+            background: 'light'
+          }}
+          linkType={link.type}
+        />
+      </div>
+    </div>
+  )
+}

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

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() {
           ],
         }}
       />
+      <MiniCTA
+        title="Are you using Consul in production?"
+        link={{
+          text: 'Share your success story and receive special Consul swag.',
+          url:
+            'https://docs.google.com/forms/d/1B-4XlRndv2hX9G4Gt2dMnJBqilctrrof7dfpyQ1EVIg/edit',
+          type: 'outbound',
+        }}
+      />
 
       <div className="use-cases g-grid-container">
         <h2 className="g-type-display-2">Use Cases</h2>
@@ -209,32 +221,37 @@ export default function HomePage() {
         />
       </div>
 
-      <section id="cloud-offerings" className="cloud-offerings g-grid-container">
-        <h2 className="g-type-display-2">Learn more about Consul cloud offerings</h2>
+      <section
+        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",
+              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"
-              }
+                text: 'Get Started',
+                url: 'https://learn.hashicorp.com/consul/hcs-azure/deploy',
+                type: 'outbound',
+              },
             },
             {
               image: require('./img/cloud/hcp.jpg?url'),
-              eyebrow: "Private Beta",
-              title: "HCP Consul on AWS",
-              description: "HashiCorp Cloud Platform",
+              eyebrow: 'Private Beta',
+              title: 'HCP Consul on AWS',
+              description: 'HashiCorp Cloud Platform',
               link: {
-                text: "Request Access",
-                url: "https://www.hashicorp.com/cloud-platform/request-access/",
-                type: "outbound"
-              }
-            }
+                text: 'Request Access',
+                url: 'https://www.hashicorp.com/cloud-platform/request-access/',
+                type: 'outbound',
+              },
+            },
           ]}
         />
       </section>

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