add section on download page

Author: bjohansebas

apps/site/components/Common/Partners/PartnerIcon/index.module.css

@@ -0,0 +1,9 @@
+@reference "../../../../styles/index.css";
+
+.partnerIcon {
+  @apply p-2;
+
+  svg {
+    @apply size-6;
+  }
+}

apps/site/components/Common/Partners/PartnerIcon/index.tsx

@@ -2,23 +2,33 @@ import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import type { ComponentProps, FC } from 'react';
 import { cloneElement } from 'react';
 
-import Link from '#site/components/Link';
 import type { Partners } from '#site/types';
 
+// import Link from '#site/components/Link';
+import style from './index.module.css';
+import Button from '../../Button';
+
 type ParnetsIconProps = Partners & ComponentProps<typeof Skeleton>;
 
 const PartnersIcon: FC<ParnetsIconProps> = ({ href, logo, loading }) => {
   return (
+    // <Skeleton loading={loading} className="h-12 w-12 p-1">
+    //   <Link
+    //     kind="secondary"
+    //     href={href}
+    //     className="flex h-12 w-auto min-w-12 items-center justify-center rounded-lg p-1 hover:bg-neutral-800"
+    //   >
+    //     {cloneElement(logo, {
+    //       className: 'h-12 w-12',
+    //     })}
+    //   </Link>
+    // </Skeleton>
     <Skeleton loading={loading} className="h-12 w-12 p-1">
-      <Link
-        kind="secondary"
-        href={href}
-        className="flex h-12 w-auto min-w-12 items-center justify-center rounded-lg p-1 hover:bg-neutral-800"
-      >
+      <Button kind="secondary" href={href} className={style.partnerIcon}>
         {cloneElement(logo, {
           className: 'h-12 w-12',
         })}
-      </Link>
+      </Button>
     </Skeleton>
   );
 };

apps/site/components/Common/Partners/PartnersIconList/index.module.css

@@ -5,6 +5,5 @@
     flex-row
     flex-wrap
     items-center
-    justify-center
     gap-4;
 }

apps/site/components/Common/Partners/PartnersIconList/index.tsx

@@ -3,23 +3,31 @@
 import { useEffect, useRef, useState, type FC } from 'react';
 
 import PARTNERS from '#site/next.partners.constants';
-import type { Partners } from '#site/types';
+import type { PartnerCategory, Partners } from '#site/types';
 
 import PartnerIcon from '../PartnerIcon';
 import style from './index.module.css';
 import { randomPartnerList } from '../utils';
 
 type PartnersIconListProps = {
   maxLength?: number;
+  categories?: PartnerCategory;
 };
 
