Production ready

frontend/components/landing/CompetitorDemoVisual.tsx

@@ -1,11 +1,25 @@
 'use client'
 
 import { motion } from 'framer-motion'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { Bell, ArrowDown } 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 CompetitorDemoVisual() {
   const [phase, setPhase] = useState(0)
+  const [colors, setColors] = useState({ burgundy: '#993350', border: '#27272a' })
+
+  useEffect(() => {
+    setColors({
+      burgundy: resolveHsl('--burgundy'),
+      border: resolveHsl('--border'),
+    })
+  }, [])
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -15,7 +29,7 @@ export function CompetitorDemoVisual() {
   }, [])
 
   return (
-    <div className="relative h-full min-h-[200px] bg-gradient-to-br from-background via-background to-[hsl(var(--primary))]/5 rounded-xl p-4 overflow-hidden">
+    <div className="relative h-full bg-gradient-to-br from-background via-background to-[hsl(var(--primary))]/5 rounded-xl p-4 overflow-hidden">
       {/* Browser Header */}
       <div className="mb-3 flex items-center gap-2 px-2 py-1.5 rounded-md bg-secondary/50 border border-border">
         <div className="flex gap-1">
@@ -36,9 +50,9 @@ export function CompetitorDemoVisual() {
         <motion.div
           className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative overflow-hidden shadow-xl"
           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.5)'
           }}
           transition={{ duration: 0.5 }}
@@ -67,7 +81,7 @@ export function CompetitorDemoVisual() {
                   className="text-3xl font-bold"
                   animate={{
                     textDecoration: phase === 1 ? 'line-through' : 'none',
-                    color: phase === 1 ? 'hsl(var(--burgundy))' : '#f4f4f5'
+                    color: phase === 1 ? colors.burgundy : '#f4f4f5'
                   }}
                 >
                   $99