Install page: Consul merchandising slot UI update to Consul toosl (#2245

)

src/pages/consul/install/consul-downloads.module.css

@@ -3,11 +3,16 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-.downloadToolsCardTitle {
-	color: var(--token-color-foreground-strong);
+.heading {
+	color: var(--token-color-consul-foreground);
 	margin-bottom: 4px;
 }
 
+.cta {
+	margin-top: 16px;
+	width: fit-content;
+}
+
 .downloadToolsCardDescription {
 	color: var(--token-color-foreground-faint);
 }

src/pages/consul/install/index.tsx

@@ -3,50 +3,42 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import CardLink from 'components/card-link'
 import Heading from 'components/heading'
 import Text from 'components/text'
 import consulData from 'data/consul.json'
 import { ProductData } from 'types/products'
 import ProductDownloadsView from 'views/product-downloads-view'
 import { generateGetStaticProps } from 'views/product-downloads-view/server'
-import viewStyles from 'views/product-downloads-view/product-downloads-view.module.css'
 import s from './consul-downloads.module.css'
+import Card from 'components/card'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
+import ButtonLink from 'components/button-link'
 
 const ConsulDownloadsMerchandisingSlot = () => {
 	return (
-		<div>
-			<Heading
-				className={viewStyles.heading2}
-				level={2}
-				size={300}
-				weight="bold"
-			>
-				Consul tools
+		<Card elevation="base">
+			<Heading className={s.heading} level={3} size={300} weight="semibold">
+				Consul Tools
 			</Heading>
-			<CardLink
-				ariaLabel="Download Consul tools"
-				href="/consul/docs/integrate/download-tools"
+			<Text
+				asElement="p"
+				className={s.downloadToolsCardDescription}
+				size={200}
+				weight="regular"
 			>
-				<Text
-					asElement="p"
-					className={s.downloadToolsCardTitle}
-					size={300}
-					weight="semibold"
-				>
-					Download Consul tools
-				</Text>
-				<Text
-					asElement="p"
-					className={s.downloadToolsCardDescription}
-					size={200}
-					weight="regular"
-				>
-					From this page you can download various tools for Consul. These tools
-					are maintained by HashiCorp and the Consul Community.
-				</Text>
-			</CardLink>
-		</div>
+				From this page you can download, review lease information and much more.
+				These tools are maintained by HashiCorp and the Consul community
+			</Text>
+			<ButtonLink
+				className={s.cta}
+				color="primary"
+				size="small"
+				href="/consul/docs/integrate/download-tools"
+				icon={<IconArrowRight16 />}
+				iconPosition="trailing"
+				text="Explore"
+			/>
+		</Card>
 	)
 }