prep for redesign
This commit is contained in:
nicolelyn
Brandon Romano
parent
8a26c22e71
commit
6dac9070d2
|
|
@ -1,309 +1,3 @@
|
|||
import Hero from '@hashicorp/react-hero'
|
||||
import BeforeAfterDiagram from '../../components/before-after'
|
||||
import SectionHeader from '@hashicorp/react-section-header'
|
||||
import consulEnterpriseLogo from '../../public/img/consul-connect/logos/consul-enterprise-logo.svg?include'
|
||||
import consulLogo from '../../public/img/consul-connect/logos/consul-logo.svg?include'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div className="consul-connect">
|
||||
{/* Hero */}
|
||||
<section id="hero">
|
||||
<Hero
|
||||
data={{
|
||||
centered: false,
|
||||
backgroundTheme: 'light',
|
||||
theme: 'consul-pink',
|
||||
smallTextTag: null,
|
||||
title: 'Secure Service Networking',
|
||||
description:
|
||||
'Consul is a service networking solution to connect and secure services across any runtime platform and public or private cloud',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Download',
|
||||
url: '/downloads',
|
||||
external: false,
|
||||
theme: '',
|
||||
},
|
||||
{
|
||||
title: 'Get Started',
|
||||
url:
|
||||
'https://learn.hashicorp.com/consul/getting-started/install',
|
||||
external: false,
|
||||
theme: '',
|
||||
},
|
||||
],
|
||||
helpText:
|
||||
'<a href="https://demo.consul.io">View demo of web UI</a>',
|
||||
videos: [
|
||||
{
|
||||
name: 'UI',
|
||||
playbackRate: 2,
|
||||
src: [
|
||||
{
|
||||
srcType: 'ogg',
|
||||
},
|
||||
{
|
||||
srcType: 'webm',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'CLI',
|
||||
src: [
|
||||
{
|
||||
srcType: 'mp4',
|
||||
url:
|
||||
'https://consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-cli.mp4',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
{/* Use Cases */}
|
||||
<section
|
||||
id="vault-use-cases"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text bg-light large-padding"
|
||||
>
|
||||
<div className="g-container">
|
||||
<SectionHeader
|
||||
headline="What can you do with Consul?"
|
||||
description="Consul is a service networking tool that allows you to discover services and secure network traffic."
|
||||
/>
|
||||
|
||||
<div className="g-use-cases">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/kubernetes.png"
|
||||
alt="Upgrade services"
|
||||
/>
|
||||
<h3>Consul-Kubernetes Deployments</h3>
|
||||
<p>
|
||||
Use Consul service discovery and service mesh features with
|
||||
Kubernetes.{' '}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/kubernetes/minikube?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=jtbd-k8s"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/connect.png"
|
||||
alt="Connect services"
|
||||
/>
|
||||
<h3>Secure Service Communication</h3>
|
||||
<p>
|
||||
Secure and observe communication between your services
|
||||
without modifying their code.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/getting-started/connect?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=connect"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-jtbd/load-balance.png"
|
||||
alt="Load balance services"
|
||||
/>
|
||||
<h3>Dynamic Load Balancing</h3>
|
||||
<p>
|
||||
Automate load balancer configuration with Consul and
|
||||
HAProxy, Nginx, or F5.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/consul/integrations/nginx-consul-template?utm_source=consul.io&utm_medium=home-page&utm_content=jtbd&utm_term=lb"
|
||||
className="button download"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Static => Dynamic (Before & After) */}
|
||||
<section
|
||||
id="static-dynamic"
|
||||
className="g-section-block layout-vertical theme-white-background-black-text large-padding"
|
||||
>
|
||||
<div className="g-grid-container">
|
||||
<SectionHeader
|
||||
headline="Service-based networking for dynamic infrastructure"
|
||||
description="The shift from static infrastructure to dynamic infrastructure changes the approach to networking from host-based to service-based. Connectivity moves from the use of static IPs to dynamic service discovery, and security moves from static firewalls to service identity."
|
||||
/>
|
||||
<BeforeAfterDiagram
|
||||
beforeHeading="Static"
|
||||
beforeSubTitle="Host-based networking"
|
||||
beforeImage="/img/consul-connect/svgs/static.svg"
|
||||
afterHeading="Dynamic"
|
||||
afterSubTitle="Service-based networking"
|
||||
afterImage="/img/consul-connect/svgs/dynamic.svg"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className="g-section bg-light border-top small-padding">
|
||||
<div className="g-container">
|
||||
<div className="g-text-asset">
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="g-type-display-3">Extend and Integrate</h3>
|
||||
<p className="g-type-body">
|
||||
Provision clusters on any infrastructure, connect to
|
||||
services over TLS via proxy integrations, and Serve TLS
|
||||
certificates with pluggable Certificate Authorities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<picture>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcSet="
|
||||
/img/consul-connect/grid_2/grid_2_300.webp 300w,
|
||||
/img/consul-connect/grid_2/grid_2_704.webp 704w,
|
||||
/img/consul-connect/grid_2/grid_2_1256.webp 1256w"
|
||||
/>
|
||||
<source
|
||||
type="image/png"
|
||||
srcSet="
|
||||
/img/consul-connect/grid_2/grid_2_300.png 300w,
|
||||
/img/consul-connect/grid_2/grid_2_704.png 704w,
|
||||
/img/consul-connect/grid_2/grid_2_1256.png 1256w"
|
||||
/>
|
||||
<img
|
||||
src="/img/consul-connect/grid_2/grid_2_1256.png"
|
||||
alt="Extend and Integrate"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Companies Using Consul Logos */}
|
||||
<section
|
||||
id="companies-using-consul"
|
||||
className="g-section-block layout-vertical theme-light-gray large-padding"
|
||||
>
|
||||
<div className="g-container">
|
||||
<SectionHeader headline="Companies that trust Consul" />
|
||||
<div className="g-logo-grid">
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_sap-ariba_space.svg"
|
||||
alt="SAP Ariba"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_citadel_space.svg"
|
||||
alt="Citadel"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_barclays_space.svg"
|
||||
alt="Barclays"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_itv_space.svg"
|
||||
alt="itv"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_spaceflight-industries_space.svg"
|
||||
alt="Spaceflight Industries"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/img/consul-connect/logos/logo_lotto-nz_space.svg"
|
||||
alt="MyLotto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="home-cta-section">
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: consulLogo,
|
||||
}}
|
||||
/>
|
||||
<p className="g-type-body">
|
||||
Consul Open Source addresses the technical complexity of
|
||||
connecting services across distributed infrastructure.
|
||||
</p>
|
||||
<div>
|
||||
<a href="/downloads.html" className="button white download">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="22"
|
||||
viewBox="0 0 20 22"
|
||||
>
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z" />
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: consulEnterpriseLogo,
|
||||
}}
|
||||
/>
|
||||
<p className="g-type-body">
|
||||
Consul Enterprise addresses the organizational complexity of
|
||||
large user bases and compliance requirements with collaboration
|
||||
and governance features.
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.hashicorp.com/products/consul"
|
||||
className="button secondary white"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return <></>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue