From f2e77d7254e95fcc6fd65d7d6e59fa4bb0eb6440 Mon Sep 17 00:00:00 2001
From: Dwight Lyle <dwightjl@gmail.com>
Date: Fri, 29 Mar 2024 23:29:20 -0600
Subject: [PATCH 01/14] Docs navigation redesign

---
 .../assets/icons/automation-navbar-icon.svg   |  10 -
 public/assets/icons/ccip-navbar-icon.svg      |  16 --
 public/assets/icons/data-navbar-icon.svg      |  21 --
 .../icons/documentation-navbar-icon.svg       |  11 -
 public/assets/icons/feeds-navbar-icon.svg     |  15 --
 public/assets/icons/functions-navbar-icon.svg |  10 -
 public/assets/icons/general-navbar-icon.svg   |  16 --
 public/assets/icons/home-navbar-icon.svg      |   3 -
 public/assets/icons/resources-navbar-icon.svg |  20 --
 public/assets/icons/staking-navbar-icon.svg   |  15 --
 public/assets/icons/streams-navbar-icon.svg   |  11 -
 public/assets/icons/vrf-navbar-icon.svg       |  14 -
 public/chainlink-docs.svg                     | 108 ++++++--
 src/assets/icons/external-arrow.svg           |  16 ++
 .../product-logos}/automation-logo.svg        |   0
 .../product-logos}/automation-shape.svg       |   0
 .../product-logos}/ccip-logo.svg              |   0
 .../product-logos}/ccip-shape.svg             |   0
 .../product-logos}/data-feeds-logo.svg        |   0
 .../product-logos}/data-feeds-shape.svg       |   0
 .../product-logos}/data-streams-logo.svg      |   0
 .../product-logos}/data-streams-shape.svg     |   0
 .../product-logos}/external-api-logo.svg      |   0
 .../product-logos}/external-api-shape.svg     |   0
 .../product-logos}/functions-logo.svg         |   0
 .../product-logos}/functions-shape.svg        |   0
 .../product-logos}/general-logo.svg           |   0
 .../product-logos}/general-shape.svg          |   0
 .../product-logos}/node-logo.svg              |   0
 .../product-logos}/node-shape.svg             |   0
 .../product-logos}/vrf-logo.svg               |   0
 .../product-logos}/vrf-shape.svg              |   0
 src/components/Header/Nav/NavBar.tsx          |  11 +
 .../Desktop/ProductNavigation.tsx             |  54 +---
 .../Desktop/SubProductContent.tsx             |   1 +
 .../Nav/ProductNavigation/Desktop/Trigger.tsx |   2 +-
 .../Desktop/productNavigation.module.css      |  22 +-
 .../Desktop/subProductContent.module.css      |   5 +
 .../Nav/ProductNavigation/Mobile/Category.tsx |   2 +-
 .../Mobile/ProductNavigation.tsx              |  26 +-
 .../Mobile/SubProductContent.tsx              |  30 ++-
 .../Mobile/subProductContent.module.css       |  10 +-
 src/components/Header/Nav/config.tsx          |  69 +----
 src/components/Header/Nav/index.ts            |   1 -
 src/components/Header/getNavigationProps.ts   | 250 +++++++++++-------
 .../Quickstart/QuickstartOverview.astro       |   2 +-
 src/config/sidebar.ts                         |  28 --
 .../getting-started/other-tutorials.mdx       | 138 ----------
 src/features/landing/data/index.ts            |  24 +-
 src/features/redirects/redirects.json         |  10 +
 50 files changed, 359 insertions(+), 612 deletions(-)
 delete mode 100644 public/assets/icons/automation-navbar-icon.svg
 delete mode 100644 public/assets/icons/ccip-navbar-icon.svg
 delete mode 100644 public/assets/icons/data-navbar-icon.svg
 delete mode 100644 public/assets/icons/documentation-navbar-icon.svg
 delete mode 100644 public/assets/icons/feeds-navbar-icon.svg
 delete mode 100644 public/assets/icons/functions-navbar-icon.svg
 delete mode 100644 public/assets/icons/general-navbar-icon.svg
 delete mode 100644 public/assets/icons/home-navbar-icon.svg
 delete mode 100644 public/assets/icons/resources-navbar-icon.svg
 delete mode 100644 public/assets/icons/staking-navbar-icon.svg
 delete mode 100644 public/assets/icons/streams-navbar-icon.svg
 delete mode 100644 public/assets/icons/vrf-navbar-icon.svg
 create mode 100644 src/assets/icons/external-arrow.svg
 rename src/{features/landing/assets => assets/product-logos}/automation-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/automation-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/ccip-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/ccip-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/data-feeds-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/data-feeds-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/data-streams-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/data-streams-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/external-api-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/external-api-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/functions-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/functions-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/general-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/general-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/node-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/node-shape.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/vrf-logo.svg (100%)
 rename src/{features/landing/assets => assets/product-logos}/vrf-shape.svg (100%)
 delete mode 100644 src/content/getting-started/other-tutorials.mdx

