homepage
This commit is contained in:
Jeff Escalante
parent
f48529e6ff
commit
899c0fd8a9
|
|
@ -1,7 +1,132 @@
|
|||
import Button from '@hashicorp/react-button'
|
||||
import VERSION from '../../data/version'
|
||||
|
||||
export default function Homepage() {
|
||||
return (
|
||||
<div id="p-home">
|
||||
<p>coming soon</p>
|
||||
<section id="hero">
|
||||
<img src="/img/logo-hashicorp.svg" alt="HashiCorp Packer Logo" />
|
||||
<h1 className="g-type-display-3">Build Automated Machine Images</h1>
|
||||
<div className="buttons">
|
||||
<Button title="Get Started" theme={{ brand: 'packer' }} />
|
||||
<Button
|
||||
title={`Download ${VERSION}`}
|
||||
theme={{
|
||||
variant: 'secondary',
|
||||
background: 'light',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section id="infrastructure-as-code" className="g-container">
|
||||
<div className="code-block">
|
||||
<div class="circles">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
$ packer build template.json
|
||||
<span className="green">
|
||||
==> virtualbox: virtualbox output will be in this color.
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: vmware output will be in this color.
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: Copying or downloading ISO. Progress will be reported
|
||||
periodically.
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: Creating virtual machine disk
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: Building and writing VMX file
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: Starting HTTP server on port 8964
|
||||
</span>
|
||||
<span className="blue">
|
||||
==> vmware: Starting virtual machine...
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Downloading VirtualBox guest additions. Progress
|
||||
will be shown periodically
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Copying or downloading ISO. Progress will be
|
||||
reported periodically.
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Starting HTTP server on port 8081
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Creating virtual machine...
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Creating hard drive...
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Creating forwarded port mapping for SSH (host
|
||||
port 3213)
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Executing custom VBoxManage commands...
|
||||
virtualbox: Executing: modifyvm packer --memory 480 virtualbox:
|
||||
Executing: modifyvm packer --cpus
|
||||
</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Starting the virtual machine...
|
||||
</span>
|
||||
<span className="blue">==> vmware: Waiting 10s for boot...</span>
|
||||
<span className="green">
|
||||
==> virtualbox: Waiting 10s for boot...
|
||||
</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<div className="tag g-type-label">Infrastructure as Code</div>
|
||||
<h2 className="g-type-display-2">Modern, Automated</h2>
|
||||
<p className="g-type-body">
|
||||
HashiCorp Packer is easy to use and automates the creation of any
|
||||
type of machine image. It embraces modern configuration management
|
||||
by encouraging you to use automated scripts to install and configure
|
||||
the software within your Packer-made images. Packer brings machine
|
||||
images into the modern age, unlocking untapped potential and opening
|
||||
new opportunities.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="integrations">
|
||||
<div className="g-container">
|
||||
<div className="logos">
|
||||
<img src="/img/integrations/azure.svg" alt="Microsoft Azure Logo" />
|
||||
<img
|
||||
src="/img/integrations/aws.svg"
|
||||
alt="Amazon Web Services Logo"
|
||||
/>
|
||||
<img src="/img/integrations/vmware.svg" alt="VMware Logo" />
|
||||
<img
|
||||
src="/img/integrations/google-cloud.svg"
|
||||
alt="Google Cloud Platform Logo"
|
||||
/>
|
||||
<img src="/img/integrations/docker.svg" alt="Docker Logo" />
|
||||
<img
|
||||
src="/img/integrations/digitalocean.svg"
|
||||
alt="DigitalOcean Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<div className="tag g-type-label">Integrations</div>
|
||||
<h2 className="g-type-display-2">Works Out of The Box</h2>
|
||||
<p className="g-type-body">
|
||||
Out of the box Packer comes with support to build images for
|
||||
Amazon EC2, CloudStack, DigitalOcean, Docker, Google Compute
|
||||
Engine, Microsoft Azure, QEMU, VirtualBox, VMware, and more.
|
||||
Support for more platforms is on the way, and anyone can add new
|
||||
platforms via plugins.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,28 +4,162 @@
|
|||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
& .use-cases {
|
||||
padding-top: 128px;
|
||||
padding-bottom: 64px;
|
||||
& #hero {
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
padding-top: 88px;
|
||||
& h1 {
|
||||
margin: 24px 0 40px 0;
|
||||
}
|
||||
|
||||
& .g-use-cases {
|
||||
& .icon {
|
||||
min-height: 140px;
|
||||
margin-bottom: 25px;
|
||||
& img {
|
||||
max-width: 358px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
& .buttons {
|
||||
& > * {
|
||||
@media (max-width: 350px) {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 0 10%;
|
||||
}
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
margin-right: 15px;
|
||||
|
||||
@media (max-width: 350px) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #infrastructure-as-code {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
& .code-block,
|
||||
& .text {
|
||||
width: calc(50% - 50px);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .code-block {
|
||||
margin-right: 50px;
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 15px 20px 20px;
|
||||
font-family: dejavu-sans-mono-web, monospace;
|
||||
font-size: 14px;
|
||||
overflow: scroll;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
& .circles {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
& span {
|
||||
display: block;
|
||||
white-space: pre;
|
||||
|
||||
&.green {
|
||||
color: #5bfb5a;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #53ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #integrations {
|
||||
background: var(--packer);
|
||||
color: white;
|
||||
|
||||
& > .g-container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 48px;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
& .logos,
|
||||
& .text {
|
||||
width: calc(50% - 50px);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .logos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 212px;
|
||||
margin-left: 50px;
|
||||
max-width: 600px;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 25px;
|
||||
width: calc(33.3333% - 10px);
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .tag {
|
||||
background: black;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 6px 9px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue