feat: redesigned home page with esp and updated downloads page (nodejs#7875)

* feat: redesigned home page with esp and updated downloads page

* chore: code review from copilot

* chore: design review

* chore: font-size review

* chore: fix css

* chore: important prefix

* chore: adjust buttons

* chore: applied code review

* fix: button on all variants

* fix: display block

* fix: forgot !

Author: ovflowd

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -38,6 +38,7 @@ const parseSnippet = (s: string, releaseContext: ReleaseContextType) => {
 
 const ReleaseCodeBox: FC = () => {
   const { snippets } = useContext(ReleasesContext);
+
   const { installMethod, os, packageManager, release } =
     useContext(ReleaseContext);
 
@@ -126,6 +127,18 @@ const ReleaseCodeBox: FC = () => {
         </AlertBox>
       )}
 
+      {release.status === 'LTS' && (
+        <AlertBox
+          title={t('components.common.alertBox.info')}
+          level="info"
+          size="small"
+        >
+          {t.rich('layouts.download.codeBox.ltsVersionFeaturesNotice', {
+            link: text => <Link href="/download/current">{text}</Link>,
+          })}
+        </AlertBox>
+      )}
+
       {!currentPlatform || currentPlatform.recommended || (
         <AlertBox
           title={t('components.common.alertBox.info')}

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import Select from '@node-core/ui-components/Common/Select';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext } from 'react';
 
+import { redirect, usePathname } from '#site/navigation';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -26,6 +27,28 @@ const VersionDropdown: FC = () => {
   const { releases } = useContext(ReleasesContext);
   const { release, setVersion } = useContext(ReleaseContext);
   const t = useTranslations();
+  const locale = useLocale();
+  const pathname = usePathname();
+
+  // Allows us to keep the route semantically correct to what the user should expect
+  // from the /current and non /current routes.
+  const setVersionOrNavigate = (version: string) => {
+    const release = releases.find(
+      ({ versionWithPrefix }) => versionWithPrefix === version
+    );
+
+    if (release?.status === 'LTS' && pathname.includes('current')) {
+      redirect({ href: '/download', locale });
+      return;
+    }
+
+    if (release?.status === 'Current' && !pathname.includes('current')) {
+      redirect({ href: '/download/current', locale });
+      return;
+    }
+
+    setVersion(version);
+  };
 
   return (
     <Select
@@ -35,7 +58,7 @@ const VersionDropdown: FC = () => {
         label: getDropDownStatus(versionWithPrefix, status),
       }))}
       defaultValue={release.versionWithPrefix}
-      onChange={setVersion}
+      onChange={setVersionOrNavigate}
       className="min-w-36"
       inline={true}
     />

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -5,6 +5,7 @@ import type { FC } from 'react';
 
 import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
 import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
+import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
 import type { NodeRelease } from '#site/types';
 
@@ -38,7 +39,21 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
           level="warning"
           size="small"
         >
-          {t('components.releaseModal.unsupportedVersionWarning')}
+          {t.rich('components.releaseModal.unsupportedVersionWarning', {
+            link: text => <Link href="/about/previous-releases/">{text}</Link>,
+          })}
+        </AlertBox>
+      )}
+
+      {release.status === 'LTS' && (
+        <AlertBox
+          title={t('components.common.alertBox.info')}
+          level="info"
+          size="small"
+        >
+          {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
+            link: text => <Link href="/download/current">{text}</Link>,
+          })}
         </AlertBox>
       )}
 

apps/site/layouts/GlowingBackdrop.tsx

@@ -16,6 +16,7 @@ const GlowingBackdropLayout: FC<
 > = ({ kind = 'home', children }) => (
   <>
     <WithNavBar />
+
     <div className={styles.centeredLayout}>
       <GlowingBackdrop />
 

apps/site/layouts/layouts.module.css

@@ -36,7 +36,7 @@
   section {
     &:nth-of-type(1) {
       @apply flex
-        max-w-[500px]
+        max-w-[400px]
         flex-[1_0]
         flex-col
         gap-8;
@@ -56,7 +56,7 @@
           @apply max-xs:text-xs
             text-center
             text-sm
-            text-neutral-800
+            text-neutral-600
             dark:text-neutral-400;
 
           sup {

apps/site/pages/en/index.mdx

@@ -14,29 +14,19 @@ layout: home
 
   </div>
 
-  <div>
-    <WithNodeRelease status={['LTS']}>
-      {({ release }) => (
-        <>
-          <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
-          <small>
-            Downloads Node.js <b>{release.versionWithPrefix}</b>
-            <sup title="Downloads a Node.js installer for your current platform">1</sup> with long-term support.
-            Node.js can also be installed via <Link href="/download">version managers</Link>.
-          </small>
-        </>
-      )}
-    </WithNodeRelease>
-
-    <WithNodeRelease status={['Current']}>
-      {({ release }) => (
-        <small>
-          Want new features sooner?
-          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
-          <sup title="Downloads a Node.js installer for your current platform">1</sup> instead.
-        </small>
-      )}
-    </WithNodeRelease>
+  <div className="flex gap-4">
+
+    <div className="flex flex-col gap-2">
+      <Button kind="special" className="!hidden dark:!block" href="/download">Install Node.js</Button>
+
+      <Button kind="primary" className="!block dark:!hidden" href="/download">Install Node.js</Button>
+
+      <Button kind="secondary" className="!block" href="https://www.herodevs.com/support/node-nes">
+        <span>Get security support</span>
+        <br />
+        <small className="!text-xs">for Node.js 18 and below</small>
+      </Button>
+    </div>
 
   </div>
 </section>