diff --git a/public/assets/icons/automation-navbar-icon.svg b/public/assets/icons/automation-navbar-icon.svg
deleted file mode 100644
index f697091749e..00000000000
--- a/public/assets/icons/automation-navbar-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0022 0L1.60999 6.00046V17.9995L12.0022 24L22.3945 17.9995V6.00046L12.0022 0ZM19.4739 13.3934C19.4318 13.3714 19.3915 13.3512 19.3475 13.3329C18.5414 12.9995 17.6179 13.3824 17.2845 14.1886C16.951 14.9947 17.3339 15.9182 18.1383 16.2516C18.1822 16.2699 18.2262 16.2846 18.272 16.2993C17.7425 17.0706 17.0738 17.7394 16.3024 18.2689C16.2877 18.2249 16.2731 18.1791 16.2548 18.1351C15.9213 17.329 14.9979 16.946 14.1917 17.2795C13.3855 17.6129 13.0026 18.5364 13.3379 19.3425C13.3562 19.3865 13.3764 19.4287 13.3984 19.469C12.9458 19.5532 12.4823 19.5991 12.0059 19.5991C11.5295 19.5991 11.0641 19.5532 10.6134 19.469C10.6354 19.4268 10.6556 19.3865 10.6739 19.3425C11.0073 18.5364 10.6244 17.6129 9.81824 17.2795C9.01208 16.946 8.08865 17.329 7.75519 18.1351C7.73687 18.1791 7.72221 18.2231 7.70755 18.2689C6.93619 17.7394 6.26744 17.0706 5.73793 16.2993C5.78191 16.2846 5.82771 16.2699 5.87168 16.2516C6.67785 15.9182 7.06078 14.9947 6.72732 14.1886C6.39386 13.3824 5.47043 12.9995 4.66426 13.3329C4.62029 13.3512 4.57815 13.3714 4.53784 13.3934C4.45356 12.9408 4.40776 12.4773 4.40776 12.0009C4.40776 11.5245 4.45356 11.0592 4.53784 10.6084C4.57998 10.6304 4.62029 10.6506 4.66426 10.6689C5.47043 11.0024 6.39386 10.6194 6.72732 9.8151C7.06078 9.00893 6.67785 8.0855 5.87168 7.75204C5.82771 7.73372 5.78374 7.71906 5.73793 7.7044C6.26744 6.93305 6.93619 6.26429 7.70755 5.73479C7.72221 5.77876 7.73687 5.82457 7.75519 5.86854C8.08865 6.67471 9.01208 7.05764 9.81824 6.72234C10.6244 6.38888 11.0073 5.46546 10.6739 4.65929C10.6556 4.61531 10.6354 4.57317 10.6134 4.53287C11.066 4.44858 11.5295 4.40278 12.0059 4.40278C12.4823 4.40278 12.9476 4.44858 13.3984 4.53287C13.3764 4.57501 13.3562 4.61531 13.3379 4.65929C13.0044 5.46546 13.3874 6.38888 14.1917 6.72234C14.9979 7.05581 15.9213 6.67288 16.2548 5.86854C16.2731 5.82457 16.2877 5.78059 16.3024 5.73479C17.0738 6.26429 17.7425 6.93305 18.272 7.7044C18.228 7.71906 18.1822 7.73372 18.1383 7.75204C17.3321 8.0855 16.9492 9.00893 17.2845 9.8151C17.6179 10.6213 18.5414 11.0042 19.3475 10.6689C19.3915 10.6506 19.4336 10.6304 19.4739 10.6084C19.5582 11.061 19.604 11.5245 19.604 12.0009C19.604 12.4773 19.5582 12.9427 19.4739 13.3934Z" fill="url(#paint0_linear_2872_3516)"/>
-<path d="M19.4739 10.6067C19.4318 10.6287 19.3915 10.6488 19.3475 10.6671C18.5413 11.0006 17.6179 10.6177 17.2844 9.81332C16.951 9.00715 17.3339 8.08372 18.1382 7.75026C18.1822 7.73194 18.2262 7.71728 18.272 7.70263C17.7425 6.93127 17.0737 6.26252 16.3024 5.73301C16.2877 5.77698 16.273 5.82279 16.2547 5.86676C15.9213 6.67293 14.9978 7.05586 14.1917 6.72057C13.3855 6.38711 13.0026 5.46368 13.3379 4.65751C13.3562 4.61354 13.3763 4.5714 13.3983 4.53109C12.9458 4.44681 12.4822 4.401 12.0059 4.401C11.5295 4.401 11.0641 4.44681 10.6134 4.53109C10.6354 4.57323 10.6555 4.61354 10.6738 4.65751C11.0073 5.46368 10.6244 6.38711 9.8182 6.72057C9.01203 7.05403 8.08861 6.6711 7.75515 5.86676C7.73682 5.82279 7.72217 5.77882 7.70751 5.73301C6.93615 6.26252 6.2674 6.93127 5.73789 7.70263C5.78187 7.71728 5.82767 7.73194 5.87164 7.75026C6.67781 8.08372 7.06074 9.00715 6.72728 9.81332C6.39382 10.6195 5.47039 11.0024 4.66422 10.6671C4.62025 10.6488 4.57811 10.6287 4.5378 10.6067C4.45352 11.0592 4.40771 11.5228 4.40771 11.9991C4.40771 12.4755 4.45352 12.9409 4.5378 13.3916C4.57994 13.3696 4.62025 13.3495 4.66422 13.3311C5.47039 12.9977 6.39382 13.3806 6.72728 14.1868C7.06074 14.993 6.67781 15.9164 5.87164 16.2498C5.82767 16.2682 5.7837 16.2828 5.73789 16.2975C6.2674 17.0688 6.93615 17.7376 7.70751 18.2671C7.72217 18.2231 7.73682 18.1773 7.75515 18.1333C8.08861 17.3272 9.01203 16.9442 9.8182 17.2777C10.6244 17.6112 11.0073 18.5346 10.6738 19.3408C10.6555 19.3847 10.6354 19.4269 10.6134 19.4672C11.0659 19.5515 11.5295 19.5973 12.0059 19.5973C12.4822 19.5973 12.9476 19.5515 13.3983 19.4672C13.3763 19.425 13.3562 19.3847 13.3379 19.3408C13.0044 18.5346 13.3873 17.6112 14.1917 17.2777C14.9978 16.9442 15.9213 17.3272 16.2547 18.1333C16.273 18.1773 16.2877 18.2213 16.3024 18.2671C17.0737 17.7376 17.7425 17.0688 18.272 16.2975C18.228 16.2828 18.1822 16.2682 18.1382 16.2498C17.3321 15.9164 16.9491 14.993 17.2844 14.1868C17.6179 13.3806 18.5413 12.9977 19.3475 13.3311C19.3915 13.3495 19.4336 13.3696 19.4739 13.3916C19.5582 12.9391 19.604 12.4755 19.604 11.9991C19.604 11.5228 19.5582 11.0574 19.4739 10.6067ZM13.424 14.4616C12.5445 14.9691 11.4617 14.9691 10.5822 14.4616C9.70278 13.9541 9.16044 13.016 9.16044 11.9991C9.16044 10.9823 9.70278 10.046 10.5822 9.53666C11.4617 9.02914 12.5445 9.02914 13.424 9.53666C14.3034 10.0442 14.8458 10.9823 14.8458 11.9991C14.8458 13.016 14.3034 13.9523 13.424 14.4616Z" fill="black"/>
-<defs>
-<linearGradient id="paint0_linear_2872_3516" x1="17.1984" y1="2.99931" x2="6.80611" y2="21.0007" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/ccip-navbar-icon.svg b/public/assets/icons/ccip-navbar-icon.svg
deleted file mode 100644
index e909482f364..00000000000
--- a/public/assets/icons/ccip-navbar-icon.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0022 18.529V15.264L9.17514 16.8965V13.6316L6.34806 15.264V10.9785L1.60999 8.23206V17.9995L12.0022 24L20.4505 19.1227L15.7216 16.3799L12.0022 18.529Z" fill="url(#paint0_linear_2872_3524)"/>
-<path d="M12.0022 0L3.53748 4.88831L8.26639 7.62928L12.0022 5.47095V8.73593L14.8293 7.10344V10.3684L17.6564 8.73593V13.0398L22.3945 15.7881V6.00046L12.0022 0Z" fill="url(#paint1_linear_2872_3524)"/>
-<path d="M9.17511 10.3684L12.0022 8.73593V5.47095L6.34802 8.73593V15.2641L9.17511 13.6316V10.3684Z" fill="black"/>
-<path d="M13.8655 15.3026V13.0746L15.7949 11.9606L17.6582 13.0398V8.73596L12.004 11.9991V18.5291L15.7234 16.3799L13.8655 15.3026Z" fill="black"/>
-<defs>
-<linearGradient id="paint0_linear_2872_3524" x1="11.033" y1="13.6719" x2="6.80427" y2="20.9988" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2872_3524" x1="17.2002" y1="3.00115" x2="12.9623" y2="10.3428" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/data-navbar-icon.svg b/public/assets/icons/data-navbar-icon.svg
deleted file mode 100644
index 504dd88e64d..00000000000
--- a/public/assets/icons/data-navbar-icon.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2872_3541)">
-<path d="M1 5.91157L10.9801 0.145269C11.1487 0.0479424 11.3399 -0.0032959 11.5346 -0.0032959C11.7292 -0.0032959 11.9205 0.0479424 12.089 0.145269L22.0692 5.91157L11.5346 12.0105L1 5.91157Z" fill="url(#paint0_linear_2872_3541)"/>
-<path d="M1 14.9969V5.91162L8.8588 10.4637L1 14.9969Z" fill="#23337B"/>
-<path d="M11.5346 15.0911V24C11.3957 24.0005 11.2579 23.9745 11.1287 23.9235L1.42027 18.318L1.21069 18.1971L1 18.0751L1.07208 18.0341L1.14305 17.9931L8.8588 13.5497L11.5346 15.0933V15.0911Z" fill="#23337B"/>
-<path d="M22.0691 9.01978V17.4796C22.0691 17.4885 22.0691 17.4985 22.0691 17.5084C22.0568 17.6905 21.9998 17.8667 21.9031 18.0215C21.8064 18.1762 21.673 18.3047 21.5147 18.3956L11.9404 23.9234C11.8758 23.9487 11.809 23.968 11.7408 23.9811C11.6727 23.9934 11.6037 23.9997 11.5345 24V15.091L22.0691 9.01978Z" fill="url(#paint1_linear_2872_3541)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_2872_3541" x1="19.7394" y1="10.2929" x2="3.31428" y2="1.55913" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B9CDF"/>
-<stop offset="1" stop-color="#375BD2"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2872_3541" x1="1636.28" y1="3066.03" x2="1158.7" y2="1485.76" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B9CDF"/>
-<stop offset="1" stop-color="#375BD2"/>
-</linearGradient>
-<clipPath id="clip0_2872_3541">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/assets/icons/documentation-navbar-icon.svg b/public/assets/icons/documentation-navbar-icon.svg
deleted file mode 100644
index 4a84ac45e4e..00000000000
--- a/public/assets/icons/documentation-navbar-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.15 4.04C20.0372 4.01698 19.9359 3.95576 19.863 3.86668C19.7901 3.77759 19.7502 3.66609 19.75 3.551V2C19.75 1.46957 19.5393 0.960859 19.1642 0.585786C18.7891 0.210714 18.2804 0 17.75 0L5.25 0C4.45435 0 3.69129 0.31607 3.12868 0.87868C2.56607 1.44129 2.25 2.20435 2.25 3V21C2.25 21.7956 2.56607 22.5587 3.12868 23.1213C3.69129 23.6839 4.45435 24 5.25 24H19.75C20.2804 24 20.7891 23.7893 21.1642 23.4142C21.5393 23.0391 21.75 22.5304 21.75 22V6C21.7501 5.53894 21.5909 5.09201 21.2993 4.73484C21.0078 4.37767 20.6017 4.13221 20.15 4.04ZM5.25 2H17.5C17.5663 2 17.6299 2.02634 17.6768 2.07322C17.7237 2.12011 17.75 2.1837 17.75 2.25V3.75C17.75 3.8163 17.7237 3.87989 17.6768 3.92678C17.6299 3.97366 17.5663 4 17.5 4H5.25C4.98478 4 4.73043 3.89464 4.54289 3.70711C4.35536 3.51957 4.25 3.26522 4.25 3C4.25 2.73478 4.35536 2.48043 4.54289 2.29289C4.73043 2.10536 4.98478 2 5.25 2Z" fill="url(#paint0_linear_4655_4836)"/>
-<path d="M10.6787 16.8945L10.6967 16.8775C10.8342 16.7399 10.913 16.5542 10.9163 16.3596C10.9197 16.1651 10.8474 15.9768 10.7147 15.8345L8.68568 13.6605C8.6423 13.6143 8.61815 13.5534 8.61815 13.49C8.61815 13.4267 8.6423 13.3657 8.68568 13.3195L10.7137 11.1455C10.8507 11.0023 10.9255 10.8107 10.9217 10.6125C10.9179 10.4144 10.8358 10.2258 10.6933 10.0879C10.5509 9.95013 10.3597 9.87429 10.1615 9.87702C9.96333 9.87975 9.77428 9.96082 9.63568 10.1025L9.61768 10.1215L6.95168 12.9775C6.82207 13.1167 6.75 13.2998 6.75 13.49C6.75 13.6802 6.82207 13.8633 6.95168 14.0025L9.61768 16.8595C9.75393 17.0045 9.94209 17.0896 10.141 17.0962C10.3398 17.1028 10.5332 17.0302 10.6787 16.8945Z" fill="white"/>
-<path d="M13.2854 15.8343C13.1483 15.9775 13.0736 16.1692 13.0774 16.3673C13.0812 16.5655 13.1633 16.7541 13.3057 16.8919C13.4482 17.0297 13.6394 17.1056 13.8376 17.1028C14.0357 17.1001 14.2248 17.019 14.3634 16.8773L14.3814 16.8593L17.0474 14.0023C17.177 13.8632 17.2491 13.68 17.2491 13.4898C17.2491 13.2996 17.177 13.1165 17.0474 12.9773L14.3814 10.1213C14.2454 9.97595 14.0573 9.89048 13.8583 9.88373C13.6594 9.87698 13.4659 9.9495 13.3204 10.0853C13.2461 10.1512 13.186 10.2314 13.1438 10.3212C13.1015 10.411 13.078 10.5084 13.0746 10.6076C13.0713 10.7068 13.0881 10.8056 13.1242 10.898C13.1603 10.9905 13.2148 11.0746 13.2844 11.1453L15.3134 13.3193C15.3568 13.3655 15.3809 13.4265 15.3809 13.4898C15.3809 13.5532 15.3568 13.6142 15.3134 13.6603L13.2854 15.8343Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear_4655_4836" x1="21.75" y1="24" x2="4.91438" y2="-2.92008" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B9CDF"/>
-<stop offset="1" stop-color="#2F57CD"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/feeds-navbar-icon.svg b/public/assets/icons/feeds-navbar-icon.svg
deleted file mode 100644
index a612100cdd0..00000000000
--- a/public/assets/icons/feeds-navbar-icon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 0L1.60693 5.99908V12L6.80345 9.00046L12 5.99908L17.1965 9.00046L22.393 5.99908L12 0Z" fill="url(#paint0_linear_2900_5723)"/>
-<path d="M22.3747 12.0201L11.9816 18.0211V17.9991L6.80345 15.0105L1.60693 18.0119L3.97432 19.3788L11.9816 24L19.989 19.3788L22.3747 18.0009V12.0201Z" fill="url(#paint1_linear_2900_5723)"/>
-<path d="M17 14.9996V9.00052L11.8035 6.00098L6.60693 9.00052V14.9996L11.8035 18.001L17 14.9996Z" fill="#0C162C"/>
-<defs>
-<linearGradient id="paint0_linear_2900_5723" x1="14.5982" y1="1.49885" x2="6.80345" y2="14.9995" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2900_5723" x1="17.1782" y1="9.0206" x2="9.39255" y2="22.5066" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/functions-navbar-icon.svg b/public/assets/icons/functions-navbar-icon.svg
deleted file mode 100644
index 0d9d8597bfe..00000000000
--- a/public/assets/icons/functions-navbar-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0022 0L1.60999 6.00046V17.9995L12.0022 24L22.3945 17.9995V6.00046L12.0022 0ZM5.45578 14.7144V8.21925L11.0806 4.97259L12.9128 6.02977L7.28614 9.27643V15.7716L5.45578 14.7144ZM12.9257 19.0274L11.0935 17.9702L16.7201 14.7236V8.22841L18.5505 9.28559V15.7807L12.9257 19.0274Z" fill="url(#paint0_linear_2872_3551)"/>
-<path d="M14.822 13.6279V10.3721L12.0023 8.74512L9.1825 10.3721V13.6279L12.0023 15.2549L14.822 13.6279Z" fill="#0C162C"/>
-<defs>
-<linearGradient id="paint0_linear_2872_3551" x1="17.1984" y1="2.99931" x2="6.80611" y2="21.0007" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/general-navbar-icon.svg b/public/assets/icons/general-navbar-icon.svg
deleted file mode 100644
index 01dd88103cb..00000000000
--- a/public/assets/icons/general-navbar-icon.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2010_15170)">
-<path d="M12.3871 17.0603L24.238 10.1743V0L19.897 2.53153L8.06783 9.4217L3.72683 11.9532V17.0383V30.8737V35.9587L8.06783 38.5013L19.8645 45.4465L24.238 48V37.8277L12.3871 30.8957V17.0603Z" fill="url(#paint0_diamond_2010_15170)"/>
-<path d="M36.089 17.0603L24.238 10.1743V0L28.579 2.53153L40.4082 9.4217L44.7492 11.9532V17.0383V30.8737V35.9587L40.4082 38.5013L28.6116 45.4465L24.238 48V37.8277L36.089 30.8957V17.0603Z" fill="#385CD3"/>
-<path d="M31.3634 28.0998V19.8746L24.2398 15.7643L17.1162 19.8746V28.0998L24.2398 32.2101L31.3634 28.0998Z" fill="#0C162C"/>
-</g>
-<defs>
-<radialGradient id="paint0_diamond_2010_15170" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.4465 2.63087) rotate(113.15) scale(48.0577 25.0875)">
-<stop stop-color="#174CC2"/>
-<stop offset="1" stop-color="#5E8FFE"/>
-</radialGradient>
-<clipPath id="clip0_2010_15170">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/assets/icons/home-navbar-icon.svg b/public/assets/icons/home-navbar-icon.svg
deleted file mode 100644
index 8e220c70048..00000000000
--- a/public/assets/icons/home-navbar-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5083 2.68802C12.3663 2.56663 12.1862 2.5 12 2.5C11.8138 2.5 11.6337 2.56663 11.4917 2.68802L1.27872 11.3958C1.15567 11.5005 1.06753 11.6408 1.02625 11.7977C0.984963 11.9546 0.992525 12.1204 1.04791 12.2728C1.1033 12.4252 1.20383 12.5568 1.33589 12.6497C1.46796 12.7426 1.62517 12.7923 1.78623 12.7922H3.75027C3.85444 12.7922 3.95436 12.8339 4.02802 12.9081C4.10169 12.9824 4.14307 13.083 4.14307 13.188V20.7084C4.14307 20.9183 4.22584 21.1197 4.37317 21.2681C4.5205 21.4166 4.72033 21.5 4.92869 21.5H8.85676C9.06511 21.5 9.26494 21.4166 9.41227 21.2681C9.5596 21.1197 9.64237 20.9183 9.64237 20.7084V17.1461C9.64237 16.5163 9.89068 15.9122 10.3327 15.4668C10.7747 15.0215 11.3741 14.7713 11.9992 14.7713C12.6243 14.7713 13.2238 15.0215 13.6658 15.4668C14.1077 15.9122 14.3561 16.5163 14.3561 17.1461V20.7084C14.3561 20.9183 14.4388 21.1197 14.5862 21.2681C14.7335 21.4166 14.9333 21.5 15.1417 21.5H19.0697C19.2781 21.5 19.4779 21.4166 19.6253 21.2681C19.7726 21.1197 19.8554 20.9183 19.8554 20.7084V13.188C19.8554 13.083 19.8967 12.9824 19.9704 12.9081C20.0441 12.8339 20.144 12.7922 20.2482 12.7922H22.2122C22.3734 12.7927 22.5308 12.7431 22.6631 12.6504C22.7955 12.5576 22.8962 12.426 22.9518 12.2736C23.0074 12.1211 23.0151 11.9551 22.9739 11.7981C22.9326 11.641 22.8444 11.5006 22.7213 11.3958L12.5083 2.68802Z" fill="#23337B"/>
-</svg>
diff --git a/public/assets/icons/resources-navbar-icon.svg b/public/assets/icons/resources-navbar-icon.svg
deleted file mode 100644
index 5d49590c597..00000000000
--- a/public/assets/icons/resources-navbar-icon.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1326_46631)">
-<path d="M8.79015 15.1111V7.2099H15.1111V15.1111H8.79015ZM0.888916 8.79015V0.888916H7.2099V8.79015H0.888916ZM0.888916 15.1111V10.3704H7.2099V15.1111H0.888916ZM2.46916 13.5309H5.62966V11.9506H2.46916V13.5309ZM8.79015 0.888916H15.1111V5.62966H8.79015V0.888916ZM10.3704 2.46916V4.04941H13.5309V2.46916H10.3704Z" fill="url(#paint0_linear_1326_46631)"/>
-<g clip-path="url(#clip1_1326_46631)">
-<path d="M0.888916 15.1111V10.3704H7.2099V15.1111H0.888916ZM2.46916 13.5309H5.62966V11.9506H2.46916V13.5309ZM8.79015 0.888916H15.1111V5.62966H8.79015V0.888916ZM10.3704 2.46916V4.04941H13.5309V2.46916H10.3704Z" fill="#23337B"/>
-</g>
-</g>
-<defs>
-<linearGradient id="paint0_linear_1326_46631" x1="13.5385" y1="13.0777" x2="0.513659" y2="9.12861" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B9CDF"/>
-<stop offset="1" stop-color="#375BD2"/>
-</linearGradient>
-<clipPath id="clip0_1326_46631">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-<clipPath id="clip1_1326_46631">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/assets/icons/staking-navbar-icon.svg b/public/assets/icons/staking-navbar-icon.svg
deleted file mode 100644
index 2d2d19f933f..00000000000
--- a/public/assets/icons/staking-navbar-icon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2872_3599)">
-<mask id="mask0_2872_3599" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-<path d="M24 0H0V24H24V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_2872_3599)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.210205 9.57067V12.4897C0.210205 14.15 2.86807 15.5445 6.42868 15.8542V11.5103C6.42868 11.441 6.43058 11.3724 6.4343 11.3046C4.45533 11.1634 2.65781 10.7435 1.2469 10.114C0.881017 9.95078 0.532981 9.7698 0.210205 9.57067ZM15.6388 3.42857V5.9495C13.5203 6.01917 11.5305 6.43008 9.9607 7.12779C9.09902 7.51075 8.26905 8.02227 7.62549 8.69851C7.47869 8.85276 7.33752 9.02043 7.20681 9.20097C5.17236 9.12441 3.3958 8.7263 2.11999 8.15709C1.40682 7.83891 0.896905 7.48815 0.579671 7.15342C0.359326 6.92091 0.253421 6.72146 0.210205 6.55699V3.42857C0.210205 1.53502 3.66401 0 7.92449 0C12.185 0 15.6388 1.53502 15.6388 3.42857ZM7.92427 5.02509C10.8992 5.02509 13.3109 4.33154 13.3109 3.47599C13.3109 2.62046 10.8992 1.92689 7.92427 1.92689C4.94932 1.92689 2.53762 2.62046 2.53762 3.47599C2.53762 4.33154 4.94932 5.02509 7.92427 5.02509ZM8.57153 20.5714V17.6523C8.89432 17.8515 9.24235 18.0326 9.60823 18.1958C11.3662 18.9801 13.7242 19.439 16.2857 19.439C18.8471 19.439 21.2051 18.9801 22.9631 18.1958C23.3291 18.0324 23.6773 17.8514 24.0001 17.6522V20.5714C24.0001 22.4571 20.5715 24 16.2858 24C12.0001 24 8.57153 22.4571 8.57153 20.5714ZM8.941 15.2352C8.72066 15.0027 8.61475 14.8032 8.57153 14.6387V11.5103C8.57153 9.61678 12.0253 8.08176 16.2858 8.08176C20.5463 8.08176 24.0001 9.61678 24.0001 11.5103V14.6375C23.9571 14.8023 23.8511 15.0021 23.6303 15.2352C23.313 15.5699 22.8032 15.9207 22.09 16.2388C20.6663 16.874 18.619 17.2961 16.2857 17.2961C13.9523 17.2961 11.905 16.874 10.4813 16.2388C9.76816 15.9207 9.25822 15.5699 8.941 15.2352ZM21.6723 11.5577C21.6723 12.4133 19.2606 13.1068 16.2856 13.1068C13.3106 13.1068 10.899 12.4133 10.899 11.5577C10.899 10.7022 13.3106 10.0087 16.2856 10.0087C19.2606 10.0087 21.6723 10.7022 21.6723 11.5577Z" fill="#375BD2"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_2872_3599">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/assets/icons/streams-navbar-icon.svg b/public/assets/icons/streams-navbar-icon.svg
deleted file mode 100644
index a7b7122f4c1..00000000000
--- a/public/assets/icons/streams-navbar-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 11.9991L12.3922 0L2 6.00046V11.9991Z" fill="#0C162C"/>
-<path d="M12.3922 0L22.7845 11.9991V6.00046L12.3922 0Z" fill="#0C162C"/>
-<path d="M2 17.9995L12.3922 24L22.7845 17.9995L12.3922 0L2 17.9995Z" fill="url(#paint0_linear_2900_7989)"/>
-<defs>
-<linearGradient id="paint0_linear_2900_7989" x1="10.2156" y1="0.267501" x2="13.1178" y2="23.9102" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/assets/icons/vrf-navbar-icon.svg b/public/assets/icons/vrf-navbar-icon.svg
deleted file mode 100644
index 7339bb9ef52..00000000000
--- a/public/assets/icons/vrf-navbar-icon.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0022 0L1.60999 6.00046V17.9995L12.0022 24L22.3945 17.9995V6.00046L12.0022 0ZM18.5285 13.7488C18.5285 13.7488 18.4736 13.9357 18.3508 14.0603L14.0598 18.3513C13.8857 18.5254 13.6311 18.595 13.391 18.5309L7.52983 16.9607C7.29164 16.8966 7.10476 16.7097 7.04063 16.4715L5.47043 10.6103C5.40631 10.3721 5.4741 10.1174 5.64999 9.94152L9.941 5.65051C10.0271 5.56439 10.1352 5.50393 10.2488 5.47278C10.3642 5.44164 10.4888 5.4398 10.6098 5.47278L16.471 7.04298C16.6927 7.10344 16.8704 7.26834 16.9437 7.48271L18.5414 13.4502C18.5615 13.551 18.556 13.6536 18.5304 13.7507L18.5285 13.7488Z" fill="url(#paint0_linear_2872_3569)"/>
-<path d="M18.5286 13.7488L12.3797 12.0999C12.1415 12.0357 11.9547 11.8488 11.8905 11.6107L10.2471 5.47095C10.1316 5.50209 10.0254 5.56256 9.93924 5.64867L5.64823 9.93969C5.47417 10.1137 5.40454 10.3684 5.46867 10.6084L7.03887 16.4696C7.10299 16.7078 7.28988 16.8947 7.52806 16.9588L13.3893 18.529C13.6275 18.5932 13.8821 18.5254 14.058 18.3495L18.349 14.0585C18.4736 13.9339 18.5268 13.747 18.5268 13.747L18.5286 13.7488Z" fill="#0C162C"/>
-<path d="M13.5193 9.80606C13.2243 9.72728 13.0484 9.90134 13.1272 10.1945C13.2042 10.4876 13.5065 10.79 13.8015 10.8687C14.0964 10.9475 14.2723 10.7735 14.1954 10.4803C14.1184 10.1872 13.8161 9.88485 13.5211 9.80606H13.5193Z" fill="#0C162C"/>
-<path d="M15.1005 8.24307C14.8055 8.16429 14.6296 8.33835 14.7084 8.6315C14.7853 8.92465 15.0877 9.22696 15.3826 9.30575C15.6776 9.38453 15.8535 9.21047 15.7766 8.91732C15.6996 8.62417 15.3973 8.32186 15.1023 8.24307H15.1005Z" fill="#0C162C"/>
-<path d="M15.5916 10.3024C15.2966 10.2236 15.1207 10.3977 15.1995 10.6908C15.2764 10.984 15.5787 11.2863 15.8737 11.3651C16.1687 11.4439 16.3446 11.2698 16.2677 10.9766C16.1907 10.6835 15.8884 10.3812 15.5934 10.3024H15.5916Z" fill="#0C162C"/>
-<path d="M12.9733 7.76846C12.6783 7.68968 12.5024 7.86374 12.5812 8.15689C12.6581 8.45004 12.9605 8.75235 13.2554 8.83114C13.5504 8.90992 13.7263 8.73587 13.6494 8.44271C13.5724 8.14956 13.2701 7.84725 12.9751 7.76846H12.9733Z" fill="#0C162C"/>
-<defs>
-<linearGradient id="paint0_linear_2872_3569" x1="17.1984" y1="2.99931" x2="6.80611" y2="21.0007" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/public/chainlink-docs.svg b/public/chainlink-docs.svg
index 3449eea4a4e..95745e05904 100644
--- a/public/chainlink-docs.svg
+++ b/public/chainlink-docs.svg
@@ -1,17 +1,91 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="183" height="40" viewBox="0 0 183 40" fill="none">
-<path d="M41.8838 19.7625C41.8514 18.8743 41.9998 17.9888 42.3202 17.1592C42.6406 16.3295 43.1264 15.5728 43.7483 14.9345C44.3702 14.2961 45.1154 13.7894 45.9392 13.4446C46.7631 13.0999 47.6485 12.9243 48.5423 12.9283C51.9101 12.9283 53.9034 14.8931 54.5048 17.1997L52.3913 17.9087C52.2053 17.0487 51.7137 16.2843 51.0068 15.7555C50.2998 15.2267 49.4248 14.9691 48.5423 15.0298C46.36 15.0298 44.1778 16.6102 44.1778 19.8052C44.1778 23.0002 46.3085 24.5208 48.568 24.5208C49.4554 24.5464 50.3258 24.2749 51.0394 23.7497C51.753 23.2245 52.2684 22.4762 52.503 21.6248L54.5563 22.2911C54.2048 23.591 53.4165 24.732 52.3224 25.5246C51.2283 26.3172 49.8943 26.7136 48.5423 26.6479C47.6404 26.6647 46.7448 26.4961 45.9116 26.1525C45.0784 25.8089 44.3256 25.2978 43.7005 24.6513C43.0753 24.0049 42.5912 23.2369 42.2786 22.3956C41.966 21.5543 41.8316 20.6579 41.8838 19.7625Z" fill="#375BD2"/>
-<path d="M58.6287 26.3319H56.4637V12.8941H58.6287V18.165C58.9441 17.7942 59.3398 17.4994 59.7862 17.3026C60.2327 17.1058 60.7182 17.0122 61.2062 17.0288C63.4486 17.0288 64.5311 18.6263 64.5311 20.6168V26.3319H62.4262V20.9841C62.4657 20.724 62.4457 20.4583 62.3677 20.2069C62.2897 19.9555 62.1558 19.7248 61.9759 19.5319C61.7959 19.339 61.5746 19.189 61.3283 19.0928C61.082 18.9967 60.8171 18.9569 60.5532 18.9766C60.2914 18.9768 60.0325 19.0311 59.7928 19.136C59.5532 19.241 59.3381 19.3943 59.1612 19.5863C58.9843 19.7782 58.8495 20.0046 58.7652 20.2511C58.6809 20.4977 58.6491 20.7589 58.6717 21.0183L58.6287 26.3319Z" fill="#375BD2"/>
-<path d="M69.3682 21.155L71.6965 20.7962C72.2206 20.7278 72.3666 20.463 72.3666 20.1469C72.3666 19.3866 71.8511 18.7715 70.6483 18.7715C70.4164 18.7517 70.1828 18.779 69.9618 18.8516C69.7407 18.9243 69.5368 19.0408 69.3625 19.1942C69.1881 19.3476 69.047 19.5346 68.9475 19.7439C68.8481 19.9532 68.7924 20.1804 68.784 20.4117L66.8079 19.9675C66.9711 18.4042 68.3973 17.0117 70.6311 17.0117C73.432 17.0117 74.4973 18.5921 74.4973 20.4288V24.9138C74.4924 25.4001 74.5297 25.886 74.609 26.366H72.59C72.5207 25.9857 72.4919 25.5991 72.5041 25.2128C72.2025 25.6724 71.7855 26.0458 71.2943 26.296C70.803 26.5462 70.2546 26.6646 69.7032 26.6394C69.3189 26.6708 68.932 26.6244 68.5662 26.503C68.2004 26.3815 67.8631 26.1876 67.5748 25.9329C67.2865 25.6781 67.0531 25.3679 66.8888 25.021C66.7245 24.674 66.6327 24.2975 66.6189 23.9143C66.6189 22.2655 67.8131 21.3771 69.3682 21.155ZM72.3666 22.6072V22.1972L69.9954 22.5474C69.6731 22.5584 69.3675 22.6923 69.142 22.9213C68.9164 23.1504 68.7882 23.457 68.784 23.7776C68.7867 23.9431 68.8239 24.1062 68.8933 24.2566C68.9627 24.4071 69.0628 24.5415 69.1871 24.6515C69.3115 24.7615 69.4575 24.8447 69.6158 24.8957C69.7742 24.9467 69.9414 24.9645 70.1071 24.9479C70.4199 24.9797 70.736 24.9401 71.0312 24.8322C71.3264 24.7244 71.5931 24.551 71.8109 24.3254C72.0287 24.0998 72.1919 23.8278 72.2882 23.5301C72.3845 23.2324 72.4113 22.9168 72.3666 22.6072Z" fill="#375BD2"/>
-<path d="M78.1745 12.7062C78.3621 12.7039 78.5483 12.7387 78.7223 12.8086C78.8963 12.8784 79.0546 12.9818 79.188 13.113C79.3215 13.2441 79.4275 13.4002 79.4998 13.5724C79.5721 13.7445 79.6093 13.9292 79.6093 14.1158C79.6093 14.4873 79.4609 14.8437 79.1966 15.1064C78.9324 15.3692 78.574 15.5168 78.2003 15.5168C77.8266 15.5168 77.4682 15.3692 77.204 15.1064C76.9397 14.8437 76.7913 14.4873 76.7913 14.1158C76.7912 13.7478 76.9358 13.3943 77.1943 13.1309C77.4527 12.8676 77.8045 12.7151 78.1745 12.7062ZM77.1178 26.3746V17.2937H79.2571V26.3319L77.1178 26.3746Z" fill="#375BD2"/>
-<path d="M84.223 26.3319H82.0579V17.2936H84.1714V18.4982C84.4457 18.0358 84.8402 17.6553 85.3133 17.3968C85.7865 17.1382 86.321 17.0111 86.8606 17.0288C89.0772 17.0288 90.1425 18.6263 90.1425 20.6168V26.3319H87.9775V20.9841C87.9775 19.8735 87.4706 18.9766 86.1131 18.9766C85.8429 18.9782 85.5761 19.0366 85.3302 19.1481C85.0844 19.2595 84.865 19.4213 84.6865 19.623C84.508 19.8247 84.3744 20.0617 84.2945 20.3183C84.2146 20.575 84.1903 20.8456 84.223 21.1122V26.3319Z" fill="#375BD2"/>
-<path d="M92.7802 26.3319V12.8941H94.9452V26.3319H92.7802Z" fill="#375BD2"/>
-<path d="M98.8114 12.7062C99.1874 12.7062 99.5479 12.8547 99.8138 13.119C100.08 13.3834 100.229 13.7419 100.229 14.1157C100.227 14.3921 100.143 14.6618 99.988 14.8909C99.8325 15.1199 99.6124 15.2982 99.3553 15.4032C99.0981 15.5081 98.8155 15.5352 98.543 15.4808C98.2705 15.4265 98.0202 15.2933 97.8237 15.0978C97.6272 14.9024 97.4931 14.6536 97.4385 14.3826C97.3839 14.1116 97.411 13.8306 97.5166 13.575C97.6222 13.3193 97.8015 13.1005 98.0319 12.9459C98.2622 12.7913 98.5335 12.7079 98.8114 12.7062ZM97.7461 26.3746V17.2936H99.8939V26.3319L97.7461 26.3746Z" fill="#375BD2"/>
-<path d="M104.86 26.3319H102.695V17.2937H104.8V18.4982C105.075 18.037 105.47 17.6576 105.943 17.3992C106.416 17.1408 106.95 17.013 107.489 17.0288C109.714 17.0288 110.779 18.6263 110.779 20.6168V26.3319H108.614V20.9841C108.654 20.724 108.634 20.4583 108.556 20.2069C108.478 19.9555 108.344 19.7248 108.164 19.5319C107.984 19.3391 107.763 19.189 107.516 19.0928C107.27 18.9967 107.005 18.9569 106.741 18.9766C106.472 18.9781 106.205 19.0365 105.96 19.148C105.714 19.2595 105.495 19.4215 105.317 19.6234C105.139 19.8252 105.007 20.0623 104.928 20.319C104.849 20.5757 104.826 20.846 104.86 21.1123V26.3319Z" fill="#375BD2"/>
-<path d="M118.185 21.1122L122 26.3319H119.345L116.673 22.6072L115.556 23.7776V26.3404H113.408V12.8941H115.556V20.9499L119.045 17.2936H121.923L118.185 21.1122Z" fill="#375BD2"/>
-<path d="M16.2294 9.26348L25.5942 14.6112V25.3494L16.2552 30.7314L6.89042 25.3922V14.6539L16.2294 9.26348ZM16.2294 1.37L12.7928 3.35191L3.43662 8.74237L0 10.7243V14.671V25.4007V29.3474L3.43662 31.3123L12.8014 36.66L16.238 38.6248L19.6747 36.6429L29.0137 31.2525L32.4503 29.2791V25.3324V14.5941V10.6474L29.0137 8.68257L19.6489 3.33482L16.2123 1.37H16.2294Z" fill="#375BD2"/>
-<rect x="132" y="10.37" width="1" height="20" rx="0.5" fill="#DFE7FB"/>
-<path d="M145.16 24.39V15.588H147.446C149.66 15.588 151.478 17.028 151.478 20.016C151.478 22.968 149.642 24.39 147.428 24.39H145.16ZM147.5 26.37C150.956 26.37 153.728 24.102 153.728 20.016C153.728 15.912 150.992 13.608 147.518 13.608H143V26.37H147.5Z" fill="#375BD2"/>
-<path d="M159.697 24.768C158.419 24.768 157.249 23.796 157.249 21.978C157.249 20.16 158.419 19.224 159.697 19.224C160.993 19.224 162.145 20.16 162.145 21.978C162.145 23.814 160.993 24.768 159.697 24.768ZM159.697 17.334C157.087 17.334 155.161 19.296 155.161 21.978C155.161 24.678 157.087 26.64 159.697 26.64C162.325 26.64 164.251 24.678 164.251 21.978C164.251 19.296 162.325 17.334 159.697 17.334Z" fill="#375BD2"/>
-<path d="M170.085 19.26C171.417 19.26 172.011 20.124 172.209 20.898L174.081 20.214C173.721 18.81 172.425 17.334 170.067 17.334C167.547 17.334 165.585 19.278 165.585 21.978C165.585 24.642 167.547 26.64 170.121 26.64C172.425 26.64 173.739 25.146 174.153 23.778L172.317 23.112C172.119 23.778 171.489 24.732 170.121 24.732C168.807 24.732 167.673 23.742 167.673 21.978C167.673 20.214 168.807 19.26 170.085 19.26Z" fill="#375BD2"/>
-<path d="M175.234 23.994C175.342 24.984 176.313 26.64 178.852 26.64C181.084 26.64 182.164 25.164 182.164 23.832C182.164 22.536 181.299 21.528 179.644 21.168L178.312 20.898C177.771 20.79 177.43 20.448 177.43 19.98C177.43 19.44 177.952 18.972 178.69 18.972C179.86 18.972 180.238 19.782 180.31 20.286L182.074 19.782C181.93 18.918 181.138 17.334 178.69 17.334C176.872 17.334 175.468 18.63 175.468 20.16C175.468 21.366 176.278 22.374 177.826 22.716L179.122 23.004C179.824 23.148 180.148 23.508 180.148 23.976C180.148 24.516 179.697 24.984 178.833 24.984C177.717 24.984 177.124 24.282 177.052 23.49L175.234 23.994Z" fill="#375BD2"/>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="169.5686"
+   height="37.254799"
+   viewBox="0 0 169.56861 37.254799"
+   fill="none"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="chainlink-docs.svg"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.9726776"
+     inkscape:cx="91.5"
+     inkscape:cy="18.501099"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <path
+     d="m 41.8838,18.3925 c -0.0324,-0.8882 0.116,-1.7737 0.4364,-2.6033 0.3204,-0.8297 0.8062,-1.5864 1.4281,-2.2247 0.6219,-0.6384 1.3671,-1.1451 2.1909,-1.4899 0.8239,-0.3447 1.7093,-0.5203 2.6031,-0.5163 3.3678,0 5.3611,1.9648 5.9625,4.2714 l -2.1135,0.709 c -0.186,-0.86 -0.6776,-1.6244 -1.3845,-2.1532 -0.707,-0.5288 -1.582,-0.7864 -2.4645,-0.7257 -2.1823,0 -4.3645,1.5804 -4.3645,4.7754 0,3.195 2.1307,4.7156 4.3902,4.7156 0.8874,0.0256 1.7578,-0.2459 2.4714,-0.7711 0.7136,-0.5252 1.229,-1.2735 1.4636,-2.1249 l 2.0533,0.6663 c -0.3515,1.2999 -1.1398,2.4409 -2.2339,3.2335 -1.0941,0.7926 -2.4281,1.189 -3.7801,1.1233 -0.9019,0.0168 -1.7975,-0.1518 -2.6307,-0.4954 -0.8332,-0.3436 -1.586,-0.8547 -2.2111,-1.5012 -0.6252,-0.6464 -1.1093,-1.4144 -1.4219,-2.2557 -0.3126,-0.8413 -0.447,-1.7377 -0.3948,-2.6331 z"
+     fill="#375bd2"
+     id="path1" />
+  <path
+     d="m 58.6287,24.9619 h -2.165 V 11.5241 h 2.165 v 5.2709 c 0.3154,-0.3708 0.7111,-0.6656 1.1575,-0.8624 0.4465,-0.1968 0.932,-0.2904 1.42,-0.2738 2.2424,0 3.3249,1.5975 3.3249,3.588 v 5.7151 h -2.1049 v -5.3478 c 0.0395,-0.2601 0.0195,-0.5258 -0.0585,-0.7772 -0.078,-0.2514 -0.2119,-0.4821 -0.3918,-0.675 -0.18,-0.1929 -0.4013,-0.3429 -0.6476,-0.4391 -0.2463,-0.0961 -0.5112,-0.1359 -0.7751,-0.1162 -0.2618,2e-4 -0.5207,0.0545 -0.7604,0.1594 -0.2396,0.105 -0.4547,0.2583 -0.6316,0.4503 -0.1769,0.1919 -0.3117,0.4183 -0.396,0.6648 -0.0843,0.2466 -0.1161,0.5078 -0.0935,0.7672 z"
+     fill="#375bd2"
+     id="path2" />
+  <path
+     d="m 69.3682,19.785 2.3283,-0.3588 c 0.5241,-0.0684 0.6701,-0.3332 0.6701,-0.6493 0,-0.7603 -0.5155,-1.3754 -1.7183,-1.3754 -0.2319,-0.0198 -0.4655,0.0075 -0.6865,0.0801 -0.2211,0.0727 -0.425,0.1892 -0.5993,0.3426 -0.1744,0.1534 -0.3155,0.3404 -0.415,0.5497 -0.0994,0.2093 -0.1551,0.4365 -0.1635,0.6678 l -1.9761,-0.4442 c 0.1632,-1.5633 1.5894,-2.9558 3.8232,-2.9558 2.8009,0 3.8662,1.5804 3.8662,3.4171 v 4.485 c -0.0049,0.4863 0.0324,0.9722 0.1117,1.4522 H 72.59 c -0.0693,-0.3803 -0.0981,-0.7669 -0.0859,-1.1532 -0.3016,0.4596 -0.7186,0.833 -1.2098,1.0832 -0.4913,0.2502 -1.0397,0.3686 -1.5911,0.3434 -0.3843,0.0314 -0.7712,-0.015 -1.137,-0.1364 -0.3658,-0.1215 -0.7031,-0.3154 -0.9914,-0.5701 -0.2883,-0.2548 -0.5217,-0.565 -0.686,-0.9119 -0.1643,-0.347 -0.2561,-0.7235 -0.2699,-1.1067 0,-1.6488 1.1942,-2.5372 2.7493,-2.7593 z m 2.9984,1.4522 v -0.41 l -2.3712,0.3502 c -0.3223,0.011 -0.6279,0.1449 -0.8534,0.3739 -0.2256,0.2291 -0.3538,0.5357 -0.358,0.8563 0.0027,0.1655 0.0399,0.3286 0.1093,0.479 0.0694,0.1505 0.1695,0.2849 0.2938,0.3949 0.1244,0.11 0.2704,0.1932 0.4287,0.2442 0.1584,0.051 0.3256,0.0688 0.4913,0.0522 0.3128,0.0318 0.6289,-0.0078 0.9241,-0.1157 0.2952,-0.1078 0.5619,-0.2812 0.7797,-0.5068 0.2178,-0.2256 0.381,-0.4976 0.4773,-0.7953 0.0963,-0.2977 0.1231,-0.6133 0.0784,-0.9229 z"
+     fill="#375bd2"
+     id="path3" />
+  <path
+     d="m 78.1745,11.3362 c 0.1876,-0.0023 0.3738,0.0325 0.5478,0.1024 0.174,0.0698 0.3323,0.1732 0.4657,0.3044 0.1335,0.1311 0.2395,0.2872 0.3118,0.4594 0.0723,0.1721 0.1095,0.3568 0.1095,0.5434 0,0.3715 -0.1484,0.7279 -0.4127,0.9906 -0.2642,0.2628 -0.6226,0.4104 -0.9963,0.4104 -0.3737,0 -0.7321,-0.1476 -0.9963,-0.4104 -0.2643,-0.2627 -0.4127,-0.6191 -0.4127,-0.9906 -1e-4,-0.368 0.1445,-0.7215 0.403,-0.9849 0.2584,-0.2633 0.6102,-0.4158 0.9802,-0.4247 z m -1.0567,13.6684 v -9.0809 h 2.1393 v 9.0382 z"
+     fill="#375bd2"
+     id="path4" />
+  <path
+     d="m 84.223,24.9619 h -2.1651 v -9.0383 h 2.1135 v 1.2046 c 0.2743,-0.4624 0.6688,-0.8429 1.1419,-1.1014 0.4732,-0.2586 1.0077,-0.3857 1.5473,-0.368 2.2166,0 3.2819,1.5975 3.2819,3.588 v 5.7151 h -2.165 v -5.3478 c 0,-1.1106 -0.5069,-2.0075 -1.8644,-2.0075 -0.2702,0.0016 -0.537,0.06 -0.7829,0.1715 -0.2458,0.1114 -0.4652,0.2732 -0.6437,0.4749 -0.1785,0.2017 -0.3121,0.4387 -0.392,0.6953 -0.0799,0.2567 -0.1042,0.5273 -0.0715,0.7939 z"
+     fill="#375bd2"
+     id="path5" />
+  <path
+     d="M 92.7802,24.9619 V 11.5241 h 2.165 v 13.4378 z"
+     fill="#375bd2"
+     id="path6" />
+  <path
+     d="m 98.8114,11.3362 c 0.376,0 0.7365,0.1485 1.0024,0.4128 0.2662,0.2644 0.4152,0.6229 0.4152,0.9967 -0.002,0.2764 -0.086,0.5461 -0.241,0.7752 -0.1555,0.229 -0.3756,0.4073 -0.6327,0.5123 -0.2572,0.1049 -0.5398,0.132 -0.8123,0.0776 -0.2725,-0.0543 -0.5228,-0.1875 -0.7193,-0.383 -0.1965,-0.1954 -0.3306,-0.4442 -0.3852,-0.7152 -0.0546,-0.271 -0.0275,-0.552 0.0781,-0.8076 0.1056,-0.2557 0.2849,-0.4745 0.5153,-0.6291 0.2303,-0.1546 0.5016,-0.238 0.7795,-0.2397 z m -1.0653,13.6684 v -9.081 h 2.1478 v 9.0383 z"
+     fill="#375bd2"
+     id="path7" />
+  <path
+     d="m 104.86,24.9619 h -2.165 v -9.0382 h 2.105 v 1.2045 c 0.275,-0.4612 0.67,-0.8406 1.143,-1.099 0.473,-0.2584 1.007,-0.3862 1.546,-0.3704 2.225,0 3.29,1.5975 3.29,3.588 v 5.7151 h -2.165 v -5.3478 c 0.04,-0.2601 0.02,-0.5258 -0.058,-0.7772 -0.078,-0.2514 -0.212,-0.4821 -0.392,-0.675 -0.18,-0.1928 -0.401,-0.3429 -0.648,-0.4391 -0.246,-0.0961 -0.511,-0.1359 -0.775,-0.1162 -0.269,0.0015 -0.536,0.0599 -0.781,0.1714 -0.246,0.1115 -0.465,0.2735 -0.643,0.4754 -0.178,0.2018 -0.31,0.4389 -0.389,0.6956 -0.079,0.2567 -0.102,0.527 -0.068,0.7933 z"
+     fill="#375bd2"
+     id="path8" />
+  <path
+     d="M 118.185,19.7422 122,24.9619 h -2.655 l -2.672,-3.7247 -1.117,1.1704 v 2.5628 h -2.148 V 11.5241 h 2.148 v 8.0558 l 3.489,-3.6563 h 2.878 z"
+     fill="#375bd2"
+     id="path9" />
+  <path
+     d="m 16.2294,7.89348 9.3648,5.34772 v 10.7382 l -9.339,5.382 -9.36478,-5.3392 V 13.2839 Z M 16.2294,0 12.7928,1.98191 3.43662,7.37237 0,9.3543 v 3.9467 10.7297 3.9467 l 3.43662,1.9649 9.36478,5.3477 3.4366,1.9648 3.4367,-1.9819 9.339,-5.3904 3.4366,-1.9734 V 23.9624 13.2241 9.2774 L 29.0137,7.31257 19.6489,1.96482 16.2123,0 Z"
+     fill="#375bd2"
+     id="path10" />
+  <path
+     d="m 132.56461,23.02 v -8.802 h 2.286 c 2.214,0 4.032,1.44 4.032,4.428 0,2.952 -1.836,4.374 -4.05,4.374 z m 2.34,1.98 c 3.456,0 6.228,-2.268 6.228,-6.354 0,-4.104 -2.736,-6.408 -6.21,-6.408 h -4.518 V 25 Z"
+     fill="#375bd2"
+     id="path11" />
+  <path
+     d="m 147.10161,23.398 c -1.278,0 -2.448,-0.972 -2.448,-2.79 0,-1.818 1.17,-2.754 2.448,-2.754 1.296,0 2.448,0.936 2.448,2.754 0,1.836 -1.152,2.79 -2.448,2.79 z m 0,-7.434 c -2.61,0 -4.536,1.962 -4.536,4.644 0,2.7 1.926,4.662 4.536,4.662 2.628,0 4.554,-1.962 4.554,-4.662 0,-2.682 -1.926,-4.644 -4.554,-4.644 z"
+     fill="#375bd2"
+     id="path12" />
+  <path
+     d="m 157.48961,17.89 c 1.332,0 1.926,0.864 2.124,1.638 l 1.872,-0.684 c -0.36,-1.404 -1.656,-2.88 -4.014,-2.88 -2.52,0 -4.482,1.944 -4.482,4.644 0,2.664 1.962,4.662 4.536,4.662 2.304,0 3.618,-1.494 4.032,-2.862 l -1.836,-0.666 c -0.198,0.666 -0.828,1.62 -2.196,1.62 -1.314,0 -2.448,-0.99 -2.448,-2.754 0,-1.764 1.134,-2.718 2.412,-2.718 z"
+     fill="#375bd2"
+     id="path13" />
+  <path
+     d="m 162.63861,22.624 c 0.108,0.99 1.079,2.646 3.618,2.646 2.232,0 3.312,-1.476 3.312,-2.808 0,-1.296 -0.865,-2.304 -2.52,-2.664 l -1.332,-0.27 c -0.541,-0.108 -0.882,-0.45 -0.882,-0.918 0,-0.54 0.522,-1.008 1.26,-1.008 1.17,0 1.548,0.81 1.62,1.314 l 1.764,-0.504 c -0.144,-0.864 -0.936,-2.448 -3.384,-2.448 -1.818,0 -3.222,1.296 -3.222,2.826 0,1.206 0.81,2.214 2.358,2.556 l 1.296,0.288 c 0.702,0.144 1.026,0.504 1.026,0.972 0,0.54 -0.451,1.008 -1.315,1.008 -1.116,0 -1.709,-0.702 -1.781,-1.494 z"
+     fill="#375bd2"
+     id="path14" />
+</svg>
diff --git a/src/assets/icons/external-arrow.svg b/src/assets/icons/external-arrow.svg
new file mode 100644
index 00000000000..bec70c2a8fb
--- /dev/null
+++ b/src/assets/icons/external-arrow.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M15.1811 8.8142L8.81909 15.1802"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+></path>
+<path
+  d="M9.87769 8.81567L15.181 8.81399L15.1827 14.1173"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+></path>
+</svg>
\ No newline at end of file
diff --git a/src/features/landing/assets/automation-logo.svg b/src/assets/product-logos/automation-logo.svg
similarity index 100%
rename from src/features/landing/assets/automation-logo.svg
rename to src/assets/product-logos/automation-logo.svg
diff --git a/src/features/landing/assets/automation-shape.svg b/src/assets/product-logos/automation-shape.svg
similarity index 100%
rename from src/features/landing/assets/automation-shape.svg
rename to src/assets/product-logos/automation-shape.svg
diff --git a/src/features/landing/assets/ccip-logo.svg b/src/assets/product-logos/ccip-logo.svg
similarity index 100%
rename from src/features/landing/assets/ccip-logo.svg
rename to src/assets/product-logos/ccip-logo.svg
diff --git a/src/features/landing/assets/ccip-shape.svg b/src/assets/product-logos/ccip-shape.svg
similarity index 100%
rename from src/features/landing/assets/ccip-shape.svg
rename to src/assets/product-logos/ccip-shape.svg
diff --git a/src/features/landing/assets/data-feeds-logo.svg b/src/assets/product-logos/data-feeds-logo.svg
similarity index 100%
rename from src/features/landing/assets/data-feeds-logo.svg
rename to src/assets/product-logos/data-feeds-logo.svg
diff --git a/src/features/landing/assets/data-feeds-shape.svg b/src/assets/product-logos/data-feeds-shape.svg
similarity index 100%
rename from src/features/landing/assets/data-feeds-shape.svg
rename to src/assets/product-logos/data-feeds-shape.svg
diff --git a/src/features/landing/assets/data-streams-logo.svg b/src/assets/product-logos/data-streams-logo.svg
similarity index 100%
rename from src/features/landing/assets/data-streams-logo.svg
rename to src/assets/product-logos/data-streams-logo.svg
diff --git a/src/features/landing/assets/data-streams-shape.svg b/src/assets/product-logos/data-streams-shape.svg
similarity index 100%
rename from src/features/landing/assets/data-streams-shape.svg
rename to src/assets/product-logos/data-streams-shape.svg
diff --git a/src/features/landing/assets/external-api-logo.svg b/src/assets/product-logos/external-api-logo.svg
similarity index 100%
rename from src/features/landing/assets/external-api-logo.svg
rename to src/assets/product-logos/external-api-logo.svg
diff --git a/src/features/landing/assets/external-api-shape.svg b/src/assets/product-logos/external-api-shape.svg
similarity index 100%
rename from src/features/landing/assets/external-api-shape.svg
rename to src/assets/product-logos/external-api-shape.svg
diff --git a/src/features/landing/assets/functions-logo.svg b/src/assets/product-logos/functions-logo.svg
similarity index 100%
rename from src/features/landing/assets/functions-logo.svg
rename to src/assets/product-logos/functions-logo.svg
diff --git a/src/features/landing/assets/functions-shape.svg b/src/assets/product-logos/functions-shape.svg
similarity index 100%
rename from src/features/landing/assets/functions-shape.svg
rename to src/assets/product-logos/functions-shape.svg
diff --git a/src/features/landing/assets/general-logo.svg b/src/assets/product-logos/general-logo.svg
similarity index 100%
rename from src/features/landing/assets/general-logo.svg
rename to src/assets/product-logos/general-logo.svg
diff --git a/src/features/landing/assets/general-shape.svg b/src/assets/product-logos/general-shape.svg
similarity index 100%
rename from src/features/landing/assets/general-shape.svg
rename to src/assets/product-logos/general-shape.svg
diff --git a/src/features/landing/assets/node-logo.svg b/src/assets/product-logos/node-logo.svg
similarity index 100%
rename from src/features/landing/assets/node-logo.svg
rename to src/assets/product-logos/node-logo.svg
diff --git a/src/features/landing/assets/node-shape.svg b/src/assets/product-logos/node-shape.svg
similarity index 100%
rename from src/features/landing/assets/node-shape.svg
rename to src/assets/product-logos/node-shape.svg
diff --git a/src/features/landing/assets/vrf-logo.svg b/src/assets/product-logos/vrf-logo.svg
similarity index 100%
rename from src/features/landing/assets/vrf-logo.svg
rename to src/assets/product-logos/vrf-logo.svg
diff --git a/src/features/landing/assets/vrf-shape.svg b/src/assets/product-logos/vrf-shape.svg
similarity index 100%
rename from src/features/landing/assets/vrf-shape.svg
rename to src/assets/product-logos/vrf-shape.svg
diff --git a/src/components/Header/Nav/NavBar.tsx b/src/components/Header/Nav/NavBar.tsx
index cf709758762..0266cae25ec 100644
--- a/src/components/Header/Nav/NavBar.tsx
+++ b/src/components/Header/Nav/NavBar.tsx
@@ -38,6 +38,17 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
         <div className={clsx(styles.navBar, shouldHideHeader && styles.headerHidden)}>
           <div className={styles.container}>
             <div className={styles.leftSection}>
+              <a rel="noreferrer noopener" className={clsx("home-logo", styles.logo)} href="/">
+                <img
+                  alt="Documentation Home"
+                  title="Documentation Home"
+                  style={{ display: "flex" }}
+                  src="/chainlink-docs.svg"
+                  height={28}
+                />
+              </a>
+            </div>
+            <div className={styles.centerSection}>
               <ProductNavigation
                 path={path}
                 searchTrigger={searchTrigger}
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
index b69de3a3b50..379dadf70cf 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
@@ -5,10 +5,10 @@ import { Divider } from "../../Divider"
 import { isMatchedPath } from "../../isMatchedPath"
 import { clsx } from "../../utils"
 import { extendRadixComponent } from "../extendRadixComponent"
-import { ProductContent } from "./ProductContent"
 import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
 import { Trigger } from "./Trigger"
+import externalArrow from "../../../../../assets/icons/external-arrow.svg"
 
 type Props = {
   path: string
@@ -39,56 +39,13 @@ export const ProductNavigation = ({ path, setNavMenuOpen, productsNav, subProduc
 
   return (
     <>
-      <a
-        rel="noreferrer noopener"
-        target="_blank"
-        className={clsx("home-logo", styles.logo)}
-        href="https://chain.link/"
-      >
-        <img
-          alt="Chainlink Home"
-          title="Chainlink Home"
-          style={{ display: "flex" }}
-          src="/assets/icons/chainlink-logo.svg"
-          height={28}
-        />
-      </a>
-      <Root className={clsx(styles.root, !subProductTrigger && styles.alignLeft)}>
-        <List className={styles.list}>
-          <Divider className={styles.divider} />
-          <Item>
-            <RadixTrigger className="nav-product" ref={productMenuRef}>
-              <Trigger className={styles.productTrigger} label="Developer Hub" />
-            </RadixTrigger>
-            <RadixContent className={styles.content}>
-              <ProductContent categories={productsNav.categories} />
-            </RadixContent>
-          </Item>
-
-          <Indicator className={styles.indicator}>
-            <div className={styles.arrow} />
-          </Indicator>
-        </List>
-
-        <div className={styles.viewportPosition}>
-          <Viewport className={styles.navigationViewport} />
-        </div>
-      </Root>
-
       <Root className={clsx(styles.root, styles.alignLeft)}>
-        <Divider className={styles.divider} />
         <List className={styles.list}>
-          <Item>
-            <NavigationMenu.Link className={styles.button} href="/">
-              Docs
-            </NavigationMenu.Link>
-          </Item>
           {subProductTrigger && subProductsNav && (
             <>
-              <Divider className={styles.divider} />
               <Item>
                 <RadixTrigger className="nav-subproduct" ref={subProductMenuRef}>
-                  <Trigger label={subProductTrigger.label} />
+                  <Trigger icon={subProductTrigger.icon} label={subProductTrigger.label} />
                 </RadixTrigger>
                 <RadixContent className={styles.content}>
                   <SubProductContent subProductsNav={subProductsNav} />
@@ -105,6 +62,13 @@ export const ProductNavigation = ({ path, setNavMenuOpen, productsNav, subProduc
         <div className={styles.viewportPosition}>
           <Viewport className={styles.navigationViewport} />
         </div>
+        <Divider className={styles.divider} />
+        <NavigationMenu.Link className={styles.button} href="https://dev.chain.link" target="_blank">
+          Developer Hub
+          <div>
+            <img src={externalArrow.src}></img>
+          </div>
+        </NavigationMenu.Link>
       </Root>
     </>
   )
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/SubProductContent.tsx
index 604f143a939..32f0ad99c89 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/SubProductContent.tsx
@@ -20,6 +20,7 @@ export const SubProductContent = ({ subProductsNav }: { subProductsNav: SubProdu
         .map((item) => (
           <NavigationMenu.Link key={item.label} asChild>
             <a className={clsx(styles.link, "subproduct-link")} href={item.href}>
+              <img className={clsx(styles.icon, "subproduct-icon")} src={item.icon}></img>
               {item.label}
             </a>
           </NavigationMenu.Link>
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/Trigger.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/Trigger.tsx
index 2a01e7a1798..f73f512b2e4 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/Trigger.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/Trigger.tsx
@@ -9,7 +9,7 @@ type Props = {
 export const Trigger = ({ icon, label, className }: Props) => (
   <div style={{ display: "flex" }} className={className}>
     <span className={styles.trigger}>
-      {icon && <img height={20} width={20} src={`assets/isonc/${icon}-navbar-icon.svg`} />}
+      {icon && <img height={20} width={20} src={icon} />}
       {label}
       <div className={styles.caretContainer}>
         <CaretIcon aria-hidden />
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
index 57ebee4d21b..b1bc93d81ce 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
@@ -34,13 +34,12 @@
 }
 
 .button {
-  composes: text-300 from global;
+  composes: text-100 from global;
   line-height: 1.5rem;
-  padding-block: var(--space-2x);
   user-select: none;
   display: flex;
   align-items: center;
-  gap: var(--space-2x);
+  gap: var(--space-1x);
   width: fit-content;
   color: var(--blue-800);
 }
@@ -49,6 +48,23 @@
   color: var(--blue-600);
 }
 
+.button > div > img {
+  display: flex;
+  width: 1.2rem;
+  transform: translate3d(0rem, 0rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
+  transition-duration: 200ms;
+  opacity: 0.6;
+  transform-style: prserve-3d;
+}
+
+.button:hover > div > img {
+  transform: translate3d(0.15rem, -0.15rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
+    skew(0deg, 0deg);
+  transition-duration: 200ms;
+  opacity: 1;
+  transform-style: preserve-3d;
+}
+
 .content {
   position: absolute;
   top: 0;
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
index afa3d13a55e..c97580320ef 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
@@ -13,3 +13,8 @@
   color: var(--blue-600);
   background: var(--blue-100);
 }
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
index 03493199a49..86eaaa68b3a 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
@@ -14,7 +14,7 @@ const Item = React.forwardRef<HTMLAnchorElement, ListItemProps>(
   ({ item: { label, icon, href, subProducts }, onProductClick }, forwardedRef) => {
     const itemComponent = (
       <>
-        {icon && <img height={24} width={24} src={`/assets/icons/${icon}-navbar-icon.svg`} />}
+        {icon && <img height={24} width={24} src={icon} />}
         <span style={{ flex: 1, textAlign: "start" }} className="text-300">
           {label}
         </span>
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 12107d9f82a..7eb953b44f9 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -9,10 +9,16 @@ import { BottomBar } from "./BottomBar"
 import { ProductContent } from "./ProductContent"
 import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
+import externalArrow from "../../../../../assets/icons/external-arrow.svg"
+
+type Page = {
+  label: string;
+  href: string;
+}
 
 export type SubProducts = {
   label: string
-  items: { label: string; href: string }[]
+  items: { label: string; href: string; pages?: Page[] }[]
 }
 
 type Props = {
@@ -50,27 +56,12 @@ export function ProductNavigation({ productsNav }: Props) {
 
   return (
     <Root open={open} onOpenChange={handleOpenChange}>
-      <a
-        rel="noreferrer noopener"
-        target="_blank"
-        className={clsx("home-logo", styles.logo)}
-        href="https://chain.link/"
-      >
-        <img
-          alt="Chainlink Home"
-          title="Chainlink Home"
-          style={{ display: "flex" }}
-          src="/assets/icons/chainlink.svg"
-          height={24}
-          width={24}
-        />
-      </a>
       <Trigger data-testid="product-navigation-trigger-mobile" className={styles.trigger}>
         <span
           className={"text-300"}
           style={{ color: "var(--color-text-label)", fontWeight: "var(--font-weight-medium)" }}
         >
-          Developer Hub
+          Documentation
         </span>
         <CaretIcon
           style={{
@@ -105,7 +96,6 @@ export function ProductNavigation({ productsNav }: Props) {
           <Close ref={closeButtonRef} className={styles.closeButton}>
             <img src="/assets/icons/close.svg" />
           </Close>
-
           <BottomBar />
         </Dialog.Content>
       </Portal>
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
index e47dd78755d..b5e598bd463 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
@@ -2,12 +2,17 @@ import { clsx } from "../../utils"
 import { BackArrowIcon } from "./BackArrowIcon"
 import styles from "./subProductContent.module.css"
 
+type Page = {
+  label: string;
+  href: string;
+}
+
 type Props = {
   onSubproductClick: () => void
   subProducts?:
     | {
         label: string
-        items: { label: string; icon?: string; href: string }[]
+        items: { label: string; icon?: string; href: string; pages?: Page[] }[]
       }
     | undefined
 }
@@ -16,22 +21,19 @@ export const SubProductContent = ({ subProducts, onSubproductClick }: Props) =>
   if (!subProducts) return null
   return (
     <>
-      <button className={styles.back} onClick={onSubproductClick}>
+      <button key="back" className={styles.back} onClick={onSubproductClick}>
         <BackArrowIcon />
         Back
       </button>
-      <span
-        style={{
-          color: "var(--gray-400",
-          margin: "var(--space-3x) var(--space-0x)",
-        }}
-      >
-        {subProducts.label}
-      </span>
-      {subProducts.items.map(({ label, href }) => (
-        <a key={label} className={clsx(styles.link, "subproduct-link")} href={href}>
-          {label}
-        </a>
+      {subProducts.items.map(({ label, pages }) => (
+        <div key={label}>
+        <h3 key={label} className={clsx(styles.section)}>{label}</h3>
+        {pages?.map(({ label, href }) => (
+          <a key={label} className={clsx(styles.link, "subproduct-link")} href={"/" + href}>
+            {label}
+          </a>
+        ))}
+        </div>
       ))}
     </>
   )
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
index f3c57ece2d7..d3c322a51fb 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
@@ -11,7 +11,13 @@
   fill: var(--color-text-link);
 }
 
+.section {
+  padding-top: var(--space-4x);
+  composes: text-400 from global;
+}
+
 .link {
-  padding-block: var(--space-5x);
-  composes: text-300 from global;
+  display: block;
+  padding-bottom: var(--space-5x);
+  padding-left: var(--space-5x);
 }
diff --git a/src/components/Header/Nav/config.tsx b/src/components/Header/Nav/config.tsx
index e08da0663e7..abf8dbaab52 100644
--- a/src/components/Header/Nav/config.tsx
+++ b/src/components/Header/Nav/config.tsx
@@ -4,7 +4,7 @@ type LinksConfig = {
   actionButton?: { label: string; href: string }
 }
 
-export type Item = { label: string; icon?: string; href: string }
+export type Item = { label: string; icon?: string; href: string; }
 
 export type ProductItem = Item & {
   subProducts?: {
@@ -39,70 +39,3 @@ export type AppConfig = {
   productsNav: ProductsNav
   subProductsNav?: SubProductsNav
 } & LinksConfig
-
-export const devHubCategories = [
-  {
-    items: [
-      {
-        label: "Home",
-        icon: "home",
-        href: "https://dev.chain.link/",
-        subMenu: {
-          label: "Home's subproducts",
-          items: [
-            { label: "Subproduct 1", href: "https://..." },
-            {
-              label: "Subproduct 2",
-              href: "https://",
-            },
-          ],
-        },
-      },
-      {
-        label: "Docs",
-        icon: "docs",
-        href: "https://docs.chain.link",
-      },
-      {
-        label: "All Resources",
-        icon: "resources",
-        href: "https://dev.chain.link/resources",
-      },
-    ],
-  },
-  {
-    label: "Product Resources",
-    items: [
-      {
-        label: "CCIP",
-        icon: "ccip",
-        href: "https://dev.chain.link/products/ccip",
-      },
-      {
-        label: "Data",
-        icon: "data",
-        href: "https://dev.chain.link/products/data",
-      },
-      {
-        label: "Functions",
-        icon: "functions",
-        href: "https://dev.chain.link/products/functions",
-      },
-      {
-        label: "Automation",
-        icon: "automation",
-        href: "https://dev.chain.link/products/automation",
-      },
-      {
-        label: "VRF",
-        icon: "vrf",
-        href: "https://dev.chain.link/products/vrf",
-      },
-      {
-        label: "General",
-        icon: "general",
-        href: "https://dev.chain.link/products/general",
-      },
-    ],
-  },
-]
diff --git a/src/components/Header/Nav/index.ts b/src/components/Header/Nav/index.ts
index 17a83186e70..b7303c11d22 100644
--- a/src/components/Header/Nav/index.ts
+++ b/src/components/Header/Nav/index.ts
@@ -1,2 +1 @@
 export { NavBar } from "./NavBar"
-export type { devHubCategories } from "./config"
diff --git a/src/components/Header/getNavigationProps.ts b/src/components/Header/getNavigationProps.ts
index 67c73ffe9d2..f988f30a1f8 100644
--- a/src/components/Header/getNavigationProps.ts
+++ b/src/components/Header/getNavigationProps.ts
@@ -1,168 +1,216 @@
-const devHubProductsUrl = "https://dev.chain.link/products/"
+import ccipLogo from "../../assets/product-logos/ccip-logo.svg"
+import vrfLogo from "../../assets/product-logos/vrf-logo.svg"
+import functionsLogo from "../../assets/product-logos/functions-logo.svg"
+import automationLogo from "../../assets/product-logos/automation-logo.svg"
+import dataFeedsLogo from "../../assets/product-logos/data-feeds-logo.svg"
+import dataStreamsLogo from "../../assets/product-logos/data-streams-logo.svg"
+import nodesLogo from "../../assets/product-logos/general-logo.svg"
+import { SIDEBAR as sidebar } from "../../config/sidebar.ts"
 
-const docsSubProductsNav = [
+const desktopSubProductsNav = [
   {
     label: "Data Feeds",
     href: "/data-feeds",
+    icon: dataFeedsLogo.src,
   },
   {
     label: "Data Streams",
     href: "/data-streams",
+    icon: dataStreamsLogo.src,
   },
   {
     label: "CCIP",
     href: "/ccip",
+    icon: ccipLogo.src,
   },
   {
     label: "Functions",
     href: "/chainlink-functions",
-  },
-  {
-    label: "VRF",
-    href: "/vrf",
+    icon: functionsLogo.src,
   },
   {
     label: "Automation",
     href: "/chainlink-automation",
+    icon: automationLogo.src,
   },
   {
-    label: "Nodes",
-    href: "/chainlink-nodes",
-  },
-  {
-    label: "Overview",
-    href: "/",
-    hideFromDropdown: true,
-  },
-]
-
-const devHubResourcesUrl = "https://dev.chain.link/resources/"
-
-const quickStartsSubProductsNav = [
-  {
-    label: "All Resources",
-    href: devHubResourcesUrl,
-  },
-  {
-    label: "Guides",
-    href: devHubResourcesUrl + "guides",
-  },
-  {
-    label: "Courses",
-    href: devHubResourcesUrl + "courses",
+    label: "VRF",
+    href: "/vrf",
+    icon: vrfLogo.src,
   },
   {
-    label: "Beginner Tutorials",
-    href: devHubResourcesUrl + "beginner-tutorials",
+    label: "Chainlink Nodes",
+    href: "/chainlink-nodes",
+    icon: nodesLogo.src,
   },
   {
-    label: "Tech Talks",
-    href: devHubResourcesUrl + "tech-talks",
+    label: "Quickstarts",
+    href: "/quickstarts",
+    icon: nodesLogo.src,
   },
   {
     label: "Documentation",
-    href: "https://docs.chain.link",
-  },
-  {
-    label: "QuickStarts",
-    href: devHubResourcesUrl + "quickstarts",
-  },
-  {
-    label: "Case Studies",
-    href: devHubResourcesUrl + "case-studies",
-  },
-  {
-    label: "Blogs",
-    href: devHubResourcesUrl + "blogs",
-  },
-  {
-    label: "Videos",
-    href: devHubResourcesUrl + "videos",
-  },
-  {
-    label: "QuickStarts",
-    href: "/quickstarts",
+    href: "/",
     hideFromDropdown: true,
   },
 ]
 
-const devHubCategories = [
+const docsSections = [
   {
-    label: "Developer Hub",
+    label: "Documentation",
     items: [
       {
-        label: "Home",
-        icon: "home",
-        href: "https://dev.chain.link/",
-      },
-      {
-        label: "Docs",
-        icon: "documentation",
-        href: "https://docs.chain.link",
+        label: "Data Feeds",
+        href: "/data-feeds",
+        icon: dataFeedsLogo.src,
         subProducts: {
-          label: "Docs",
-          items: docsSubProductsNav,
+          label: "Data Feeds",
+          href: "/data-feeds",
+          items: sidebar.dataFeeds?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
         },
       },
       {
-        label: "All Resources",
-        icon: "resources",
-        href: "https://dev.chain.link/resources",
+        label: "Data Streams",
+        href: "/data-streams",
+        icon: dataStreamsLogo.src,
+        subProducts: {
+          label: "Data Streams",
+          href: "/data-streams",
+          items: sidebar.dataStreams?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
-    ],
-  },
-  {
-    label: "Product Resources",
-    items: [
       {
         label: "CCIP",
-        icon: "ccip",
-        href: devHubProductsUrl + "ccip",
-      },
-      {
-        label: "Data",
-        icon: "data",
-        href: devHubProductsUrl + "data",
+        href: "/ccip",
+        icon: ccipLogo.src,
+        subProducts: {
+          label: "CCIP",
+          href: "/ccip",
+          items: sidebar.ccip?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
       {
         label: "Functions",
-        icon: "functions",
-        href: devHubProductsUrl + "functions",
+        href: "/chainlink-functions",
+        icon: functionsLogo.src,
+        subProducts: {
+          label: "Functions",
+          href: "/chainlink-functions",
+          items: sidebar.chainlinkFunctions?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
       {
         label: "Automation",
-        icon: "automation",
-        href: devHubProductsUrl + "automation",
+        href: "/chainlink-automation",
+        icon: automationLogo.src,
+        subProducts: {
+          label: "Automation",
+          href: "/chainlink-automation",
+          items: sidebar.automation?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
       {
         label: "VRF",
-        icon: "vrf",
-        href: devHubProductsUrl + "vrf",
+        href: "/vrf",
+        icon: vrfLogo.src,
+        subProducts: {
+          label: "VRF",
+          href: "/vrf",
+          items: sidebar.vrf?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
+      },
+      {
+        label: "Chainlink Nodes",
+        href: "/chainlink-nodes",
+        icon: nodesLogo.src,
+        subProducts: {
+          label: "Chainlink Nodes",
+          href: "/chainlink-nodes",
+          items: sidebar.nodeOperator?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
       {
         label: "General",
-        icon: "general",
-        href: devHubProductsUrl + "general",
+        href: "/resources",
+        subProducts: {
+          label: "General",
+          href: "/resources",
+          items: sidebar.global?.map((item) => ({
+            label: item.section,
+            pages: item.contents.map((page) => ({
+              label: page.title,
+              href: page.url,
+            })),
+          })),
+        },
       },
     ],
   },
 ]
 
-const quickStartsProductsNav = {
-  trigger: { label: "All Resources", icon: "resources" },
-  categories: devHubCategories,
-}
+/*
+  {
+    label: "Learning Resources",
+    items: [
+      {
+        label: "Developer Hub",
+        icon: nodesLogo.src,
+        href: "https://dev.chain.link",
+        external: true,
+      },
+  ]
+  }
+*/
 
-const docsProductsNav = {
+const desktopProductsNav = {
   trigger: { label: "Docs", icon: "docs" },
-  categories: devHubCategories,
+  categories: docsSections,
 }
 
-const quickStartsProps = { productsNav: quickStartsProductsNav, subProductsNav: quickStartsSubProductsNav }
-const docsProps = { productsNav: docsProductsNav, subProductsNav: docsSubProductsNav }
+const docsProps = { productsNav: desktopProductsNav, subProductsNav: desktopSubProductsNav }
 
 export const getNavigationProps = (path: string) => {
-  const isQuickStarts = path.startsWith("/quickstarts")
-
-  return isQuickStarts ? quickStartsProps : docsProps
+  return docsProps
 }
diff --git a/src/components/Quickstart/QuickstartOverview.astro b/src/components/Quickstart/QuickstartOverview.astro
index 6a37014b3e5..39b504a79ca 100644
--- a/src/components/Quickstart/QuickstartOverview.astro
+++ b/src/components/Quickstart/QuickstartOverview.astro
@@ -9,7 +9,7 @@ const { frontmatter } = Astro.props
 
 <a class="back text-200" href="https://dev.chain.link/resources/quickstarts">
   <NavArrowLeftIcon />
-  Back</a
+  Back to QuickStarts</a
 >
 <h1 class="title">{frontmatter.title}</h1>
 <h3 class="description">{frontmatter.description}</h3>
diff --git a/src/config/sidebar.ts b/src/config/sidebar.ts
index 15f1479b46f..39e7d8e98e7 100644
--- a/src/config/sidebar.ts
+++ b/src/config/sidebar.ts
@@ -132,10 +132,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=dataFeeds",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=dataFeeds",
@@ -237,10 +233,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=dataStreams",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=dataStreams",
@@ -418,10 +410,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=automation",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=automation",
@@ -609,10 +597,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=chainlinkFunctions",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=chainlinkFunctions",
@@ -763,10 +747,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=vrf",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=vrf",
@@ -983,10 +963,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "Resources",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials?parent=ccip",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview?parent=ccip",
@@ -1276,10 +1252,6 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
     {
       section: "General Documentation",
       contents: [
-        {
-          title: "Learning Resources",
-          url: "getting-started/other-tutorials",
-        },
         {
           title: "Smart Contract Overview",
           url: "getting-started/conceptual-overview",
diff --git a/src/content/getting-started/other-tutorials.mdx b/src/content/getting-started/other-tutorials.mdx
deleted file mode 100644
index a43bd1f495e..00000000000
--- a/src/content/getting-started/other-tutorials.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
----
-section: global
-date: Last Modified
-title: "Learning Resources"
----
-
-Welcome to the Resources page. This is a list of links and pages that you might need to help you throughout your learning journey. If you're new to Chainlink, start with the [Getting Started](/getting-started/conceptual-overview) guide to better understand the products and services Chainlink offers. This page contains more resources, inspiration, and outreach information to further your learning.
-
-## Smart contract learning materials
-
-Videos, tutorials, examples, and bootcamps are a great way to get experience building smart contracts and using Chainlink products. The following learning materials are useful for expanding your knowledge.
-
-### Video tutorials
-
-We're constantly uploading new videos to our [YouTube](https://www.youtube.com/c/chainlink) channel. Here are some direct links to playlists that may be helpful if you're starting your Chainlink learning journey or if you're looking for interesting ways to apply Chainlink to your project:
-
-- [Two-Minute Explainers](https://www.youtube.com/playlist?list=PLVP9aGDn-X0Q3qBME3T9sBMw66xPsglMA)
-- [Chainlink Developer Workshops](https://www.youtube.com/playlist?list=PLVP9aGDn-X0SPHromvpiGvoNDpH7YErmf)
-- [Chainlink Engineering Tutorials](https://www.youtube.com/playlist?list=PLVP9aGDn-X0QwJVbQvuKr-zrh2_DV5M6J)
-- [Solidity, Blockchain, and Smart Contract Python Course](https://www.youtube.com/watch?v=M576WGiDBdQ)
-- [Chainlink Engineering YouTube](https://www.youtube.com/playlist?list=PLVP9aGDn-X0QwJVbQvuKr-zrh2_DV5M6J)
-- [Dapp University](https://www.youtube.com/watch?v=YLmMNocc1ys)
-- [Austin Griffith](https://www.youtube.com/watch?v=ffU96UhlA0A)
-- [Patrick Collins](https://www.youtube.com/watch?v=p36tXHX1JD8)
-- [Nader Dabit](https://www.youtube.com/watch?v=nS9xP1hxg3w)
-- [Alchemy University](https://university.alchemy.com/)
-
-### Applications
-
-Below is a list of applications of Chainlink's products and services sorted by difficulty and type to help you navigate and search for projects that you might find interesting. See the [Chainlink Blog](https://blog.chain.link/) to stay up to date with new ways to use Chainlink.
-
-#### Data feeds
-
-| Name                                                                                                                                              | Type     | Difficulty |
-| :------------------------------------------------------------------------------------------------------------------------------------------------ | :------- | :--------- |
-| [How to Calculate Price Volatility for DeFi Variance Swaps](https://blog.chain.link/how-to-calculate-price-volatility-for-defi-variance-swaps/)   | DeFi     | Advanced   |
-| [Build a dApp on Gnosis Chain (xDai) with Secure Data Feeds](https://blog.chain.link/build-a-dapp-on-xdai-chain-with-secure-data-feeds/)          | DeFi     | Medium     |
-| [Craft Whiskey Crypto Payments With Chainlink Oracles](https://blog.chain.link/craft-whiskey-crypto-payments-with-chainlink-oracles/)             | Payments | Advanced   |
-| [Convert a Vending Machine to Accept Cryptocurrency Payments Using Chainlink Data Feeds](https://blog.chain.link/cryptocurrency-vending-machine/) | Payments | Advanced   |
-| [Build a dApp on BNB Chain With Secure Data Feeds](https://blog.chain.link/build-a-dapp-on-binance-smart-chain-with-secure-data-feeds/)           | DeFi     | Medium     |
-| [How to Use Chainlink With Hardhat](https://blog.chain.link/using-chainlink-with-hardhat/)                                                        | DeFi     | Medium     |
-| [Develop a DeFi Project Using Python](https://blog.chain.link/develop-python-defi-project/)                                                       | DeFi     | Medium     |
-| [Build a DeFi Call Option Exchange With Chainlink Data Feeds](https://blog.chain.link/defi-call-option-exchange-in-solidity/)                     | DeFi     | Advanced   |
-| [Build a DeFi Yield Farming dApp Using Chainlink Data Feeds](https://blog.chain.link/build-defi-yield-farming-application-with-chainlink/)        | DeFi     | Advanced   |
-| [Build and Deploy an Avalanche Smart Contract](https://blog.chain.link/how-to-build-and-deploy-an-avalanche-smart-contract/)                      | DeFi     | Beginner   |
-
-#### Randomness (VRF)
-
-| Name                                                                                                                | Type     | Difficulty |
-| :------------------------------------------------------------------------------------------------------------------ | :------- | :--------- |
-| [How to Get a Random Number on Polygon](https://blog.chain.link/how-to-get-a-random-number-on-polygon/)             | DeFi     | Medium     |
-| [Build Your Own Dynamic NFT With Hardhat](https://blog.chain.link/dynamic-nft-hardhat/)                             | NFT      | Advanced   |
-| [Build, Deploy, and Sell Your Own Dynamic NFT](https://blog.chain.link/build-deploy-and-sell-your-own-dynamic-nft/) | NFT      | Advanced   |
-| [How to Build a Blockchain Lottery](https://blog.chain.link/how-to-build-a-blockchain-lottery-2/)                   | Gambling | Advanced   |
-
-#### API requests
-
-| Name                                                                                                                                                           | Type                 | Difficulty |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :--------- |
-| [Build a Real Estate dApp With Chainlink Oracles](https://blog.chain.link/build-a-real-estate-dapp-with-chainlink-oracles/)                                    | Real-Estate          | Medium     |
-| [Offchain Computation: Statistical Analysis With Chainlink](https://blog.chain.link/off-chain-computation-statistical-analysis-with-chainlink/)                | Statistical Analysis | Advanced   |
-| [Blockchain Fintech Tutorial: Lending and Borrowing With Python](https://blog.chain.link/blockchain-fintech-defi-tutorial-lending-borrowing-python/)           | Lending              | Medium     |
-| [Build a Blockchain-Based Fantasy Sports Game Using a Chainlink External Adapter](https://blog.chain.link/blockchain-based-fantasy-sports-game)                | Sports               | Medium     |
-| [Fetch IPFS Data in Smart Contracts Using a Chainlink External Adapter](https://blog.chain.link/fetch-ipfs-api-data-token-distribution/)                       | Audius               | Medium     |
-| [How to Connect a Two-Factor Authentication (2FA) API to a Smart Contract With Chainlink](https://blog.chain.link/2fa-authentication-smart-contracts/)         | Security             | Medium     |
-| [Build a Marine Insurance Smart Contract With Chainlink](https://blog.chain.link/build-a-marine-insurance-smart-contract-with-chainlink/)                      | Insurance            | Medium     |
-| [How to Build a Parametric Insurance Smart Contract](https://blog.chain.link/parametric-insurance-smart-contract/)                                             | Insurance            | Advanced   |
-| [Connect a Smart Contract to the Twitter API](https://blog.chain.link/connect-smart-contract-to-twitter-api/)                                                  | Social Media         | Advanced   |
-| [Build an RFID Blockchain Integration With Chainlink External Adapters](https://blog.chain.link/rfid-blockchain-integration-with-chainlink-external-adapters/) | Identification       | Advanced   |
-| [How to Connect a Tesla Vehicle API to a Smart Contract Via a Chainlink External Adapter](https://blog.chain.link/create-tesla-smart-contract-rental/)         | Transportation       | Advanced   |
-| [OAuth and API Authentication in Smart Contracts](https://blog.chain.link/oauth-and-api-authentication-in-smart-contracts-2/)                                  | Security             | Advanced   |
-| [Connect APIs to your Smart Contracts using Chainlink](https://docs.alchemy.com/docs/connect-apis-to-your-smart-contracts-using-chainlink)                     | NFT                  | Advanced   |
-
-#### Automation
-
-| Name                                                                                                                                                                                                   | Type       | Difficulty |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------- | :--------- |
-| [Automation Introduction Video](https://www.youtube.com/watch?v=dj0impNJdls)                                                                                                                           | Automation | Beginner   |
-| [Smart Contract Automation Master Class Module #1](https://youtu.be/D3rMFshrj7c)                                                                                                                       | Automation | Beginner   |
-| [Smart Contract Automation Master Class Module #2](https://youtu.be/UT2qpUh0tmA/)                                                                                                                      | Automation | Beginner   |
-| [Smart Contract Automation Master Class Module #3](https://youtu.be/FirUe1YCcqs)                                                                                                                       | Automation | Beginner   |
-| [Smart Contract Automation Master Class Module #4](https://youtu.be/1a0wguM5Ig0)                                                                                                                       | Automation | Beginner   |
-| [Entropyfi Saves Engineering Hours with Chainlink Automation](https://medium.com/entropyfi/entropyfi-saves-engineering-hours-with-chainlink-keepers-6ec172a76249)                                      | Gaming     | Medium     |
-| [Enabling Limit Orders on CivTrade With Chainlink Automation](https://coinmarketcap.com/community/articles/63638ad4e0e9157c0425aa4b/)                                                                  | Trading    | Medium     |
-| [Pickle Finance UniV3 Jars Powered by Chainlink Automation](https://picklefinance.medium.com/pickle-finance-univ3-jars-powered-by-chainlink-keepers-8ce1756a2497)                                      | Finance    | Medium     |
-| [JamonSwap Introduces New Limit Order Functionality Using Chainlink Automation](https://medium.com/@JamonSwap/jamonswap-introduces-new-limit-order-functionality-using-chainlink-keepers-51bd94d75feb) | DeFi       | Medium     |
-| [How Cratos used Chainlink Automation to automate the token vesting process](https://cratostoken.medium.com/how-cratos-used-chainlink-keepers-to-automate-the-token-vesting-process-69bcb3611161)      | DeFi       | Medium     |
-| [How ApeSwap Integrated Chainlink Automation for BANANA Maximizer Vaults](https://ape-swap.medium.com/how-apeswap-integrated-chainlink-keepers-for-banana-maximizer-vaults-2e88abb34eca)               | DeFi       | Medium     |
-
-### Game resources
-
-- [CryptoZombies](https://cryptozombies.io/)
-- [DamnVulnerableDefi](https://damnvulnerabledefi.xyz/challenges/8.html)
-- [Ethernaut](https://ethernaut.openzeppelin.com/)
-
-### Coding bootcamps
-
-- [ChainShot](https://www.chainshot.com/courses)
-- [Consensys Bootcamp](https://consensys.net/academy/bootcamp/)
-- [Ivan On Tech](https://academy.moralis.io/courses/chainlink-101)
-
-### Starter kits
-
-Our Starter Kits help jumpstart your full-stack development process. You can get starter kits for Brownie (Python), Truffle (Javascript), and Hardhat (Javascript). See the [Engineering Tutorials](https://www.youtube.com/playlist?list=PLVP9aGDn-X0QwJVbQvuKr-zrh2_DV5M6J) playlist to learn more about each kit and how to use them.
-
-- [Chainlink Brownie Starter Kit (Python)](https://github.com/smartcontractkit/chainlink-mix)
-- [Chainlink Truffle Starter Kit (Javascript)](https://github.com/smartcontractkit/truffle-starter-kit)
-- [Chainlink Hardhat Starter Kit (Javascript)](https://github.com/smartcontractkit/hardhat-starter-kit)
-
-### External tutorials
-
-- [Ethereum Developers](https://ethereum.org/en/developers/tutorials/)
-- [useWeb3](https://www.useweb3.xyz/)
-
-### More inspiration
-
-Looking for more ways to use Chainlink? Here are some resources that discuss Chainlink's use cases as well as the winning projects we've had in our previous hackathons. There is also a link to the Marketplace where you can find the latest data provider nodes and explore the network.
-
-- [77 Use Cases by Chainlink](https://blog.chain.link/44-ways-to-enhance-your-smart-contract-with-chainlink/)
-- [Blog posts featuring past hackathons and winners](https://blog.chain.link/?s=hackathon)
-
-## Outreach
-
-The Chainlink community is an inviting group of engineers that is always looking to help users expand their knowledge on Chainlink and solve related issues. Refer back to the [Getting Help](/resources/getting-help) page for the latest information about how to get support.
-
-### Get support
-
-- [Stack Overflow](https://stackoverflow.com/questions/tagged/chainlink)
-- [Stack Exchange Ethereum](https://ethereum.stackexchange.com/questions/tagged/chainlink)
-- [Hackathon Discord](https://discord.gg/h3AvTHj)
-- [Developer Discord](https://discord.gg/2YHSAey)
-
-### Join the community
-
-- [Twitter](https://mobile.twitter.com/chainlink)
-- [Reddit](https://www.reddit.com/r/Chainlink/)
-- [Telegram](https://t.me/chainlinkofficial)
-- [Blog](https://blog.chain.link)
diff --git a/src/features/landing/data/index.ts b/src/features/landing/data/index.ts
index 5f4522ba7d2..70341e37682 100644
--- a/src/features/landing/data/index.ts
+++ b/src/features/landing/data/index.ts
@@ -1,15 +1,15 @@
-import ccipLogo from "../assets/ccip-logo.svg"
-import vrfLogo from "../assets/vrf-logo.svg"
-import functionsLogo from "../assets/functions-logo.svg"
-import automationLogo from "../assets/automation-logo.svg"
-import dataFeedsLogo from "../assets/data-feeds-logo.svg"
-import ccipShape from "../assets/ccip-shape.svg"
-import vrfShape from "../assets/vrf-shape.svg"
-import functionsShape from "../assets/functions-shape.svg"
-import automationShape from "../assets/automation-shape.svg"
-import dataFeedShape from "../assets/data-feeds-shape.svg"
-import dataStreamsLogo from "../assets/data-streams-logo.svg"
-import dataStreamsShape from "../assets/data-streams-shape.svg"
+import ccipLogo from "../../../assets/product-logos/ccip-logo.svg"
+import vrfLogo from "../../../assets/product-logos/vrf-logo.svg"
+import functionsLogo from "../../../assets/product-logos/functions-logo.svg"
+import automationLogo from "../../../assets/product-logos/automation-logo.svg"
+import dataFeedsLogo from "../../../assets/product-logos/data-feeds-logo.svg"
+import ccipShape from "../../../assets/product-logos/ccip-shape.svg"
+import vrfShape from "../../../assets/product-logos/vrf-shape.svg"
+import functionsShape from "../../../assets/product-logos/functions-shape.svg"
+import automationShape from "../../../assets/product-logos/automation-shape.svg"
+import dataFeedShape from "../../../assets/product-logos/data-feeds-shape.svg"
+import dataStreamsLogo from "../../../assets/product-logos/data-streams-logo.svg"
+import dataStreamsShape from "../../../assets/product-logos/data-streams-shape.svg"
 import { ProductCardProps } from "../components/ProductCard"
 
 const baseChains = [
diff --git a/src/features/redirects/redirects.json b/src/features/redirects/redirects.json
index 0b0585d5c9c..a7dd761784d 100644
--- a/src/features/redirects/redirects.json
+++ b/src/features/redirects/redirects.json
@@ -1869,6 +1869,16 @@
       "source": "chainlink-nodes/resources/best-practices-aws",
       "destination": "chainlink-nodes",
       "statuscode": 301
+    },
+    {
+      "source": "getting-started/other-tutorials",
+      "destination": "https://dev.chain.link",
+      "statuscode": 301
+    },
+    {
+      "source": "quickstarts",
+      "destination": "https://dev.chain.link/resources/quickstarts",
+      "statuscode": 301
     }
   ]
 }

From 703d69bd96812ce1b5948c2bcfe765fe997629d0 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Fri, 31 May 2024 10:56:11 -0500
Subject: [PATCH 02/14] Formatting

---
 .../Mobile/ProductNavigation.tsx                 |  4 ++--
 .../Mobile/SubProductContent.tsx                 | 16 +++++++++-------
 src/components/Header/Nav/config.tsx             |  2 +-
 .../common/StreamsLookupInterface.mdx            |  2 +-
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 7eb953b44f9..82a265b8bbe 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -12,8 +12,8 @@ import { SubProductContent } from "./SubProductContent"
 import externalArrow from "../../../../../assets/icons/external-arrow.svg"
 
 type Page = {
-  label: string;
-  href: string;
+  label: string
+  href: string
 }
 
 export type SubProducts = {
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
index b5e598bd463..2892679fdc3 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
@@ -3,8 +3,8 @@ import { BackArrowIcon } from "./BackArrowIcon"
 import styles from "./subProductContent.module.css"
 
 type Page = {
-  label: string;
-  href: string;
+  label: string
+  href: string
 }
 
 type Props = {
@@ -27,12 +27,14 @@ export const SubProductContent = ({ subProducts, onSubproductClick }: Props) =>
       </button>
       {subProducts.items.map(({ label, pages }) => (
         <div key={label}>
-        <h3 key={label} className={clsx(styles.section)}>{label}</h3>
-        {pages?.map(({ label, href }) => (
-          <a key={label} className={clsx(styles.link, "subproduct-link")} href={"/" + href}>
+          <h3 key={label} className={clsx(styles.section)}>
             {label}
-          </a>
-        ))}
+          </h3>
+          {pages?.map(({ label, href }) => (
+            <a key={label} className={clsx(styles.link, "subproduct-link")} href={"/" + href}>
+              {label}
+            </a>
+          ))}
         </div>
       ))}
     </>
diff --git a/src/components/Header/Nav/config.tsx b/src/components/Header/Nav/config.tsx
index abf8dbaab52..13cea8d049c 100644
--- a/src/components/Header/Nav/config.tsx
+++ b/src/components/Header/Nav/config.tsx
@@ -4,7 +4,7 @@ type LinksConfig = {
   actionButton?: { label: string; href: string }
 }
 
-export type Item = { label: string; icon?: string; href: string; }
+export type Item = { label: string; icon?: string; href: string }
 
 export type ProductItem = Item & {
   subProducts?: {
diff --git a/src/features/chainlink-automation/common/StreamsLookupInterface.mdx b/src/features/chainlink-automation/common/StreamsLookupInterface.mdx
index 1a49c28fc13..917424cb2c0 100644
--- a/src/features/chainlink-automation/common/StreamsLookupInterface.mdx
+++ b/src/features/chainlink-automation/common/StreamsLookupInterface.mdx
@@ -19,7 +19,7 @@ Automation network will use this revert to trigger fetching of the specified rep
 | `feeds`        | `String[]` | String list of feed identifiers                                         | e.g. `["feedID1","feedID2",..]` with a maximum of 5 IDs         |
 | `timeParamKey` | `String`   | Specify query type                                                      | `"timestamp"`                                                   |
 | `time`         | `uint256`  | Specify query value                                                     | e.g. `log.timestamp` from the returned Log struct in `checkLog` |
-| `extraData`    | `bytes`    | Any extra data user wants to receive in callback, alongside API bytes[] | e.g. log data                                                  |
+| `extraData`    | `bytes`    | Any extra data user wants to receive in callback, alongside API bytes[] | e.g. log data                                                   |
 
 #### Outputs
 

From 5812b2bf5a0c7135d29d09f263f2da16955f5ad9 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Fri, 31 May 2024 13:30:02 -0500
Subject: [PATCH 03/14] Left burger mobile menu

---
 src/components/Header/Nav/NavBar.tsx          |  4 +--
 .../Nav/ProductNavigation/Mobile/MenuIcon.tsx |  2 +-
 .../Mobile/ProductNavigation.tsx              |  3 +-
 src/components/Header/Nav/navBar.module.css   | 33 ++++++++++++++++++-
 src/content/any-api/getting-started.mdx       |  2 --
 5 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/Header/Nav/NavBar.tsx b/src/components/Header/Nav/NavBar.tsx
index cc9a2d471f9..0cbb4680308 100644
--- a/src/components/Header/Nav/NavBar.tsx
+++ b/src/components/Header/Nav/NavBar.tsx
@@ -82,7 +82,7 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
       <header className={styles.header} ref={navRef}>
         <div className={clsx(styles.navBar, shouldHideHeader && styles.headerHidden)}>
           <div className={styles.container}>
-            <div className={styles.leftSection}>
+            <div className={styles.logoSection}>
               <a rel="noreferrer noopener" className={clsx("home-logo", styles.logo)} href="/">
                 <img
                   alt="Documentation Home"
@@ -93,7 +93,7 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
                 />
               </a>
             </div>
-            <div className={styles.centerSection}>
+            <div className={styles.menuSection}>
               <ProductNavigation
                 path={path}
                 searchTrigger={searchTrigger}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/MenuIcon.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/MenuIcon.tsx
index 10879b7b9c2..f2980057ed1 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/MenuIcon.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/MenuIcon.tsx
@@ -1,5 +1,5 @@
 export const MenuIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"
       clipRule="evenodd"
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 82a265b8bbe..51e98bc9d10 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -10,6 +10,7 @@ import { ProductContent } from "./ProductContent"
 import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
 import externalArrow from "../../../../../assets/icons/external-arrow.svg"
+import { MenuIcon } from "./MenuIcon"
 
 type Page = {
   label: string
@@ -61,7 +62,7 @@ export function ProductNavigation({ productsNav }: Props) {
           className={"text-300"}
           style={{ color: "var(--color-text-label)", fontWeight: "var(--font-weight-medium)" }}
         >
-          Documentation
+          <MenuIcon />
         </span>
         <CaretIcon
           style={{
diff --git a/src/components/Header/Nav/navBar.module.css b/src/components/Header/Nav/navBar.module.css
index ca08c2a07f2..f1ee9e2933c 100644
--- a/src/components/Header/Nav/navBar.module.css
+++ b/src/components/Header/Nav/navBar.module.css
@@ -36,7 +36,7 @@
   transform: translateY(-100%);
 }
 
-.leftSection,
+.logoSection,
 .rightSection {
   display: flex;
   align-items: center;
@@ -293,6 +293,7 @@
     display: flex;
   }
 }
+
 @media screen and (min-width: 1080px) {
   .quickLinksButton {
     display: inline;
@@ -302,3 +303,33 @@
     width: 80%;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-block: var(--space-4x);
+    height: var(--space-16x);
+  }
+
+  .logoSection {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+  }
+
+  .menuSection {
+    order: 1;
+    flex-grow: 0;
+    justify-content: flex-start;
+  }
+
+  .rightSection {
+    order: 3;
+    flex-grow: 0;
+    justify-content: flex-end;
+  }
+}
diff --git a/src/content/any-api/getting-started.mdx b/src/content/any-api/getting-started.mdx
index b005e93d306..3f99f25e1cd 100644
--- a/src/content/any-api/getting-started.mdx
+++ b/src/content/any-api/getting-started.mdx
@@ -136,5 +136,3 @@ To learn more about connecting smart contracts to external APIs, read our blog p
 - [Connect a Smart Contract to the Twitter API](https://blog.chain.link/connect-smart-contract-to-twitter-api/)
 - [Connect a Tesla Vehicle API to a Smart Contract](https://blog.chain.link/create-tesla-smart-contract-rental/)
 - [OAuth and API Authentication in Smart Contracts](https://blog.chain.link/oauth-and-api-authentication-in-smart-contracts-2/)
-
-To explore more applications of external API requests, check out our [other tutorials](/getting-started/other-tutorials/#api-requests).

From fad505cce662dd454e45838e120093861398915a Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Fri, 31 May 2024 14:21:45 -0500
Subject: [PATCH 04/14] Mobile menu

---
 .../ProductNavigation/Mobile/BottomBar.tsx    | 28 ++++++++-----------
 .../Mobile/ProductNavigation.tsx              |  1 -
 .../Mobile/bottomBar.module.css               |  5 +++-
 src/components/Header/Nav/navBar.module.css   | 12 ++++++++
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
index 86552922874..55b4b930b53 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
@@ -3,30 +3,24 @@ import { ResourcesIcon } from "./ResourcesIcon"
 import { Search } from "../../../aiSearch/Search"
 
 const ResourcesButton = () => (
-  <a
-    rel="noreferrer noopener"
-    target="_blank"
-    className="nav-cta"
-    href="https://github.com/smartcontractkit/documentation"
-  >
+  <a rel="noreferrer noopener" target="_blank" href="https://github.com/smartcontractkit/documentation">
     <ResourcesIcon />
-    <span
-      style={{
-        color: "var(--color-text-primary)", // Yes, this is necessary
-      }}
-    >
-      GitHub
-    </span>
-
+    <span style={{ color: "var(--color-text-primary)" }}>GitHub</span>
     <div className={styles.divider} />
   </a>
 )
 
 const SearchButton = () => <Search variant="bottomBar" />
 
+const DeveloperHubButton = () => (
+  <a rel="noreferrer noopener" target="_blank" href="https://dev.chain.link/">
+    <span style={{ color: "var(--color-text-primary)" }}>Developer Hub</span>
+    <div className={styles.divider} />
+  </a>
+)
+
 export const BottomBar = () => {
-  // Additional buttons should be added to this array in order to have the right number of columns in the layout
-  const buttons = [SearchButton, ResourcesButton]
+  const buttons = [<SearchButton />, <ResourcesButton />, <DeveloperHubButton />]
   return (
     <div
       className={styles.bottomBar}
@@ -35,7 +29,7 @@ export const BottomBar = () => {
       }}
     >
       {buttons.map((ButtonComponent, index) => (
-        <ButtonComponent key={index} />
+        <div key={index}>{ButtonComponent}</div>
       ))}
     </div>
   )
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 51e98bc9d10..6d051e7b3f7 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -9,7 +9,6 @@ import { BottomBar } from "./BottomBar"
 import { ProductContent } from "./ProductContent"
 import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
-import externalArrow from "../../../../../assets/icons/external-arrow.svg"
 import { MenuIcon } from "./MenuIcon"
 
 type Page = {
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
index ca31c08fcc0..7f0e5665655 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
@@ -7,6 +7,8 @@
   background-color: var(--color-background-secondary);
   color: var(--color-text-secondary);
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--space-2x);
   align-items: center;
   justify-content: center;
 }
@@ -17,6 +19,7 @@
   align-items: center;
   gap: var(--space-2x);
   height: 100%;
+  width: 100%;
   position: relative;
 }
 
@@ -30,7 +33,7 @@
 
 .divider {
   background-color: var(--blue-200);
-  width: 1px;
+  width: 2px;
   height: 100%;
   align-self: center;
   position: absolute;
diff --git a/src/components/Header/Nav/navBar.module.css b/src/components/Header/Nav/navBar.module.css
index f1ee9e2933c..731e917ab89 100644
--- a/src/components/Header/Nav/navBar.module.css
+++ b/src/components/Header/Nav/navBar.module.css
@@ -332,4 +332,16 @@
     flex-grow: 0;
     justify-content: flex-end;
   }
+
+  .searchTrigger {
+    display: none;
+  }
+
+  .quickLinksWrapper {
+    display: none;
+  }
+
+  .weglotContainer {
+    margin-right: 0;
+  }
 }

From c5c9c8f2b9861f83fde173b950baeb9048ce6c69 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:05:50 -0500
Subject: [PATCH 05/14] Nav improvements

---
 src/components/Header/Nav/NavBar.tsx          |  2 +-
 .../Desktop/ProductNavigation.tsx             | 26 +++++++++----------
 .../ProductNavigation/Mobile/BottomBar.tsx    | 17 +++++-------
 .../Mobile/ProductNavigation.tsx              | 14 +++++-----
 .../Mobile/bottomBar.module.css               | 24 ++++++++---------
 .../Mobile/subProductContent.module.css       |  3 +--
 src/components/Header/Nav/navBar.module.css   | 10 ++-----
 7 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/src/components/Header/Nav/NavBar.tsx b/src/components/Header/Nav/NavBar.tsx
index 0cbb4680308..90768aed403 100644
--- a/src/components/Header/Nav/NavBar.tsx
+++ b/src/components/Header/Nav/NavBar.tsx
@@ -89,7 +89,7 @@ export const NavBar = ({ path, searchTrigger, onHideChange, productsNav, subProd
                   title="Documentation Home"
                   style={{ display: "flex" }}
                   src="/chainlink-docs.svg"
-                  height={28}
+                  height={30}
                 />
               </a>
             </div>
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
index 379dadf70cf..881ebdd83e6 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx
@@ -37,23 +37,23 @@ export const ProductNavigation = ({ path, setNavMenuOpen, productsNav, subProduc
 
   const subProductTrigger = subProductsNav?.find(({ href }) => isMatchedPath(path, href))
 
+  const label = subProductTrigger?.label || "Resources"
+  const icon = subProductTrigger?.label ? subProductTrigger.icon : undefined
+
   return (
     <>
       <Root className={clsx(styles.root, styles.alignLeft)}>
         <List className={styles.list}>
-          {subProductTrigger && subProductsNav && (
-            <>
-              <Item>
-                <RadixTrigger className="nav-subproduct" ref={subProductMenuRef}>
-                  <Trigger icon={subProductTrigger.icon} label={subProductTrigger.label} />
-                </RadixTrigger>
-                <RadixContent className={styles.content}>
-                  <SubProductContent subProductsNav={subProductsNav} />
-                </RadixContent>
-              </Item>
-            </>
-          )}
-
+          <Item>
+            <RadixTrigger className="nav-subproduct" ref={subProductMenuRef}>
+              <Trigger icon={icon} label={label} />
+            </RadixTrigger>
+            {(subProductTrigger || label === "Resources") && subProductsNav && (
+              <RadixContent className={styles.content}>
+                <SubProductContent subProductsNav={subProductsNav} />
+              </RadixContent>
+            )}
+          </Item>
           <Indicator className={styles.indicator}>
             <div className={styles.arrow} />
           </Indicator>
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
index 55b4b930b53..9663fd36f22 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
@@ -6,7 +6,6 @@ const ResourcesButton = () => (
   <a rel="noreferrer noopener" target="_blank" href="https://github.com/smartcontractkit/documentation">
     <ResourcesIcon />
     <span style={{ color: "var(--color-text-primary)" }}>GitHub</span>
-    <div className={styles.divider} />
   </a>
 )
 
@@ -15,22 +14,18 @@ const SearchButton = () => <Search variant="bottomBar" />
 const DeveloperHubButton = () => (
   <a rel="noreferrer noopener" target="_blank" href="https://dev.chain.link/">
     <span style={{ color: "var(--color-text-primary)" }}>Developer Hub</span>
-    <div className={styles.divider} />
   </a>
 )
 
 export const BottomBar = () => {
   const buttons = [<SearchButton />, <ResourcesButton />, <DeveloperHubButton />]
   return (
-    <div
-      className={styles.bottomBar}
-      style={{
-        gridTemplateColumns: `repeat(${buttons.length}, 1fr)`,
-      }}
-    >
-      {buttons.map((ButtonComponent, index) => (
-        <div key={index}>{ButtonComponent}</div>
-      ))}
+    <div className={styles.bottomBar}>
+      <div>
+        {buttons.map((ButtonComponent, index) => (
+          <div key={index}>{ButtonComponent}</div>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 6d051e7b3f7..f6fce4af12b 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -9,7 +9,6 @@ import { BottomBar } from "./BottomBar"
 import { ProductContent } from "./ProductContent"
 import styles from "./productNavigation.module.css"
 import { SubProductContent } from "./SubProductContent"
-import { MenuIcon } from "./MenuIcon"
 
 type Page = {
   label: string
@@ -57,12 +56,13 @@ export function ProductNavigation({ productsNav }: Props) {
   return (
     <Root open={open} onOpenChange={handleOpenChange}>
       <Trigger data-testid="product-navigation-trigger-mobile" className={styles.trigger}>
-        <span
-          className={"text-300"}
-          style={{ color: "var(--color-text-label)", fontWeight: "var(--font-weight-medium)" }}
-        >
-          <MenuIcon />
-        </span>
+        <img
+          alt="Documentation Home"
+          title="Documentation Home"
+          style={{ display: "flex" }}
+          src="/chainlink-docs.svg"
+          height={30}
+        />
         <CaretIcon
           style={{
             color: "var(--color-text-primary)",
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
index 7f0e5665655..430763fce0f 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/bottomBar.module.css
@@ -3,14 +3,21 @@
   bottom: 0;
   left: 0;
   height: 56px;
-  width: 100vw;
+  width: 100%;
   background-color: var(--color-background-secondary);
   color: var(--color-text-secondary);
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: var(--space-2x);
+  display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0 var(--space-8x);
+}
+
+.bottomBar > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2x);
+  width: calc(100% - 2 * var(--space-2x));
 }
 
 .bottomBar :is(button, a) {
@@ -30,12 +37,3 @@
 .back svg {
   fill: var(--color-text-link);
 }
-
-.divider {
-  background-color: var(--blue-200);
-  width: 2px;
-  height: 100%;
-  align-self: center;
-  position: absolute;
-  left: 0;
-}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
index d3c322a51fb..825edfb433f 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
@@ -18,6 +18,5 @@
 
 .link {
   display: block;
-  padding-bottom: var(--space-5x);
-  padding-left: var(--space-5x);
+  padding: var(--space-2x) 0 var(--space-2x) var(--space-5x);
 }
diff --git a/src/components/Header/Nav/navBar.module.css b/src/components/Header/Nav/navBar.module.css
index 731e917ab89..b2764fa7a88 100644
--- a/src/components/Header/Nav/navBar.module.css
+++ b/src/components/Header/Nav/navBar.module.css
@@ -37,6 +37,7 @@
 }
 
 .logoSection,
+.menuSection,
 .rightSection {
   display: flex;
   align-items: center;
@@ -315,10 +316,7 @@
   }
 
   .logoSection {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: auto;
+    display: none;
   }
 
   .menuSection {
@@ -337,10 +335,6 @@
     display: none;
   }
 
-  .quickLinksWrapper {
-    display: none;
-  }
-
   .weglotContainer {
     margin-right: 0;
   }

From 234a5dfdebb4a358df66babb44bc1ce2e4855beb Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:58:13 -0500
Subject: [PATCH 06/14] Temp fix type error

---
 .../Header/Nav/ProductNavigation/Mobile/Category.tsx  | 11 ++++++++++-
 src/components/Header/Nav/config.tsx                  |  7 ++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
index 86eaaa68b3a..f47503b27ef 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
@@ -24,7 +24,16 @@ const Item = React.forwardRef<HTMLAnchorElement, ListItemProps>(
       <button
         className={clsx(styles.link, "product-link")}
         style={{ marginTop: "var(--space-0x)" }}
-        onClick={() => onProductClick(subProducts)}
+        onClick={() =>
+          onProductClick({
+            ...subProducts,
+            items:
+              subProducts.items?.map((item) => ({
+                ...item,
+                href: item.href || "/",
+              })) || [],
+          })
+        }
         data-testid="sub-product-navigation-trigger-mobile"
       >
         {itemComponent}
diff --git a/src/components/Header/Nav/config.tsx b/src/components/Header/Nav/config.tsx
index 13cea8d049c..46ebe493c4b 100644
--- a/src/components/Header/Nav/config.tsx
+++ b/src/components/Header/Nav/config.tsx
@@ -6,10 +6,15 @@ type LinksConfig = {
 
 export type Item = { label: string; icon?: string; href: string }
 
+export type Page = {
+  label: string
+  href: string
+}
+
 export type ProductItem = Item & {
   subProducts?: {
     label: string
-    items: Item[]
+    items?: { label: string; href?: string; pages?: Page[] }[]
   }
 }
 

From f25bf230a5212ba234f75958eef31c5012652ab4 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Mon, 3 Jun 2024 15:05:55 -0500
Subject: [PATCH 07/14] Submenu open for current category

---
 .../Mobile/ProductNavigation.tsx              | 35 +++++++++++++++++--
 .../ProductNavigation/ProductNavigation.tsx   |  2 +-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index f6fce4af12b..0536578a3a0 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -1,7 +1,8 @@
 import * as Dialog from "@radix-ui/react-dialog"
-import React from "react"
+import React, { useEffect } from "react"
 import { ProductsNav } from "../../config"
 import { SearchTrigger } from "../../NavBar"
+import { isMatchedPath } from "../../isMatchedPath"
 import { clsx } from "../../utils"
 import { CaretIcon } from "../CaretIcon"
 import { extendRadixComponent } from "../extendRadixComponent"
@@ -23,6 +24,7 @@ export type SubProducts = {
 type Props = {
   searchTrigger?: SearchTrigger
   productsNav: ProductsNav
+  path: string
 }
 
 const Trigger = extendRadixComponent(Dialog.Trigger)
@@ -30,13 +32,41 @@ const Close = extendRadixComponent(Dialog.Close)
 const Portal = extendRadixComponent(Dialog.Portal)
 const Root = extendRadixComponent(Dialog.Root)
 
-export function ProductNavigation({ productsNav }: Props) {
+export function ProductNavigation({ productsNav, path }: Props) {
   const [open, setOpen] = React.useState(false)
   const [subProducts, setSubProducts] = React.useState<SubProducts | undefined>(undefined)
   const [showSearch, setShowSearch] = React.useState(false)
   const [producsSlidePosition, setProductsSlidePosition] = React.useState<"main" | "submenu">("main")
   const closeButtonRef = React.useRef(null)
 
+  useEffect(() => {
+    const foundSubProduct = productsNav.categories.find((category) =>
+      category.items.some((item) => item.subProducts && isMatchedPath(path, item.href))
+    )
+
+    if (foundSubProduct) {
+      const subProduct = foundSubProduct.items.find((item) => item.subProducts && isMatchedPath(path, item.href))
+
+      if (subProduct?.subProducts?.items) {
+        const safeSubProducts: SubProducts = {
+          label: subProduct.subProducts.label,
+          items: subProduct.subProducts.items.map((item) => ({
+            label: item.label,
+            href: item.href || "#",
+            pages:
+              item.pages?.map((page) => ({
+                label: page.label,
+                href: page.href,
+              })) || [],
+          })),
+        }
+
+        setSubProducts(safeSubProducts)
+        setProductsSlidePosition("submenu")
+      }
+    }
+  }, [path, productsNav])
+
   const onProductClick = React.useCallback((subProducts: SubProducts) => {
     setSubProducts(subProducts)
     setProductsSlidePosition("submenu")
@@ -49,6 +79,7 @@ export function ProductNavigation({ productsNav }: Props) {
   const handleOpenChange = (newOpenState: boolean) => {
     setOpen(newOpenState)
     if (!newOpenState) {
+      setProductsSlidePosition("main")
       setShowSearch(false)
     }
   }
diff --git a/src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx
index 738749a5f7d..e6ef3a5c8f1 100644
--- a/src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx
@@ -14,6 +14,6 @@ type Props = {
 export const ProductNavigation = (props: Props) => (
   <>
     <Desktop {...props} />
-    <Mobile searchTrigger={props.searchTrigger} productsNav={props.productsNav} />
+    <Mobile {...props} />
   </>
 )

From 01dec35b3e9a649f9b24637c3f8deff29df8687a Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Mon, 3 Jun 2024 16:37:39 -0500
Subject: [PATCH 08/14] Add dynamic styling for active link

---
 .../Mobile/ProductNavigation.tsx              |  6 ++-
 .../Mobile/SubProductContent.tsx              | 39 ++++++++++++-------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
index 0536578a3a0..e1e3f6f6a8f 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx
@@ -119,7 +119,11 @@ export function ProductNavigation({ productsNav, path }: Props) {
                   <ProductContent onProductClick={onProductClick} productsNav={productsNav} />
                 </ul>
                 <div className={clsx(styles.subProductContent)}>
-                  <SubProductContent subProducts={subProducts} onSubproductClick={onSubproductClick} />
+                  <SubProductContent
+                    subProducts={subProducts}
+                    onSubproductClick={onSubproductClick}
+                    currentPath={path}
+                  />
                 </div>
               </div>
             </div>
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
index 2892679fdc3..780b3a14d1f 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
@@ -9,16 +9,16 @@ type Page = {
 
 type Props = {
   onSubproductClick: () => void
-  subProducts?:
-    | {
-        label: string
-        items: { label: string; icon?: string; href: string; pages?: Page[] }[]
-      }
-    | undefined
+  subProducts?: {
+    label: string
+    items: { label: string; icon?: string; href: string; pages?: Page[] }[]
+  }
+  currentPath: string
 }
 
-export const SubProductContent = ({ subProducts, onSubproductClick }: Props) => {
+export const SubProductContent = ({ subProducts, onSubproductClick, currentPath }: Props) => {
   if (!subProducts) return null
+
   return (
     <>
       <button key="back" className={styles.back} onClick={onSubproductClick}>
@@ -27,14 +27,23 @@ export const SubProductContent = ({ subProducts, onSubproductClick }: Props) =>
       </button>
       {subProducts.items.map(({ label, pages }) => (
         <div key={label}>
-          <h3 key={label} className={clsx(styles.section)}>
-            {label}
-          </h3>
-          {pages?.map(({ label, href }) => (
-            <a key={label} className={clsx(styles.link, "subproduct-link")} href={"/" + href}>
-              {label}
-            </a>
-          ))}
+          <h3 className={styles.section}>{label}</h3>
+          {pages?.map(({ label, href }) => {
+            const adjustedHref = "/" + href
+            const isActive = currentPath === adjustedHref
+
+            const linkStyle = {
+              backgroundColor: isActive ? "var(--blue-100)" : "transparent",
+              color: isActive ? "var(--blue-600)" : "inherit",
+              fontWeight: isActive ? "500" : "normal",
+            }
+
+            return (
+              <a key={label} style={linkStyle} className={`${styles.link} subproduct-link`} href={adjustedHref}>
+                {label}
+              </a>
+            )
+          })}
         </div>
       ))}
     </>

From 6a25df043b270c734e467f7456e1e3c55a72e072 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:23:59 -0500
Subject: [PATCH 09/14] Normalize URL paths

---
 .../Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
index 780b3a14d1f..bd1bc6ee50f 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/SubProductContent.tsx
@@ -30,7 +30,7 @@ export const SubProductContent = ({ subProducts, onSubproductClick, currentPath
           <h3 className={styles.section}>{label}</h3>
           {pages?.map(({ label, href }) => {
             const adjustedHref = "/" + href
-            const isActive = currentPath === adjustedHref
+            const isActive = currentPath.replace(/\/$/, "") === adjustedHref.replace(/\/$/, "")
 
             const linkStyle = {
               backgroundColor: isActive ? "var(--blue-100)" : "transparent",

From da9a193f884a925c071139556ebf481755a75451 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:17:17 -0500
Subject: [PATCH 10/14] Hide home hero-background on mobile

---
 src/features/landing/sections/HeroCTA.astro | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/features/landing/sections/HeroCTA.astro b/src/features/landing/sections/HeroCTA.astro
index d1d6f1566d1..6c6ed1fc4d2 100644
--- a/src/features/landing/sections/HeroCTA.astro
+++ b/src/features/landing/sections/HeroCTA.astro
@@ -13,7 +13,7 @@ import button from "@chainlink/design-system/button.module.css"
     <a href="/getting-started/conceptual-overview" class={button.primary}> Get Started</a>
     <a href="/resources/create-a-chainlinked-project" class={button.secondary}> Starter Kits</a>
   </div>
-  <div>
+  <div class="hero-image-container">
     <img src="/images/hero-background.svg" alt="" />
   </div>
 </section>
@@ -57,4 +57,10 @@ import button from "@chainlink/design-system/button.module.css"
       flex-wrap: nowrap;
     }
   }
+
+  @media screen and (max-width: 767px) {
+    .hero-image-container {
+      display: none;
+    }
+  }
 </style>

From 18b3875a6dd46156ca1e7cdd2a4fea6879096c0d Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:26:16 -0500
Subject: [PATCH 11/14] Remove back button from docs pages

---
 src/components/PageContent/PageContent.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro
index 5da78083195..5e5689abf6b 100644
--- a/src/components/PageContent/PageContent.astro
+++ b/src/components/PageContent/PageContent.astro
@@ -8,7 +8,6 @@ export type Props = {
 const { titleHeading } = Astro.props
 ---
 
-<BackButton />
 <article id="article">
   <h1 id={titleHeading.slug}>{titleHeading.text}</h1>
   <slot />

From db5190ad5933357247ed450a491b1343cc077ed8 Mon Sep 17 00:00:00 2001
From: Karim <98668332+khadni@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:31:36 -0500
Subject: [PATCH 12/14] Add QS link to mobile nav

---
 src/components/Header/getNavigationProps.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Header/getNavigationProps.ts b/src/components/Header/getNavigationProps.ts
index f988f30a1f8..8660fd4171c 100644
--- a/src/components/Header/getNavigationProps.ts
+++ b/src/components/Header/getNavigationProps.ts
@@ -171,6 +171,11 @@ const docsSections = [
           })),
         },
       },
+      {
+        label: "Quickstarts",
+        href: "/quickstarts",
+        icon: nodesLogo.src,
+      },
       {
         label: "General",
         href: "/resources",

From 693b69b5d7b81ad9e50cae9ff1410f3a31511f56 Mon Sep 17 00:00:00 2001
From: Dwight Lyle <dwightjl@gmail.com>
Date: Tue, 4 Jun 2024 13:39:00 -0600
Subject: [PATCH 13/14] Add remaining logos

---
 src/assets/product-logos/quickstart-logo.svg | 3 +++
 src/components/Header/getNavigationProps.ts  | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/product-logos/quickstart-logo.svg

diff --git a/src/assets/product-logos/quickstart-logo.svg b/src/assets/product-logos/quickstart-logo.svg
new file mode 100644
index 00000000000..907d92761cd
--- /dev/null
+++ b/src/assets/product-logos/quickstart-logo.svg
@@ -0,0 +1,3 @@
+<svg width="247" height="284" viewBox="0 0 247 284" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M123.5 0L0 70.9726V212.918L123.5 283.89L247 212.918V70.9726L123.5 0ZM194.679 182.837L123.523 223.728L52.3663 182.837V101.054L123.523 60.1621L194.679 101.054V182.837Z" fill="#0847F7"/>
+</svg>
diff --git a/src/components/Header/getNavigationProps.ts b/src/components/Header/getNavigationProps.ts
index 8660fd4171c..b9321521ae1 100644
--- a/src/components/Header/getNavigationProps.ts
+++ b/src/components/Header/getNavigationProps.ts
@@ -4,7 +4,9 @@ import functionsLogo from "../../assets/product-logos/functions-logo.svg"
 import automationLogo from "../../assets/product-logos/automation-logo.svg"
 import dataFeedsLogo from "../../assets/product-logos/data-feeds-logo.svg"
 import dataStreamsLogo from "../../assets/product-logos/data-streams-logo.svg"
-import nodesLogo from "../../assets/product-logos/general-logo.svg"
+import generalLogo from "../../assets/product-logos/general-logo.svg"
+import nodesLogo from "../../assets/product-logos/node-logo.svg"
+import quickstartLogo from "../../assets/product-logos/quickstart-logo.svg"
 import { SIDEBAR as sidebar } from "../../config/sidebar.ts"
 
 const desktopSubProductsNav = [
@@ -46,7 +48,7 @@ const desktopSubProductsNav = [
   {
     label: "Quickstarts",
     href: "/quickstarts",
-    icon: nodesLogo.src,
+    icon: quickstartLogo.src,
   },
   {
     label: "Documentation",
@@ -174,11 +176,12 @@ const docsSections = [
       {
         label: "Quickstarts",
         href: "/quickstarts",
-        icon: nodesLogo.src,
+        icon: quickstartLogo.src,
       },
       {
         label: "General",
         href: "/resources",
+        icon: generalLogo.src,
         subProducts: {
           label: "General",
           href: "/resources",

From 144ab50f49f128ef337b63e2a436286a49170e31 Mon Sep 17 00:00:00 2001
From: Dwight Lyle <dwightjl@gmail.com>
Date: Tue, 4 Jun 2024 14:28:02 -0600
Subject: [PATCH 14/14] Swap QS and General logos and nav position

---
 src/assets/product-logos/general-logo.svg       | 17 ++---------------
 src/assets/product-logos/quickstart-logo.svg    | 17 +++++++++++++++--
 .../{general-shape.svg => quickstart-shape.svg} |  0
 src/components/Header/getNavigationProps.ts     | 10 +++++-----
 4 files changed, 22 insertions(+), 22 deletions(-)
 rename src/assets/product-logos/{general-shape.svg => quickstart-shape.svg} (100%)

diff --git a/src/assets/product-logos/general-logo.svg b/src/assets/product-logos/general-logo.svg
index f477dc5a697..907d92761cd 100644
--- a/src/assets/product-logos/general-logo.svg
+++ b/src/assets/product-logos/general-logo.svg
@@ -1,16 +1,3 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3965_21541)">
-<path d="M12.3864 17.0603L24.2373 10.1743V0L19.8963 2.53153L8.06709 9.4217L3.7261 11.9532V17.0383V30.8737V35.9587L8.06709 38.5013L19.8637 45.4465L24.2373 48V37.8277L12.3864 30.8957V17.0603Z" fill="url(#paint0_linear_3965_21541)"/>
-<path d="M36.0882 17.0603L24.2373 10.1743V0L28.5783 2.53153L40.4075 9.4217L44.7485 11.9532V17.0383V30.8737V35.9587L40.4075 38.5013L28.6109 45.4465L24.2373 48V37.8277L36.0882 30.8957V17.0603Z" fill="#385CD3"/>
-<path d="M31.3634 28.0998V19.8745L24.2398 15.7642L17.1162 19.8745V28.0998L24.2398 32.2101L31.3634 28.0998Z" fill="#0C162C"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3965_21541" x1="8.8539" y1="5.99863" x2="32.562" y2="26.2621" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7790E2"/>
-<stop offset="1" stop-color="#486DDC"/>
-</linearGradient>
-<clipPath id="clip0_3965_21541">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+<svg width="247" height="284" viewBox="0 0 247 284" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M123.5 0L0 70.9726V212.918L123.5 283.89L247 212.918V70.9726L123.5 0ZM194.679 182.837L123.523 223.728L52.3663 182.837V101.054L123.523 60.1621L194.679 101.054V182.837Z" fill="#0847F7"/>
 </svg>
diff --git a/src/assets/product-logos/quickstart-logo.svg b/src/assets/product-logos/quickstart-logo.svg
index 907d92761cd..f477dc5a697 100644
--- a/src/assets/product-logos/quickstart-logo.svg
+++ b/src/assets/product-logos/quickstart-logo.svg
@@ -1,3 +1,16 @@
-<svg width="247" height="284" viewBox="0 0 247 284" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M123.5 0L0 70.9726V212.918L123.5 283.89L247 212.918V70.9726L123.5 0ZM194.679 182.837L123.523 223.728L52.3663 182.837V101.054L123.523 60.1621L194.679 101.054V182.837Z" fill="#0847F7"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3965_21541)">
+<path d="M12.3864 17.0603L24.2373 10.1743V0L19.8963 2.53153L8.06709 9.4217L3.7261 11.9532V17.0383V30.8737V35.9587L8.06709 38.5013L19.8637 45.4465L24.2373 48V37.8277L12.3864 30.8957V17.0603Z" fill="url(#paint0_linear_3965_21541)"/>
+<path d="M36.0882 17.0603L24.2373 10.1743V0L28.5783 2.53153L40.4075 9.4217L44.7485 11.9532V17.0383V30.8737V35.9587L40.4075 38.5013L28.6109 45.4465L24.2373 48V37.8277L36.0882 30.8957V17.0603Z" fill="#385CD3"/>
+<path d="M31.3634 28.0998V19.8745L24.2398 15.7642L17.1162 19.8745V28.0998L24.2398 32.2101L31.3634 28.0998Z" fill="#0C162C"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_3965_21541" x1="8.8539" y1="5.99863" x2="32.562" y2="26.2621" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7790E2"/>
+<stop offset="1" stop-color="#486DDC"/>
+</linearGradient>
+<clipPath id="clip0_3965_21541">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/assets/product-logos/general-shape.svg b/src/assets/product-logos/quickstart-shape.svg
similarity index 100%
rename from src/assets/product-logos/general-shape.svg
rename to src/assets/product-logos/quickstart-shape.svg
diff --git a/src/components/Header/getNavigationProps.ts b/src/components/Header/getNavigationProps.ts
index b9321521ae1..56ddc73aa81 100644
--- a/src/components/Header/getNavigationProps.ts
+++ b/src/components/Header/getNavigationProps.ts
@@ -173,11 +173,6 @@ const docsSections = [
           })),
         },
       },
-      {
-        label: "Quickstarts",
-        href: "/quickstarts",
-        icon: quickstartLogo.src,
-      },
       {
         label: "General",
         href: "/resources",
@@ -194,6 +189,11 @@ const docsSections = [
           })),
         },
       },
+      {
+        label: "Quickstarts",
+        href: "/quickstarts",
+        icon: quickstartLogo.src,
+      },
     ],
   },
 ]