update

.prettierignore

@@ -1,6 +1,9 @@
 dist
 .cache
 .test
+.vercel
+.astro
+temp
 node_modules
 .github
 .changeset

src/components/CCIP/TutorialBlockchainSelector/SetPoolStep.tsx

@@ -34,10 +34,12 @@ export const SetPoolStep = ({ chain }: SetPoolStepProps) => {
         >
           <ol className={styles.instructions}>
             <li>
-              In the "Deploy & Run Transactions" tab, select the <strong>TokenAdminRegistry</strong> contract in the <i>Contracts</i> drop-down list.
+              In the "Deploy & Run Transactions" tab, select the <strong>TokenAdminRegistry</strong> contract in the{" "}
+              <i>Contracts</i> drop-down list.
             </li>
             <li>
-              Next to the <b>At Address</b> button, fill in the following contract address, and then click the <b>At Address</b> button.
+              Next to the <b>At Address</b> button, fill in the following contract address, and then click the{" "}
+              <b>At Address</b> button.
               <div className={styles.contractInfo}>
                 <strong>Contract:</strong> TokenAdminRegistry
                 <NetworkAddress type="tokenAdminRegistry" chain={chain} />

src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css

@@ -192,7 +192,6 @@
 .arrowContainer {
   --touch-target-size: 44px;
   --animation-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --arrow-rotation: 0deg;
 
   display: flex;
   align-items: center;
@@ -202,37 +201,64 @@
   margin-inline: auto;
   padding-block: 0;
   padding-inline: 1rem;
-  cursor: default;
   position: relative;
-  outline: none;
-  writing-mode: horizontal-tb;
-  text-orientation: mixed;
-
-  /* Performance optimizations */
-  contain: layout style;
-  view-transition-name: arrow;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  -webkit-font-smoothing: antialiased;
 
-  transition: transform 0.2s var(--animation-timing);
-}
-
-/* RTL and vertical writing mode support */
-[dir="rtl"] .arrowContainer,
-[writing-mode="vertical-rl"] .arrowContainer {
-  transform: rotate(var(--arrow-rotation));
+  /* Make it purely decorative */
+  pointer-events: none;
+  user-select: none;
 }
 
 .arrow {
   color: var(--color-text-secondary);
-  transition: all 0.3s var(--animation-timing);
-  will-change: transform, opacity;
+  opacity: 0.7;
+  transition: opacity 0.3s var(--animation-timing);
 }
 
 .arrowGroup {
   transform-origin: center;
-  transition: transform 0.6s var(--animation-timing);
+}
+
+/* Subtle animation */
+@media (prefers-reduced-motion: no-preference) {
+  .arrowPath {
+    opacity: 0.7;
+    animation: subtlePulse 3s var(--animation-timing) infinite;
+  }
+
+  .arrowLine {
+    opacity: 0.5;
+    animation: subtlePulse 3s var(--animation-timing) infinite;
+  }
+
+  .arrowPath:first-child {
+    animation-delay: 0s;
+  }
+
+  .arrowPath:last-child {
+    animation-delay: 1.5s;
+  }
+
+  @keyframes subtlePulse {
+    0%,
+    100% {
+      opacity: 0.7;
+      transform: translateX(0);
+    }
+    50% {
+      opacity: 0.9;
+      transform: translateX(1px);
+    }
+  }
+}
+
+/* RTL Support */
+[dir="rtl"] .arrowContainer {
+  transform: scaleX(-1);
+}
+
+/* Vertical writing modes */
+[writing-mode="vertical-rl"] .arrowContainer {
+  transform: rotate(90deg);
 }
 
 /* Interactive States */

src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx

@@ -145,18 +145,9 @@ export const TutorialBlockchainSelector = () => {
 
             <div
               className={styles.arrowContainer}
-              role="status"
-              aria-live="polite"
-              aria-atomic="true"
-              aria-label="Bidirectional token transfer enabled"
-              tabIndex={0}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault()
-                  // Toggle focus state for visual feedback
-                  e.currentTarget.classList.toggle(styles.focused)
-                }
-              }}
+              role="presentation"
+              aria-hidden="true"
+              style={{ pointerEvents: "none" }}
             >
               <svg
                 className={styles.arrow}
@@ -165,7 +156,6 @@ export const TutorialBlockchainSelector = () => {
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
               >
                 <defs>
                   <linearGradient id="arrow-gradient" x1="0%" y1="50%" x2="100%" y2="50%">

src/components/QuickLinks/sections/ProductChainTable.tsx

@@ -31,8 +31,8 @@ const handleLinkClick = (productTitle: string, network: string, url: string) =>
   window.dataLayer.push({
     event: "quick_link_clicked",
     product: productTitle,
-    network: network,
-    url: url,
+    network,
+    url,
   })
 }