diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index 5b7e34162..fff092fbe 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -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">
+            ==&gt; virtualbox: virtualbox output will be in this color.
+          </span>
+          <span className="blue">
+            ==&gt; vmware: vmware output will be in this color.
+          </span>
+          <span className="blue">
+            ==&gt; vmware: Copying or downloading ISO. Progress will be reported
+            periodically.
+          </span>
+          <span className="blue">
+            ==&gt; vmware: Creating virtual machine disk
+          </span>
+          <span className="blue">
+            ==&gt; vmware: Building and writing VMX file
+          </span>
+          <span className="blue">
+            ==&gt; vmware: Starting HTTP server on port 8964
+          </span>
+          <span className="blue">
+            ==&gt; vmware: Starting virtual machine...
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Downloading VirtualBox guest additions. Progress
+            will be shown periodically
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Copying or downloading ISO. Progress will be
+            reported periodically.
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Starting HTTP server on port 8081
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Creating virtual machine...
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Creating hard drive...
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Creating forwarded port mapping for SSH (host
+            port 3213)
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Executing custom VBoxManage commands...
+            virtualbox: Executing: modifyvm packer --memory 480 virtualbox:
+            Executing: modifyvm packer --cpus
+          </span>
+          <span className="green">
+            ==&gt; virtualbox: Starting the virtual machine...
+          </span>
+          <span className="blue">==&gt; vmware: Waiting 10s for boot...</span>
+          <span className="green">
+            ==&gt; 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>
   )
 }
diff --git a/website/pages/home/style.css b/website/pages/home/style.css
index 8ab3e7d63..0f2bce32e 100644
--- a/website/pages/home/style.css
+++ b/website/pages/home/style.css
@@ -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;
   }
 }