-const PartnersIconList: FC<PartnersIconListProps> = ({ maxLength = 4 }) => {
+const PartnersIconList: FC<PartnersIconListProps> = ({
+  maxLength = 6,
+  categories,
+}) => {
   const initialRenderer = useRef(true);
 
   const [seedList, setSeedList] = useState<Array<Partners>>(
     PARTNERS.slice(0, maxLength)
   );
 
+  // Depediendo del ancho que tiene el componente tiene que renderizar un número diferente de sponsors, tiene que se dinamico cada sponsor tiene un ancho de 24x24 pixeles
+  // crear una función que reciba el ancho del componente y retorne un número de sponsors a renderizar
+  // const getSponsorsToRender = (width: number) => {
+
   useEffect(() => {
     // We intentionally render the initial default "mock" list of sponsors
     // to have the Skeletons loading, and then we render the actual list
@@ -33,7 +41,7 @@ const PartnersIconList: FC<PartnersIconListProps> = ({ maxLength = 4 }) => {
     const renderSponsorsAnimation = setTimeout(() => {
       initialRenderer.current = false;
 
-      setSeedList(randomPartnerList(PARTNERS, maxLength));
+      setSeedList(randomPartnerList(PARTNERS, maxLength, 1, categories));
     }, 0);
 
     return () => clearTimeout(renderSponsorsAnimation);

apps/site/components/Common/Partners/utils.ts

@@ -1,6 +1,11 @@
-import type { Partners } from '#site/types/partners.js';
-
-function randomPartnerList(partners: Array<Partners>, pick = 4, dateSeed = 5) {
+import type { PartnerCategory, Partners } from '#site/types/partners.js';
+
+function randomPartnerList(
+  partners: Array<Partners>,
+  pick = 4,
+  dateSeed = 5,
+  category?: PartnerCategory
+) {
   const now = new Date();
   const minutes = Math.floor(now.getUTCMinutes() / dateSeed) * dateSeed;
 
@@ -21,7 +26,10 @@ function randomPartnerList(partners: Array<Partners>, pick = 4, dateSeed = 5) {
   const rng = mulberry32(seed);
 
   // Create a copy of the array to avoid modifying the original
-  const shuffled = partners.slice().sort(() => rng() - 0.5);
+  const shuffled = partners
+    .filter(partner => !category || partner.categories.includes(category))
+    .slice()
+    .sort(() => rng() - 0.5);
 
   return shuffled.slice(0, pick);
 }

apps/site/pages/en/download/current.mdx

@@ -34,3 +34,7 @@ all <LinkWithArrow href="https://nodejs.org/download/release/">previous releases
 or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unofficial</LinkWithArrow> binaries for other platforms.
 
 </section>
+
+We are able to serve Node.js downloads thank to our <Link href="/about/partners">partners</Link>.
+
+<PartnersIconList maxLength={6} />

apps/site/pages/en/download/index.mdx

@@ -34,3 +34,15 @@ all <LinkWithArrow href="https://nodejs.org/download/release/">previous releases
 or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unofficial</LinkWithArrow> binaries for other platforms.
 
 </section>
+
+<section>
+  <h2 className='text-center'>Powered by Our Partners</h2>
+
+<span className="text-center">
+  We are able to serve Node.js downloads and maintain our infrastructure thanks
+  to our amazing <Link href="/about/partners">partners</Link>.
+</span>
+  <div className='mt-4'>
+  <PartnersIconList maxLength={6} />
+  </div>
+</section>

apps/site/pages/en/index.mdx

@@ -27,12 +27,6 @@ layout: home
         <small className="!text-xs">for Node.js 18 and below</small>
       </Button>
 
-      <span className='xs:mt-4'>Sponsored by:</span>
-      <div className='flex flex-row gap-4 items-center'>
-        <PartnersIconList />
-        <Link href="/about/partners">and more...</Link>
-      </div>
-
       <div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
         <WithNodeRelease status="Active LTS">
           {({ release }) =>
@@ -143,4 +137,13 @@ layout: home
 
   </div>
   Learn more what Node.js is able to offer with our [Learning materials](/learn).
+  <div className='w-full flex flex-col gap-2 xs:mt-3'>
+    <div className="flex flex-row items-center justify-center gap-4">
+      <PartnersIconList />
+      <Link href="/about/partners">and more...</Link>
+    </div>
+    <span className="xs:mt-1 text-center">
+      Node.js is proudly supported by our partners above
+    </span>
+  </div>
 </section>

packages/ui-components/src/Icons/PartnerLogos/HeroDevs.tsx

@@ -32,9 +32,9 @@ const HeroDevs: FC<SVGProps<SVGSVGElement>> = props => (
         y2="259.733"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#F926E1" />
+        <stop stopColor="#F926E1" />
 
-        <stop offset="1" stop-color="#2AB5FB" />
+        <stop offset="1" stopColor="#2AB5FB" />
       </linearGradient>
 
       <linearGradient
@@ -45,9 +45,9 @@ const HeroDevs: FC<SVGProps<SVGSVGElement>> = props => (
         y2="267.011"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#F926E1" />
+        <stop stopColor="#F926E1" />
 
-        <stop offset="1" stop-color="#2AB5FB" />
+        <stop offset="1" stopColor="#2AB5FB" />
       </linearGradient>
     </defs>
   </svg>

packages/ui-components/src/Icons/PartnerLogos/Sentry.tsx

@@ -4,8 +4,8 @@ const Sentry: FC<SVGProps<SVGSVGElement>> = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 72 66"
-    width="400"
-    height="367"
+    width="72"
+    height="66"
     {...props}
   >
     <path