revamp cct concept docs

src/components/CCIP/ChainHero/ChainHero.css

@@ -168,3 +168,46 @@
     grid-column: 1 / -1; /* Span all columns */
   }
 }
+
+/* Pool Programs Styles */
+.ccip-chain-hero__pool-programs-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-3x);
+  width: 100%;
+}
+
+.ccip-chain-hero__pool-program-entry {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1x);
+  min-width: 0; /* Critical: allows flex children to shrink below content size */
+}
+
+.ccip-chain-hero__pool-program-type {
+  font-size: var(--font-size-s);
+  font-weight: normal;
+  color: var(--gray-700);
+  white-space: nowrap;
+  flex-shrink: 0; /* Prevent label from shrinking */
+}
+
+.ccip-chain-hero__pool-program-address {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1x);
+  min-width: 0; /* Allow address container to shrink */
+  flex: 1; /* Take remaining space */
+}
+
+/* Mobile responsive styles for pool programs */
+@media (max-width: 768px) {
+  .ccip-chain-hero__pool-programs-container {
+    grid-template-columns: 1fr; /* Single column on mobile */
+    gap: var(--space-2x);
+  }
+
+  .ccip-chain-hero__pool-program-entry {
+    width: 100%;
+  }
+}

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -14,6 +14,7 @@ import {
 } from "~/features/utils/index.ts"
 import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
 import { getChainTooltip } from "../Tooltip/index.ts"
+import { PoolProgramTooltip } from "../Tooltip/PoolProgramTooltip.tsx"
 import { ExplorerInfo, ChainType } from "@config/types.ts"
 
 interface ChainHeroProps {
@@ -319,6 +320,37 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
               </div>
             )}
 
