Production ready

frontend/components/landing/PolicyDemoVisual.tsx

@@ -4,8 +4,24 @@ import { motion } from 'framer-motion'
 import { useState, useEffect } from 'react'
 import { FileCheck, Check } from 'lucide-react'
 
+function resolveHsl(cssVar: string): string {
+  if (typeof window === 'undefined') return 'transparent'
+  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim()
+  return value ? `hsl(${value})` : 'transparent'
+}
+
 export function PolicyDemoVisual() {
   const [phase, setPhase] = useState(0)
+  const [colors, setColors] = useState({ burgundy: '#993350', teal: '#2e6b6a', border: '#27272a', mutedFg: '#aba49d' })
+
+  useEffect(() => {
+    setColors({
+      burgundy: resolveHsl('--burgundy'),
+      teal: resolveHsl('--teal'),
+      border: resolveHsl('--border'),
+      mutedFg: resolveHsl('--muted-foreground'),
+    })
+  }, [])
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -15,7 +31,7 @@ export function PolicyDemoVisual() {
   }, [])
 
   return (
-    <div className="relative h-full min-h-[200px] bg-gradient-to-br from-background via-background to-[hsl(var(--burgundy))]/5 rounded-xl p-4 overflow-hidden">
+    <div className="relative h-full bg-gradient-to-br from-background via-background to-[hsl(var(--burgundy))]/5 rounded-xl p-4 overflow-hidden">
       {/* Document Header */}
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -25,9 +41,9 @@ export function PolicyDemoVisual() {
         <motion.div
           className="px-2 py-0.5 rounded-full border text-[9px] font-bold"
           animate={{
-            borderColor: phase === 1 ? 'hsl(var(--teal))' : 'hsl(var(--border))',
-            backgroundColor: phase === 1 ? 'hsl(var(--teal) / 0.1)' : 'transparent',
-            color: phase === 1 ? 'hsl(var(--teal))' : 'hsl(var(--muted-foreground))'
+            borderColor: phase === 1 ? colors.teal : colors.border,
+            backgroundColor: phase === 1 ? `${colors.teal}1a` : 'rgba(0,0,0,0)',
+            color: phase === 1 ? colors.teal : colors.mutedFg
           }}
           transition={{ duration: 0.5 }}
         >
@@ -39,9 +55,9 @@ export function PolicyDemoVisual() {
       <motion.div
         className="space-y-2 p-3 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden"
         animate={{
-          borderColor: phase === 1 ? 'hsl(var(--burgundy))' : '#27272a',
+          borderColor: phase === 1 ? colors.burgundy : colors.border,
           boxShadow: phase === 1
-            ? '0 0 20px hsl(var(--burgundy) / 0.2)'
+            ? `0 0 20px ${colors.burgundy}33`
             : '0 1px 3px rgba(0,0,0,0.2)'
         }}
         transition={{ duration: 0.5 }}
@@ -63,10 +79,10 @@ export function PolicyDemoVisual() {
             >
               <motion.p
                 animate={{
-                  backgroundColor: phase === 1 ? 'hsl(var(--burgundy) / 0.1)' : 'transparent',
+                  backgroundColor: phase === 1 ? `${colors.burgundy}1a` : 'rgba(0,0,0,0)',
                   paddingLeft: phase === 1 ? '4px' : '0px',
                   paddingRight: phase === 1 ? '4px' : '0px',
-                  color: phase === 1 ? 'hsl(var(--burgundy))' : 'inherit',
+                  color: phase === 1 ? colors.burgundy : 'inherit',
                   fontWeight: phase === 1 ? 600 : 400
                 }}
                 transition={{ duration: 0.4 }}