chore: updates alert banner data

* Initial draft of Packer Integration Program docs page

- [ ] Add text from program document.
- [ ] Fix image alignment
- [ ] Fix Checklist alignment (remove bullets if possible)
- [ ] Validate with program team

* Fix broken markdown

* fix styling on centered image and checklist

* revert package-lock update

* Update packer-integration-program.mdx

Fix a few formatting issues

Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>

main.go

@@ -475,6 +475,7 @@ func inPlugin() bool {
 	return os.Getenv(pluginsdk.MagicCookieKey) == pluginsdk.MagicCookieValue
 }
 
+// junk
 func init() {
 	// Seed the random number generator
 	rand.Seed(time.Now().UTC().UnixNano())

version/version.go

@@ -14,7 +14,7 @@ const Version = "1.7.2"
 // A pre-release marker for the version. If this is "" (empty string)
 // then it means that it is a final release. Otherwise, this is a pre-release
 // such as "dev" (in development), "beta", "rc1", etc.
-const VersionPrerelease = "dev"
+const VersionPrerelease = ""
 
 var PackerVersion *pluginVersion.PluginVersion
 

website/components/animated-terminal/index.tsx

@@ -0,0 +1,42 @@
+import CommandLineTerminal from '@hashicorp/react-command-line-terminal'
+import { useEffect, useState } from 'react'
+
+export default function AnimatedTerminal({
+  lines,
+  frameLength = 1000,
+  paused,
+  loop,
+}) {
+  // Determine the total number of frames
+  let totalFrames = 0
+  lines.forEach((line) => {
+    let frames = line.frames ? line.frames : 1
+    if (Array.isArray(line.code)) {
+      totalFrames += line.code.length * frames
+    } else {
+      totalFrames += frames
+    }
+  })
+
+  // Set up Animation
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    let interval = setInterval(() => {
+      if (paused) return
+      if (loop) return setFrame((frame) => frame + 1)
+      if (frame + 1 < totalFrames) {
+        setFrame((frame) => frame + 1)
+      }
+    }, frameLength)
+    return () => clearInterval(interval)
+  }, [frame])
+
+  // Reset Frames if our lines change
+  useEffect(() => {
+    setFrame(0)
+  }, [lines])
+
+  const renderedLines = [...lines.slice(0, frame)]
+
+  return <CommandLineTerminal product="packer" lines={renderedLines} />
+}

website/components/branded-cta/index.tsx

