feat(partners): add partner rail to the homepage

i18n/en-US/code.json

@@ -215,6 +215,15 @@
   "team.monica.position": {
     "message": "Back-end Developer"
   },
+  "partners.eyebrow": {
+    "message": "Backing JSConf Brasil 2026"
+  },
+  "partners.cta.text": {
+    "message": "There's room for your brand here too."
+  },
+  "partners.cta.button": {
+    "message": "Become a sponsor"
+  },
   "sponsors.pageTitle": {
     "message": "Sponsors"
   },

i18n/es-419/code.json

@@ -215,6 +215,15 @@
   "team.monica.position": {
     "message": "Desarrolladora Back-end"
   },
+  "partners.eyebrow": {
+    "message": "Apoyan JSConf Brasil 2026"
+  },
+  "partners.cta.text": {
+    "message": "Tu marca también cabe aquí."
+  },
+  "partners.cta.button": {
+    "message": "Quiero patrocinar"
+  },
   "sponsors.pageTitle": {
     "message": "Patrocinadores"
   },

i18n/pt-BR/code.json

@@ -215,6 +215,15 @@
   "team.lucas.position": {
     "message": "Principal Staff Engineer"
   },
+  "partners.eyebrow": {
+    "message": "Apoiam a JSConf Brasil 2026"
+  },
+  "partners.cta.text": {
+    "message": "Sua marca também cabe aqui."
+  },
+  "partners.cta.button": {
+    "message": "Quero patrocinar"
+  },
   "sponsors.pageTitle": {
     "message": "Patrocinadores"
   },

src/website/components/home/Partners.tsx

@@ -0,0 +1,73 @@
+import type { CSSProperties } from 'react';
+import { useRef, useState } from 'react';
+import { ArrowRight } from 'lucide-react';
+import { Text } from '@site/src/website/components/shared/i18n';
+import { SafeLink } from '@site/src/website/components/shared/SafeLink';
+import { link, partners } from '../../configs/definitions';
+import { useScroll } from '../../hooks/useScroll';
+import { Image } from '../shared/Image';
+
+export const Partners = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [show, setShow] = useState(false);
+  const [active, setActive] = useState(0);
+
+  useScroll(ref, (isVisible) => {
+    if (isVisible) setShow(true);
+  });
+
+  return (
+    <main id='partners'>
+      <div className={show ? 'content show' : 'content'} ref={ref}>
+        <p className='eyebrow'>
+          <Text id='partners.eyebrow' />
+        </p>
+
+        <div className='rail'>
+          <div className='bays'>
+            {partners.map((partner, index) => (
+              <SafeLink
+                key={partner.name}
+                to={partner.url}
+                className={index === active ? 'bay active' : 'bay'}
+                onMouseEnter={() => setActive(index)}
+                onFocus={() => setActive(index)}
+              >
+                <Image
+                  className='logo'
+                  src={partner.logo}
+                  alt={partner.name}
+                  loading='eager'
+                  style={
+                    { '--logo-scale': partner.scale ?? 1 } as CSSProperties
+                  }
+                />
+              </SafeLink>
+            ))}
+          </div>
+
+          <div className='track'>
+            <span
+              className='segment'
+              style={
+                {
+                  '--bays': partners.length,
+                  '--active': active,
+                } as CSSProperties
+              }
+            />
+          </div>
+        </div>
+
+        <div className='invite'>
+          <p className='invite-text'>
+            <Text id='partners.cta.text' />
+          </p>
+          <SafeLink to={link.sponsors} className='invite-button'>
+            <Text id='partners.cta.button' /> <ArrowRight className='icon' />
+          </SafeLink>
+        </div>
+      </div>
+    </main>
+  );
+};

src/website/configs/definitions.ts

@@ -2,3 +2,34 @@ export const link = {
   tickets: 'https://guild.host/events/jsconf-brasil-primeira-vdc8dh',
   sponsors: 'https://forms.gle/SPyyD3SsuurVpvCNA',
 } as const;
+
+export type Partner = {
+  name: string;
+  logo: string;
+  url: string;
+  /** Optical size tuning: logos differ in visual mass at the same box size. */
+  scale?: number;
+};
+
+export const partners: Partner[] = [
+  {
+    // Compact logotype (1.9:1) — fills the height cap long before the others.
+    name: 'Salvy',
+    logo: '/img/partners/salvy.webp',
+    url: 'https://salvy.com.br/',
+    scale: 0.95,
+  },
+  {
+    // Very wide wordmark (6.3:1) — width-bound rather than height-bound.
+    name: 'Cod3rs',
+    logo: '/img/partners/cod3rs.webp',
+    url: 'https://www.coders.com.br/',
+    scale: 0.8,
+  },
+  {
+    name: 'UniPDS Educação',
+    logo: '/img/partners/unipds.webp',
+    url: 'https://unipds.com.br/',
+    scale: 0.7,
+  },
+];

src/website/pages/index.tsx

@@ -2,21 +2,21 @@ import { Benefits } from '../components/home/Benefits';
 import { Gallery } from '../components/home/Gallery';
 import { Home } from '../components/home/Home';
 import { Location } from '../components/home/Location';
+import { Partners } from '../components/home/Partners';
 // import { Speakers } from '../components/home/Speakers';
-import { Sponsors } from '../components/home/Sponsors';
 import { TicketSelection } from '../components/home/TicketSelection';
 import { Waitlist } from '../components/home/Waitlist';
 import { Page } from '../components/shared/Page';
 
 export default () => (
   <Page description='A maior conferência de JavaScript do Mundo está de volta!'>
     <Home />
+    <Partners />
     <Benefits />
     <Gallery />
     {/* <Speakers /> */}
     <TicketSelection />
     <Waitlist />
     <Location />
-    <Sponsors />
   </Page>
 );