+            {network.chainType === "solana" && network.poolPrograms && (
+              <div className="ccip-chain-hero__details__item">
+                <div className="ccip-chain-hero__details__label">
+                  Self-service pool programs
+                  <PoolProgramTooltip />
+                </div>
+                <div className="ccip-chain-hero__details__value ccip-chain-hero__pool-programs-container">
+                  {network.poolPrograms.BurnMintTokenPool && (
+                    <div className="ccip-chain-hero__pool-program-entry">
+                      <span className="ccip-chain-hero__pool-program-type">BurnMint:</span>
+                      <Address
+                        endLength={4}
+                        contractUrl={getExplorerAddressUrl(network.explorer)(network.poolPrograms.BurnMintTokenPool)}
+                        address={network.poolPrograms.BurnMintTokenPool}
+                      />
+                    </div>
+                  )}
+                  {network.poolPrograms.LockReleaseTokenPool && (
+                    <div className="ccip-chain-hero__pool-program-entry">
+                      <span className="ccip-chain-hero__pool-program-type">LockRelease:</span>
+                      <Address
+                        endLength={4}
+                        contractUrl={getExplorerAddressUrl(network.explorer)(network.poolPrograms.LockReleaseTokenPool)}
+                        address={network.poolPrograms.LockReleaseTokenPool}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
             {/* Start of new Fee Tokens Group */}
             {network &&
               ((feeTokensWithAddress && feeTokensWithAddress.length > 0) ||

src/components/CCIP/Tooltip/PoolProgramTooltip.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
+
+export const PoolProgramTooltip: React.FC = () => (
+  <Tooltip
+    label=""
+    tip={
+      <div>
+        Official Chainlink self-service pool programs for initializing token pools on Solana.
+        <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+          <li>
+            <strong>BurnMint:</strong> Burns tokens on outbound transfers, mints tokens on inbound transfers
+          </li>
+          <li>
+            <strong>LockRelease:</strong> Locks tokens on outbound transfers, releases tokens on inbound transfers
+          </li>
+        </ul>
+        For hands-on tutorial, see{" "}
+        <a href="/ccip/tutorials/svm/cross-chain-tokens" style={{ color: "var(--blue-500)" }}>
+          Cross-Chain Tokens on Solana
+        </a>
+        .
+      </div>
+    }
+    labelStyle={{
+      marginRight: "8px",
+    }}
+    style={{
+      display: "inline-block",
+      verticalAlign: "middle",
+      marginBottom: "2px",
+      marginLeft: "4px",
+    }}
+    hoverable={true}
+    hideDelay={300}
+  />
+)

src/components/ClickToZoom.astro

@@ -1,20 +1,17 @@
 ---
+import ClickToZoomCustom from "./ClickToZoomCustom.tsx"
+
 export type Props = {
   src: string
   alt?: string
   style?: string
   caption?: string
 }
 const { src, alt, style, caption } = Astro.props as Props
-
-/**
- * This component adds the classNames required by the scripts/click-to-zoom.ts script.
- */
 ---
 
 <div class="click-to-zoom-container">
-  <img src={src} alt={alt} style={style} class="click-to-zoom" data-caption={caption} />
-  {caption && <p class="click-to-zoom-caption">{caption}</p>}
+  <ClickToZoomCustom src={src} alt={alt} style={style} caption={caption} client:only="react" />
 </div>
 
 <style>
@@ -24,59 +21,4 @@ const { src, alt, style, caption } = Astro.props as Props
     align-items: center;
     margin-bottom: 2rem;
   }
-  .click-to-zoom {
-    margin-top: 1em;
-    max-height: 50vh;
-    cursor: zoom-in;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .click-to-zoom-caption {
-    font-size: 0.8rem;
-    text-align: center;
-    margin-top: 0.5rem;
-    color: var(--color-text-secondary);
-  }
-</style>
-<style is:global>
-  #expanded-image-preview {
-    max-height: 90vh;
-    max-width: 95vw;
-  }
-  #expanded-image-wrapper {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    z-index: 100;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    margin: 0;
-    cursor: zoom-out;
-    display: none;
-  }
-  @media (min-width: 50em) {
-    #expanded-image-wrapper {
-      display: flex;
-    }
-  }
-
-  .expanded-image-caption {
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
-    padding: 8px 15px;
-    border-radius: 5px;
-    font-size: 0.9rem;
-    text-align: center;
-    max-width: 80%;
-    z-index: 101;
-    margin-top: 1rem;
-  }
 </style>

src/components/ClickToZoomCustom.module.css

@@ -0,0 +1,131 @@
+/* Thumbnail image styles */
+.thumbnailImage {
+  margin-top: 1em;
+  max-height: 50vh;
+  cursor: zoom-in;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  transition: opacity 0.2s ease;
+  max-width: none !important; /* Override global article * styles */
+}
+
+.thumbnailImage:hover {
+  opacity: 0.9;
+}
+
+.thumbnailImage:focus {
+  outline: 2px solid var(--blue-500);
+  outline-offset: 2px;
+}
+
+/* Caption styles */
+.caption {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 0.5rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0;
+}
+
+/* Modal backdrop */
+.modalBackdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  cursor: zoom-out;
+  overflow: auto;
+}
+
+/* Expanded image styles */
+.expandedImage {
+  max-height: 90vh;
+  max-width: 90vw;
+  object-fit: contain;
+  cursor: zoom-in;
+  transition: transform 0.3s ease;
+  user-select: none;
+  -webkit-user-select: none;
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  margin-top: auto;
+  margin-bottom: auto;
+  transform-origin: center center;
+}
+
+/* Perfect zoom level - not too much, not too little */
+.expandedImage.zoomed {
+  transform: scale(1.3);
+  cursor: zoom-out;
+}
+
+/* Expanded caption */
+.expandedCaption {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 15px;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  text-align: center;
+  max-width: 80%;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .modalBackdrop {
+    padding: 10px;
+  }
+
+  .expandedImage {
+    max-height: 85vh;
+    max-width: 95vw;
+  }
+
+  .expandedImage.zoomed {
+    transform: scale(1.2);
+  }
+
+  .expandedCaption {
+    max-width: 90%;
+    font-size: 0.8rem;
+  }
+}
+
+/* Smooth animations */
+@media (prefers-reduced-motion: no-preference) {
+  .thumbnailImage {
+    transition:
+      opacity 0.2s ease,
+      transform 0.1s ease;
+  }
+
+  .thumbnailImage:active {
+    transform: scale(0.98);
+  }
+
+  .expandedImage {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .thumbnailImage,
+  .expandedImage {
+    transition: none;
+  }
+}