V48 (impl-only): Neon-highlight AssetPacks and Bitcoin in hero description

Copy uses Buy them with Bitcoin; AssetPacks glow purple and Bitcoin glow orange in the marketing body.

Author: geraldarthurdavis

uapi/components/bitcode/layout/BitcodePublicCopy/bitcode-public-copy.ts

@@ -2,7 +2,11 @@ export const BITCODE_PUBLIC_COPY = {
   eyebrow: 'Buy and sell measured AssetPacks',
   headline: "AIs trade technical knowledge with Bitcode's on-chain marketplace.",
   description:
-    'Make AssetPacks from source-code, exposing only IP you confirm, to deposit them for purchase. Buy AssetPacks with Bitcoin to consume the specific knowledge you request. All running on fully open-source, proven, and ledgerized infrastructure.',
+    'Make AssetPacks from source-code, exposing only IP you confirm, to deposit them for purchase. Buy them with Bitcoin to consume the specific knowledge you request. All running on fully open-source, proven, and ledgerized infrastructure.',
+  descriptionHighlights: [
+    { text: 'AssetPacks', tone: 'purple' },
+    { text: 'Bitcoin', tone: 'orange' },
+  ],
   capabilityChips: [
     'Synthesize Options',
     'Deposit AssetPacks',

uapi/components/marketing/MarketingLandingHero/MarketingLandingHero.tsx

@@ -19,6 +19,39 @@ import {
   productPillars,
 } from '@/components/marketing/MarketingLandingShared/MarketingLandingShared';
 
+const DESCRIPTION_HIGHLIGHT_CLASS: Record<'purple' | 'orange', string> = {
+  purple:
+    'font-semibold text-fuchsia-200 [text-shadow:0_0_12px_rgba(232,121,249,0.75),0_0_28px_rgba(192,132,252,0.45)]',
+  orange:
+    'font-semibold text-orange-200 [text-shadow:0_0_12px_rgba(251,146,60,0.75),0_0_28px_rgba(251,191,36,0.4)]',
+};
+
+function renderDescriptionWithHighlights(
+  body: string,
+  highlights: ReadonlyArray<{ text: string; tone: 'purple' | 'orange' }>,
+) {
+  if (!highlights.length) return body;
+
+  const pattern = new RegExp(
+    `(${highlights.map((entry) => entry.text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`,
+    'g',
+  );
+  const toneByText = new Map(highlights.map((entry) => [entry.text, entry.tone]));
+
+  return body.split(pattern).map((part, index) => {
+    if (!part) return null;
+    const tone = toneByText.get(part);
+    if (!tone) {
+      return <React.Fragment key={`desc-${index}`}>{part}</React.Fragment>;
+    }
+    return (
+      <span key={`desc-${part}-${index}`} className={DESCRIPTION_HIGHLIGHT_CLASS[tone]}>
+        {part}
+      </span>
+    );
+  });
+}
+
 /** CTA under each pillar — order and colors match Sell · Buy · Settle columns. */
 const pillarCtas = [
   {
@@ -72,7 +105,10 @@ export const MarketingLandingHero = memo(function MarketingLandingHero() {
           </div>
         </h1>
         <p className="max-w-[42rem] text-[17px] font-medium leading-[1.5] tracking-[-0.015em] text-white/90 [text-shadow:0_0_18px_rgba(103,254,183,0.05)] phone:text-[19px] tablet:text-[21px]">
-          {BITCODE_PUBLIC_COPY.description}
+          {renderDescriptionWithHighlights(
+            BITCODE_PUBLIC_COPY.description,
+            BITCODE_PUBLIC_COPY.descriptionHighlights,
+          )}
         </p>
       </div>
 

uapi/tests/marketingLandingPage.test.tsx

@@ -112,9 +112,15 @@ describe('MarketingLandingPage', () => {
     expect(screen.getByText(/Mint volume from Final Fit/i)).toBeInTheDocument();
     expect(screen.getByText('On-chain')).toBeInTheDocument();
     expect(
-      screen.getByText(
-        /Make AssetPacks from source-code, exposing only IP you confirm/i,
-      ),
+      screen.getByText((_, node) => {
+        if (node?.tagName !== 'P') return false;
+        const text = node.textContent ?? '';
+        return (
+          text.includes('Make AssetPacks from source-code') &&
+          text.includes('Buy them with Bitcoin') &&
+          text.includes('ledgerized infrastructure')
+        );
+      }),
     ).toBeInTheDocument();
     expect(screen.getByText('Synthesize Options')).toBeInTheDocument();
     expect(screen.getByText('Deposit AssetPacks')).toBeInTheDocument();