Migrate the Home Page from nodejs.dev

[ovflowd]

Continuing the migration of components from nodejs.dev that we started here, the home page.

This issue will be used to track the migration of the Home page. Also, note that I want this issue to be available for newcomers and not existing contributors if possible!

Migrating the Home page

• There's currently a blocker (1) (pre-requisite) that needs to be merged first here.
• There's currently a blocker (2) (pre-requisite) that needs to be merged first here.
• There's currently a blocker (3) (pre-requisite) that needs to be worked first here.
• The page should use the default layout
• The page should reside in pages/en/new/index.mdx
• The page content should include the import of the Hero Component, NodeFeature Component
  • Note: The Hero Component should be migrated within the Home page itself.
• The page content should be in MDX (with Frontmatter and etc) and contain the following HTML elements as pointed out on the original nodejs.dev home page
• The content on the nodejs.dev Home Page from here that is used as Frontmatter on the nodejs.dev repository should actually become HTML on the new Home page.

Example of how it would look like:

----
title: Node.js
layout: 'new-default'
nodeFeatures:
  - ...
  - ...
  - ...
----

<Banner />
<Hero />

<section className={styles.nodeDemoContainer}>
  <div className={styles.nodeDemo}>
    <DownloadComponents.InstallTabs />
  </div>
 
  <LeafsIllustrationFront className={`${styles.leafsFront} animations`} />
  <LeafsIllustrationMiddle className={`${styles.leafsMid} animations`} />
  <LeafsIllustrationBack className={`${styles.leafsBack} animations`} />
  <DotsIllustration className={styles.dots} />
 </section>

<section className={styles.nodeFeatures}>
  {frontMatter.nodeFeatures.map(feature => (
    <NodeFeature
      key={feature.heading}
      icon={feature.icon}
      heading={intl.formatMessage({ id: feature.heading })}
      description={intl.formatMessage({ id: feature.description })}
    />
  ))}
</section>

Note that the example above is just an illustrative representation!

[ashutosh887]

I would like to work on this @ovflowd

Please assign this to me

[ashutosh887]

Please keep me in loop for the Website Redesign @ovflowd

[ovflowd]

Hey @ashutosh887, you can pick the task. We do not assign issues to people over here :)

You can join the OpenJS Slack (https://openjsf.org/collaboration/) to talk with the team.

Also, regular updates about the project are done there and Discussions (https://github.com/nodejs/nodejs.org/discussions)

[ashutosh887]

Thank you so much @ovflowd

[ovflowd]

Closing as this layout will not be used anymore.