mirror of https://github.com/status-im/consul.git
prep for redesign
This commit is contained in:
nicolelyn
Brandon Romano
parent
9f5ce266c5
commit
eb3e5ba1dc
|
|
@ -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() {
|
export default function HomePage() {
|
||||||
return (
|
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue