github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds FeaturedSlider to use case pages

pull/7883/head
Brandon Romano 5 years ago
parent
29a6d814c2
commit
9f111faeaf
9 changed files with 141 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      website/package-lock.json
  2. 1
      website/package.json
  3. 1
      website/pages/style.css
  4. 82
      website/pages/use-cases/_temp-children.jsx
  5. BIN
      website/pages/use-cases/img/mercedes-card.jpg
  6. 19
      website/pages/use-cases/img/mercedes-logo.svg
  7. 50
      website/pages/use-cases/multi-platform-service-mesh.jsx
  8. 50
      website/pages/use-cases/network-middleware-automation.jsx
  9. 50
      website/pages/use-cases/service-discovery-and-health-checking.jsx

32
website/package-lock.json generated
Unescape View File

@ -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",

1
website/package.json
Unescape View File

@ -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",

1
website/pages/style.css
Unescape View File

@ -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';

82
website/pages/use-cases/_temp-children.jsx
Unescape View File

@ -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 (
<>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'left',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'right',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<FeaturedSlider
heading="Case Study"
theme="dark"
brand="consul"
features={[
{
logo: {
url: require('./img/mercedes-logo.svg?url'),
alt: 'Mercedes-Benz',
},
image: {
url: require('./img/mercedes-card.jpg?url'),
alt: 'Mercedes-Benz Case Study',
},
heading: 'On the Road Again',
content:
'How Mercedes-Benz delivers on service networking to accelerate delivery of its next-gen connected vehicles.',
link: {
text: 'Read Case Study',
url: 'https://www.hashicorp.com/case-studies/mercedes/',
type: 'outbound',
},
},
]}
/>
</>
)
}

BIN
website/pages/use-cases/img/mercedes-card.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 KiB

19
website/pages/use-cases/img/mercedes-logo.svg
Unescape View File

@ -0,0 +1,19 @@
<svg width="979" height="201" viewBox="0 0 979 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.403 99.9767L107.105 97.3595L163.53 136.094L102.403 99.9767Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.2677 97.8828L95.088 95.789L99.7902 21.9844L99.2677 97.8828Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M94.5653 97.8827L75.7567 113.062L98.2226 99.9764L94.5653 97.8827Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M100.313 0C44.9317 0 0 45.0156 0 100.5C0 155.984 44.9317 201 100.313 201C155.693 201 200.625 155.984 200.625 100.5C201.148 45.0156 156.216 0 100.313 0ZM91.9532 93.6953L100.313 9.94531H100.835L101.88 97.8828L115.986 89.5078L101.358 9.94531C150.991 10.4688 191.221 50.7734 191.221 100.5C191.221 116.727 187.041 131.383 179.727 144.469L117.031 91.6016L111.284 94.7422L179.727 144.992C179.727 145.516 179.204 145.516 179.204 146.039L102.402 101.547V117.25L178.682 146.562C163.008 172.734 133.75 190.531 100.835 190.531C67.92 190.531 39.1846 172.734 22.9883 146.562L99.2677 117.773V102.07L22.4658 146.039C22.4658 145.516 21.9434 145.516 21.9434 144.992L89.8634 95.2656L84.1163 92.125L21.4209 144.469C14.1065 131.383 9.92677 116.727 9.92677 100.5C9.92677 51.2969 49.1114 10.9922 98.2227 9.94531L86.2061 90.0313L91.9532 93.6953Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M542.315 107.305C542.315 89.5077 534.478 75.3749 517.237 75.3749C501.563 75.3749 492.159 89.5077 492.159 107.305C492.159 125.101 499.473 139.234 517.237 139.234C533.956 139.234 539.18 130.859 541.793 117.25H536.045C535.523 121.961 532.388 133.476 519.849 133.476C505.743 134 504.698 115.68 505.22 106.781V102.07C505.22 96.8358 504.698 80.6093 517.759 80.6093C528.209 80.6093 529.776 94.2186 529.776 102.07H505.22V106.781H542.315V107.305Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M248.692 53.3907V57.5782H252.349C254.961 57.5782 258.618 57.5782 258.618 61.2423L257.573 128.766C257.573 131.383 256.529 134 251.304 134H247.647V138.188H272.725V134H268.545C265.41 134 263.321 132.953 263.321 128.766L264.365 64.3829L291.011 134H293.623L320.791 63.8595L321.836 129.289C321.836 131.383 319.746 134.524 316.089 134.524H310.865V138.711H342.212V134.524H338.555C335.943 134.524 332.808 132.953 332.808 129.813L331.763 63.3361C331.763 61.2423 334.375 58.6251 336.465 58.6251H341.167V54.4376H318.701L295.191 115.68L271.68 53.3907H248.692Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M423.194 137.664V134.523H420.582C418.492 134.523 414.312 134 414.312 129.289V96.8358C414.312 86.8905 419.537 82.703 424.761 82.703C426.851 82.703 427.896 83.7499 427.374 87.4139C426.851 91.078 429.986 93.6952 432.598 93.1718C435.211 93.1718 438.868 92.6483 438.345 85.3202C437.823 78.5155 433.643 75.3749 426.851 75.3749C421.627 75.3749 416.924 79.0389 415.879 80.6093C414.312 82.703 412.745 81.6561 412.222 79.5624C412.222 77.4686 411.177 74.8514 408.565 75.8983C403.34 77.4686 398.116 78.5155 393.936 78.5155V81.1327C404.385 80.6093 403.34 85.8436 403.34 88.4608V129.289C403.34 134 399.161 134.523 397.071 134.523H393.414V137.664H423.194Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M478.574 79.5625C474.917 76.9453 470.215 75.375 464.468 75.375C448.794 75.375 439.39 89.5078 439.39 107.305C439.39 125.102 446.704 139.234 464.468 139.234C479.619 139.234 483.799 130.859 486.411 117.25H480.664C480.142 121.961 478.574 133.477 467.08 134C452.974 134.523 451.929 116.203 452.451 107.305C452.451 102.07 452.974 80.0859 464.99 80.0859C474.917 80.0859 481.187 87.4141 481.187 95.2656H484.321V74.3281H481.709L478.574 79.5625Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M837.506 134C823.399 134.523 822.354 116.203 822.877 107.305H859.971C859.971 89.5077 852.134 75.3749 834.893 75.3749C819.219 75.3749 809.815 89.5077 809.815 107.305C809.815 125.101 817.13 139.234 834.893 139.234C851.612 139.234 856.837 130.859 859.449 117.25H853.702C853.179 122.484 850.045 134 837.506 134ZM835.416 80.6093C845.865 80.6093 847.432 94.2186 847.432 102.07H822.877C822.877 96.8358 822.354 80.6093 835.416 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M633.223 134C619.117 134.523 618.072 116.203 618.595 107.305H655.689C655.689 89.5077 647.852 75.3749 630.611 75.3749C614.937 75.3749 605.533 89.5077 605.533 107.305C605.533 125.101 612.847 139.234 630.611 139.234C647.33 139.234 652.555 130.859 655.167 117.25H649.42C648.897 122.484 645.763 134 633.223 134ZM631.656 80.6093C642.105 80.6093 643.673 94.2186 643.673 102.07H619.117C618.595 96.8358 618.072 80.6093 631.656 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M369.903 134C355.797 134.523 354.752 116.203 355.274 107.305H392.369C392.369 89.5077 384.532 75.3749 367.291 75.3749C351.617 75.3749 342.213 89.5077 342.213 107.305C342.213 125.101 349.527 139.234 367.291 139.234C384.009 139.234 389.234 130.859 391.846 117.25H386.099C385.577 122.484 382.442 134 369.903 134ZM368.336 80.6093C378.785 80.6093 380.352 94.2186 380.352 102.07H355.274C355.274 96.8358 354.752 80.6093 368.336 80.6093Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M596.128 124.578V55.4844C596.128 52.8672 594.561 50.25 591.949 50.7734C586.724 52.3437 581.499 53.3906 577.32 53.3906V56.0078C584.634 55.4844 585.157 57.5781 585.157 60.1953V81.6562C582.022 78.5156 578.365 75.8984 571.573 75.8984C563.213 75.8984 547.539 82.7031 547.539 106.258C547.539 137.141 565.826 139.234 571.05 139.234C576.275 139.234 583.589 134.523 585.157 132.43C585.157 131.906 586.202 131.383 586.202 132.43C586.202 134.523 588.291 138.188 590.381 137.141C595.606 135.57 600.831 134.523 605.01 134.523V131.906C595.083 132.43 596.128 127.195 596.128 124.578ZM585.679 117.25C585.679 130.859 578.365 135.047 572.095 135.047C558.511 135.047 559.556 114.633 559.556 105.734C559.556 96.8359 560.079 80.0859 572.095 81.1328C584.112 82.7031 585.157 95.7891 585.157 103.117V117.25H585.679Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M741.895 102.07V96.3125H708.98V102.07H741.895Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.048 116.727V137.664H666.661L669.273 132.43C671.885 134.524 677.11 138.188 683.902 138.188C690.694 138.188 700.098 134.524 703.755 127.719C707.412 120.914 705.845 109.399 697.486 105.735C690.171 102.594 683.379 98.9298 678.677 96.3126C674.497 94.2189 673.975 90.5548 673.975 87.9376C674.497 83.7501 678.155 79.5626 685.992 79.5626C693.829 79.5626 698.008 85.8439 699.053 93.6954H701.665V73.8048H699.053L696.441 78.5157C691.216 74.8517 689.126 74.3282 684.424 74.3282C679.722 74.3282 671.885 76.9454 667.183 83.7501C662.481 90.5548 664.048 101.547 674.498 106.258C684.947 110.969 690.171 113.586 693.306 115.156C696.441 116.727 698.008 122.485 695.918 126.149C693.829 129.813 690.171 133.477 684.424 133.477C678.677 133.477 669.273 129.289 666.661 116.727H664.048Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M788.394 92.1251C794.142 90.5548 800.411 80.086 800.411 72.7579C800.411 65.4298 797.799 53.3907 780.558 53.3907H743.463V56.5314C747.12 56.5314 753.39 57.0548 753.39 63.3361V124.578C753.39 128.242 753.39 134 743.463 134V137.664H773.766C783.17 137.664 804.068 137.141 804.591 112.539C804.591 104.164 800.411 94.7423 788.394 92.1251ZM763.839 57.5782H776.378C785.782 57.5782 789.439 64.3829 789.439 72.7579C789.439 83.2267 786.305 91.6017 776.378 91.6017H763.839V57.5782ZM776.378 133.477H763.839V95.2657H777.945C786.305 95.2657 793.097 101.024 793.097 113.586C793.619 126.149 785.782 133.477 776.378 133.477Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M905.948 92.6483V129.289C905.948 134 901.768 134.523 899.678 134.523H898.111V137.664H925.279V134.523H922.667C920.577 134.523 916.397 134 916.397 129.289V92.6483C916.397 75.8983 901.246 75.3749 896.021 75.3749C890.797 75.3749 884.527 79.0389 883.482 80.6093C881.915 82.703 880.347 81.6561 879.825 79.5624C879.825 77.4686 878.78 74.8514 876.168 75.8983C870.943 77.4686 865.718 78.5155 861.539 78.5155V81.1327C871.988 80.6093 870.943 85.8436 870.943 88.4608V129.289C870.943 134 866.763 134.523 864.674 134.523H861.016V137.664H890.274V134.523H887.662C885.572 134.523 881.392 134 881.392 129.289V96.8358C881.392 91.6014 883.482 82.703 893.409 82.1796C903.858 81.1327 905.948 87.9374 905.948 92.6483Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M931.026 93.6953L935.728 76.9453H978.048L941.998 134.523H961.329C966.031 134.523 969.166 132.953 973.868 121.437H975.958L971.778 138.187H928.414L964.464 80.6094H948.268C944.088 80.6094 939.908 80.6094 933.639 94.2187H931.026V93.6953Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

50
website/pages/use-cases/multi-platform-service-mesh.jsx
Unescape View File

@ -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."
>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'left',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'right',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<TempUseCaseChildren />
</UseCaseLayout>
)
}

50
website/pages/use-cases/network-middleware-automation.jsx
Unescape View File

@ -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."
>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'left',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'right',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<TempUseCaseChildren />
</UseCaseLayout>
)
}

50
website/pages/use-cases/service-discovery-and-health-checking.jsx
Unescape View File

@ -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"
>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'left',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<div className="with-border">
<TextSplitWithImage
textSplit={{
heading: 'Multi-region, multi-cloud',
content:
'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
textSide: 'right',
links: [
{
text: 'Learn More',
url:
'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
type: 'outbound',
},
],
}}
image={{
url:
'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
alt: '',
}}
/>
</div>
<TempUseCaseChildren />
</UseCaseLayout>
)
}

Write Preview
Loading…
Cancel
Save