diff --git a/.env.local.sample b/.env.local.sample
index babd5ea..578026a 100644
--- a/.env.local.sample
+++ b/.env.local.sample
@@ -3,4 +3,10 @@ NEXT_PUBLIC_ONRAMPER_URL=https://buy.onramper.com/?apiKey=pk_prod_01HWMA66BYRB22
 NEXT_PUBLIC_STRAPI_URL=https://strapi.shapeshift.com
 NEXT_PUBLIC_WEGLOT_API_KEY=obtain-from-engineering
 
-STRAPI_API_TOKEN=obtain-from-engineering
\ No newline at end of file
+STRAPI_API_TOKEN=obtain-from-engineering
+
+# Public Reown project ID shared with the swap-widget service. Set before building.
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=69a04035cb588540ee2eb062c394a87a
+
+# ShapeShift registered affiliate code; confirm the payout account before configuring.
+NEXT_PUBLIC_SHAPESHIFT_PARTNER_CODE=
diff --git a/app/[lang]/_components/Footer.tsx b/app/[lang]/_components/Footer.tsx
index 97b4bc4..de75263 100644
--- a/app/[lang]/_components/Footer.tsx
+++ b/app/[lang]/_components/Footer.tsx
@@ -30,7 +30,7 @@ export function Footer(): ReactNode {
 
         {/* Middle row: Menu items */}
         <div className={'mx-auto mt-12 w-full max-w-[720px]'}>
-          <div className={'grid grid-cols-2 gap-8 lg:grid-cols-4'}>
+          <div className={'grid grid-cols-2 gap-8 lg:grid-cols-5'}>
             {Object.entries(footerLinks).map(([category, links]) => (
               <div key={category} className={'flex flex-col gap-4'}>
                 <h3 className={'cursor-default text-sm font-medium text-gray-500'}>{category}</h3>
diff --git a/app/[lang]/_components/header/DesktopHeader.tsx b/app/[lang]/_components/header/DesktopHeader.tsx
index e2e06f5..d9f00ce 100644
--- a/app/[lang]/_components/header/DesktopHeader.tsx
+++ b/app/[lang]/_components/header/DesktopHeader.tsx
@@ -15,6 +15,7 @@ import { dAppUrl, headerTabs } from '@/app/[lang]/_utils/constants'
 
 import { containerAnimation } from './animations'
 import { DAOExpand } from './DaoExpand'
+import { DevelopersExpand } from './DevelopersExpand'
 import { LanguageExpand } from './LanguageExpand'
 import { ProductsExpand } from './ProductsExpand'
 import { ResourcesExpand } from './ResourcesExpand'
@@ -41,6 +42,7 @@ export function DesktopHeader({ className, switchLanguageAction, currentLanguage
   const tabContent: Record<string, ReactNode> = useMemo(
     () => ({
       products: <ProductsExpand setCurrentTab={setCurrentTab} />,
+      developers: <DevelopersExpand setCurrentTab={setCurrentTab} />,
       resources: <ResourcesExpand setCurrentTab={setCurrentTab} />,
       dao: <DAOExpand setCurrentTab={setCurrentTab} />,
       language: <LanguageExpand switchLanguageAction={switchLanguageAction} currentLanguage={currentLanguage} />,
@@ -85,11 +87,18 @@ export function DesktopHeader({ className, switchLanguageAction, currentLanguage
                   key={tab.name}
                   onMouseEnter={() => setCurrentTab(tab.value)}
                   className={cl(
-                    'cursor-pointer p-4 text-sm font-medium transition-colors',
+                    'text-sm font-medium transition-colors',
+                    tab.value === 'developers' ? '' : 'cursor-pointer p-4',
                     currentTab && currentTab !== tab.value ? 'text-gray-500' : 'text-white'
                   )}
                 >
-                  {tab.name}
+                  {tab.value === 'developers' ? (
+                    <a href={`/${currentLanguage}${tab.href}`} className={'block h-full w-full cursor-pointer p-4'}>
+                      {tab.name}
+                    </a>
+                  ) : (
+                    tab.name
+                  )}
                 </div>
               ))}
             </nav>
diff --git a/app/[lang]/_components/header/DevelopersExpand.tsx b/app/[lang]/_components/header/DevelopersExpand.tsx
new file mode 100644
index 0000000..70c38a0
--- /dev/null
+++ b/app/[lang]/_components/header/DevelopersExpand.tsx
@@ -0,0 +1,75 @@
+import { motion } from 'framer-motion'
+
+import { Button } from '@/app/[lang]/_components/Button'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { appDevelopers, developerDocsUrl } from '@/app/[lang]/_utils/constants'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import { expandAnimation } from './animations'
+
+import type { TAppLink } from '@/app/[lang]/_utils/constants'
+import type { ReactNode } from 'react'
+
+function DeveloperItem({
+  name,
+  href,
+  target,
+  description,
+  icon,
+  onClick,
+}: TAppLink & { onClick: () => void }): ReactNode {
+  return (
+    <LocalizedLink
+      href={href}
+      target={target}
+      className={
+        'flex w-1/3 max-w-[232px] grow gap-2 rounded-lg px-6 py-4 transition-colors duration-300 hover:bg-white/10'
+      }
+      onClick={onClick}
+    >
+      <div className={'w-6 shrink-0'}>{icon}</div>
+      <div className={'ml-4 flex max-h-[120px] flex-col gap-1'}>
+        <span className={'whitespace-normal break-words text-sm font-medium leading-5'}>{name}</span>
+        {description && (
+          <span className={'whitespace-normal break-words text-xs leading-5 text-gray-500'}>{description}</span>
+        )}
+      </div>
+    </LocalizedLink>
+  )
+}
+
+export function DevelopersExpand({ setCurrentTab }: { setCurrentTab: (tab: string) => void }): ReactNode {
+  return (
+    <motion.div className={'grid grid-cols-12'} {...expandAnimation}>
+      <div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
+        <p className={'mb-4 text-2xl font-medium'}>
+          {DEVELOPERS_DICT.expand.titleLine1} <br />
+          {DEVELOPERS_DICT.expand.titleLine2}
+        </p>
+        <p className={'mb-10 max-w-[327px] text-sm text-gray-500'}>{DEVELOPERS_DICT.expand.description}</p>
+        <Button
+          variant={'blue'}
+          className={'whitespace-nowrap'}
+          title={DEVELOPERS_DICT.expand.ctaButton}
+          href={developerDocsUrl}
+        />
+      </div>
+
+      <div className={'col-span-8 p-16'}>
+        <div className={'flex flex-row flex-wrap gap-4'}>
+          {appDevelopers.map((developerResource) => (
+            <DeveloperItem
+              onClick={() => setCurrentTab('empty')}
+              key={developerResource.name}
+              name={developerResource.name}
+              href={developerResource.href}
+              description={developerResource.description}
+              icon={developerResource.icon}
+              target={developerResource.target}
+            />
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/app/[lang]/_components/header/MobileHeader.tsx b/app/[lang]/_components/header/MobileHeader.tsx
index a4e8270..7db3717 100644
--- a/app/[lang]/_components/header/MobileHeader.tsx
+++ b/app/[lang]/_components/header/MobileHeader.tsx
@@ -11,7 +11,7 @@ import { IconClose } from '@/app/[lang]/_icons/IconClose'
 import { IconMenu } from '@/app/[lang]/_icons/IconMenu'
 import { IconPlanet } from '@/app/[lang]/_icons/IconPlanet'
 import { ShapeshiftLogo } from '@/app/[lang]/_icons/ShapeshiftLogo'
-import { appDao, appProducts, appResources, headerTabs } from '@/app/[lang]/_utils/constants'
+import { appDao, appDevelopers, appProducts, appResources, headerTabs } from '@/app/[lang]/_utils/constants'
 import { SUPPORTED_LANGUAGES } from '@/app/[lang]/_utils/i18nconfig'
 
 import type { TAppLink } from '@/app/[lang]/_utils/constants'
@@ -23,6 +23,11 @@ const mobileTabs: { name: string; value: string; items: TAppLink[] }[] = [
     value: 'products',
     items: appProducts.slice(0, 6),
   },
+  {
+    name: 'Developers',
+    value: 'developers',
+    items: appDevelopers.slice(0, 6),
+  },
   {
     name: 'Resources',
     value: 'resources',
@@ -111,17 +116,42 @@ export function MobileHeader({
                 <div className={'space-y-2'}>
                   {headerTabs.map((tab) => (
                     <div key={tab.name} className={'overflow-hidden rounded-2xl bg-secondBg'}>
-                      <button
-                        onClick={() => {
-                          setExpandedSection(expandedSection === tab.value ? '' : tab.value)
-                        }}
-                        className={'flex w-full items-center justify-between p-6 text-2xl'}
-                      >
-                        {tab.name}
-                        <div className={'flex items-center gap-2 rounded-[100%] bg-white/5 p-2'}>
-                          <AnimatedPlusMinusIcon isOpen={expandedSection === tab.value} />
+                      {tab.value === 'developers' ? (
+                        <div className={'flex w-full items-center text-2xl'}>
+                          <a
+                            href={`/${currentLanguage}${tab.href}`}
+                            onClick={() => setIsMenuOpen(false)}
+                            className={'flex-1 p-6'}
+                          >
+                            {tab.name}
+                          </a>
+                          <button
+                            type={'button'}
+                            aria-label={'Toggle Developers links'}
+                            aria-expanded={expandedSection === tab.value}
+                            onClick={() => {
+                              setExpandedSection(expandedSection === tab.value ? '' : tab.value)
+                            }}
+                            className={
+                              'mr-4 flex min-h-12 min-w-12 items-center justify-center rounded-full bg-white/5'
+                            }
+                          >
+                            <AnimatedPlusMinusIcon isOpen={expandedSection === tab.value} />
+                          </button>
                         </div>
-                      </button>
+                      ) : (
+                        <button
+                          onClick={() => {
+                            setExpandedSection(expandedSection === tab.value ? '' : tab.value)
+                          }}
+                          className={'flex w-full items-center justify-between p-6 text-2xl'}
+                        >
+                          {tab.name}
+                          <div className={'flex items-center gap-2 rounded-[100%] bg-white/5 p-2'}>
+                            <AnimatedPlusMinusIcon isOpen={expandedSection === tab.value} />
+                          </div>
+                        </button>
+                      )}
                       <AnimatePresence>
                         {expandedSection === tab.value && (
                           <motion.div className={'space-y-4 p-6 pt-0'} {...expandAnimation}>
diff --git a/app/[lang]/_icons/IconSettings.tsx b/app/[lang]/_icons/IconSettings.tsx
new file mode 100644
index 0000000..0c04aa4
--- /dev/null
+++ b/app/[lang]/_icons/IconSettings.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode, SVGProps } from 'react'
+
+export function IconSettings(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <circle cx={'12'} cy={'12'} r={'3'} stroke={'currentColor'} strokeWidth={'2'} />
+      <path
+        d={
+          'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82A1.65 1.65 0 0 0 3 13.09H2.91a2 2 0 0 1 0-4H3a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V2.91a2 2 0 0 1 4 0V3a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1h.09a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
+}
diff --git a/app/[lang]/_utils/constants.tsx b/app/[lang]/_utils/constants.tsx
index a29174b..434045a 100644
--- a/app/[lang]/_utils/constants.tsx
+++ b/app/[lang]/_utils/constants.tsx
@@ -39,6 +39,10 @@ export const dAppUrl =
 
 const docsUrl = 'https://github.com/shapeshift/web'
 
+export const developerDocsUrl = 'https://api.shapeshift.com/docs'
+
+export const developerDocsSectionUrl = (section: string): string => `${developerDocsUrl}${section}`
+
 const githubUrl = 'https://github.com/shapeshift'
 
 export const footerButtonTitle = 'Donate'
@@ -226,6 +230,51 @@ export const appResources: TAppLink[] = [
   },
 ]
 
+export const appDevelopers: TAppLink[] = [
+  {
+    name: 'Swap Widget SDK',
+    href: developerDocsSectionUrl('#tag/swap-widget-sdk'),
+    description: 'Integrate the drop-in swap widget with built-in UI.',
+    icon: <IconResource />,
+    target: '_blank',
+  },
+  {
+    name: 'Widget sandbox',
+    href: 'https://widget.shapeshift.com/',
+    description: 'Configure and preview the drop-in swap widget.',
+    icon: <IconDocs />,
+    target: '_blank',
+  },
+  {
+    name: 'Swap API Doc',
+    href: developerDocsSectionUrl('#tag/swaps'),
+    description: 'Get rates, executable quotes, and swap status.',
+    icon: <IconTriLink />,
+    target: '_blank',
+  },
+  {
+    name: 'Supported Assets',
+    href: developerDocsSectionUrl('#tag/supported-assets'),
+    description: 'List assets and fetch asset details by CAIP-19 ID.',
+    icon: <IconWallet />,
+    target: '_blank',
+  },
+  {
+    name: 'Supported Chains',
+    href: developerDocsSectionUrl('#tag/supported-chains'),
+    description: 'Review the chains available through the public API.',
+    icon: <IconChains />,
+    target: '_blank',
+  },
+  {
+    name: 'Partners portal',
+    href: 'https://dashboard.affiliate.shapeshift.com/',
+    description: 'Get your affiliate code and configure the widget.',
+    icon: <IconActivityRings />,
+    target: '_blank',
+  },
+]
+
 export const appDao: TAppLink[] = [
   {
     name: 'FOX Token',
@@ -314,12 +363,14 @@ export const appProducts: TAppLink[] = [
 
 export const headerTabs = [
   { name: 'Products', href: '/products', value: 'products' },
+  { name: 'Developers', href: '/developers', value: 'developers' },
   { name: 'Resources', href: '/resources', value: 'resources' },
   { name: 'DAO', href: '/dao', value: 'dao' },
 ]
 
 export const footerLinks: Record<string, TAppLink[]> = {
   Products: appProducts,
+  Developers: appDevelopers,
   Resources: appResources,
   DAO: appDao,
   Connect: [
diff --git a/app/[lang]/_utils/dictionary/developers.ts b/app/[lang]/_utils/dictionary/developers.ts
new file mode 100644
index 0000000..d05457b
--- /dev/null
+++ b/app/[lang]/_utils/dictionary/developers.ts
@@ -0,0 +1,82 @@
+export const DEVELOPERS_DICT = {
+  expand: {
+    titleLine1: 'Build with',
+    titleLine2: 'ShapeShift.',
+    description: 'Explore API documentation, integration guides, and reference material for crypto applications.',
+    ctaButton: 'View API Docs',
+  },
+  page: {
+    widget: {
+      title: 'Your brand. Make it feel native.',
+      description:
+        'Choose a theme, set the default assets, and preview a swap experience that feels built into your product.',
+      ctaButton: 'Open the widget sandbox',
+    },
+    api: {
+      title: 'Skip the UI and build your own',
+      description:
+        'Use the same routing engine through a REST API. We return unsigned transactions for your users to sign and broadcast.',
+      endpoints: [
+        {
+          method: 'GET /v1/assets',
+          title: 'List chains and assets',
+          description: 'Enumerate what your users can trade, by CAIP-19 ID.',
+        },
+        {
+          method: 'GET /v1/swap/rates',
+          title: 'Fetch rates for a pair',
+          description: 'One call returns a rate from every available swapper. No transaction yet.',
+        },
+        {
+          method: 'POST /v1/swap/quote',
+          title: 'Get an executable quote',
+          description: 'Returns transaction data. Your user signs it in their own wallet, funds never touch us.',
+        },
+      ],
+    },
+    economics: {
+      title: 'How the revenue share works',
+      description: 'One partner code follows every swap to on-chain settlement. No invoices or payout schedules.',
+    },
+    stats: {
+      chains: { value: '48+', title: 'Supported chains' },
+      assets: { value: '30,000+', title: 'Tradable assets' },
+      volume: { value: '$1.7B+', title: 'Lifetime swap volume' },
+    },
+    faq: {
+      title: 'Questions partners ask',
+      items: [
+        {
+          question: 'Which chains are supported?',
+          answer:
+            'Bitcoin, Ethereum and the major L2s (Arbitrum, Base, Optimism), Solana, Avalanche, BNB Chain, Cosmos, and more. 48+ chains today, with new routes added as the underlying aggregators support them. The full, current list is served by the API: https://api.shapeshift.com/v1/chains',
+          hasChainsLink: true,
+        },
+        {
+          question: 'What does it cost to integrate?',
+          answer:
+            'Nothing. There is no license fee or API key charge. Your affiliate fee is added on top of the protocol fee and paid directly to you.',
+          hasChainsLink: false,
+        },
+        {
+          question: 'Who holds user funds?',
+          answer:
+            'Swaps are non-custodial end to end. Users sign transactions from their own wallets, and funds move directly through the underlying protocols.',
+          hasChainsLink: false,
+        },
+        {
+          question: 'What support do partners get?',
+          hasChainsLink: false,
+          answer:
+            'Support does not stop at launch. Partners get a direct channel to our integration engineers for the lifetime of the integration, on both technical and marketing questions, plus example repos and a staging affiliate ID for testing.',
+        },
+      ],
+    },
+    cta: {
+      title: 'Integrate multichain swaps in your product',
+      description: 'Configure the Widget, preview your theme, create a partner code, and start earning on every swap.',
+      ctaPrimary: 'Configure the Widget',
+      ctaSecondary: 'Talk with us',
+    },
+  },
+} as const
diff --git a/app/[lang]/developers/README.md b/app/[lang]/developers/README.md
new file mode 100644
index 0000000..5f8657f
--- /dev/null
+++ b/app/[lang]/developers/README.md
@@ -0,0 +1,35 @@
+# Developers Directory
+
+This directory contains the `/developers` landing page: the entry point for dApps, chains, and wallets integrating ShapeShift's swap widget or REST API.
+
+## Directory Structure
+
+- **layout.tsx**: Metadata (title/description/OG/Twitter) for the page, plus `DevelopersResourceHints` (DNS prefetch/preconnect for `widget.shapeshift.com`).
+- **page.tsx**: Assembles all sections below in order.
+- **_components/**: One component per page section.
+
+## Page sections, in order
+
+1. **Hero** — the real, live `@shapeshiftoss/swap-widget` embedded in the page (not a mock), plus the primary CTAs (Try the Widget / Talk with us).
+2. **Stats** — chains / assets / lifetime volume (static snapshot figures, not live).
+3. **Partner logos** — scrolling row of protocols ShapeShift routes across.
+4. **Widget** — feature copy + an interactive live theme-color preview (`LiveThemeSwitcher`).
+5. **Why ShapeShift** — the routing pitch: compare protocols, return one best route.
+6. **API** — clickable endpoint list with a live-switching, typewriter-animated code sample panel.
+7. **Economics** — how the affiliate revenue share works, step by step.
+8. **Launch path** — the three questions most teams ask before choosing an integration path.
+9. **FAQ** — accordion.
+10. **Closing CTA** band.
+
+## Technical Implementation
+
+- Most copy lives in `app/[lang]/_utils/dictionary/developers.ts` under `DEVELOPERS_DICT.page`, **except** WhyShapeShift, WidgetSection's feature ring, ApiSection's code panels, EconomicsSection's milestones, and LaunchPath's Q&A, which hardcode their copy directly in JSX (illustration- or interaction-heavy sections where copy, visuals, and behavior are tightly coupled).
+- `DevelopersHero.tsx` embeds the real `@shapeshiftoss/swap-widget` React SDK (dynamically imported, `ssr: false`) with `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID`. Set this public Reown project ID before building (Next.js embeds it in the client bundle); the existing swap-widget service uses the value documented in `.env.local.sample`. Configure it in each Railway environment before promoting this page. Verify the website origin is allowed in Reown and test wallet connection before release. Set `NEXT_PUBLIC_SHAPESHIFT_PARTNER_CODE` to ShapeShift's registered affiliate code before release so website swaps are attributed to its payout account; verify the code via `/v1/partner/{code}`.
+- Client components (interactive state, refs, or the widget's own client-only requirements): `DevelopersHero`, `DevelopersWidgetSection`, `DevelopersApiSection`, `DevelopersFaq`, `DevelopersPartnerLogos`. Everything else is a server component.
+- Reuses existing shared components (`Button`, `LocalizedLink`) and Tailwind color tokens from `tailwind.config.ts`.
+
+## Development Guidelines
+
+- Keep all partner/API links pointed at real, live URLs (`https://api.shapeshift.com/docs`, `https://widget.shapeshift.com/`) — never placeholder `#` hrefs.
+- Match existing Tailwind color tokens (`bg-blue`, `bg-blueLight`, `bg-mint`, `bg-secondBg`, `border-stroke`, etc.) rather than introducing new hex values.
+- The `@shapeshiftoss/swap-widget` SDK and its peer dependencies (`wagmi`, `@reown/appkit*`, `@solana/wallet-adapter-*`, etc.) are the only dependency this page adds to the repo. `next.config.ts`'s `webpack` block and `middleware.ts`'s CSP scoping (to `/developers` only) exist solely to support it — see the comments in both files before changing either.
diff --git a/app/[lang]/developers/_components/DevelopersApiSection.tsx b/app/[lang]/developers/_components/DevelopersApiSection.tsx
new file mode 100644
index 0000000..d50bc33
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersApiSection.tsx
@@ -0,0 +1,238 @@
+'use client'
+
+import { motion, useInView, useReducedMotion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+
+import { Button } from '@/app/[lang]/_components/Button'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { ReactNode } from 'react'
+
+const codePanels = [
+  {
+    label: 'GET /v1/assets',
+    lines: [
+      '$ # chains',
+      'curl "https://api.shapeshift.com/v1/chains"',
+      '',
+      '# assets, filtered by chain',
+      'curl --get "https://api.shapeshift.com/v1/assets" \\',
+      '  --data-urlencode "chainId=eip155:1" \\',
+      '  --data-urlencode "limit=100"',
+      '',
+      '# response · 200',
+      '{',
+      '  "assets": [{',
+      '    "assetId": "eip155:1/slip44:60",',
+      '    "chainId": "eip155:1",',
+      '    "name": "Ethereum",',
+      '    "symbol": "ETH",',
+      '    "precision": 18,',
+      '    "icon": "https://…/eth@2x.png"',
+      '  }, …],',
+      '  "timestamp": 1754241000000',
+      '}',
+    ],
+  },
+  {
+    label: 'GET /v1/swap/rates',
+    lines: [
+      '$ curl --get "https://api.shapeshift.com/v1/swap/rates" \\',
+      '  --data-urlencode "sellAssetId=eip155:1/slip44:60" \\',
+      '  --data-urlencode "buyAssetId=bip122:000000000019d6689c085ae165831e93/slip44:0" \\',
+      '  --data-urlencode "sellAmountCryptoBaseUnit=1000000000000000000" \\',
+      '  -H "X-Partner-Code: your-partner-code"',
+      '',
+      '# response · 200',
+      '{',
+      '  "rates": [{',
+      '    "swapperName": "THORChain",',
+      '    "rate": "0.04829",',
+      '    "buyAmountCryptoBaseUnit": "4829000",',
+      '    "steps": 1,',
+      '    "estimatedExecutionTimeMs": 60000,',
+      '    "affiliateBps": "10"',
+      '  }, …one entry per swapper…],',
+      '  "expiresAt": 1754241060000',
+      '}',
+    ],
+  },
+  {
+    label: 'POST /v1/swap/quote',
+    lines: [
+      '$ curl -X POST "https://api.shapeshift.com/v1/swap/quote" \\',
+      '  -H "X-Partner-Code: your-partner-code" \\',
+      '  -H "Content-Type: application/json" \\',
+      "  -d '{",
+      '    "sellAssetId": "eip155:1/slip44:60",',
+      '    "buyAssetId": "bip122:00000000...93/slip44:0",',
+      '    "sellAmountCryptoBaseUnit": "1000000000000000000",',
+      '    "receiveAddress": "bc1qar0s...f5mdq",',
+      '    "swapperName": "Relay"',
+      "  }'",
+      '',
+      '# response · 200',
+      '{',
+      '  "quoteId": "0f8e2b1a-…",',
+      '  "swapperName": "Relay",',
+      '  "rate": "0.04829",',
+      '  "affiliateBps": "10",',
+      '  "steps": [{',
+      '    "transactionData": {',
+      '      "to": "0xdef1c0de…", "data": "0x…",',
+      '      "value": "1000000000000000000"',
+      '    }',
+      '  }],',
+      '  "expiresAt": 1754241060000',
+      '}',
+    ],
+  },
+]
+
+function TypedCodePanel({ activeTab }: { activeTab: number }): ReactNode {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const isInView = useInView(panelRef, { amount: 0.25, once: true })
+  const shouldReduceMotion = useReducedMotion()
+  const source = codePanels[activeTab].lines.join('\n')
+  const [visibleCharacters, setVisibleCharacters] = useState(0)
+  const [hasCopied, setHasCopied] = useState(false)
+
+  useEffect(() => {
+    if (!isInView) {
+      setVisibleCharacters(0)
+      return undefined
+    }
+    if (shouldReduceMotion) {
+      setVisibleCharacters(source.length)
+      return undefined
+    }
+
+    setVisibleCharacters(0)
+    const interval = window.setInterval(() => {
+      setVisibleCharacters((value) => {
+        if (value >= source.length) {
+          window.clearInterval(interval)
+          return value
+        }
+        return Math.min(value + 12, source.length)
+      })
+    }, 12)
+
+    return () => window.clearInterval(interval)
+  }, [activeTab, isInView, shouldReduceMotion, source.length])
+
+  useEffect(() => setHasCopied(false), [activeTab])
+
+  return (
+    <div ref={panelRef} className={'sticky top-[120px] overflow-hidden rounded-2xl border border-stroke bg-[#0d1117]'}>
+      <div className={'flex items-center gap-3.5 border-b border-stroke px-5 py-3.5'}>
+        <div className={'flex gap-1.5'}>
+          <span className={'size-2.5 rounded-full bg-stroke'} />
+          <span className={'size-2.5 rounded-full bg-stroke'} />
+          <span className={'size-2.5 rounded-full bg-stroke'} />
+        </div>
+        <span className={'font-mono text-xs text-gray-500'}>{codePanels[activeTab].label}</span>
+        <button
+          type={'button'}
+          onClick={() => {
+            navigator.clipboard
+              .writeText(
+                source
+                  .split('# response · 200')[0]
+                  .replace(/^\$\s?/gm, '')
+                  .trim()
+              )
+              .then(() => {
+                setHasCopied(true)
+                window.setTimeout(() => setHasCopied(false), 1800)
+              })
+              .catch(() => undefined)
+          }}
+          className={'ml-auto font-mono text-[10px] text-gray-500 transition-colors hover:text-white'}
+        >
+          {hasCopied ? 'COPIED' : 'COPY'}
+        </button>
+      </div>
+      <pre
+        className={
+          'min-h-[390px] overflow-x-auto whitespace-pre p-6 font-mono text-[12.5px] leading-[1.7] text-[#c9d1d9] sm:p-7'
+        }
+      >
+        {source.slice(0, visibleCharacters)}
+        {visibleCharacters < source.length ? (
+          <motion.span
+            aria-hidden={'true'}
+            animate={{ opacity: [1, 0, 1] }}
+            transition={{ duration: 0.8, repeat: Infinity }}
+            className={'ml-0.5 inline-block h-[1.1em] w-[7px] translate-y-[2px] bg-mint'}
+          />
+        ) : null}
+      </pre>
+    </div>
+  )
+}
+
+export function DevelopersApiSection(): ReactNode {
+  const { api } = DEVELOPERS_DICT.page
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <section id={'api'} className={'container mx-auto scroll-mt-28 pt-14 lg:scroll-mt-32 lg:pt-16'}>
+      <h2 className={'mb-4 text-[38px] font-bold leading-[1.04] tracking-[-0.035em] sm:text-[50px]'}>{api.title}</h2>
+      <p className={'mb-8 max-w-[640px] text-base leading-relaxed text-secondary sm:text-lg'}>{api.description}</p>
+
+      <div className={'grid grid-cols-1 items-start gap-10 lg:grid-cols-[1fr_1.1fr] lg:gap-14'}>
+        <div>
+          {api.endpoints.map((endpoint, index) => (
+            <button
+              type={'button'}
+              key={endpoint.method}
+              onClick={() => setActiveTab(index)}
+              onMouseEnter={() => setActiveTab(index)}
+              onFocus={() => setActiveTab(index)}
+              aria-pressed={activeTab === index}
+              className={
+                activeTab === index
+                  ? 'group block w-full border-t border-stroke bg-white/[0.02] py-6 text-left transition-colors'
+                  : 'group block w-full border-t border-stroke py-6 text-left transition-colors hover:bg-white/[0.02] focus-visible:bg-white/[0.02] focus-visible:outline-none'
+              }
+            >
+              <div className={'flex flex-col gap-2 pl-5'}>
+                <div className={'flex flex-wrap items-center gap-3'}>
+                  <span
+                    className={
+                      activeTab === index
+                        ? 'text-lg font-semibold tracking-[-0.01em] text-white transition-colors'
+                        : 'text-lg font-semibold tracking-[-0.01em] text-gray-500 transition-colors group-hover:text-white group-focus-visible:text-white'
+                    }
+                  >
+                    {endpoint.title}
+                  </span>
+                  <span
+                    className={
+                      'whitespace-nowrap rounded-md bg-blue/10 px-2.5 py-1 font-mono text-[11.5px] text-blueLight'
+                    }
+                  >
+                    {endpoint.method}
+                  </span>
+                </div>
+                <p className={'text-[14.5px] leading-relaxed text-gray-500'}>{endpoint.description}</p>
+              </div>
+            </button>
+          ))}
+          <div className={'border-t border-stroke pt-7'}>
+            <Button
+              href={'https://api.shapeshift.com/docs'}
+              variant={'white'}
+              title={'Open the API reference'}
+              hasArrow
+              className={'w-full whitespace-nowrap sm:w-fit'}
+            />
+          </div>
+        </div>
+
+        <TypedCodePanel activeTab={activeTab} />
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersCta.tsx b/app/[lang]/developers/_components/DevelopersCta.tsx
new file mode 100644
index 0000000..f6052b8
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersCta.tsx
@@ -0,0 +1,56 @@
+import Image from 'next/image'
+
+import { Button } from '@/app/[lang]/_components/Button'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { ReactNode } from 'react'
+
+export function DevelopersCta(): ReactNode {
+  const { cta } = DEVELOPERS_DICT.page
+
+  return (
+    <section className={'container mx-auto pb-14 pt-12 lg:pb-16 lg:pt-14'}>
+      <div
+        className={
+          'relative isolate min-h-[300px] overflow-hidden rounded-[20px] border border-stroke p-8 text-center sm:p-10 lg:min-h-[340px] lg:p-12'
+        }
+      >
+        <Image
+          src={'/bannerFooterBg.png'}
+          alt={''}
+          aria-hidden={'true'}
+          fill
+          sizes={'(min-width: 1400px) 1400px, 100vw'}
+          className={'-z-20 object-cover'}
+        />
+        {/* Sized and positioned to match the fox's own real usage on the official site
+            (app/[lang]/dao/fox-token/page.tsx: h-[398px] in a lg:h-[552px] banner, ~72% of the
+            container's height, bottom-right at a 5% inset, hidden below the lg breakpoint —
+            not a guessed scale. */}
+        <Image
+          src={'/cta/fox-silhouette.png'}
+          alt={''}
+          aria-hidden={'true'}
+          width={685}
+          height={686}
+          className={'pointer-events-none absolute bottom-0 right-[5%] -z-10 hidden h-[72%] w-auto opacity-80 lg:block'}
+        />
+        <div
+          className={
+            'pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_top,rgba(10,11,17,.55),rgba(10,11,17,.1)_45%,transparent_75%)]'
+          }
+        />
+        <div className={'relative flex h-full min-h-[236px] flex-col justify-center lg:min-h-[276px]'}>
+          <h2 className={'mb-4 text-[32px] font-bold leading-tight tracking-[-0.02em] sm:text-4xl lg:text-5xl'}>
+            {cta.title}
+          </h2>
+          <p className={'mb-8 text-lg text-white'}>{cta.description}</p>
+          <div className={'flex flex-wrap items-center justify-center gap-3.5'}>
+            <Button href={'https://widget.shapeshift.com/'} variant={'blue'} title={cta.ctaPrimary} hasArrow />
+            <Button href={'https://discord.gg/shapeshift'} variant={'white'} title={cta.ctaSecondary} />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersEconomicsSection.tsx b/app/[lang]/developers/_components/DevelopersEconomicsSection.tsx
new file mode 100644
index 0000000..7ccb57f
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersEconomicsSection.tsx
@@ -0,0 +1,144 @@
+import { Button } from '@/app/[lang]/_components/Button'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { ReactNode } from 'react'
+
+const milestones = [
+  {
+    icon: '</>',
+    label: 'Your product',
+    title: 'Create your partner code',
+    description: 'One parameter in the Widget or API.',
+  },
+  {
+    icon: '⇄',
+    label: 'ShapeShift',
+    title: 'We route every swap',
+    description: 'The trade stays attributed to your product.',
+  },
+  {
+    icon: '$',
+    label: 'Your wallet',
+    title: 'Your fee settles on-chain',
+    description: 'Your share arrives with the transaction.',
+  },
+] as const
+
+function MilestoneMarker({ index }: { index: number }): ReactNode {
+  return (
+    <div
+      className={'relative z-10 flex size-12 shrink-0 items-center justify-center border border-white/15 bg-[#0A0D13]'}
+    >
+      <span className={'font-mono text-sm font-semibold text-blueLight'}>{milestones[index].icon}</span>
+    </div>
+  )
+}
+
+function MilestoneCopy({ index }: { index: number }): ReactNode {
+  const milestone = milestones[index]
+
+  return (
+    <div className={'max-w-[200px] text-center'}>
+      <div className={'mb-1.5 text-xs text-gray-500'}>{milestone.label}</div>
+      <h3 className={'mb-1.5 text-lg font-semibold tracking-[-0.025em]'}>{milestone.title}</h3>
+      <p className={'text-xs leading-relaxed text-gray-400'}>{milestone.description}</p>
+    </div>
+  )
+}
+
+export function DevelopersEconomicsSection(): ReactNode {
+  const { economics } = DEVELOPERS_DICT.page
+
+  return (
+    <section id={'economics'} className={'container mx-auto pt-14 lg:pt-16'}>
+      <div className={'mx-auto mb-8 max-w-[780px] text-center'}>
+        <h2 className={'mb-4 text-[38px] font-bold leading-[1.04] tracking-[-0.035em] sm:text-[50px]'}>
+          {economics.title}
+        </h2>
+        <p className={'mx-auto max-w-[650px] text-base leading-relaxed text-secondary sm:text-lg'}>
+          {economics.description}
+        </p>
+      </div>
+
+      <div className={'relative border-y border-white/10 px-1 py-8 sm:px-4 lg:px-6 lg:py-10'}>
+        <div className={'relative hidden items-start justify-between gap-6 lg:flex'}>
+          <div className={'pointer-events-none absolute left-[60px] right-[60px] top-6 h-px bg-white/15'} />
+          {milestones.map((milestone, index) => (
+            <div key={milestone.title} className={'relative z-10 flex flex-1 flex-col items-center gap-5'}>
+              <MilestoneMarker index={index} />
+              <MilestoneCopy index={index} />
+            </div>
+          ))}
+        </div>
+
+        <div className={'relative flex flex-col gap-6 lg:hidden'}>
+          {milestones.map((milestone, index) => (
+            <div key={milestone.title} className={'relative flex items-start gap-4'}>
+              {index < milestones.length - 1 ? <div className={'absolute left-6 top-12 h-6 w-px bg-white/15'} /> : null}
+              <MilestoneMarker index={index} />
+              <div className={'flex-1 pt-2 text-left'}>
+                <div className={'mb-1 text-xs text-gray-500'}>{milestone.label}</div>
+                <h3 className={'mb-1 text-base font-semibold tracking-[-0.02em]'}>{milestone.title}</h3>
+                <p className={'text-xs leading-relaxed text-gray-400'}>{milestone.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className={'relative mt-10 grid gap-6 border-t border-white/10 pt-7 lg:grid-cols-[.9fr_1.1fr]'}>
+          <div className={'flex flex-col justify-between py-1'}>
+            <div>
+              <div className={'font-semibold'}>{'One integration. Revenue from every attributed swap.'}</div>
+              <p className={'mt-2 max-w-[500px] text-sm leading-relaxed text-gray-500'}>
+                {'Create your partner code, configure the fee, and review attributed swaps from the Partner Portal.'}
+              </p>
+            </div>
+            <div className={'mt-6'}>
+              <div className={'text-xs text-gray-500'}>{'Configurable partner fee'}</div>
+              <div className={'mt-1 text-2xl font-semibold text-mint'}>{'0 to 100 bps'}</div>
+            </div>
+          </div>
+
+          <div className={'border border-white/10 bg-[#0A0D13] p-5 sm:p-6'}>
+            <div className={'flex items-center justify-between border-b border-white/10 pb-4'}>
+              <div>
+                <div className={'text-sm font-semibold'}>{'Partner Portal'}</div>
+                <div className={'mt-1 text-xs text-gray-500'}>{'Integration overview'}</div>
+              </div>
+              <span className={'flex items-center gap-2 text-xs text-mint'}>
+                <span className={'size-1.5 rounded-full bg-mint'} aria-hidden={'true'} />
+                {'Live attribution'}
+              </span>
+            </div>
+            <dl className={'grid grid-cols-2 gap-x-5 gap-y-5 py-5 sm:grid-cols-3'}>
+              <div>
+                <dt className={'text-[11px] uppercase tracking-[.08em] text-gray-500'}>{'Partner code'}</dt>
+                <dd className={'mt-1.5 font-mono text-sm text-white'}>{'your-product'}</dd>
+              </div>
+              <div>
+                <dt className={'text-[11px] uppercase tracking-[.08em] text-gray-500'}>{'Fee setting'}</dt>
+                <dd className={'mt-1.5 text-sm font-semibold text-white'}>{'Your fee'}</dd>
+              </div>
+              <div>
+                <dt className={'text-[11px] uppercase tracking-[.08em] text-gray-500'}>{'Settlement'}</dt>
+                <dd className={'mt-1.5 text-sm font-semibold text-white'}>{'On-chain'}</dd>
+              </div>
+            </dl>
+            <div className={'border-t border-white/10 pt-4 text-xs'}>
+              <span className={'text-gray-500'}>{'Monitor attributed swaps and fee history'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={'mt-7 flex justify-center'}>
+        <Button
+          href={'https://dashboard.affiliate.shapeshift.com/'}
+          variant={'blue'}
+          title={'Open the partner portal'}
+          hasArrow
+        />
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersFaq.tsx b/app/[lang]/developers/_components/DevelopersFaq.tsx
new file mode 100644
index 0000000..07dda1b
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersFaq.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
+import { useState } from 'react'
+
+import { AnimatedPlusMinusIcon } from '@/app/[lang]/_components/QuestionSection'
+import { developerDocsSectionUrl } from '@/app/[lang]/_utils/constants'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { ReactNode } from 'react'
+
+// Mirrors QuestionSection's accordion exactly, but accepts a ReactNode answer instead of a
+// plain string, so the chains question can end in a real button instead of a raw URL.
+function FaqItem({ question, answer }: { question: string; answer: ReactNode }): ReactNode {
+  const [isOpen, setIsOpen] = useState(false)
+  const shouldReduceMotion = useReducedMotion()
+
+  return (
+    <div className={'border-t border-white/10 last:border-b'}>
+      <button
+        type={'button'}
+        aria-expanded={isOpen}
+        className={'group flex w-full items-center justify-between gap-6 py-5 text-left focus-visible:outline-none'}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className={'text-lg font-medium tracking-[-0.015em] text-white sm:text-xl'}>{question}</span>
+        <div
+          className={
+            'flex size-9 min-w-9 items-center justify-center text-gray-500 transition-colors group-hover:text-white group-focus-visible:text-white'
+          }
+        >
+          {shouldReduceMotion ? (
+            <span aria-hidden={'true'} className={'text-2xl leading-none'}>
+              {isOpen ? '−' : '+'}
+            </span>
+          ) : (
+            <AnimatedPlusMinusIcon isOpen={isOpen} />
+          )}
+        </div>
+      </button>
+      <AnimatePresence initial={!shouldReduceMotion}>
+        {isOpen ? (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: shouldReduceMotion ? 0 : 0.3, ease: 'easeInOut' }}
+            className={'overflow-hidden'}
+          >
+            <div className={'max-w-[760px] pb-6 pr-12 text-[15px] leading-relaxed text-gray-400'}>{answer}</div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export function DevelopersFaq(): ReactNode {
+  const { items } = DEVELOPERS_DICT.page.faq
+
+  return (
+    <div className={'container mx-auto grid gap-6 lg:grid-cols-[.65fr_1.35fr] lg:gap-16'}>
+      <div>
+        <h2 className={'max-w-[360px] text-[34px] font-bold leading-[1.04] tracking-[-0.035em] sm:text-[42px]'}>
+          {DEVELOPERS_DICT.page.faq.title}
+        </h2>
+        <p className={'mt-4 max-w-[360px] text-sm leading-relaxed text-gray-500'}>
+          {'Straight answers for product and engineering teams evaluating the integration.'}
+        </p>
+      </div>
+      <div className={'min-w-0'}>
+        {items.map((item) => (
+          <FaqItem
+            key={item.question}
+            question={item.question}
+            answer={
+              item.hasChainsLink ? (
+                <>
+                  <p>
+                    {
+                      'Bitcoin, Ethereum and the major L2s (Arbitrum, Base, Optimism), Solana, Avalanche, BNB Chain, Cosmos, and more. 48+ chains today, with new routes added as the underlying aggregators support them.'
+                    }
+                  </p>
+                  <a
+                    href={developerDocsSectionUrl('#tag/supported-chains')}
+                    target={'_blank'}
+                    rel={'noopener noreferrer'}
+                    className={
+                      'mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-white/10'
+                    }
+                  >
+                    {'View supported chains'}
+                    <span aria-hidden={'true'}>{'→'}</span>
+                  </a>
+                </>
+              ) : (
+                item.answer
+              )
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersHero.tsx b/app/[lang]/developers/_components/DevelopersHero.tsx
new file mode 100644
index 0000000..7ddc534
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersHero.tsx
@@ -0,0 +1,162 @@
+'use client'
+
+import '@shapeshiftoss/swap-widget/style.css'
+import { animate, motion, useMotionTemplate, useMotionValue, useReducedMotion } from 'framer-motion'
+import dynamic from 'next/dynamic'
+import { useEffect, useRef } from 'react'
+
+import { Button } from '@/app/[lang]/_components/Button'
+
+import type { ReactNode } from 'react'
+
+// Loaded client-side only, per the SDK's own docs: the widget initializes Reown AppKit at load,
+// which reads browser-only state and has no meaningful server-rendered output.
+const SwapWidget = dynamic(async () => (await import('@shapeshiftoss/swap-widget')).SwapWidget, {
+  ssr: false,
+  loading: () => <div className={'h-[660px] w-[420px] max-w-full rounded-[20px] bg-[#0A0A14]'} />,
+})
+
+function SwapWidgetEmbed(): ReactNode {
+  return (
+    <>
+      {/*
+        Upstream bug in @shapeshiftoss/swap-widget's own ≤600px CSS: .ssw-modal only sets a
+        max-height there, so its flex children (chain sidebar + token list) have no definite space
+        to distribute — the virtualized token list resolves to 0px tall and renders zero rows.
+        Giving the modal a real height (still capped well under the viewport) fixes the flex
+        cascade without changing anything about its layout/content.
+      */}
+      <style>{'@media (max-width: 600px) { .ssw-modal { height: min(600px, 90vh) !important; } }'}</style>
+      <SwapWidget
+        walletConnectProjectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
+        partnerCode={process.env.NEXT_PUBLIC_SHAPESHIFT_PARTNER_CODE}
+        onSwapSuccess={(txHash) => console.log('Success:', txHash)}
+        onSwapError={(error) => console.error('Error:', error)}
+        theme={'dark'}
+      />
+    </>
+  )
+}
+
+const PALETTE = ['#386FF9aa', '#9D63ECaa', '#70E1B1aa', '#06B6D4aa']
+
+export function DevelopersHero(): ReactNode {
+  const shouldReduceMotion = useReducedMotion()
+  const glowRef = useRef<HTMLDivElement>(null)
+  const glowAccent = useMotionValue(PALETTE[0])
+
+  useEffect(() => {
+    if (shouldReduceMotion) return undefined
+    const controls = animate(glowAccent, [...PALETTE, PALETTE[0]], {
+      duration: PALETTE.length * 3.2,
+      repeat: Infinity,
+      ease: 'linear',
+    })
+
+    const el = glowRef.current
+    const observer = el
+      ? new IntersectionObserver(([entry]) => {
+          if (entry?.isIntersecting) controls.play()
+          else controls.pause()
+        })
+      : null
+    if (el && observer) observer.observe(el)
+
+    return () => {
+      controls.stop()
+      observer?.disconnect()
+    }
+  }, [shouldReduceMotion, glowAccent])
+
+  const glowBackground = useMotionTemplate`linear-gradient(135deg, ${glowAccent}, #9D63EC77 48%, #70E1B166)`
+
+  return (
+    <section className={'relative overflow-hidden pb-16 pt-5 lg:pb-20 lg:pt-4'}>
+      <div
+        className={'container relative mx-auto grid min-w-0 items-center gap-8 lg:grid-cols-[.92fr_1.08fr] lg:gap-12'}
+      >
+        <motion.div initial={false} className={'min-w-0 lg:pt-4'}>
+          <h1
+            className={
+              'mb-6 max-w-full text-[46px] font-bold leading-[.98] tracking-[-0.05em] sm:text-[60px] lg:text-[68px]'
+            }
+          >
+            {'Every chain your users need, in one place.'}
+          </h1>
+          <p className={'mb-7 max-w-[600px] text-lg leading-relaxed text-secondary sm:text-xl'}>
+            {'Embed the Widget or call the API. ShapeShift handles the routing across every chain you need.'}
+          </p>
+          <div className={'mb-8 flex flex-col gap-3 sm:flex-row'}>
+            <Button href={'https://widget.shapeshift.com/'} variant={'blue'} title={'Try the Widget'} hasArrow />
+            <Button href={'https://discord.gg/shapeshift'} variant={'white'} title={'Talk with us'} />
+          </div>
+          <div className={'flex flex-wrap gap-x-5 gap-y-2 text-sm text-gray-400'}>
+            {['48+ chains', '18 routing protocols'].map((benefit, index) => (
+              <span key={benefit} className={'flex items-center'}>
+                {index > 0 ? <span className={'mr-5 text-gray-700'}>{'/'}</span> : null}
+                {benefit}
+              </span>
+            ))}
+          </div>
+          <div className={'mt-7 border-y border-white/10 py-4'}>
+            <div className={'flex flex-wrap items-baseline gap-x-3 gap-y-1'}>
+              <strong className={'text-lg font-semibold text-white'}>{'Earn on every attributed swap'}</strong>
+              <span className={'text-base font-semibold text-mint'}>{'Set 0 to 100 bps'}</span>
+            </div>
+            <p className={'mt-1 text-sm text-gray-400'}>{'Your partner fee settles directly on-chain.'}</p>
+          </div>
+          <a
+            href={'#api'}
+            className={'mt-5 inline-flex items-center gap-2 text-sm text-gray-400 transition-colors hover:text-white'}
+          >
+            {'Need more control? Build with the API'}
+            <span aria-hidden={'true'}>{'→'}</span>
+          </a>
+        </motion.div>
+
+        <motion.div
+          initial={false}
+          className={
+            'relative mx-auto flex min-h-[560px] min-w-0 w-full max-w-[660px] items-center justify-center px-2 py-10 lg:min-h-[600px] lg:px-10 lg:py-0'
+          }
+        >
+          <motion.div
+            ref={glowRef}
+            aria-hidden={'true'}
+            initial={false}
+            animate={
+              shouldReduceMotion
+                ? undefined
+                : {
+                    borderRadius: [
+                      '42% 58% 61% 39% / 46% 38% 62% 54%',
+                      '58% 42% 38% 62% / 39% 61% 42% 58%',
+                      '42% 58% 61% 39% / 46% 38% 62% 54%',
+                    ],
+                    x: ['-3%', '4%', '-3%'],
+                    y: ['2%', '-3%', '2%'],
+                    scale: [0.96, 1.06, 0.96],
+                  }
+            }
+            transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
+            className={'pointer-events-none absolute inset-[7%] opacity-40 blur-[64px]'}
+            style={{
+              background: glowBackground,
+              borderRadius: '42% 58% 61% 39% / 46% 38% 62% 54%',
+            }}
+          />
+          {/* Reserve room for the quote selector and network fee before an amount is entered.
+              A minimum height keeps the widget top-aligned without clipping or scrolling taller
+              states. Allow the SDK's fixed-width card to shrink on narrow screens. */}
+          <div
+            className={
+              'relative z-10 min-h-[660px] w-[420px] max-w-full rounded-[20px] [&_.ssw-widget]:min-h-[660px] [&_.ssw-widget]:min-w-0'
+            }
+          >
+            <SwapWidgetEmbed />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersLaunchPath.tsx b/app/[lang]/developers/_components/DevelopersLaunchPath.tsx
new file mode 100644
index 0000000..4184f4c
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersLaunchPath.tsx
@@ -0,0 +1,68 @@
+import { Button } from '@/app/[lang]/_components/Button'
+
+import type { ReactNode } from 'react'
+
+const integrationAnswers = [
+  {
+    question: 'How long does integration take?',
+    answer:
+      'You can configure and preview the Widget in minutes. Production timing depends on your wallet flow, supported assets, and QA. The API requires your team to build the interface and transaction flow.',
+  },
+  {
+    question: 'Who owns what?',
+    answer:
+      'ShapeShift maintains routing and returns executable transactions. You own the product experience, wallet connection, transaction signing, support flow, and final integration testing.',
+  },
+  {
+    question: 'How do partner earnings work?',
+    answer:
+      'Create a partner code in the Portal, add it to the Widget or API, and monitor attributed swaps there. Fees settle directly to your configured wallet on-chain. There is no balance to withdraw.',
+  },
+] as const
+
+export function DevelopersLaunchPath(): ReactNode {
+  return (
+    <section className={'container mx-auto pt-12 lg:pt-14'}>
+      <div className={'border-y border-white/10 py-8 lg:py-9'}>
+        <div className={'flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between'}>
+          <div>
+            <h2 className={'text-[34px] font-bold leading-[1.05] tracking-[-0.035em] sm:text-[40px]'}>
+              {'Know what shipping involves'}
+            </h2>
+            <p className={'mt-3 max-w-[560px] text-base leading-relaxed text-secondary'}>
+              {'The three answers most teams need before choosing an integration path.'}
+            </p>
+          </div>
+          <div className={'shrink-0'}>
+            <Button
+              href={'https://api.shapeshift.com/docs'}
+              variant={'white'}
+              title={'Review the documentation'}
+              hasArrow
+            />
+          </div>
+        </div>
+
+        <dl className={'mt-8 grid gap-0 border-t border-white/10 md:grid-cols-3'}>
+          {integrationAnswers.map((item) => (
+            <div
+              key={item.question}
+              className={
+                'border-b border-white/10 py-5 md:border-b-0 md:border-r md:px-6 md:first:pl-0 md:last:border-r-0 md:last:pr-0'
+              }
+            >
+              <dt className={'text-base font-semibold tracking-[-0.02em] text-white'}>{item.question}</dt>
+              <dd className={'mt-2 text-sm leading-relaxed text-gray-400'}>{item.answer}</dd>
+            </div>
+          ))}
+        </dl>
+
+        <div className={'mt-5 flex flex-wrap gap-x-6 gap-y-2 text-xs text-gray-500'}>
+          <span>{'No integration fee'}</span>
+          <span>{'Non-custodial execution'}</span>
+          <span>{'Documentation and Discord support'}</span>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersPartnerLogos.tsx b/app/[lang]/developers/_components/DevelopersPartnerLogos.tsx
new file mode 100644
index 0000000..5e2fdca
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersPartnerLogos.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import Image from 'next/image'
+
+import { Carousel } from '@/app/[lang]/_components/Carousel'
+
+import type { ReactNode } from 'react'
+
+const imageLogos = [
+  {
+    key: 'thorchain',
+    alt: 'THORChain',
+    src: '/landing/thorchain.png',
+    width: 192,
+    height: 40,
+  },
+  {
+    key: 'chainflip',
+    alt: 'Chainflip',
+    src: '/landing/chainflip.png',
+    width: 238,
+    height: 40,
+  },
+  {
+    key: 'cowSwap',
+    alt: 'CoW Swap',
+    src: '/landing/cow-swap.png',
+    width: 218,
+    height: 40,
+  },
+  {
+    key: 'relay',
+    alt: 'Relay',
+    src: '/landing/relay.png',
+    width: 158,
+    height: 40,
+  },
+  { key: 'Ox', alt: '0x', src: '/landing/0x.png', width: 65, height: 40 },
+  {
+    key: 'mayaProtocol',
+    alt: 'MAYAChain',
+    src: '/landing/maya-protocol.png',
+    width: 171,
+    height: 40,
+  },
+  {
+    key: 'butterNetwork',
+    alt: 'Butter Network',
+    src: '/landing/butter-network.png',
+    width: 231,
+    height: 40,
+  },
+  {
+    key: 'jupiter',
+    alt: 'Jupiter',
+    src: '/landing/jupiter.png',
+    width: 150,
+    height: 40,
+  },
+] as const
+
+function ProtocolRow(): ReactNode {
+  return (
+    <div className={'flex shrink-0 items-center gap-14 pr-14'}>
+      {imageLogos.map(({ key, alt, src, width, height }) => (
+        <div
+          key={key}
+          className={'flex h-10 shrink-0 items-center brightness-0 invert transition-opacity hover:opacity-75'}
+        >
+          <Image src={src} alt={alt} width={width} height={height} style={{ width: 'auto', height: 'auto' }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function DevelopersPartnerLogos(): ReactNode {
+  return (
+    <section className={'mt-7 overflow-hidden border-b border-white/[0.07] py-5 lg:mt-8'}>
+      <div
+        className={
+          'relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]'
+        }
+      >
+        <Carousel speed={52} className={'[&_.animate-carousel]:motion-reduce:animate-none'}>
+          <ProtocolRow />
+        </Carousel>
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersResourceHints.tsx b/app/[lang]/developers/_components/DevelopersResourceHints.tsx
new file mode 100644
index 0000000..4d470e1
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersResourceHints.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+
+export function DevelopersResourceHints(): ReactNode {
+  return (
+    <>
+      <link rel={'dns-prefetch'} href={'https://widget.shapeshift.com'} />
+      <link rel={'preconnect'} href={'https://widget.shapeshift.com'} crossOrigin={'anonymous'} />
+    </>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersStats.tsx b/app/[lang]/developers/_components/DevelopersStats.tsx
new file mode 100644
index 0000000..b52f58c
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersStats.tsx
@@ -0,0 +1,27 @@
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { ReactNode } from 'react'
+
+export function DevelopersStats(): ReactNode {
+  const stats = Object.values(DEVELOPERS_DICT.page.stats)
+
+  return (
+    <div className={'container mx-auto border-y border-white/10'}>
+      <div className={'grid w-full grid-cols-1 sm:grid-cols-3'}>
+        {stats.map((stat) => (
+          <div
+            key={stat.title}
+            className={
+              'flex flex-col items-center border-b border-white/10 px-4 py-5 text-center last:border-b-0 sm:border-b-0 sm:border-r sm:last:border-r-0'
+            }
+          >
+            <div className={'text-3xl font-semibold leading-tight text-white lg:text-[42px] lg:leading-[50px]'}>
+              {stat.value}
+            </div>
+            <div className={'mt-1 text-sm text-gray-500'}>{stat.title}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersWhyShapeShift.tsx b/app/[lang]/developers/_components/DevelopersWhyShapeShift.tsx
new file mode 100644
index 0000000..7f1a284
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersWhyShapeShift.tsx
@@ -0,0 +1,74 @@
+import { ShapeshiftLogo } from '@/app/[lang]/_icons/ShapeshiftLogo'
+
+import type { ReactNode } from 'react'
+
+function RouterIllustration(): ReactNode {
+  return (
+    <div className={'mx-auto max-w-[580px] rounded-[30px] border border-white/[0.06] bg-[#0D111A] p-6 sm:p-8'}>
+      <div className={'relative flex flex-col items-stretch gap-0 sm:flex-row sm:gap-0'}>
+        <div
+          className={
+            'pointer-events-none absolute left-1/2 top-1/2 hidden size-[260px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue/[0.08] blur-[70px] sm:block'
+          }
+        />
+
+        <div
+          className={
+            'relative z-10 rounded-[16px] border border-white/[0.08] bg-[#171D2B] px-4 py-3 sm:flex sm:w-[150px] sm:shrink-0 sm:flex-col sm:justify-center'
+          }
+        >
+          <div className={'text-xs text-gray-500'}>{'Request'}</div>
+          <div className={'mt-1 text-xs font-semibold'}>{'Your product'}</div>
+        </div>
+
+        <div
+          className={
+            'my-3 h-6 w-px self-center bg-gradient-to-b from-blue to-blue/40 sm:my-0 sm:h-px sm:w-auto sm:flex-1 sm:bg-gradient-to-r'
+          }
+        />
+
+        <div
+          className={
+            'relative z-10 shrink-0 rounded-[16px] border border-blue/30 bg-[#131A2A] px-5 py-3 text-center shadow-[0_18px_50px_rgba(0,0,0,.35)] sm:mx-2 sm:flex sm:flex-col sm:justify-center'
+          }
+        >
+          <ShapeshiftLogo className={'mx-auto h-6 w-auto text-blueLight sm:mx-0'} />
+          <div className={'mt-2 text-xs font-semibold'}>{'Routing engine'}</div>
+        </div>
+
+        <div
+          className={
+            'my-3 h-6 w-px self-center bg-gradient-to-b from-blue/40 to-mint sm:my-0 sm:h-px sm:w-auto sm:flex-1 sm:bg-gradient-to-r'
+          }
+        />
+
+        <div
+          className={
+            'relative z-10 rounded-[16px] border border-mint/20 bg-[#12201D] px-4 py-3 sm:flex sm:w-[150px] sm:shrink-0 sm:flex-col sm:justify-center'
+          }
+        >
+          <div className={'text-xs text-mint'}>{'Selected'}</div>
+          <div className={'mt-1 text-xs font-semibold'}>{'Best route'}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function DevelopersWhyShapeShift(): ReactNode {
+  return (
+    <section className={'container mx-auto pt-16 lg:pt-20'}>
+      <div className={'mb-8 max-w-[720px]'}>
+        <h2 className={'mb-6 text-[42px] font-bold leading-[1.03] tracking-[-0.04em] sm:text-[56px]'}>
+          {'One request in. The best route out.'}
+        </h2>
+        <p className={'max-w-[600px] text-lg leading-relaxed text-secondary'}>
+          {
+            'ShapeShift compares liquidity across protocols and chains, then returns one executable route. Your team integrates once; the router keeps evolving.'
+          }
+        </p>
+      </div>
+      <RouterIllustration />
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/_components/DevelopersWidgetSection.tsx b/app/[lang]/developers/_components/DevelopersWidgetSection.tsx
new file mode 100644
index 0000000..c2b245a
--- /dev/null
+++ b/app/[lang]/developers/_components/DevelopersWidgetSection.tsx
@@ -0,0 +1,377 @@
+'use client'
+
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion } from 'framer-motion'
+import Image from 'next/image'
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconFox } from '@/app/[lang]/_icons/IconFox'
+import { IconSettings } from '@/app/[lang]/_icons/IconSettings'
+import { DEVELOPERS_DICT } from '@/app/[lang]/_utils/dictionary/developers'
+
+import type { FocusEvent, KeyboardEvent, PointerEvent, ReactNode } from 'react'
+
+// Real preset names and their real background/card/accent colors, read directly off
+// widget.shapeshift.com's own "Customize Widget" panel (clicked through all seven, recorded
+// what actually rendered) — not invented.
+const presets = [
+  { name: 'Blue', background: '#0a0a14', card: '#12121c', accent: '#3861fb' },
+  { name: 'Rose', background: '#140a0f', card: '#1c1218', accent: '#f43f5e' },
+  { name: 'Purple', background: '#0e0a14', card: '#1a1424', accent: '#a855f7' },
+  { name: 'Cyan', background: '#0a1214', card: '#141d20', accent: '#06b6d4' },
+  { name: 'Green', background: '#0a140e', card: '#141c18', accent: '#10b981' },
+  { name: 'Orange', background: '#14100a', card: '#1c1814', accent: '#f97316' },
+  { name: 'Stucco', background: '#0d1117', card: '#161b22', accent: '#bea989' },
+] as const
+
+const SEGMENT_DEG = 360 / presets.length
+
+// One color stop per preset, evenly spaced — the ring IS the preset list, just laid out
+// around a circle instead of a row of squares.
+const RING_GRADIENT =
+  'conic-gradient(from 0deg, ' +
+  presets.map((item, index) => `${item.accent} ${index * SEGMENT_DEG}deg`).join(', ') +
+  `, ${presets[0].accent} 360deg)`
+
+// The visual ring runs from inset-[11.5%] to inset-[4%]. The hit area is slightly
+// more forgiving than the visible band so the control remains easy to drag.
+// yields a circle of radius S*(0.5 - X/100), i.e. (1 - 2X/100) as a fraction of the
+// half-width (S/2), which is what radiusFraction below is measured in. A little slack on
+// each side makes the hit target more forgiving without reaching into the card in the middle.
+const RING_INNER_FRACTION = 0.73
+const RING_OUTER_FRACTION = 0.97
+
+function normalizeDeg(deg: number): number {
+  return ((deg % 360) + 360) % 360
+}
+
+// Recovers which preset sits at a given on-screen bearing (0deg = up, clockwise), given
+// how far the ring has been rotated — same convention as CSS conic-gradient + rotate().
+// Used for keyboard stepping, where landing on one exact named preset is what "next/previous"
+// means; the pointer path below needs the finer, in-between answer instead.
+function indexFromBearing(bearingDeg: number, rotationDeg: number): number {
+  const gradientAngle = normalizeDeg(bearingDeg - rotationDeg)
+  return Math.round(gradientAngle / SEGMENT_DEG) % presets.length
+}
+
+type TColors = { background: string; card: string; accent: string }
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = Number.parseInt(hex.slice(1), 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function mixHex(hexA: string, hexB: string, t: number): string {
+  const a = hexToRgb(hexA)
+  const b = hexToRgb(hexB)
+  return (
+    '#' +
+    a
+      .map((channel, i) => Math.round(channel + (b[i] - channel) * t))
+      .map((channel) => channel.toString(16).padStart(2, '0'))
+      .join('')
+  )
+}
+
+// The ring's colors are NOT 7 hard-edged wedges — RING_GRADIENT is a smooth conic-gradient,
+// so any point between two peaks shows a blended color, exactly like a real color wheel.
+// This mirrors that same blend in JS (linear per-channel, matching the browser's default
+// conic-gradient interpolation) so whatever the pointer lands on maps to that exact color,
+// not to whichever of the 7 named presets happens to be nearest.
+function colorsAtGradientAngle(gradientAngleDeg: number): TColors {
+  const normalized = normalizeDeg(gradientAngleDeg)
+  const rawIndex = normalized / SEGMENT_DEG
+  const index0 = Math.floor(rawIndex) % presets.length
+  const index1 = (index0 + 1) % presets.length
+  const t = rawIndex - Math.floor(rawIndex)
+  const presetA = presets[index0]
+  const presetB = presets[index1]
+  return {
+    background: mixHex(presetA.background, presetB.background, t),
+    card: mixHex(presetA.card, presetB.card, t),
+    accent: mixHex(presetA.accent, presetB.accent, t),
+  }
+}
+
+type TLivePreviewHandle = { applyColors: (colors: TColors) => void }
+
+// Colors are applied imperatively (via `ref.applyColors`) rather than through a `preset` prop,
+// so a pointer dragged around the ring can update this every animation frame — a continuous
+// blend, exactly matching the ring — without going through React state/re-renders 60 times a
+// second. There's no CSS transition on these anymore for the same reason: a transition fighting
+// a value that already changes smoothly every frame just adds lag between the ring and the
+// preview, instead of adding any actual smoothness.
+const LivePreview = forwardRef<TLivePreviewHandle, { initial: TColors }>(function LivePreview({ initial }, ref) {
+  const glowRef = useRef<HTMLDivElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null)
+  const sellBoxRef = useRef<HTMLDivElement>(null)
+  const buyBoxRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const footerAccentRef = useRef<HTMLSpanElement>(null)
+
+  useImperativeHandle(ref, () => ({
+    applyColors(colors: TColors) {
+      if (glowRef.current) glowRef.current.style.backgroundColor = colors.accent
+      if (cardRef.current) {
+        cardRef.current.style.backgroundColor = colors.background
+        cardRef.current.style.borderColor = `${colors.accent}40`
+      }
+      if (sellBoxRef.current) sellBoxRef.current.style.backgroundColor = colors.card
+      if (buyBoxRef.current) buyBoxRef.current.style.backgroundColor = colors.card
+      if (buttonRef.current) buttonRef.current.style.backgroundColor = colors.accent
+      if (footerAccentRef.current) footerAccentRef.current.style.color = colors.accent
+    },
+  }))
+
+  return (
+    <div className={'relative flex justify-center'}>
+      <div
+        ref={glowRef}
+        className={'pointer-events-none absolute inset-[4%] -z-10 rounded-full opacity-[0.18] blur-[72px]'}
+        style={{ backgroundColor: initial.accent }}
+      />
+      <div
+        ref={cardRef}
+        className={'w-full max-w-[380px] rounded-2xl border p-5 shadow-2xl'}
+        style={{
+          backgroundColor: initial.background,
+          borderColor: `${initial.accent}40`,
+        }}
+      >
+        <div className={'mb-4 flex items-center justify-between'}>
+          <span className={'text-base font-semibold text-white'}>{'Swap'}</span>
+          <span className={'flex size-8 items-center justify-center rounded-full bg-white/10 text-white/70'}>
+            <IconSettings className={'size-4'} />
+          </span>
+        </div>
+
+        <div ref={sellBoxRef} className={'mb-2 rounded-xl p-3.5'} style={{ backgroundColor: initial.card }}>
+          <div className={'mb-1 text-[10px] text-gray-500'}>{'Sell'}</div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-xl font-semibold text-white'}>{'1.0'}</span>
+            <span
+              className={
+                'flex items-center gap-1.5 rounded-full bg-white/10 px-2.5 py-1.5 text-xs font-semibold text-white'
+              }
+            >
+              <Image src={'/widget/eth_icon.png'} alt={''} width={16} height={16} className={'rounded-full'} />
+              {'ETH'}
+            </span>
+          </div>
+        </div>
+
+        <div ref={buyBoxRef} className={'mb-4 rounded-xl p-3.5'} style={{ backgroundColor: initial.card }}>
+          <div className={'mb-1 text-[10px] text-gray-500'}>{'Buy'}</div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-xl font-semibold text-white'}>{'2,618'}</span>
+            <span
+              className={
+                'flex items-center gap-1.5 rounded-full bg-white/10 px-2.5 py-1.5 text-xs font-semibold text-white'
+              }
+            >
+              <Image src={'/widget/usdc_icon.png'} alt={''} width={16} height={16} className={'rounded-full'} />
+              {'USDC'}
+            </span>
+          </div>
+        </div>
+
+        <button
+          ref={buttonRef}
+          type={'button'}
+          tabIndex={-1}
+          className={'w-full rounded-xl py-3 text-sm font-semibold text-white'}
+          style={{ backgroundColor: initial.accent }}
+        >
+          {'Connect Wallet'}
+        </button>
+        <div className={'mt-3 flex items-center justify-center gap-1.5 text-[10px] text-gray-600'}>
+          {'Powered by'}
+          <span
+            ref={footerAccentRef}
+            className={'flex items-center gap-1 font-semibold'}
+            style={{ color: initial.accent }}
+          >
+            <IconFox className={'size-3'} />
+            {'ShapeShift'}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+function LiveThemeSwitcher(): ReactNode {
+  // Only tracks the nearest NAMED preset, for screen readers (aria-valuenow/valuetext) and
+  // keyboard stepping — the actual visible colors are driven continuously below, independent
+  // of this, via direct DOM writes (see LivePreview's applyColors).
+  const [discreteIndex, setDiscreteIndex] = useState(0)
+  const shouldReduceMotion = useReducedMotion()
+
+  const rotation = useMotionValue(0)
+  const isHoveringRef = useRef(false)
+  const isVisibleRef = useRef(false)
+  const ringRef = useRef<HTMLDivElement>(null)
+  const livePreviewRef = useRef<TLivePreviewHandle>(null)
+  const ringGlowRef = useRef<HTMLDivElement>(null)
+
+  // Without this, the idle loop below writes to 6+ DOM nodes on every animation frame forever,
+  // even long after the user has scrolled past this section — a real (if small) waste of CPU
+  // on a page that stays open. requestAnimationFrame itself doesn't know or care whether the
+  // element is on-screen, so it has to be told explicitly.
+  useEffect(() => {
+    const el = ringRef.current
+    if (!el) return undefined
+    const observer = new IntersectionObserver(([entry]) => {
+      isVisibleRef.current = entry?.isIntersecting ?? false
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  function applyColors(colors: TColors): void {
+    livePreviewRef.current?.applyColors(colors)
+    if (ringGlowRef.current) ringGlowRef.current.style.backgroundColor = colors.accent
+  }
+
+  // Idle: the ring keeps rotating and the color at the top (bearing 0) drives the preview, so
+  // it keeps demonstrating that the widget is themeable even if nobody touches it. Rotation
+  // decreases (rather than increases) so that, at the fixed bearing of 0deg used below, colors
+  // cycle forward through the array (Blue -> Rose -> ... -> Stucco -> Blue) instead of
+  // backwards — see colorsAtGradientAngle: gradientAngle = bearing - rotation.
+  useAnimationFrame((_time, delta) => {
+    if (isHoveringRef.current || shouldReduceMotion || !isVisibleRef.current) return
+    rotation.set(rotation.get() - delta * 0.012) // 360deg every 30s
+
+    const gradientAngle = normalizeDeg(0 - rotation.get())
+    applyColors(colorsAtGradientAngle(gradientAngle))
+
+    const index = Math.round(gradientAngle / SEGMENT_DEG) % presets.length
+    setDiscreteIndex((current) => (current === index ? current : index))
+  })
+
+  // Hovering (or dragging a finger across) the ring: whichever exact color sits under the
+  // pointer is applied to the preview — a continuous blend, the same one the ring itself
+  // shows, not a snap to whichever of the 7 named presets is nearest — and the idle rotation
+  // freezes while you do.
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>): void {
+    const rect = event.currentTarget.getBoundingClientRect()
+    const dx = event.clientX - (rect.left + rect.width / 2)
+    const dy = event.clientY - (rect.top + rect.height / 2)
+    const radiusFraction = Math.hypot(dx, dy) / (rect.width / 2)
+
+    if (radiusFraction < RING_INNER_FRACTION || radiusFraction > RING_OUTER_FRACTION) {
+      isHoveringRef.current = false
+      return
+    }
+
+    isHoveringRef.current = true
+    const bearing = normalizeDeg((Math.atan2(dx, -dy) * 180) / Math.PI)
+    const gradientAngle = normalizeDeg(bearing - rotation.get())
+    applyColors(colorsAtGradientAngle(gradientAngle))
+  }
+
+  function handlePointerLeave(): void {
+    isHoveringRef.current = false
+  }
+
+  // Keyboard equivalent of hovering the ring: Left/Right (or Up/Down) step through the named
+  // presets one at a time (a discrete choice makes sense for keyboard/AT users, unlike the
+  // pointer's continuous blend).
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>): void {
+    let step = 0
+    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') step = 1
+    else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') step = -1
+    else return
+
+    event.preventDefault()
+    isHoveringRef.current = true
+    const index = (discreteIndex + step + presets.length) % presets.length
+    setDiscreteIndex(index)
+    applyColors(presets[index])
+  }
+
+  function handleFocus(event: FocusEvent<HTMLDivElement>): void {
+    if (event.target !== event.currentTarget) return
+    isHoveringRef.current = true
+    const index = indexFromBearing(0, rotation.get())
+    setDiscreteIndex(index)
+    applyColors(presets[index])
+  }
+
+  function handleBlur(): void {
+    isHoveringRef.current = false
+  }
+
+  return (
+    <div className={'flex flex-col items-center gap-7'}>
+      <div
+        ref={ringRef}
+        onPointerMove={handlePointerMove}
+        onPointerLeave={handlePointerLeave}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        tabIndex={0}
+        role={'slider'}
+        aria-label={'Widget theme preview'}
+        aria-valuemin={0}
+        aria-valuemax={presets.length - 1}
+        aria-valuenow={discreteIndex}
+        aria-valuetext={presets[discreteIndex].name}
+        className={
+          'relative flex aspect-square w-full max-w-[570px] touch-none items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-4 focus-visible:ring-offset-[#0a0b11]'
+        }
+      >
+        <motion.div
+          aria-hidden={'true'}
+          className={'pointer-events-none absolute inset-[7%] rounded-full opacity-[0.66] blur-[9px] saturate-[0.88]'}
+          style={{
+            background: RING_GRADIENT,
+            rotate: rotation,
+          }}
+        />
+        <div
+          ref={ringGlowRef}
+          aria-hidden={'true'}
+          className={'pointer-events-none absolute inset-[7%] rounded-full opacity-[0.14] blur-[34px]'}
+          style={{ backgroundColor: presets[0].accent }}
+        />
+        <div className={'relative z-10 w-[74%] max-w-[390px] sm:w-[68%]'}>
+          <LivePreview ref={livePreviewRef} initial={presets[0]} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function DevelopersWidgetSection(): ReactNode {
+  const { widget } = DEVELOPERS_DICT.page
+  return (
+    <section id={'widget'} className={'container mx-auto scroll-mt-28 pt-14 lg:scroll-mt-32 lg:pt-16'}>
+      <div
+        className={
+          'grid items-center gap-8 border-y border-white/[0.08] py-8 sm:py-10 lg:grid-cols-[.78fr_1.22fr] lg:gap-12 lg:py-12'
+        }
+      >
+        <div className={'lg:pl-4'}>
+          <h2 className={'max-w-[600px] text-[38px] font-bold leading-[1.04] tracking-[-0.035em] sm:text-[50px]'}>
+            {widget.title}
+          </h2>
+          <p className={'mt-5 max-w-[680px] text-base leading-relaxed text-secondary sm:text-lg'}>
+            {widget.description}
+          </p>
+          <div className={'mt-5'}>
+            <Button
+              href={'https://widget.shapeshift.com/'}
+              variant={'blue'}
+              title={widget.ctaButton}
+              hasArrow
+              className={'w-fit'}
+            />
+          </div>
+        </div>
+        <LiveThemeSwitcher />
+      </div>
+    </section>
+  )
+}
diff --git a/app/[lang]/developers/layout.tsx b/app/[lang]/developers/layout.tsx
new file mode 100644
index 0000000..ff2c749
--- /dev/null
+++ b/app/[lang]/developers/layout.tsx
@@ -0,0 +1,44 @@
+import { DevelopersResourceHints } from './_components/DevelopersResourceHints'
+
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: 'ShapeShift for Developers',
+    description:
+      'Add multichain swaps to your product. Embed the ShapeShift widget or build directly on the swap API. 48+ chains, 30,000+ assets, non-custodial.',
+    keywords: 'ShapeShift, Developers, Swap API, Swap Widget, SDK',
+    openGraph: {
+      title: 'ShapeShift for Developers',
+      description:
+        'Add multichain swaps to your product. Embed the ShapeShift widget or build directly on the swap API.',
+      type: 'website',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'ShapeShift for Developers',
+      description:
+        'Add multichain swaps to your product. Embed the ShapeShift widget or build directly on the swap API.',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+  }
+}
+
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <>
+      <DevelopersResourceHints />
+      {children}
+    </>
+  )
+}
diff --git a/app/[lang]/developers/page.tsx b/app/[lang]/developers/page.tsx
new file mode 100644
index 0000000..2da479b
--- /dev/null
+++ b/app/[lang]/developers/page.tsx
@@ -0,0 +1,31 @@
+import { DevelopersApiSection } from './_components/DevelopersApiSection'
+import { DevelopersCta } from './_components/DevelopersCta'
+import { DevelopersEconomicsSection } from './_components/DevelopersEconomicsSection'
+import { DevelopersFaq } from './_components/DevelopersFaq'
+import { DevelopersHero } from './_components/DevelopersHero'
+import { DevelopersLaunchPath } from './_components/DevelopersLaunchPath'
+import { DevelopersPartnerLogos } from './_components/DevelopersPartnerLogos'
+import { DevelopersStats } from './_components/DevelopersStats'
+import { DevelopersWhyShapeShift } from './_components/DevelopersWhyShapeShift'
+import { DevelopersWidgetSection } from './_components/DevelopersWidgetSection'
+
+import type { ReactNode } from 'react'
+
+export default function DevelopersPage(): ReactNode {
+  return (
+    <div className={'overflow-hidden'}>
+      <DevelopersHero />
+      <DevelopersStats />
+      <DevelopersPartnerLogos />
+      <DevelopersWidgetSection />
+      <DevelopersWhyShapeShift />
+      <DevelopersApiSection />
+      <DevelopersEconomicsSection />
+      <DevelopersLaunchPath />
+      <div className={'pt-12 lg:pt-14'}>
+        <DevelopersFaq />
+      </div>
+      <DevelopersCta />
+    </div>
+  )
+}
diff --git a/bun.lockb b/bun.lockb
index 2390945..d9890f2 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/middleware.ts b/middleware.ts
index 5537c94..4dbfd6f 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -35,6 +35,17 @@ function hasLocaleInPath(pathname: string): boolean {
   return SUPPORTED_LANGUAGES.some((lang) => pathname.startsWith(`/${lang.code}/`) || pathname === `/${lang.code}`)
 }
 
+/**
+ * Check if pathname is the developers page (with or without a locale prefix)
+ */
+function isDevelopersPath(pathname: string): boolean {
+  const withoutLocale = SUPPORTED_LANGUAGES.reduce(
+    (path, lang) => (path.startsWith(`/${lang.code}/`) ? path.slice(lang.code.length + 1) : path),
+    pathname
+  )
+  return withoutLocale === '/developers' || withoutLocale.startsWith('/developers/')
+}
+
 /**
  * Create headers with locale information
  */
@@ -99,7 +110,16 @@ function handleLocaleRouting(
   if (locale === DEFAULT_LANGUAGE) {
     request.nextUrl.pathname = `/${DEFAULT_LANGUAGE}${pathname}`
     console.log('rewriting to', request.nextUrl.pathname)
-    return NextResponse.rewrite(request.nextUrl)
+    // NextResponse.rewrite() creates a brand-new response, so headers (e.g. the CSP header) and
+    // cookies already set on `response` need to be copied forward explicitly or they're lost.
+    const rewrittenResponse = NextResponse.rewrite(request.nextUrl)
+    response.headers.forEach((value, key) => {
+      rewrittenResponse.headers.set(key, value)
+    })
+    response.cookies.getAll().forEach((cookie) => {
+      rewrittenResponse.cookies.set(cookie)
+    })
+    return rewrittenResponse
   }
 
   // Redirect to include locale in path for non-default languages
@@ -112,7 +132,9 @@ export function middleware(request: NextRequest): NextResponse {
   const pathname = request.nextUrl.pathname
   const hostname = request.headers.get('host') || ''
 
-  // Generate a nonce for CSP
+  const isDevelopment = process.env.NODE_ENV === 'development'
+  // Production uses a per-request nonce. Development needs eval/inline scripts for the Next.js
+  // runtime; omitting the nonce there also avoids a browser-normalized nonce hydration mismatch.
   const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
 
   // Check for language subdomain
@@ -149,7 +171,7 @@ export function middleware(request: NextRequest): NextResponse {
 
   // Create response with locale headers and nonce
   const headers = createLocaleHeaders(request.headers, pathname, locale)
-  headers.set('x-nonce', nonce)
+  if (!isDevelopment) headers.set('x-nonce', nonce)
   const response = NextResponse.next({ headers })
 
   // Only set locale cookie if user explicitly changed language (cookie already exists)
@@ -159,7 +181,27 @@ export function middleware(request: NextRequest): NextResponse {
   }
 
   // Set the CSP header with the nonce
-  const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com ${strapiHostname} https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
+  const scriptPolicy = isDevelopment
+    ? "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com"
+    : `script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com`
+  // The developers embed needs market data plus AppKit's API, RPC, telemetry and relay.
+  // These exact origins come from the installed SDKs; keep them scoped to this page.
+  const developersFontSrc = isDevelopersPath(pathname) ? ' https://fonts.reown.com' : ''
+  const developersConnectSrc = isDevelopersPath(pathname)
+    ? ' https://api.shapeshift.com https://app.shapeshift.com https://api.coingecko.com https://api.proxy.shapeshift.com https://api.web3modal.org https://rpc.walletconnect.org https://pulse.walletconnect.org wss://relay.walletconnect.org https://verify.walletconnect.org https://verify.walletconnect.com'
+    : ''
+  const developersFrameSrc = isDevelopersPath(pathname)
+    ? ' https://secure.walletconnect.org https://verify.walletconnect.org https://verify.walletconnect.com'
+    : ''
+  // Coinbase Wallet SDK / Base Account SDK (pulled in transitively by the swap widget's wagmi
+  // connectors) inject their own inline bootstrap <script> tags, which our own nonce doesn't cover.
+  // 'strict-dynamic' lets scripts loaded by an already-nonce-trusted script (the widget bundle
+  // itself) delegate that trust onward, without weakening script-src for any other route. Only
+  // meaningful paired with a nonce (dev mode's script-src has none) -- per the CSP spec,
+  // 'strict-dynamic' with no nonce/hash present disables ALL host-based allowlisting and
+  // 'unsafe-inline', blocking every script on the page, not just the ones it's meant to loosen.
+  const developersScriptSrc = isDevelopersPath(pathname) && !isDevelopment ? " 'strict-dynamic'" : ''
+  const cspHeader = `default-src 'self'; ${scriptPolicy}${developersScriptSrc}; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com${developersFontSrc}; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com ${strapiHostname} https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com${developersConnectSrc}; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com${developersFrameSrc}; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
   response.headers.set('Content-Security-Policy', cspHeader)
 
   // Handle locale routing
diff --git a/next.config.ts b/next.config.ts
index 2a1d213..a6b3e31 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,10 +2,37 @@
 
 const strapiHostname = process.env.NEXT_PUBLIC_STRAPI_URL ? new URL(process.env.NEXT_PUBLIC_STRAPI_URL).hostname : null
 
+// @shapeshiftoss/swap-widget pulls in wagmi's built-in Coinbase Smart Wallet connector, which
+// references optional @x402/* packages we don't install (and don't need — we don't use Coinbase
+// Smart Wallet's x402 payment flow). Without these aliases, `next build` (webpack) fails with
+// "Module not found: Can't resolve '@x402/svm/exact/client'" and four sibling paths.
+const stubbedOptionalModules = {
+	'@x402/core': false,
+	'@x402/evm': false,
+	'@x402/svm': false,
+	'@x402/extensions': false,
+	'@react-native-async-storage/async-storage': false,
+	'pino-pretty': false
+}
+
 const nextConfig = {
 	crossOrigin: 'anonymous',
 	/* config options here */
 	reactStrictMode: true,
+	webpack: (config: any, {webpack}: any) => {
+		config.resolve.alias = {
+			...config.resolve.alias,
+			...stubbedOptionalModules
+		}
+		// @shapeshiftoss/utils imports `node:crypto`-style specifiers, which webpack's default
+		// resolver treats as an unhandled URI scheme rather than a bare Node builtin.
+		config.plugins.push(
+			new webpack.NormalModuleReplacementPlugin(/^node:/, (resource: any) => {
+				resource.request = resource.request.replace(/^node:/, '')
+			})
+		)
+		return config
+	},
 	images: {
 		remotePatterns: [
 			...(strapiHostname ? [{protocol: 'https', hostname: strapiHostname}] : []),
diff --git a/package.json b/package.json
index a41c7e0..4026f17 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,17 @@
 	},
 	"dependencies": {
 		"@headlessui/react": "^2.2.0",
+		"@reown/appkit": "^1.8.23",
+		"@reown/appkit-adapter-bitcoin": "^1.8.23",
+		"@reown/appkit-adapter-solana": "^1.8.23",
+		"@reown/appkit-adapter-wagmi": "^1.8.23",
+		"@shapeshiftoss/swap-widget": "0.9.0",
+		"@solana/wallet-adapter-phantom": "^0.9.29",
+		"@solana/wallet-adapter-solflare": "^0.6.33",
+		"@solana/web3.js": "^1.98.4",
+		"@tanstack/react-query": "^5.102.8",
 		"@types/semver": "^7.7.0",
+		"@wagmi/core": "^2.22.1",
 		"framer-motion": "^12.0.6",
 		"highlight.js": "^11.11.1",
 		"katex": "^0.16.21",
@@ -32,7 +42,12 @@
 		"remark-math": "^6.0.0",
 		"semver": "^7.7.2",
 		"typescript-eslint": "^8.19.1",
-		"usehooks-ts": "^3.1.1"
+		"usehooks-ts": "^3.1.1",
+		"viem": "^2.56.0",
+		"wagmi": "^2.19.5"
+	},
+	"overrides": {
+		"@wagmi/connectors": "6.2.0"
 	},
 	"devDependencies": {
 		"@types/inquirer": "8.2.10",
diff --git a/public/cta/fox-silhouette.png b/public/cta/fox-silhouette.png
new file mode 100644
index 0000000..5964113
Binary files /dev/null and b/public/cta/fox-silhouette.png differ
diff --git a/public/widget/usdc_icon.png b/public/widget/usdc_icon.png
new file mode 100644
index 0000000..73f335d
Binary files /dev/null and b/public/widget/usdc_icon.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fb5566d..756387b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,6 +19,8 @@ export default {
 				stroke: '#12141A',
 				blue: '#386FF9',
 				blueHover: '#1A5BFF',
+				blueLight: '#8FACFF',
+				mint: '#70E1B1',
 				secondary: '#E6E6E6'
 			},
 			listStyleType: {