116 lines
4.5 KiB
JavaScript
116 lines
4.5 KiB
JavaScript
import s from './style.module.css'
|
|
import Button from '@hashicorp/react-button'
|
|
import TextSplit from 'components/temporary_text-split'
|
|
import CodeBlock from '@hashicorp/react-code-block'
|
|
import { VERSION } from 'data/version.json'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div>
|
|
<section className={s.hero}>
|
|
<div className="g-grid-container">
|
|
<img src="/img/logo-hashicorp.svg" alt="Vagrant Logo" />
|
|
<h1 className="g-type-display-3">
|
|
Development Environments Made Easy
|
|
</h1>
|
|
<div className={s.buttons}>
|
|
<Button title="Get Started" url="/intro/index" />
|
|
<Button
|
|
title={`Download ${VERSION}`}
|
|
theme={{ variant: 'secondary' }}
|
|
url="/downloads"
|
|
/>
|
|
<Button
|
|
title="Find Boxes"
|
|
theme={{ variant: 'secondary' }}
|
|
url="https://app.vagrantup.com/boxes/search"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={s.unifiedWorkflow}>
|
|
<div className="g-grid-container">
|
|
<TextSplit
|
|
text={{
|
|
tag: 'Unified Workflow',
|
|
headline: 'Simple and Powerful',
|
|
text:
|
|
'HashiCorp Vagrant provides the same, easy workflow regardless of your role as a developer, operator, or designer. It leverages a declarative configuration file which describes all your software requirements, packages, operating system configuration, users, and more.',
|
|
}}
|
|
>
|
|
<CodeBlock
|
|
code={`$ vagrant init hashicorp/bionic64
|
|
$ vagrant up
|
|
Bringing machine 'default' up with 'virtualbox' provider...
|
|
==> default: Importing base box 'hashicorp/bionic64'...
|
|
==> default: Forwarding ports...
|
|
default: 22 (guest)
|
|
=> 2222 (host) (adapter 1)
|
|
==> default: Waiting for machine to boot...
|
|
|
|
$ vagrant ssh
|
|
vagrant@bionic64:~$ _`}
|
|
/>
|
|
</TextSplit>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={s.enforceConsistency}>
|
|
<div className="g-grid-container">
|
|
<TextSplit
|
|
text={{
|
|
tag: 'Enforce Consistency',
|
|
headline: 'Production Parity',
|
|
text:
|
|
'The cost of fixing a bug exponentially increases the closer it gets to production. Vagrant aims to mirror production environments by providing the same operating system, packages, users, and configurations, all while giving users the flexibility to use their favorite editor, IDE, and browser. Vagrant also integrates with your existing configuration management tooling like Ansible, Chef, Docker, Puppet or Salt, so you can use the same scripts to configure Vagrant as production.',
|
|
}}
|
|
reverse={true}
|
|
>
|
|
<img src="/img/parity.svg" alt="Server Parity Diagram" />
|
|
</TextSplit>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={s.crossPlatform}>
|
|
<div className="g-grid-container">
|
|
<TextSplit
|
|
text={{
|
|
tag: 'Cross-Platform',
|
|
headline: 'Works where you work',
|
|
text:
|
|
"Vagrant works on Mac, Linux, Windows, and more. Remote development environments force users to give up their favorite editors and programs. Vagrant works on your local system with the tools you're already familiar with. Easily code in your favorite text editor, edit images in your favorite manipulation program, and debug using your favorite tools, all from the comfort of your local laptop.",
|
|
}}
|
|
>
|
|
{['apple', 'linux', 'windows'].map((platform) => (
|
|
<img
|
|
key={platform}
|
|
src={`/img/systems/${platform}.svg`}
|
|
alt={`${platform} logo`}
|
|
/>
|
|
))}
|
|
</TextSplit>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={s.trustedAtScale}>
|
|
<div className="g-grid-container">
|
|
<div className={s.tag}>Trusted at Scale</div>
|
|
<h2 className={s.h2}>Trusted By</h2>
|
|
<p className="g-type-body">
|
|
Vagrant is trusted by thousands of developers, operators, and
|
|
designers everyday. Here are just a few of the organizations that
|
|
choose Vagrant to automate their development environments, in
|
|
lightweight and reproducible ways.
|
|
</p>
|
|
<img
|
|
className={s.customerImg}
|
|
src="/img/customers.png"
|
|
alt="Logos of Vagrant customers"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|