@@ -0,0 +1,33 @@
+import s from './style.module.css'
+import Button from '@hashicorp/react-button'
+
+export default function BrandedCta({ heading, content, links }) {
+  return (
+    <div className={s.brandedCta}>
+      <div className={`g-grid-container ${s.contentContainer}`}>
+        <h2 className={`g-type-display-2 ${s.heading}`}>{heading}</h2>
+        <div className="content-and-links">
+          <p className={`g-type-body-large ${s.content}`}>{content}</p>
+          <div className={s.links}>
+            {links.map((link, stableIdx) => {
+              return (
+                <Button
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={stableIdx}
+                  linkType={link.type || ''}
+                  theme={{
+                    variant: stableIdx === 0 ? 'primary' : 'secondary',
+                    brand: 'packer',
+                    background: 'light',
+                  }}
+                  title={link.text}
+                  url={link.url}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

website/components/branded-cta/style.module.css

@@ -0,0 +1,67 @@
+.brandedCta {
+  padding: 88px 0;
+  background-color: var(--packer-secondary);
+  background-image: url('/img/branded-cta/cta-right.svg');
+  background-position: bottom right;
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+
+  @media (--small) {
+    background-position: bottom 0 right -130px;
+  }
+
+  @media (462px <= width < 600px) {
+    background-position: bottom 0 right -260px;
+  }
+
+  @media (width < 462px) {
+    background-position: bottom 0 right -170px;
+  }
+}
+
+.contentContainer {
+  @media (width >= 992px) {
+    display: flex;
+  }
+
+  @media (width < 992px) {
+    flex-direction: column;
+  }
+}
+
+.heading {
+  color: var(--black);
+  margin-top: 0;
+
+  @media (width >= 992px) {
+    flex-basis: 33.3%;
+    margin: 0;
+  }
+}
+
+.content {
+  max-width: 647px;
+  margin: 0;
+  color: var(--gray-2);
+}
+
+.content-and-links {
+  @media (width >= 992px) {
+    flex-basis: 66.6%;
+    margin-left: 32px;
+  }
+
+  & .g-type-body-large {
+    max-width: 35em;
+  }
+}
+
+.links {
+  margin-top: 40px;
+  margin-bottom: -16px;
+
+  & a {
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+}

website/components/checklist/check-circle-filled.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 9A8.25 8.25 0 1 1 .75 9a8.25 8.25 0 0 1 16.5 0zm-11.47.223l1.72 1.72 4.19-4.504A.75.75 0 1 1 12.75 7.5l-4.72 5.034a.748.748 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06z" fill="#2E71E5"/></svg>

website/components/checklist/index.jsx

@@ -0,0 +1,5 @@
+import s from './style.module.css'
+
+export default function ChecklistWrapper({ children }) {
+  return <div className={s.root}>{children}</div>
+}

website/components/checklist/style.module.css

@@ -0,0 +1,20 @@
+.root {
+  & ul {
+    list-style: none;
+    margin-left: 2rem;
+
+    & li {
+      color: #525252;
+
+      &::before {
+        content: '';
+        display: block;
+        width: 18px;
+        margin-left: calc(-1 * 1.6rem);
+        height: 18px;
+        top: 7px;
+        background: url('./check-circle-filled.svg');
+      }
+    }
+  }
+}

website/components/homepage-hero/index.tsx

@@ -0,0 +1,48 @@
+import Alert from '@hashicorp/react-alert'
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+export default function HomepageHero({
+  heading,
+  heroFeature,
+  subheading,
+  links,
+  alert,
+}) {
+  return (
+    <div className={s.homepageHero}>
+      <div className={s.gridContainer}>
+        <div className={s.content}>
+          {alert ? (
+            <Alert
+              url={alert.url}
+              tag={alert.tag}
+              product="packer"
+              text={alert.text}
+              textColor="dark"
+            />
+          ) : null}
+          <h1 className={s.heading}>{heading}</h1>
+          <p className={s.subheading}>{subheading}</p>
+          <div className={s.links}>
+            {links.map((link, index) => (
+              <Button
+                key={link.text}
+                title={link.text}
+                linkType={link.type}
+                url={link.url}
+                theme={{
+                  variant: index === 0 ? 'primary' : 'secondary',
+                  brand: index === 0 ? 'packer' : 'neutral',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+        <div className={s.heroFeature}>
+          <div className={s.heroFeatureFrame}>{heroFeature}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

website/components/homepage-hero/style.module.css

@@ -0,0 +1,90 @@
+.homepageHero {
+  min-height: min(45vw, 600px);
+  padding: 64px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #f0fbff;
+  background-image: url(/img/homepage-hero/hero-right.svg);
+  background-position: bottom -250px right;
+  background-repeat: no-repeat;
+  background-size: contain;
+  @media (--medium-up) {
+    background-position: top right;
+  }
+}
+
+.gridContainer {
+  composes: g-grid-container from global;
+  position: relative;
+  @media (--large) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    width: 100%;
+  }
+}
+
+.content {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  color: var(--gray-2);
+  @media (--medium-up) {
+    max-width: 550px;
+  }
+  @media (--large) {
+    align-items: flex-start;
+    text-align: left;
+    width: 100%;
+  }
+}
+
+.heading {
+  composes: g-type-display-1 from global;
+  margin-top: 12px;
+  margin-bottom: 24px;
+}
+
+.heroFeature {
+  display: none;
+  position: relative;
+  @media (--large) {
+    display: flex;
+    min-height: 500px;
+  }
+}
+
+.heroFeatureFrame {
+  position: absolute;
+  width: calc(100% + 80px);
+  height: 100%;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  & a {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+  @media (--large) {
+    width: auto;
+    justify-content: flex-start;
+  }
+}
+
+.subheading {
+  composes: g-type-body-large from global;
+  color: inherit;
+  margin: 0;
+  font-size: 17px;
+  line-height: 25px;
+  margin-bottom: 40px;
+}

website/components/integrations-text-split/index.tsx

@@ -0,0 +1,21 @@
+import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
+
+export default function IntegrationsTextSplit({
+  heading,
+  links,
+  content,
+  image,
+}) {
+  return (
+    <TextSplitWithImage
+      textSplit={{
+        heading,
+        product: 'packer',
+        content,
+        linkStyle: 'buttons',
+        links,
+      }}
+      image={image}
+    />
+  )
+}

website/components/plugin-tier-label/style.module.css

@@ -29,12 +29,6 @@ to match Terraform Registry tier labels.
   }
 }
 
-/* add margin-top to separate from the adjacent
-search bar present on docs pages */
-:global(.g-search) + .root {
-  margin-top: 40px;
-}
-
 .text {
   /* composes */
   composes: g-type-body-small-strong from global;

website/components/remote-plugin-docs/server.js

@@ -54,7 +54,7 @@ async function generateStaticProps({
   // (current options are "Official" or "Community")
   function mdxContentHook(mdxContent) {
     if (pluginTier) {
-      const tierMdx = `<PluginTierLabel tier="${pluginTier}" />\n\n`
+      const tierMdx = `<br/><PluginTierLabel tier="${pluginTier}" />\n\n`
       mdxContent = tierMdx + mdxContent
     }
     return mdxContent

website/components/remote-plugin-docs/utils/resolve-nav-data.js

@@ -132,7 +132,13 @@ async function mergeRemotePlugins(remotePluginsFile, navData, currentPath) {
 // which contains { filePath, fileString } data for the remote
 // plugin doc .mdx file
 async function resolvePluginEntryDocs(pluginConfigEntry, currentPath) {
-  const { title, path: slug, repo, version } = pluginConfigEntry
+  const {
+    title,
+    path: slug,
+    repo,
+    version,
+    sourceBranch = 'main',
+  } = pluginConfigEntry
   const docsMdxFiles = await fetchPluginDocs({ repo, tag: version })
   // We construct a special kind of "NavLeaf" node, with a remoteFile property,
   // consisting of a { filePath, fileString, sourceUrl }, where:
@@ -155,7 +161,7 @@ async function resolvePluginEntryDocs(pluginConfigEntry, currentPath) {
     const { nav_title, sidebar_title } = frontmatter
     const title = nav_title || sidebar_title || basename
     // construct sourceUrl (used for "Edit this page" link)
-    const sourceUrl = `https://github.com/${repo}/blob/${version}/${filePath}`
+    const sourceUrl = `https://github.com/${repo}/blob/${sourceBranch}/${filePath}`
     // determine pluginTier
     const pluginOwner = repo.split('/')[0]
     const pluginTier = pluginOwner === 'hashicorp' ? 'official' : 'community'

website/components/section-break-cta/index.tsx

@@ -0,0 +1,21 @@
+import Button from '@hashicorp/react-button'
+import s from './style.module.css'
+
+export default function SectionBreakCta({ heading, link }) {
+  return (
+    <div className={s.sectionBreakCta}>
+      <hr />
+      <h4 className={s.heading}>{heading}</h4>
+      <Button
+        title={link.text}
+        url={link.url}
+        theme={{
+          brand: 'neutral',
+          variant: 'tertiary-neutral',
+          background: 'light',
+        }}
+        linkType="outbound"
+      />
+    </div>
+  )
+}

website/components/section-break-cta/style.module.css

@@ -0,0 +1,33 @@
+.sectionBreakCta {
+  padding: 88px 24px;
+  max-width: 800px;
+  display: grid;
+  grid-gap: 24px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin: 0 16px;
+  background-color: var(--white);
+  align-items: center;
+
+  @media (--medium-up) {
+    margin: 0 auto 104px auto;
+  }
+  & hr {
+    position: absolute;
+    top: 56px;
+    left: calc(50% - 32px);
+    width: 64px;
+    background-color: var(--packer);
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+}
+
+.heading {
+  composes: g-type-display-4 from global;
+  margin: 0;
+  @media (--medium-up) {
+    padding: 0 88px;
+  }
+}

website/components/subnav/index.jsx

@@ -14,7 +14,7 @@ export default function PackerSubnav() {
         { text: 'GitHub', url: 'https://www.github.com/hashicorp/packer' },
         { text: 'Download', url: '/downloads' },
       ]}
-      currentPath={router.pathname}
+      currentPath={router.asPath}
       menuItemsAlign="right"
       menuItems={subnavItems}
       constrainWidth

website/content/docs/commands/hcl2_upgrade.mdx

@@ -1,7 +1,7 @@
 ---
 description: |
   The `packer hcl2_upgrade` Packer command is used to transpile a JSON
-  configuration template to it's formatted HCL2 counterpart. The command will
+  configuration template to its formatted HCL2 counterpart. The command will
   return a zero exit status on success, and a non-zero exit status on failure.
 page_title: packer hcl2_upgrade - Commands
 ---

website/content/docs/plugins/creation/custom-datasources.mdx

@@ -46,7 +46,7 @@ function, check our
 ### The "OutputSpec" Method
 
 This method returns a [hcldec.ObjectSpec](/guides/hcl/component-object-spec) of the data source output.
-The object spec can be generated using the command [`mapstructure-to-hcl2`](https://github.com/hashicorp/packer/tree/master/cmd/mapstructure-to-hcl2)
+The object spec can be generated using the command [`packer-sdc mapstructure-to-hcl2`](https://github.com/hashicorp/packer-plugin-sdk/tree/main/cmd/packer-sdc)
 just like the configuration spec for the `ConfigSpec` method.
 
 This method is used in `packer validate` command. Packer will use the spec to assign

website/content/docs/plugins/creation/index.mdx

@@ -247,21 +247,6 @@ To include plugin docs on Packer.io a global pre-hook has been added to the main
 
 The `docs.zip` file will contain all of the `.mdx` files under the plugins root `docs/` directory that can be consumed remotely by Packer.io.
 
-Once the first `docs.zip` file has been included into a release you will need to open a one time pull-request against [hashicorp/packer](https://github.com/hashicorp/packer) to register the plugin docs.
-
-This is done by adding the block below for the respective plugin to the file [website/data/docs-remote-navigation.js](https://github.com/hashicorp/packer/blob/master/website/data/docs-remote-plugins.json).
-
-```json
-{
-   "title": "Scaffolding",
-   "path": "scaffolding",
-   "repo": "hashicorp/packer-plugin-scaffolding",
-   "version": "latest"
- }
-```
-
-If a plugin maintainer wishes to only include a specific version of released docs then the `"version"` key in the above configuration should be set to a released version of the plugin. Otherwise it should be set to "latest".
-
 </Tab>
 
 <Tab heading="Manually generating docs.zip">
@@ -272,23 +257,26 @@ The documentation structure needed for Packer.io can be generated manually, by c
 [[ -d docs/ ]] && zip -r docs.zip docs/
 ```
 
+</Tab>
+</Tabs>
+
 Once the first `docs.zip` file has been included into a release you will need to open a one time pull-request against [hashicorp/packer](https://github.com/hashicorp/packer) to register the plugin docs.
 
-This is done by adding the block below for the respective plugin to the file [website/data/docs-remote-navigation.js](https://github.com/hashicorp/packer/blob/master/website/data/docs-remote-plugins.json).
+This is done by adding the block below for the respective plugin to the file [website/data/docs-remote-plugins.json](https://github.com/hashicorp/packer/blob/master/website/data/docs-remote-plugins.json).
 
 ```json
 {
-   "title": "Scaffolding",
-   "path": "scaffolding",
-   "repo": "hashicorp/packer-plugin-scaffolding",
-   "version": "latest"
- }
+  "title": "Scaffolding",
+  "path": "scaffolding",
+  "repo": "hashicorp/packer-plugin-scaffolding",
+  "version": "latest",
+  "sourceBranch": "main"
+}
 ```
 
-If a plugin maintainer wishes to only include a specific version of released docs then the `"version"` key in the above configuration should be set to a released version of the plugin. Otherwise it should be set to "latest".
+If a plugin maintainer wishes to only include a specific version of released docs, then the `"version"` key in the above configuration should be set to a released version of the plugin. Otherwise it should be set to `"latest"`.
 
-</Tab>
-</Tabs>
+The `"sourceBranch"` key in the above configuration ensures potential contributors can link back to source files in the plugin repository from the Packer docs site. If a `"sourceBranch"` value is not present, it will default to `"main"`.
 
 ### Plugin Development Tips and FAQs
 

website/content/docs/plugins/packer-integration-program.mdx

@@ -0,0 +1,151 @@
+---
+description: |
+  The HashiCorp Packer Integration Program allows vendors to integrate
+  their products to work with Packer.
+page_title: Integration Program
+---
+
+# Packer Integration Program
+
+The HashiCorp Packer Integration Program allows vendors to integrate their products to work with Packer.
+
+Vendors integrating their solutions via the Packer Integration Process provide their customers a verified and seamless user experience. The Packer Integration Program currently only supports coding with the Go programming language.
+
+This program is intended to be largely a self-service process with links and guidance to information sources, clearly defined steps, and checkpoints.
+
+### Types of Packer Integrations
+
+Packer is an open source tool for creating identical machine images for multiple platforms from a single source configuration.
+Packer is lightweight, runs on every major operating system, and is highly performant, creating machine images for multiple platforms in parallel. Packer does not replace configuration management like Chef or Puppet. In fact, when building images, Packer is able to use tools like Chef or Puppet to install software onto the image.
+
+A machine image is a single static unit that contains a pre-configured operating system and installed software which is used to quickly create new running machines. Machine image formats change for each platform. Some examples include AMIs for EC2, VMDK/VMX files for VMware, OVF exports for VirtualBox, etc. To know more about use cases of Packer click ([Use Cases - Introduction | Packer by HashiCorp](https://www.packer.io/intro/use-cases))
+
+For a full description of the current features please refer to the Packer website ([Packer by HashiCorp](https://www.packer.io/)).
+
+The diagram below depicts the key Packer integration categories and types.
+
+<figure style={{ margin: '3rem 0', textAlign: 'center' }}>
+  <img
+    src="/img/docs/packer-ecosystem-diagram.png"
+    alt="Packer Ecosystem Integration Diagram"
+    style={{ margin: '1rem auto', width: '460px', display: 'block' }}
+  />
+  <figcaption class="g-type-body-small" style={{ color: '#6d6d6d' }}>
+    Packer Ecosystem Intergation Diagram
+  </figcaption>
+</figure>
+
+Main Packer categories for partners to integrate with include:
+
+- **Data Sources**
+  - Data Sources allow users to retrieve values from a remote API and store them as variables in the Packer configuration template. An example is the [AWS secrets manager](https://www.packer.io/docs/datasources/amazon/secretsmanager) data source.
+- **Builders**
+  - Builders manage the VM lifecycle. They manage launching a vm/instance, running provisioners against that instance, shutting the instance down, and saving an artifact image from that instance. Your builder handles all of the setup and cleanup costs associated with creating the output image artifact.
+- **Provisioners**
+  - Provisioners are run against the instance launched by the builder. They generally provide an interface for interacting with a particular provisioning tool, such as Ansible, Puppet, or Chef.
+- **Post-Processors**
+  - Post-Processors manage the image artifact after it has been created. This can be something general like running a compression tool against the artifact, or something specific like uploading it to a particular cloud service.
+
+### Development Process
+
+The Packer integration development process is divided into six steps. By following these steps, Packer integrations can be developed alongside HashiCorp to ensure that the integrations are able to be verified and supported in Packer as quickly as possible. A visual representation of the self-guided steps is depicted below.
+
+![Packer Integration Program Steps](/img/docs/packer-integration-steps-diagram.png 'Packer Integration Program Steps')
+
+The individual Packer integration steps include:
+
+1. Engage: Initial contact between vendor and HashiCorp
+1. Enable: Information and articles to aid with the development of the integration
+1. Dev/Test: Integration development and test process
+1. Review: HashiCorp code review and verification of integration (iterative process)
+1. Release: Verified integration made available and listed on the HashiCorp website once the HashiCorp technology partnership agreement has been executed
+1. Support: Ongoing maintenance and support of the provider by the vendor.
+
+#### 1. Engage
+
+Please begin by providing some basic information about the integration that is being built via a simple [webform](https://docs.google.com/forms/d/e/1FAIpQLSfgq3HJ9Rfsi7LgPLFln28ZrmarATGlD_6A47-Io-bPUftKUw/viewform)
+
+This information is recorded and used by HashiCorp to track the integration through various stages. The information is also used to notify the integration developer of any overlapping work, perhaps coming from the community so you may better focus resources.
+
+Packer has an active community and ecosystem of partners that may have already started working on a similar integration. We'll do our best to connect similar parties to avoid duplicate work.
+
+#### 2. Enable
+
+While not mandatory, HashiCorp encourages vendors to sign an MNDA (Mutual Non-Disclosure Agreement) to allow for open dialog and sharing of ideas during the integration process.
+
+In an effort to support our self-serve model we’ve included links to resources, documentation, examples and best practices to guide you through the Packer integration development and testing process.
+
+- [Writing vendor extension guide](https://www.packer.io/docs/plugins/creation)
+- Sample development implemented by a [partner](https://github.com/exoscale/packer-plugin-exoscale)
+- [Scaffolding plugin repository](https://github.com/hashicorp/packer-plugin-scaffolding) to help bootstrap a new contribution:
+- Contributing to Packer [guidelines](https://github.com/hashicorp/packer/blob/master/.github/CONTRIBUTING.md)
+- [Packer developer community forum](https://discuss.hashicorp.com/c/packer/23)
+- [Packer's source code](https://github.com/hashicorp/packer)
+
+We encourage vendors to closely follow the above guidance. Adopting the same structure and coding patterns helps expedite the review and release cycles.
+
+#### 3. Dev & Test
+
+Packer requires all code-level integrations to be written in the [Go](https://golang.org/) programming language and contain an [MPL-2.0](https://en.wikipedia.org/wiki/Mozilla_Public_License) open source license. The only knowledge necessary to write a plugin is basic command-line skills and knowledge of the Go programming language. When writing in Go-Language, HashiCorp has found the integration development process to be straightforward and simple when vendors pay close attention and follow the resources and by adopting the same structure and coding patterns helps expedite the review and release cycles. Please remember that all integration major steps should contain acceptance testing and the appropriate documentation.
+
+Data Sources
+- [Custom Data sources documentation](https://www.packer.io/docs/plugins/creation/custom-datasources)
+- [Example Data Source](https://github.com/hashicorp/packer-plugin-hashicups/tree/main/datasource)
+
+Builders
+- [Custom Builders documentation](https://www.packer.io/docs/plugins/creation/custom-builders)
+- [Example Builder](https://github.com/hashicorp/packer-plugin-hashicups/tree/main/builder/order)
+
+Provisioners
+- [Custom provisioners documentation](https://www.packer.io/docs/plugins/creation/custom-provisioners)
+- [Example Provisioner](https://github.com/hashicorp/packer-plugin-hashicups/tree/main/provisioner/toppings)
+
+Post-Processors
+- [Custom post-processors documentation](https://www.packer.io/docs/plugins/creation/custom-post-processors)
+- [Example Post-processor](https://github.com/hashicorp/packer-plugin-hashicups/tree/main/post-processor/receipt)
+
+Packer-Plugin-SDK
+- The [Packer-plugin SDK](https://github.com/hashicorp/packer-plugin-sdk) contains tools to help plugin developers with common needs, like handling SSH connections or basic plugin architecture.
+
+#### 4. Review
+
+During the review process, HashiCorp will provide feedback on the newly developed integration. This is an important step to allow HashiCorp to review and verify your Packer integration. Please send the integration code and other relevant logs for verification to: [Packer-integration-dev@hashicorp.com](mailto:packer-integration-dev@hashicorp.com).
+
+In order to document your plugins with Packer, please submit a GitHub pull request (PR) against the [Packer project](https://github.com/hashicorp/packer). See [Registering Plugin Documentation](https://www.packer.io/docs/plugins/creation#registering-plugin-documentation) for instructions on how to register your remote plugin documentation with Packer.
+The review process can take a while to complete and may require some iterations through the code to address any problems identified by the HashiCorp team.
+
+#### 5. Release
+
+At this stage, it is expected that the integration is fully complete, the necessary documentation has been written, the acceptance tests have all passed, and that HashiCorp has reviewed the integration. Once the plugin has been validated and accepted by HashiCorp, the plugin can be hosted on GitHub so it can easily be [downloaded then installed within Packer](https://www.packer.io/docs/plugins/creation#creating-a-github-release).
+
+Once the integration has been released the vendor is requested to sign the HashiCorp Technology Partner Agreement so that we can have their integration be listed on the HashiCorp website.
+
+#### 6. Support
+
+Many vendors view the release step to be the end of the journey, while at HashiCorp we view it to be the beginning of the journey. Getting the integration built is just the first step in enabling users to leverage it against their infrastructure. Once development is completed, on-going effort is required to support the developed integration, maintain the plugin and address any issues in a timely manner.
+
+The expectation from the vendor/partner is to create a mechanism for them to track and resolve all issues on an ongoing basis. Vendors who choose to not support their integration will not be considered a verified integration and cannot be listed on the website.
+
+### Checklist
+
+Below is an ordered checklist of steps that should be followed during the integration process. This just reiterates the steps already documented in the sections above.
+
+Below is an ordered checklist of steps that should be followed during the integration process. This just reiterates the steps already documented in the sections above.
+
+<Checklist>
+
+- Fill out the Packer integration [webform](https://docs.google.com/forms/d/e/1FAIpQLSfgq3HJ9Rfsi7LgPLFln28ZrmarATGlD_6A47-Io-bPUftKUw/viewform)
+- Execute the HashiCorp MNDA (Mutual Non-Disclosure Agreement) if needed
+- Develop and test Packer integration along with the acceptance tests and documentation
+- Send email to [packer-integration-dev@hashicorp.com](mailto:packer-integration-dev@hashicorp.com) to schedule an initial review
+- Address review feedback and finalize the development process
+- Provide HashiCorp with credentials for underlying infrastructure for test purposes
+- Demo the integration and/or send the test logs to HashiCorp at: [packer-integration-dev@hashicorp.com](mailto:packer-integration-dev@hashicorp.com)
+- Execute HashiCorp Partner Agreement Documents, review logo guidelines, partner listing and more
+- Plan to continue supporting the integration with additional functionality and responding to customer issues.
+
+</Checklist>
+
+### Contact Us
+
+For any questions or feedback, please contact us at: packer-integration-dev@hashicorp.com.

website/content/docs/provisioners/salt-masterless.mdx

@@ -12,7 +12,7 @@ page_title: Salt Masterless - Provisioners
 Type: `salt-masterless`
 
 The `salt-masterless` Packer provisioner provisions machines built by Packer
-using [Salt](http://saltstack.com/) states, without connecting to a Salt
+using [Salt](https://saltproject.io/) states, without connecting to a Salt
 master.
 
 ## Basic Example

website/content/guides/hcl/component-object-spec.mdx

@@ -8,15 +8,14 @@ description: Learn how to generate the HCL2 configuration of your component easi
 From v1.5, Packer can be configured using HCL2. Because Packer has so many
 builders, provisioners, and post-processors, we created a on code generation
 tool to add the HCL2-enabling code more easily. You can use this code generator
-to create the HCL2 spec code of your custom plugin simply. It's a Go binary
-package and is located in
-[`cmd/mapstructure-to-hcl2`](https://github.com/hashicorp/packer/tree/master/cmd/mapstructure-to-hcl2).
+to create the HCL2 spec code of your custom plugin simply.
+It's a Go binary package made available through the Packer plugin SDK
 
 Say you want to configure the `Config` struct of a `Builder` in a package
 located in `my/example-plugin/config.go`. Here are some simple steps you can
 follow to make it HCL2 enabled:
 
-- run `go install github.com/hashicorp/packer/cmd/mapstructure-to-hcl2`
+- run `go install github.com/hashicorp/packer-plugin-sdk/cmd/packer-sdc@latest`
 
 - Add `//go:generate mapstructure-to-hcl2 -type Config` at the top of
   `config.go`

website/content/guides/hcl/from-json-v1.mdx

@@ -1,191 +0,0 @@
----
-page_title: Transforming Packer v1 files for Packer v1.5.0
-description: |-
-  Learn how to manually move from a Packer v1 working JSON build file to a
-  working v1.5.0 HCL file.
----
-
-# Transforming Packer v1 config files to HCL2 for Packer v1.5
-
-@include 'guides/hcl2-beta-note.mdx'
-
-As of v1.6.4, Packer provides a tool to help you convert legacy JSON files to
-HCL2 files. To run it, you can use the `hcl2_upgrade` command.
-
-for example,
-
-```sh
-packer hcl2_upgrade mytemplate.json
-```
-
-will convert your packer template to a new HCL2 file in your current working
-directory named mytemplate.json.pkr.hcl. It is not a perfect converter yet;
-please open an issue if you find a problem with the conversion. Packer will not
-destroy your legacy json template, so this is not a risky command to call.
-
-Following is an explanation of how to manually upgrade a JSON template to an
-HCL2 template.
-
-The following file :
-
-```json
-{
-  "builders": [
-    {
-      "ami_name": "packer-test",
-      "region": "us-east-1",
-      "instance_type": "t2.micro",
-
-      "source_ami_filter": {
-        "filters": {
-          "virtualization-type": "hvm",
-          "name": "ubuntu/images/*ubuntu-xenial-16.04-amd64-server-*",
-          "root-device-type": "ebs"
-        },
-        "owners": ["amazon"],
-        "most_recent": true
-      },
-
-      "ssh_username": "ubuntu",
-      "type": "amazon-ebs"
-    }
-  ],
-  "provisioners": [
-    {
-      "type": "shell",
-      "inline": ["sleep 5"]
-    }
-  ]
-}
-```
-
-Becomes:
-
-```hcl
-# The data block defines a data source that is used to fetch data from outside Packer.
-# The amazon-ami data source was generated from the source_ami_filter present in
-# the amazon builder from the JSON template.
-data "amazon-ami" "autogenerated_1" {
-  filters = {
-    name                = "ubuntu/images/*ubuntu-xenial-16.04-amd64-server-*"
-    root-device-type    = "ebs"
-    virtualization-type = "hvm"
-  }
-  most_recent = true
-  owners      = ["amazon"]
-  region      = "us-east-1"
-}
-
-# The source block is what was defined in the builders section and represents a
-# reusable way to start a machine. You build your images from that source. All
-# sources have a 1:1 correspondence to what currently is a builder. The
-# argument name (ie: ami_name) must be unquoted and can be set using the equal
-# sign operator (=).
-source "amazon-ebs" "autogenerated_1" {
-  ami_name      = "packer-test"
-  instance_type = "t2.micro"
-  region        = "us-east-1"
-  source_ami    = "${data.amazon-ami.autogenerated_1.id}"
-  ssh_username  = "ubuntu"
-}
-
-# A build starts sources and runs provisioning steps on those sources.
-build {
-  sources = [
-    # there can be multiple sources per build
-    "source.amazon-ebs.autogenerated_1"
-  ]
-
-  # All provisioners and post-processors have a 1:1 correspondence to their
-  # current layout. The argument name (ie: inline) must to be unquoted
-  # and can be set using the equal sign operator (=).
-  provisioner "shell" {
-    inline = ["sleep 5"]
-  }
-
-  # post-processors work too, example: `post-processor "shell-local" {}`.
-}
-```
-
-### 1:1 correspondence of components ... except :
-
-All fields of builders, provisioners and post-processors have a 1:1
-correspondance except for the following:
-
-- builders:
-
-  - aws ami_block_device_mappings
-  - aws launch_block_device_mappings
-  - aws run_volume_tags
-  - alicloud image_disk_mappings
-  - osc omi_block_device_mappings
-  - osc launch_block_device_mappings
-  - proxmox network_adapters
-  - proxmox disks
-  - tencentcloud data_disks
-  - ucloud image_copy_to_mappings
-
-- provisioner:
-
-  - converge module_dirs
-
-- post-processor:
-  - alicloud-import image_disk_mappings
-
-One could think that these are defined as "arrays of blocks" - they are in fact
-repeatable blocks with the same identifier. For example:
-
-```json
-"builders": [
-    {
-      "type": "amazon-ebs",
-      "launch_block_device_mappings": [
-        {
-          "device_name": "/dev/xvda",
-          "volume_size": "20",
-          "volume_type": "gp2",
-          "delete_on_termination": "true"
-        },
-        {
-          "device_name": "/dev/xvdf",
-          "volume_size": "500",
-          "volume_type": "gp2",
-          "delete_on_termination": "true",
-          "encrypted": true
-        }
-      ],
-    }
-]
-```
-
-Becomes:
-
-```hcl
-source "amazon-ebs" "example" {
-    launch_block_device_mappings {
-        device_name = "/dev/xvda"
-        volume_size = 20
-        volume_type = "gp2"
-        delete_on_termination = true
-    }
-    launch_block_device_mappings {
-        device_name = "/dev/xvdf"
-        volume_size = 500
-        volume_type = "gp2"
-        delete_on_termination = true
-        encrypted = true
-    }
-}
-```
-
-There is soon going to be a PR to drop the `s` at the end of these fields.
-
-### Deprecation
-
-As we become more confident in the new templates, we may add more and more features that are HCL2-only.
-As of **1.7.0**, the new Data Source component type is the first HCL2-only feature.
-One of our major motivations to moving to the new template format is that HCL2 provides us with the flexibility to implement some
-features which would be very difficult to add to the legacy JSON templates.
-
-However, the Packer team will continue to support the main functionality of the
-current "legacy JSON" Packer templates alongside the new preferred HCL2 templates.

website/content/guides/hcl/variables.mdx

@@ -155,9 +155,9 @@ You can set variables directly on the command-line with the
 
 ```shell-session
 $ packer build \
-  -var 'weekday=Sunday' \
-  -var 'flavor=chocolate' \
-  -var 'sudo_password=hunter42' .
+  -var "weekday=Sunday" \
+  -var "flavor=chocolate" \
+  -var "sudo_password=hunter42" .
 ```
 
 Once again, setting variables this way will not save them, and they'll

website/data/alert-banner.js

@@ -0,0 +1,12 @@
+export const ALERT_BANNER_ACTIVE = true
+
+// https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
+export default {
+  tag: 'June 8-11',
+  url: 'https://hashiconf.com/europe/?utm_source=DocsBanner',
+  text: 'HashiConf Europe is happening now. Join all sessions live June 8 & 9.',
+  linkText: 'Join Now',
+  // Set the `expirationDate prop with a datetime string (e.g. `2020-01-31T12:00:00-07:00`)
+  // if you'd like the component to stop showing at or after a certain date
+  expirationDate: `2021-06-12T12:00:00-07:00`,
+}

website/data/docs-nav-data.json

@@ -1149,6 +1149,10 @@
             "path": "plugins/creation/custom-datasources"
           }
         ]
+      },
+      {
+        "title": "Packer Integration Program",
+        "path": "plugins/packer-integration-program"
       }
     ]
   },

website/data/guides-nav-data.json

@@ -14,14 +14,14 @@
         "title": "Overview",
         "path": "hcl"
       },
-      {
-        "title": "From JSON v1",
-        "path": "hcl/from-json-v1"
-      },
       {
         "title": "Variables",
         "path": "hcl/variables"
       },
+      {
+        "title": "Upgrade Packer JSON Template to HCL2",
+        "href": "https://learn.hashicorp.com/tutorials/packer/hcl2-upgrade"
+      },
       {
         "title": "Making a plugin HCL2 enabled",
         "path": "hcl/component-object-spec"

website/data/intro-nav-data.json

@@ -29,10 +29,6 @@
       {
         "title": "Vagrant Boxes",
         "href": "/intro/getting-started/vagrant"
-      },
-      {
-        "title": "Next Steps",
-        "href": "/intro/getting-started/next"
       }
     ]
   }

website/data/subnav.js

@@ -1,14 +1,9 @@
 export default [
   { text: 'Overview', url: '/', type: 'inbound' },
   {
-    text: 'Intro',
-    url: '/intro',
-    type: 'inbound',
-  },
-  {
-    text: 'Guides',
-    url: '/guides',
-    type: 'inbound',
+    text: 'Tutorials',
+    url: 'https://learn.hashicorp.com/packer',
+    type: 'outbound',
   },
   {
     text: 'Docs',

website/data/version.js

@@ -1 +1 @@
-export default '1.7.1'
+export default '1.7.2'

website/jsconfig.json

@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "."
-  },
-  "exclude": ["node_modules", ".next", "out"]
-}

website/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

website/next.config.js

@@ -4,7 +4,11 @@ const redirects = require('./redirects.next')
 
 module.exports = withHashicorp({
   defaultLayout: true,
-  transpileModules: ['is-absolute-url', '@hashicorp/react-.*'],
+  transpileModules: [
+    'is-absolute-url',
+    '@hashicorp/react-.*',
+    '@hashicorp/versioned-docs',
+  ],
   mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
 })({
   svgo: { plugins: [{ removeViewBox: false }] },

website/package.json

@@ -4,28 +4,34 @@
   "version": "1.0.0",
   "author": "HashiCorp",
   "dependencies": {
-    "@hashicorp/mktg-global-styles": "2.1.0",
-    "@hashicorp/nextjs-scripts": "16.3.0",
-    "@hashicorp/react-button": "4.0.0",
-    "@hashicorp/react-docs-page": "12.0.0",
-    "@hashicorp/react-hashi-stack-menu": "^1.1.0",
-    "@hashicorp/react-head": "1.1.6",
-    "@hashicorp/react-inline-svg": "5.0.0",
-    "@hashicorp/react-markdown-page": "^0.1.0",
-    "@hashicorp/react-product-downloader": "4.0.2",
-    "@hashicorp/react-search": "^4.2.0",
-    "@hashicorp/react-section-header": "4.0.0",
-    "@hashicorp/react-subnav": "7.1.0",
-    "@hashicorp/react-vertical-text-block-list": "4.0.1",
-    "adm-zip": "^0.5.4",
+    "@hashicorp/mktg-global-styles": "3.0.1",
+    "@hashicorp/mktg-logos": "1.0.2",
+    "@hashicorp/nextjs-scripts": "18.2.0",
+    "@hashicorp/react-alert-banner": "^6.1.1",
+    "@hashicorp/react-button": "5.0.0",
+    "@hashicorp/react-command-line-terminal": "^2.0.2",
+    "@hashicorp/react-docs-page": "13.2.0",
+    "@hashicorp/react-hashi-stack-menu": "2.0.3",
+    "@hashicorp/react-head": "3.0.1",
+    "@hashicorp/react-inline-svg": "6.0.0",
+    "@hashicorp/react-markdown-page": "1.2.0",
+    "@hashicorp/react-product-downloads-page": "2.0.2",
+    "@hashicorp/react-product-features-list": "^4.0.1",
+    "@hashicorp/react-search": "5.0.1",
+    "@hashicorp/react-section-header": "5.0.2",
+    "@hashicorp/react-subnav": "8.1.0",
+    "@hashicorp/react-text-split-with-image": "^4.1.1",
+    "@hashicorp/react-vertical-text-block-list": "6.0.2",
+    "adm-zip": "^0.5.5",
     "gray-matter": "^4.0.2",
-    "next": "10.0.6",
-    "next-mdx-remote": "1.0.1",
-    "next-remote-watch": "0.3.0",
+    "next": "10.1.3",
+    "next-mdx-remote": "3.0.1",
+    "next-remote-watch": "1.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   },
   "devDependencies": {
+    "@types/react": "^17.0.3",
     "dart-linkcheck": "2.0.15",
     "husky": "4.3.5",
     "prettier": "2.2.1"

website/pages/_app.js

@@ -12,6 +12,8 @@ import NProgress from '@hashicorp/nextjs-scripts/lib/nprogress'
 import createConsentManager from '@hashicorp/nextjs-scripts/lib/consent-manager'
 import { ErrorBoundary } from '@hashicorp/nextjs-scripts/lib/bugsnag'
 import useAnchorLinkAnalytics from '@hashicorp/nextjs-scripts/lib/anchor-link-analytics'
+import AlertBanner from '@hashicorp/react-alert-banner'
+import alertBannerData, { ALERT_BANNER_ACTIVE } from 'data/alert-banner'
 
 NProgress({ Router })
 const { ConsentManager, openConsentManager } = createConsentManager({
@@ -32,6 +34,9 @@ export default function App({ Component, pageProps }) {
         image="https://www.packer.io/img/og-image.png"
         icon={[{ href: '/favicon.ico' }]}
       />
+      {ALERT_BANNER_ACTIVE && (
+        <AlertBanner {...alertBannerData} product="packer" />
+      )}
       <HashiStackMenu />
       <ProductSubnav />
       <div className="content">

website/pages/_document.js

@@ -5,7 +5,9 @@ export default class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <HashiHead is={Head} />
+        <Head>
+          <HashiHead />
+        </Head>
         <body>
           <Main />
           <NextScript />

website/pages/community/index.jsx

@@ -14,6 +14,7 @@ export default function CommunityPage() {
         use_h1={true}
       />
       <VerticalTextBlockList
+        product="packer"
         data={[
           {
             header: 'Community Forum',

website/pages/community/style.css

@@ -1,6 +1,4 @@
 #p-community {
-  --brand: var(--packer-text);
-
   max-width: var(--site-max-width);
   margin: 72px auto;
 

website/pages/docs/[[...page]].jsx

@@ -2,6 +2,7 @@ import { productName, productSlug } from 'data/metadata'
 import DocsPage from '@hashicorp/react-docs-page'
 import PluginTierLabel from 'components/plugin-tier-label'
 import DevAlert from 'components/dev-alert'
+import Checklist from 'components/checklist'
 // Imports below are only used server-side
 import {
   generateStaticPaths,
@@ -9,7 +10,7 @@ import {
 } from 'components/remote-plugin-docs/server'
 
 //  Configure the docs path and remote plugin docs loading
-const additionalComponents = { PluginTierLabel }
+const additionalComponents = { PluginTierLabel, Checklist }
 const baseRoute = 'docs'
 const localContentDir = 'content/docs'
 const mainBranch = 'master'

website/pages/downloads/img/packer-logo.svg

@@ -0,0 +1 @@
+<svg width="230" height="88" viewBox="0 0 230 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M75.84 23.69h15.73c9.31 0 12.76 3.81 12.76 10.89v5.5c0 7-3.75 10.83-13.13 10.83h-7.74V64h-7.62V23.69zm15.3 6.72h-7.68V44.2h7.68c4.3 0 5.57-1.58 5.57-4.9v-4.11c0-3.33-1.41-4.78-5.57-4.78zM130.09 64h-6l-.54-2a16.153 16.153 0 01-8.77 2.6c-5.39 0-7.68-3.69-7.68-8.77 0-6 2.6-8.29 8.58-8.29h7.08v-3.1c0-3.27-.91-4.42-5.62-4.42a41.477 41.477 0 00-8.17.91l-.91-5.62a38.372 38.372 0 0110.1-1.39c9.26 0 12 3.26 12 10.64L130.09 64zm-7.38-11.12h-5.41c-2.42 0-3.09.66-3.09 2.9 0 2 .67 3 3 3a11.571 11.571 0 005.56-1.51l-.06-4.39zm11.79.39v-8c0-7.93 3.45-11.31 12.7-11.31 2.437.003 4.862.353 7.2 1.04l-.91 6c-2-.492-4.05-.754-6.11-.78-4.23 0-5.5 1.27-5.5 4.9v8.16c0 3.63 1.27 4.9 5.5 4.9a24.58 24.58 0 006.11-.79l.91 6a24.117 24.117 0 01-7.2 1.09c-9.25.1-12.7-3.29-12.7-11.21zM159.061 64V22.49l7.37-1V64h-7.37zm25-29.45l-8.61 14.55 9 14.87h-8.11l-8.88-14.87 8.41-14.58 8.19.03zm15.389 23.98a30.714 30.714 0 009-1.39l1.15 5.56a31.558 31.558 0 01-10.82 1.88c-9.26 0-12.46-4.3-12.46-11.37v-7.8c0-6.23 2.78-11.49 12.22-11.49 9.44 0 11.55 5.5 11.55 11.85v6.29h-16.38v1.51c0 3.57 1.27 4.96 5.74 4.96zm-5.74-12.4h9.37v-1.45c0-2.78-.84-4.72-4.47-4.72s-4.9 1.94-4.9 4.72v1.45zm36.101-5.44a58.126 58.126 0 00-7.8 4.29V64h-7.38V34.52h6.23l.48 3.27a32.936 32.936 0 017.75-3.87l.72 6.77z" fill="#000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 16.27l22.69 13.11v48.34L0 64.61V16.27z" fill="#02A8EF"></path><path d="M33.92 21.92L9.3 7.72v9.86l16.77 9.68v29.6l7.89 4.53c4.89 2.82 8.88 1.13 8.88-3.75V35.92c-.04-4.92-4.03-11.18-8.92-14z" fill="#02A8EF"></path></svg>

website/pages/downloads/index.jsx

@@ -1,34 +1,53 @@
-import VERSION from 'data/version.js'
-import ProductDownloader from '@hashicorp/react-product-downloader'
-import Head from 'next/head'
-import HashiHead from '@hashicorp/react-head'
+import VERSION from 'data/version'
+import { productSlug } from 'data/metadata'
+import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
+import { generateStaticProps } from '@hashicorp/react-product-downloads-page/server'
+import s from './style.module.css'
 
-export default function DownloadsPage({ releaseData }) {
+export default function DownloadsPage(staticProps) {
   return (
-    <div id="p-downloads" className="g-container">
-      <HashiHead is={Head} title="Downloads | Packer by HashiCorp" />
-      <ProductDownloader
-        product="Packer"
-        version={VERSION}
-        releaseData={releaseData}
-      />
-    </div>
+    <ProductDownloadsPage
+      getStartedDescription="Follow step-by-step tutorials on the essentials of Packer."
+      getStartedLinks={[
+        {
+          label: 'Getting Started',
+          href:
+            'https://learn.hashicorp.com/collections/packer/getting-started',
+        },
+        {
+          label: 'Build an Image with Packer',
+          href:
+            'https://learn.hashicorp.com/tutorials/packer/getting-started-build-image',
+        },
+        {
+          label: 'Provisioning',
+          href:
+            'https://learn.hashicorp.com/tutorials/packer/getting-started-provision',
+        },
+        {
+          label: 'View all Packer tutorials',
+          href: 'https://learn.hashicorp.com/packer',
+        },
+      ]}
+      logo={
+        <img
+          className={s.logo}
+          alt="Packer"
+          src={require('./img/packer-logo.svg')}
+        />
+      }
+      tutorialLink={{
+        href: 'https://learn.hashicorp.com/packer',
+        label: 'View Tutorials at HashiCorp Learn',
+      }}
+      {...staticProps}
+    />
   )
 }
 
 export async function getStaticProps() {
-  return fetch(`https://releases.hashicorp.com/packer/${VERSION}/index.json`)
-    .then((res) => res.json())
-    .then((releaseData) => ({ props: { releaseData } }))
-    .catch(() => {
-      throw new Error(
-        `--------------------------------------------------------
-        Unable to resolve version ${VERSION} on releases.hashicorp.com from link
-        <https://releases.hashicorp.com/packer/${VERSION}/index.json>. Usually this
-        means that the specified version has not yet been released. The downloads page
-        version can only be updated after the new version has been released, to ensure
-        that it works for all users.
-        ----------------------------------------------------------`
-      )
-    })
+  return generateStaticProps({
+    product: productSlug,
+    latestVersion: VERSION,
+  })
 }

website/pages/downloads/style.css

@@ -1,4 +0,0 @@
-#p-downloads {
-  margin-top: 72px;
-  margin-bottom: 72px;
-}

website/pages/downloads/style.module.css

@@ -0,0 +1,9 @@
+.root {
+  composes: .g-container from global;
+  margin-top: 72px;
+  margin-bottom: 72px;
+}
+
+.logo {
+  width: 105px;
+}

website/pages/home/index.jsx

@@ -1,136 +1,171 @@
-import Button from '@hashicorp/react-button'
-import VERSION from 'data/version'
+import ProductFeaturesList from '@hashicorp/react-product-features-list'
+import AnimatedTerminal from 'components/animated-terminal'
+import BrandedCta from 'components/branded-cta'
+import HomepageHero from 'components/homepage-hero'
+import IntegrationsTextSplit from 'components/integrations-text-split'
+
+import s from './style.module.css'
 
 export default function Homepage() {
   return (
-    <div id="p-home">
+    <div id="p-home" className={s.home}>
       <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' }}
-            url="https://learn.hashicorp.com/packer"
-          />
-          <Button
-            title={`Download ${VERSION}`}
-            theme={{
-              variant: 'secondary',
-              background: 'light',
-            }}
-            url="/downloads"
-          />
-        </div>
+        <HomepageHero
+          heading="Build automated machine images"
+          subheading="Create identical machine images for multiple platforms from a single source configuration."
+          links={[
+            {
+              text: 'Download',
+              url: '/downloads',
+              type: 'inbound',
+            },
+            {
+              text: 'Explore Tutorials',
+              url: 'https://learn.hashicorp.com/packer',
+              type: 'outbound',
+            },
+          ]}
+          heroFeature={
+            <AnimatedTerminal
+              lines={[
+                {
+                  code: '$ packer build template.pkr.hcl',
+                  color: 'gray',
+                },
+                {
+                  code:
+                    '==> virtualbox: virtualbox output will be in this color.',
+                  color: 'white',
+                },
+                { code: '==> vmware: vmware output will be in this color.' },
+                {
+                  code:
+                    '==> vmware: Copying or downloading ISO. Progress will be reported periodically.',
+                },
+                { code: '==> vmware: Creating virtual machine disk' },
+                { code: '==> vmware: Building and writing VMX file' },
+                { code: '==> vmware: Starting HTTP server on port 8964' },
+                { code: '==> vmware: Starting virtual machine...' },
+                {
+                  code:
+                    '==> virtualbox: Downloading VirtualBox guest additions. Progress will be shown periodically',
+                  color: 'white',
+                },
+                {
+                  code:
+                    '==> virtualbox: Copying or downloading ISO. Progress will be reported periodically.',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Starting HTTP server on port 8081',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Creating virtual machine...',
+                  color: 'white',
+                },
+                {
+                  code: '==> virtualbox: Creating hard drive...',
+                  color: 'white',
+                },
+              ]}
+            />
+          }
+        />
       </section>
-      <section id="infrastructure-as-code" className="g-container">
-        <div className="code-block">
-          <div className="circles">
-            <span></span>
-            <span></span>
-            <span></span>
-          </div>
-          $ packer build template.pkr.hcl
-          <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 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 id="features">
+        <ProductFeaturesList
+          heading="Why Packer?"
+          features={[
+            {
+              title: 'Rapid Infrastructure Deployment',
+              content:
+                'Use Terraform to launch completely provisioned and configured machine instances with Packer images in seconds.',
+              icon: '/img/product-features-list/deployment.svg',
+            },
+            {
+              title: 'Multi-provider Portability',
+              content:
+                'Identical images allow you to run dev, staging, and production environments across platforms.',
+              icon: '/img/product-features-list/portability.svg',
+            },
+            {
+              title: 'Improved Stability',
+              content:
+                'By provisioning instances from stable images installed and configured by Packer, you can ensure buggy software does not get deployed.',
+              icon: '/img/product-features-list/stability.svg',
+            },
+            {
+              title: 'Increased Dev / Production Parity',
+              content:
+                'Keep dev, staging, and production environments as similar as possible by generating images for multiple platforms at the same time.',
+              icon: '/img/product-features-list/prod-parity.svg',
+            },
+            {
+              title: 'Reliable Continuous Delivery',
+              content:
+                'Generate new machine images for multiple platforms, launch and test, and verify the infrastructure changes work; then, use Terraform to put your images in production.',
+              icon: '/img/product-features-list/continuous-delivery.svg',
+            },
+            {
+              title: 'Appliance Demo Creation',
+              content:
+                'Create software appliances and disposable product demos quickly, even with software that changes continuously.',
+              icon: '/img/product-features-list/demo-creation.svg',
+            },
+          ]}
+        />
       </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>
+        <IntegrationsTextSplit
+          heading="Extending Packer with Plugins"
+          content={
+            <>
+              <p className="g-type-body">
+                Extend Packer’s functionality without modifying Packer core.
+                Plugins are capable of adding these components:
+              </p>
+              <ul className={s.textSplitList}>
+                <li>Builders</li>
+                <li>Provisioners</li>
+                <li>Post-processors</li>
+                <li>Data sources</li>
+              </ul>
+            </>
+          }
+          links={[
+            {
+              text: 'Read the Docs',
+              url: '/docs',
+              type: 'none',
+            },
+            {
+              text: 'Develop a plugin',
+
+              url: '/docs/plugins',
+              type: 'inbound',
+            },
+          ]}
+          image={{
+            url: '/img/integrations-text-split/integrations.png',
+            alt: 'Build images with Packer plugins',
+          }}
+        />
+      </section>
+      <section id="get-started">
+        <BrandedCta
+          heading="Ready to get started?"
+          content="Start by following a tutorial to deploy a simple application with Waypoint or learn about how the project works by exploring the documentation."
+          links={[
+            {
+              text: 'Get Started',
+              url: '/docs/getting-started',
+              type: 'inbound',
+            },
+            { text: 'Explore documentation', url: '/docs' },
+          ]}
+        />
       </section>
     </div>
   )

website/pages/home/style.css

@@ -1,165 +0,0 @@
-#p-home {
-  & > section {
-    padding-top: 100px;
-    padding-bottom: 100px;
-  }
-
-  & #hero {
-    text-align: center;
-
-    & h1 {
-      margin: 24px 0 40px 0;
-    }
-
-    & 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%);
-
-      @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: 20px 0 10px 0;
-    }
-
-    & .logos,
-    & .text {
-      width: calc(50%);
-
-      @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;
-  }
-}

website/pages/home/style.module.css

@@ -0,0 +1,21 @@
+.home {
+  display: grid;
+  row-gap: 64px;
+  & :global(#get-started) {
+    margin-top: 64px;
+  }
+  & :global(.g-text-split) {
+    padding: 0;
+  }
+}
+
+.sectionGridContainer {
+  composes: g-grid-container from global;
+  width: 100%;
+}
+
+.textSplitList {
+  margin: 0;
+  padding: 16px 0 0 16px;
+  font-size: 17px;
+}

website/pages/style.css

@@ -5,17 +5,20 @@
 @import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
 
 :root {
-  --highlight-color: var(--packer);
+  --highlight-color: var(--packer-link);
 }
 
+@import '~@hashicorp/react-alert/style.css';
+@import '~@hashicorp/react-alert-banner/style.css';
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-content/style.css';
 @import '~@hashicorp/react-docs-page/style.css';
-@import '~@hashicorp/react-product-downloader/dist/style.css';
+@import '~@hashicorp/react-product-features-list/style.css';
 @import '~@hashicorp/react-search/style.css';
 @import '~@hashicorp/react-subnav/style.css';
 @import '~@hashicorp/react-tabs/style.css';
+@import '~@hashicorp/react-text-split/style.css';
 @import '~@hashicorp/react-toggle/style.css';
 @import '~@hashicorp/react-vertical-text-block-list/style.css';
 
@@ -24,18 +27,11 @@
 @import '../components/search-bar/style.css';
 
 /* Local Pages */
-@import './home/style.css';
-@import './downloads/style.css';
 @import './community/style.css';
 
 /* Print Styles */
 @import './print.css';
 
-/* Sticky Footer */
-.content {
-  min-height: calc(100vh - 260px);
-}
-
 /* 404 page styles */
 #p-404 {
   display: flex;
@@ -43,7 +39,7 @@
   justify-content: center;
   margin: 64px auto;
   max-width: 784px;
-  min-height: 50vh;
+  min-height: calc(90vh - 260px);
   padding-inline: 32px;
   text-align: center;
 

website/public/img/product-features-list/continuous-delivery.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M41.0732 45.1918L47.9613 27.6476C48.0202 27.471 48.0202 27.2944 47.9025 27.1177L47.8436 27.0589C47.8436 27.0589 47.7847 27.0589 47.7847 27C47.7847 27 47.7847 27 47.7258 27C47.7258 27 47.7258 27 47.667 27C47.667 27 47.667 27 47.6081 27C47.6081 27 47.6081 27 47.5492 27C47.5492 27 47.5492 27 47.4903 27H47.4315L24.3532 33.0051C24.3532 33.0051 24.3532 33.0051 24.2944 33.0051C24.2944 33.0051 24.2355 33.0051 24.2355 33.0639L24.1766 33.1228C24 33.1817 24 33.3583 24 33.5349C24 33.5349 24 33.5349 24 33.5938C24 33.5938 24 33.5938 24 33.6527V33.7115C24 33.7115 24 33.7704 24.0589 33.7704L24.1177 33.8293L30.476 38.1859L31.418 44.3675C31.418 44.3675 31.418 44.3675 31.418 44.4264C31.418 44.4264 31.418 44.4264 31.418 44.4853C31.418 44.4853 31.418 44.4853 31.418 44.5442C31.418 44.5442 31.418 44.5442 31.418 44.603C31.418 44.603 31.418 44.603 31.418 44.6619C31.418 44.7208 31.418 44.6619 31.418 44.7208V44.7797C31.418 44.8385 31.4769 44.8385 31.4769 44.8974C31.5357 44.8974 31.5357 44.9563 31.5946 44.9563C31.6535 44.9563 31.6535 44.9563 31.7124 44.9563H31.7712C31.7712 44.9563 31.7712 44.9563 31.8301 44.9563H31.889C31.889 44.9563 31.889 44.9563 31.9479 44.9563C31.9479 44.9563 32.0067 44.9563 32.0067 44.8974L35.8924 42.2481L40.1312 45.545C40.1901 45.6039 40.249 45.6039 40.3078 45.6628C40.4845 45.7216 40.7199 45.6628 40.8377 45.4861C41.0143 45.3095 41.0143 45.2506 41.0732 45.1918C41.0732 45.2506 41.0732 45.2506 41.0732 45.1918ZM34.4205 39.6577L46.4895 29.0606L40.4845 44.3087L34.4205 39.6577ZM31.0059 37.3617L25.5307 33.5938L44.8999 28.5896L31.0059 37.3617ZM43.1337 30.8267L33.4197 39.3045C33.4197 39.3045 33.4197 39.3045 33.3608 39.3633C33.3608 39.4222 33.3019 39.4222 33.3019 39.4811L32.1834 42.5425L31.4769 38.127L43.1337 30.8267ZM32.8898 43.1901L33.9495 40.3642L35.3625 41.4828L32.8898 43.1901Z" fill="#63D0FF"/>
+</svg>

website/public/img/product-features-list/demo-creation.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 29C27 27.8954 27.8954 27 29 27L43 27C44.1046 27 45 27.8954 45 29V43C45 44.1046 44.1046 45 43 45H29C27.8954 45 27 44.1046 27 43L27 29Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27 33H45" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 45V33" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/public/img/product-features-list/deployment.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M29.6401 45.7152C29.4499 45.7152 29.2868 45.7967 29.151 45.9054L26.7324 48.324C26.5965 48.4599 26.5422 48.623 26.5422 48.8132C26.5422 49.0034 26.6237 49.1665 26.7324 49.3023C26.8683 49.4382 27.0313 49.4926 27.2215 49.4926C27.4118 49.4926 27.5748 49.411 27.7107 49.3023L30.1293 46.8838C30.2651 46.7479 30.3195 46.5848 30.3195 46.3946C30.3195 46.2044 30.238 46.0413 30.1293 45.9054C29.9934 45.7967 29.8303 45.7152 29.6401 45.7152ZM50.2932 21.6924C50.0758 21.475 49.7497 21.3391 49.4236 21.3391C49.3149 21.3391 49.2062 21.3663 49.0975 21.3935L46.8148 21.9913C42.8201 23.0511 38.934 25.1165 35.6458 27.9427C35.3741 28.1872 35.3197 28.6221 35.5643 28.8938C35.7002 29.0569 35.8904 29.1384 36.0806 29.1384C36.2437 29.1384 36.4067 29.084 36.5154 28.9753C39.6949 26.285 43.3636 24.3284 47.1953 23.2957L49.2606 22.7522L48.7171 24.8175C47.3311 30.0352 44.1788 34.9539 39.8852 38.6497L39.858 38.6769C39.8036 38.704 39.8036 38.704 39.7764 38.7312C39.7493 38.7584 39.7493 38.7584 39.7493 38.7856C39.7493 38.8127 39.7221 38.8127 39.7221 38.8399C39.7221 38.8671 39.6949 38.8671 39.6949 38.8943C39.6949 38.9214 39.6677 38.9486 39.6677 38.9486C39.6677 38.9758 39.6677 39.003 39.6406 39.003C39.6406 39.0301 39.6406 39.0573 39.6406 39.0573C39.6406 39.0845 39.6406 39.1117 39.6406 39.1388V39.166L39.8852 44.8456C39.9123 45.2532 39.6949 45.6609 39.3416 45.8783L34.6947 48.8132L34.2055 43.8401C34.1784 43.4869 33.8794 43.2151 33.5262 43.2151C33.499 43.2151 33.4718 43.2151 33.4718 43.2151C33.0914 43.2423 32.8196 43.5956 32.874 43.9488L33.4446 50.0361C33.4718 50.2806 33.6077 50.4709 33.8251 50.5796C33.9066 50.6339 34.0153 50.6611 34.124 50.6611C34.2599 50.6611 34.3686 50.6339 34.4773 50.5524L40.0482 47.0196C40.8091 46.5576 41.2711 45.6609 41.2167 44.7913L40.9993 39.4378L41.108 39.3562C45.4289 35.5245 48.6084 30.47 50.0487 25.1436L50.6465 22.8609C50.728 22.4805 50.6193 22.0185 50.2932 21.6924ZM27.0857 32.1548H27.1128L32.8196 32.4266C33.1729 32.4266 33.4718 32.1548 33.499 31.7744C33.499 31.5841 33.4446 31.4211 33.3359 31.2852C33.2001 31.1493 33.037 31.0678 32.874 31.0678L27.1944 30.7961C27.1672 30.7961 27.14 30.7961 27.1128 30.7961C26.2704 30.7961 25.428 31.258 24.966 31.9646L21.4332 37.5355C21.2973 37.7257 21.2973 37.9975 21.406 38.2149C21.5147 38.4323 21.7593 38.5682 22.0039 38.5682C22.2757 38.5682 24.504 38.7856 27.6563 39.1117C27.7379 39.1117 27.7922 39.1388 27.8466 39.1932L28.064 39.4106L22.955 44.5739C22.8192 44.7097 22.7648 44.8728 22.7648 45.063C22.7648 45.2532 22.8463 45.4163 22.955 45.5522C23.0909 45.688 23.254 45.7424 23.4442 45.7424C23.6344 45.7424 23.7975 45.6609 23.9333 45.5522L29.0694 40.4161L29.8847 41.2313C30.0206 41.3672 30.1836 41.4215 30.3738 41.4215C30.5641 41.4215 30.7271 41.34 30.863 41.2313C30.9989 41.0954 31.0532 40.9324 31.0532 40.7422C31.0532 40.5519 30.9717 40.3889 30.863 40.253L28.852 38.2421C28.5803 37.9703 28.227 37.8073 27.8466 37.7529C26.4335 37.617 24.8301 37.454 23.6616 37.3453L23.2268 37.2909L26.1617 32.6711C26.2976 32.3722 26.7052 32.1548 27.0857 32.1548Z" fill="#63D0FF"/>
+</svg>

website/public/img/product-features-list/portability.svg

@@ -0,0 +1,15 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5 35.25C32.5 34.1454 33.3954 33.25 34.5 33.25H45.5C46.6046 33.25 47.5 34.1454 47.5 35.25V41.75C47.5 42.8546 46.6046 43.75 45.5 43.75H34.5C33.3954 43.75 32.5 42.8546 32.5 41.75V35.25Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37 46.75H43" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40 43.75V46.75" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41 30L31 30C29.8954 30 29 30.8954 29 32V39" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35 27H28C26.8954 27 26 27.8954 26 29V34" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white" transform="translate(24 24)"/>
+</clipPath>
+</defs>
+</svg>

website/public/img/product-features-list/prod-parity.svg

@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path d="M36 36L26 31L36 26L46 31L36 36Z" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 41L36 46L46 41" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 36L36 41L46 36" stroke="#63D0FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/public/img/product-features-list/stability.svg

@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" fill="#F0FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7425 24.0359C35.8702 23.988 36.011 23.988 36.1387 24.0359L37.0849 24.3908L37.0858 24.3911C39.4436 25.2535 41.9202 25.6005 44.4012 25.4862L45.1649 25.4274C45.3215 25.4154 45.4761 25.4692 45.5914 25.576C45.7067 25.6827 45.7722 25.8327 45.7722 25.9899V37.5743C45.7722 40.5309 44.1595 43.2591 41.1576 45.011L41.1569 45.0114L41.1562 45.0118L36.2893 47.9201C36.1111 48.0266 35.8889 48.0266 35.7107 47.9201L30.8444 45.0122L30.8433 45.0116L30.8424 45.011C27.8405 43.2591 26.2278 40.5309 26.2278 37.5743V25.9899C26.2278 25.8314 26.2945 25.6802 26.4115 25.5733C26.5285 25.4665 26.6851 25.4137 26.8429 25.4281L27.4839 25.4864C29.9667 25.6003 32.4988 25.2523 34.792 24.3924L35.7425 24.0359ZM35.9406 25.1665L35.1881 25.4487C32.7326 26.3695 30.0414 26.7347 27.4191 26.6127C27.4108 26.6123 27.4025 26.6118 27.3943 26.611L27.3559 26.6075V37.5743C27.3559 40.0826 28.7129 42.4628 31.4128 44.0377L31.418 44.0407L36 46.7788L40.5861 44.0383L40.5872 44.0377C43.2871 42.4628 44.6441 40.0826 44.6441 37.5743V26.599L44.4791 26.6117C44.4734 26.6121 44.4678 26.6125 44.4621 26.6127C41.8375 26.7348 39.2077 26.3687 36.6973 25.4502L36.6939 25.449L36.693 25.4487L35.9406 25.1665Z" fill="#63D0FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5693 36.5061C31.3396 36.273 31.3423 35.8978 31.5754 35.6681C31.8085 35.4383 32.1836 35.4411 32.4134 35.6742L34.5071 37.7985L37.8341 34.5194L40.7391 31.6562C40.9722 31.4265 41.3474 31.4292 41.5771 31.6623C41.8068 31.8954 41.8041 32.2706 41.571 32.5003L34.495 39.4745L31.5693 36.5061Z" fill="#63D0FF"/>
+</svg>

website/redirects.next.js

@@ -133,12 +133,14 @@ module.exports = [
   },
   {
     source: '/intro/getting-started/vagrant',
-    destination: 'https://learn.hashicorp.com/packer/getting-started/vagrant',
+    destination:
+      'https://learn.hashicorp.com/tutorials/packer/aws-get-started-post-processors-vagrant?in=packer/aws-get-started',
     permanent: true,
   },
   {
     source: '/intro/getting-started/next',
-    destination: 'https://learn.hashicorp.com/packer/getting-started/next   ',
+    destination:
+      'https://learn.hashicorp.com/collections/packer/docker-get-started',
     permanent: true,
   },
   {
@@ -211,6 +213,16 @@ module.exports = [
     destination: '/docs/builders/vmware/vsphere-:path*',
     permanent: true,
   },
+  {
+    source: '/docs/post-processors/docker-:path',
+    destination: '/docs/post-processors/docker/docker-:path*',
+    permanent: true,
+  },
+  {
+    source: '/guides/hcl/from-json-v1',
+    destination: 'https://learn.hashicorp.com/tutorials/packer/hcl2-upgrade',
+    permanent: true,
+  },
   // disallow '.html' or '/index.html' in favor of cleaner, simpler paths
   { source: '/:path*/index', destination: '/:path*', permanent: true },
   { source: '/:path*.html', destination: '/:path*', permanent: true },

website/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "target": "es5"
+  },
+  "exclude": ["node_modules", ".next", "out"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}