Progress

frontend/src/components/ui/Header.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import type { AuthUser } from '../../hooks/useAuth';
 import { DownloadIcon } from './icons/DownloadIcon';
 import { BookmarkIcon } from './icons/BookmarkIcon';
-import { MapPinIcon } from './icons/MapPinIcon';
+import { LogoIcon } from './icons/LogoIcon';
 import { CheckIcon } from './icons/CheckIcon';
 import { ClipboardIcon } from './icons/ClipboardIcon';
 import { MenuIcon } from './icons/MenuIcon';
@@ -12,7 +12,7 @@ import { SpinnerIcon } from './icons/SpinnerIcon';
 import UserMenu from './UserMenu';
 import MobileMenu from './MobileMenu';
 
-export type Page = 'home' | 'dashboard' | 'data-sources' | 'faq' | 'saved-searches';
+export type Page = 'home' | 'dashboard' | 'data-sources' | 'faq' | 'saved-searches' | 'pricing';
 
 export default function Header({
   activePage,
@@ -97,7 +97,7 @@ export default function Header({
           className="flex items-center gap-2 hover:opacity-80 transition-opacity"
           onClick={() => onPageChange('home')}
         >
-          <MapPinIcon className="w-5 h-5 text-teal-400" />
+          <LogoIcon className="w-5 h-5 text-teal-400" />
           <span className="font-semibold text-lg">Perfect Postcodes</span>
         </button>
 
@@ -124,6 +124,9 @@ export default function Header({
             <button className={tabClass('faq')} onClick={() => onPageChange('faq')}>
               FAQ
             </button>
+            <button className={tabClass('pricing')} onClick={() => onPageChange('pricing')}>
+              Pricing
+            </button>
           </nav>
         )}
       </div>

frontend/src/components/ui/MobileMenu.tsx

@@ -82,6 +82,7 @@ export default function MobileMenu({
           {user && mobileNavItem('saved-searches', 'Saved')}
           {mobileNavItem('data-sources', 'Data Sources')}
           {mobileNavItem('faq', 'FAQ')}
+          {mobileNavItem('pricing', 'Pricing')}
 
           {/* Dashboard actions */}
           {activePage === 'dashboard' && (

frontend/src/components/ui/TickerValue.tsx

@@ -0,0 +1,39 @@
+const DIGITS = '0123456789';
+const H = 1.15; // digit slot height in em
+
+function Digit({ char, delay, active }: { char: string; delay: number; active: boolean }) {
+  const idx = DIGITS.indexOf(char);
+  if (idx === -1) return <span>{char}</span>;
+
+  const offset = active ? -idx * H : 0;
+
+  return (
+    <span className="inline-block overflow-hidden" style={{ height: `${H}em` }}>
+      <span
+        className="block"
+        style={{
+          transform: `translateY(${offset}em)`,
+          transition: `transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`,
+        }}
+      >
+        {DIGITS.split('').map((d) => (
+          <span key={d} className="block text-center" style={{ height: `${H}em`, lineHeight: `${H}em` }}>
+            {d}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+export function TickerValue({ text, active = true }: { text: string; active?: boolean }) {
+  const chars = text.split('');
+  const len = chars.length;
+  return (
+    <span className="inline-flex" style={{ fontVariantNumeric: 'tabular-nums' }}>
+      {chars.map((ch, i) => (
+        <Digit key={i} char={ch} delay={(len - 1 - i) * 30} active={active} />
+      ))}
+    </span>
+  );
+}