Add comprehensive /features page + allow Unsplash imagery

components/admin/cost-chart.tsx

@@ -29,8 +29,8 @@ export function CostChart({ data }: { data: CostPoint[] }) {
           contentStyle={{ fontSize: 12, borderRadius: 8 }}
         />
         <Legend wrapperStyle={{ fontSize: 12 }} />
-        {/* Wix-palette data series: Wix Blue + Deep Purple */}
-        <Bar dataKey="openai" name="OpenAI" stackId="a" fill="#116DFF" radius={[0, 0, 0, 0]} />
+        {/* Data series: brand orange + deep purple */}
+        <Bar dataKey="openai" name="OpenAI" stackId="a" fill="#E65100" radius={[0, 0, 0, 0]} />
         <Bar dataKey="elevenlabs" name="ElevenLabs" stackId="a" fill="#3910ED" radius={[6, 6, 0, 0]} />
       </BarChart>
     </ResponsiveContainer>

components/admin/ui/chart-theme.ts

@@ -1,11 +1,11 @@
-// Wix-aligned chart palette. Series 1 = Wix Blue, series 2 = deep purple,
-// plus success/warning for status-coded series. Kept hex (Recharts needs concrete
+// Chart palette. Series 1 = brand orange, series 2 = deep purple, plus
+// success/amber for status-coded series. Kept hex (Recharts needs concrete
 // colors), mirroring the design tokens in app/globals.css.
 export const CHART = {
-  brand: "#116DFF",
+  brand: "#E65100",
   brand2: "#3910ED",
   success: "#00C271",
-  warning: "#FF5500",
+  warning: "#F59E0B",
   ink: "#0B0B0B",
   muted: "#6A6A6A",
   grid: "#E4E4E4",
@@ -14,7 +14,7 @@ export const CHART = {
 // Tier colors for the plan-distribution donut.
 export const TIER_COLORS: Record<string, string> = {
   free: "#9AA0A6",
-  creator: "#116DFF",
+  creator: "#E65100",
   pro: "#3910ED",
   agency: "#0B0B0B",
 };

components/app/team-client.tsx

@@ -290,7 +290,7 @@ function BrandingCard({ orgId, branding }: { orgId: string; branding: Branding |
               </div>
             </div>
             {primaryColor.trim() && !previewHsl && (
-              <p className="text-xs text-warning">Enter a 6-digit hex colour (e.g. #116DFF).</p>
+              <p className="text-xs text-warning">Enter a 6-digit hex colour (e.g. #E65100).</p>
             )}
           </div>
           <div className="space-y-2">

components/app/waveform-player.tsx

@@ -85,7 +85,7 @@ export function WaveformPlayer({
     ctx.clearRect(0, 0, w, h);
 
     const styles = getComputedStyle(canvas);
-    const played = `hsl(${styles.getPropertyValue("--brand").trim() || "217 100% 53%"})`;
+    const played = `hsl(${styles.getPropertyValue("--brand").trim() || "21 100% 45%"})`;
     const unplayed = `hsl(${styles.getPropertyValue("--border").trim() || "0 0% 89%"})`;
 
     const n = waveform.length;

components/marketing/site-footer.tsx

@@ -26,6 +26,7 @@ export function SiteFooter() {
               ["Features", "/#features"],
               ["Pricing", "/pricing"],
               ["FAQ", "/faq"],
+              ["About", "/about"],
             ]}
           />
           <FooterCol

components/marketing/site-header.tsx

@@ -15,9 +15,10 @@ export function SiteHeader() {
 
         <nav className="hidden items-center gap-8 text-sm font-medium text-muted-foreground md:flex">
           <Link href="/#how-it-works" className="transition-colors hover:text-foreground">How it works</Link>
-          <Link href="/#features" className="transition-colors hover:text-foreground">Features</Link>
+          <Link href="/features" className="transition-colors hover:text-foreground">Features</Link>
           <Link href="/pricing" className="transition-colors hover:text-foreground">Pricing</Link>
           <Link href="/faq" className="transition-colors hover:text-foreground">FAQ</Link>
+          <Link href="/about" className="transition-colors hover:text-foreground">About</Link>
         </nav>
 
         <div className="flex items-center gap-2">