diff --git a/website/package-lock.json b/website/package-lock.json index 262c186061..de3e4cbb6f 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1312,6 +1312,38 @@ "@hashicorp/js-utils": "^1.0.9-alpha.0" } }, + "@hashicorp/react-featured-slider": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-featured-slider/-/react-featured-slider-1.1.0.tgz", + "integrity": "sha512-TEZYQ9pqQvt/VyJzCZKLVIImfJkcKvMuMC7pCOZ/Wf0dblVqzTV0sAalXzv2ssj8wA3OaSw1WGg0Gum6/Fk43Q==", + "requires": { + "@hashicorp/react-button": "^2.2.0", + "@hashicorp/react-image": "^2.0.1", + "marked": "^1.0.0" + }, + "dependencies": { + "@hashicorp/react-button": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.2.0.tgz", + "integrity": "sha512-UUwn+yFWlTIGjWbPu2Z1griHPT0ywu/ECVAJ7OVqx9ZKXUxr0DOnwMGuqrkZS34hg/mmUAzYQhWqo8fycoQXig==", + "requires": { + "@hashicorp/react-global-styles": "^4.4.0", + "@hashicorp/react-inline-svg": "^1.0.0", + "slugify": "^1.3.6" + } + }, + "@hashicorp/react-global-styles": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.0.tgz", + "integrity": "sha512-lv6XR2plm2m3+qO6VE+RYquTzOODIt3mQ/1fBT1bn7wsR0qxFiuryW4JfsF94oCGk++LkDkRt/8V742HiT+fHw==" + }, + "marked": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.0.0.tgz", + "integrity": "sha512-Wo+L1pWTVibfrSr+TTtMuiMfNzmZWiOPeO7rZsQUY5bgsxpHesBEcIWJloWVTFnrMXnf/TL30eTFSGJddmQAng==" + } + } + }, "@hashicorp/react-footer": { "version": "3.1.14", "resolved": "https://registry.npmjs.org/@hashicorp/react-footer/-/react-footer-3.1.14.tgz", diff --git a/website/package.json b/website/package.json index 9185afc2dd..a2af662a77 100644 --- a/website/package.json +++ b/website/package.json @@ -20,6 +20,7 @@ "@hashicorp/react-docs-sidenav": "^3.2.3", "@hashicorp/react-docs-sitemap": "^1.0.0", "@hashicorp/react-enterprise-alert": "^2.1.0", + "@hashicorp/react-featured-slider": "^1.1.0", "@hashicorp/react-footer": "^3.1.14", "@hashicorp/react-global-styles": "^4.2.0", "@hashicorp/react-head": "^0.1.1", diff --git a/website/pages/style.css b/website/pages/style.css index 5b27a941cb..107b6a38b8 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -39,6 +39,7 @@ @import '~@hashicorp/react-code-block/dist/style.css'; @import '~@hashicorp/react-alert-banner/dist/style.css'; @import '~@hashicorp/react-use-cases/dist/style.css'; +@import '~@hashicorp/react-featured-slider/dist/style.css'; /* Local Components */ @import '../components/basic-hero/style.css'; diff --git a/website/pages/use-cases/_temp-children.jsx b/website/pages/use-cases/_temp-children.jsx new file mode 100644 index 0000000000..1f49efcdc3 --- /dev/null +++ b/website/pages/use-cases/_temp-children.jsx @@ -0,0 +1,82 @@ +import TextSplitWithImage from '@hashicorp/react-text-split-with-image' +import FeaturedSlider from '@hashicorp/react-featured-slider' + +export default function TempUseCaseChildren() { + return ( + <> +
+ +
+ +
+ +
+ + + + ) +} diff --git a/website/pages/use-cases/img/mercedes-card.jpg b/website/pages/use-cases/img/mercedes-card.jpg new file mode 100644 index 0000000000..f71ce5e95d Binary files /dev/null and b/website/pages/use-cases/img/mercedes-card.jpg differ diff --git a/website/pages/use-cases/img/mercedes-logo.svg b/website/pages/use-cases/img/mercedes-logo.svg new file mode 100644 index 0000000000..04b170693f --- /dev/null +++ b/website/pages/use-cases/img/mercedes-logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/website/pages/use-cases/multi-platform-service-mesh.jsx b/website/pages/use-cases/multi-platform-service-mesh.jsx index 2dec3ac7bc..13ae6a1c5b 100644 --- a/website/pages/use-cases/multi-platform-service-mesh.jsx +++ b/website/pages/use-cases/multi-platform-service-mesh.jsx @@ -1,5 +1,5 @@ import UseCaseLayout from '../../layouts/use-cases' -import TextSplitWithImage from '@hashicorp/react-text-split-with-image' +import TempUseCaseChildren from './_temp-children' export default function MultiPlatformServiceMeshPage() { return ( @@ -7,53 +7,7 @@ export default function MultiPlatformServiceMeshPage() { title="Multi-Platform Service Mesh" description="Establish a service mesh between multiple runtime and cloud environments. Create a consistent platform for application networking and security with identity based authorization, L7 traffic management, and service-to-service encryption." > -
- -
- -
- -
+ ) } diff --git a/website/pages/use-cases/network-middleware-automation.jsx b/website/pages/use-cases/network-middleware-automation.jsx index 0971fcf256..8574afb7ee 100644 --- a/website/pages/use-cases/network-middleware-automation.jsx +++ b/website/pages/use-cases/network-middleware-automation.jsx @@ -1,5 +1,5 @@ import UseCaseLayout from '../../layouts/use-cases' -import TextSplitWithImage from '@hashicorp/react-text-split-with-image' +import TempUseCaseChildren from './_temp-children' export default function NetworkMiddlewareAutomationPage() { return ( @@ -7,53 +7,7 @@ export default function NetworkMiddlewareAutomationPage() { title="Network Middleware Automation" description="Use Service Discovery to automate updates to complex network load balancer and firewall platforms." > -
- -
- -
- -
+ ) } diff --git a/website/pages/use-cases/service-discovery-and-health-checking.jsx b/website/pages/use-cases/service-discovery-and-health-checking.jsx index 240251ab65..240c6972c6 100644 --- a/website/pages/use-cases/service-discovery-and-health-checking.jsx +++ b/website/pages/use-cases/service-discovery-and-health-checking.jsx @@ -1,5 +1,5 @@ import UseCaseLayout from '../../layouts/use-cases' -import TextSplitWithImage from '@hashicorp/react-text-split-with-image' +import TempUseCaseChildren from './_temp-children' export default function ServiceDiscoveryAndHealthCheckingPage() { return ( @@ -7,53 +7,7 @@ export default function ServiceDiscoveryAndHealthCheckingPage() { title="Service Discovery and Health Checking" description="Service registry, integrated health checks, and DNS and HTTP interfaces enable any service to discover and be discovered by other services" > -
- -
- -
- -
+ ) }