Production ready

frontend/components/landing/SEODemoVisual.tsx

@@ -4,8 +4,23 @@ import { motion } from 'framer-motion'
 import { useState, useEffect } from 'react'
 import { TrendingDown, TrendingUp } 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 SEODemoVisual() {
   const [phase, setPhase] = useState(0)
+  const [colors, setColors] = useState({ burgundy: '#993350', border: '#27272a', background: '#0c0b09' })
+
+  useEffect(() => {
+    setColors({
+      burgundy: resolveHsl('--burgundy'),
+      border: resolveHsl('--border'),
+      background: resolveHsl('--background'),
+    })
+  }, [])
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -18,7 +33,7 @@ export function SEODemoVisual() {
   const newMeta = "Best enterprise software for teams of all sizes. Try free for 30 days. Now with AI-powered analytics and real-time collaboration."
 
   return (
-    <div className="relative h-full min-h-[200px] bg-gradient-to-br from-background via-background to-[hsl(var(--teal))]/5 rounded-xl p-4 overflow-hidden">
+    <div className="relative h-full bg-gradient-to-br from-background via-background to-[hsl(var(--teal))]/5 rounded-xl p-4 overflow-hidden">
       {/* SERP Result */}
       <div className="space-y-4">
         {/* Ranking Indicator */}
@@ -29,8 +44,8 @@ export function SEODemoVisual() {
           <motion.div
             className="flex items-center gap-1 px-2 py-1 rounded-full bg-background border border-border"
             animate={{
-              borderColor: phase === 0 ? 'hsl(var(--border))' : 'hsl(var(--burgundy))',
-              backgroundColor: phase === 0 ? 'hsl(var(--background))' : 'hsl(var(--burgundy) / 0.1)'
+              borderColor: phase === 0 ? colors.border : colors.burgundy,
+              backgroundColor: phase === 0 ? colors.background : `${colors.burgundy}1a`
             }}
             transition={{ duration: 0.5 }}
           >
@@ -59,10 +74,10 @@ export function SEODemoVisual() {
         <motion.div
           className="space-y-2 p-3 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
           animate={{
-            borderColor: phase === 0 ? '#27272a' : 'hsl(var(--burgundy))',
+            borderColor: phase === 0 ? colors.border : colors.burgundy,
             boxShadow: phase === 0
               ? '0 1px 3px rgba(0,0,0,0.2)'
-              : '0 0 20px hsl(var(--burgundy) / 0.2)'
+              : `0 0 20px ${colors.burgundy}33`
           }}
           transition={{ duration: 0.5 }}
         >
@@ -86,8 +101,8 @@ export function SEODemoVisual() {
           >
             <motion.span
               animate={{
-                backgroundColor: phase === 1 ? 'hsl(var(--burgundy) / 0.1)' : 'transparent',
-                color: phase === 1 ? 'hsl(var(--burgundy))' : 'inherit'
+                backgroundColor: phase === 1 ? `${colors.burgundy}1a` : 'rgba(0,0,0,0)',
+                color: phase === 1 ? colors.burgundy : 'inherit'
               }}
               transition={{ duration: 0.5 }}
               className="inline-block rounded px-0.5"