@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/components/ui/animation/animated-container.js

@@ -3,9 +3,15 @@ import { cn } from '../../../lib/utils'
 import { useAnimationProfile } from '../../../hooks/use-animation-profile'
 
 export interface AnimatedContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  animation?) => void
-  onAnimationEnd?) => void
-  children}
+  animation?: 'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce' | 'none'
+  duration?: 'fast' | 'normal' | 'slow'
+  easing?: 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce'
+  delay?: number
+  stagger?: number
+  onAnimationStart?: () => void
+  onAnimationEnd?: () => void
+  children: React.ReactNode
+}
 
 export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerProps>(
   (
@@ -59,11 +65,12 @@ export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerPro
         element.style.transform = getInitialTransform(animation)
 
         // Apply animation
-        const animationOptions= {
-          duration) * 1000,
-          easing,
-          delay) * 1000,
-          fill}
+        const animationOptions: KeyframeAnimationOptions = {
+          duration: parseFloat(optimizedDuration) * 1000,
+          easing: optimizedEasing,
+          delay: (delay + stagger) * 1000,
+          fill: 'forwards'
+        }
 
         const keyframes = getKeyframes(animation)
         const anim = element.animate(keyframes, animationOptions)
@@ -86,30 +93,45 @@ export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerPro
       }
     }, [animation, optimizedDuration, optimizedEasing, delay, stagger, shouldDisable, onAnimationStart, onAnimationEnd])
 
-    const getInitialTransform = (anim)=> {
+    const getInitialTransform = (anim: string): string => {
       switch (anim) {
-        case 'slideIn')'
-        case 'scaleIn')'
-        case 'bounce')'
-        default}
+        case 'slideIn':
+          return 'translateX(-100%)'
+        case 'scaleIn':
+          return 'scale(0.8)'
+        case 'bounce':
+          return 'translateY(-20px)'
+        default:
+          return 'none'
+      }
     }
 
-    const getKeyframes = (anim)] => {
+    const getKeyframes = (anim: string): Keyframe[] => {
       switch (anim) {
-        case 'fadeIn', transform},
-            { opacity, transform}
+        case 'fadeIn':
+          return [
+            { opacity: 0, transform: 'none' },
+            { opacity: 1, transform: 'none' }
           ]
-        case 'slideIn', transform)' },
-            { opacity, transform)' }
+        case 'slideIn':
+          return [
+            { opacity: 0, transform: 'translateX(-100%)' },
+            { opacity: 1, transform: 'translateX(0)' }
           ]
-        case 'scaleIn', transform)' },
-            { opacity, transform)' }
+        case 'scaleIn':
+          return [
+            { opacity: 0, transform: 'scale(0.8)' },
+            { opacity: 1, transform: 'scale(1)' }
           ]
-        case 'bounce', transform)' },
-            { opacity, transform)' }
+        case 'bounce':
+          return [
+            { opacity: 0, transform: 'translateY(-20px)' },
+            { opacity: 1, transform: 'translateY(0)' }
           ]
-        default},
-            { opacity}
+        default:
+          return [
+            { opacity: 0 },
+            { opacity: 1 }
           ]
       }
     }
@@ -118,8 +140,9 @@ export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerPro
       'coach-stan-animation-base',
       animationClasses,
       {
-        'opacity-0',
-        'pointer-events-none'},
+        'opacity-0': !hasAnimated && !shouldDisable,
+        'pointer-events-none': isAnimating
+      },
       className
     )
 
@@ -128,9 +151,9 @@ export const AnimatedContainer = forwardRef<HTMLDivElement, AnimatedContainerPro
         ref={finalRef}
         className={containerClassName}
         style={{
-          '--animation-duration',
-          '--animation-easing',
-          '--animation-delay'}s`
+          '--animation-duration': optimizedDuration,
+          '--animation-easing': optimizedEasing,
+          '--animation-delay': `${delay + stagger}s`
         } as React.CSSProperties}
         {...props}
       >

package/dist/components/ui/animation/staggered-container.esm.js

@@ -3,9 +3,13 @@ import { cn } from '../../../lib/utils'
 import { AnimatedContainer, AnimatedContainerProps } from './animated-container'
 
 export interface StaggeredContainerProps extends Omit<AnimatedContainerProps, 'children'> {
-  children}
+  children: React.ReactNode
+  staggerDelay?: number
+  staggerDirection?: 'forward' | 'reverse' | 'center'
+  staggerEasing?: 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut'
+}
 
-export const StaggeredContainer= ({
+export const StaggeredContainer: React.FC<StaggeredContainerProps> = ({
   children,
   staggerDelay = 0.1,
   staggerDirection = 'forward',
@@ -16,16 +20,21 @@ export const StaggeredContainer= ({
   const childrenArray = Children.toArray(children)
   const totalChildren = childrenArray.length
 
-  const getStaggerDelay = (index)=> {
+  const getStaggerDelay = (index: number): number => {
     switch (staggerDirection) {
-      case 'reverse') * staggerDelay
-      case 'center'= Math.floor(totalChildren / 2)
+      case 'reverse':
+        return (totalChildren - 1 - index) * staggerDelay
+      case 'center':
+        const centerIndex = Math.floor(totalChildren / 2)
         const distanceFromCenter = Math.abs(index - centerIndex)
         return distanceFromCenter * staggerDelay
-      case 'forward'}
+      case 'forward':
+      default:
+        return index * staggerDelay
+    }
   }
 
-  const renderChild = (child, index)=> {
+  const renderChild = (child: React.ReactNode, index: number): ReactElement | null => {
     if (!isValidElement(child)) {
       return null
     }
@@ -34,8 +43,8 @@ export const StaggeredContainer= ({
     if (child.type === AnimatedContainer) {
       return cloneElement(child, {
         ...child.props,
-        stagger),
-        key}`
+        stagger: getStaggerDelay(index),
+        key: `staggered-${index}`
       })
     }
 

package/dist/components/ui/animation/staggered-container.js

@@ -3,9 +3,13 @@ import { cn } from '../../../lib/utils'
 import { AnimatedContainer, AnimatedContainerProps } from './animated-container'
 
 export interface StaggeredContainerProps extends Omit<AnimatedContainerProps, 'children'> {
-  children}
+  children: React.ReactNode
+  staggerDelay?: number
+  staggerDirection?: 'forward' | 'reverse' | 'center'
+  staggerEasing?: 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut'
+}
 
-export const StaggeredContainer= ({
+export const StaggeredContainer: React.FC<StaggeredContainerProps> = ({
   children,
   staggerDelay = 0.1,
   staggerDirection = 'forward',
@@ -16,16 +20,21 @@ export const StaggeredContainer= ({
   const childrenArray = Children.toArray(children)
   const totalChildren = childrenArray.length
 
-  const getStaggerDelay = (index)=> {
+  const getStaggerDelay = (index: number): number => {
     switch (staggerDirection) {
-      case 'reverse') * staggerDelay
-      case 'center'= Math.floor(totalChildren / 2)
+      case 'reverse':
+        return (totalChildren - 1 - index) * staggerDelay
+      case 'center':
+        const centerIndex = Math.floor(totalChildren / 2)
         const distanceFromCenter = Math.abs(index - centerIndex)
         return distanceFromCenter * staggerDelay
-      case 'forward'}
+      case 'forward':
+      default:
+        return index * staggerDelay
+    }
   }
 
-  const renderChild = (child, index)=> {
+  const renderChild = (child: React.ReactNode, index: number): ReactElement | null => {
     if (!isValidElement(child)) {
       return null
     }
@@ -34,8 +43,8 @@ export const StaggeredContainer= ({
     if (child.type === AnimatedContainer) {
       return cloneElement(child, {
         ...child.props,
-        stagger),
-        key}`
+        stagger: getStaggerDelay(index),
+        key: `staggered-${index}`
       })
     }
 

package/dist/components/ui/animation-demo.esm.js

@@ -10,7 +10,7 @@ import {
 } from './animation'
 
 
-export const AnimationDemo= () => {
+export const AnimationDemo: React.FC = () => {
   const [currentAnimation, setCurrentAnimation] = useState<'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce'>('fadeIn')
   const [isAnimating, setIsAnimating] = useState(false)
   
@@ -18,13 +18,13 @@ export const AnimationDemo= () => {
   const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode()
 
   const animations = [
-    { key, label, icon},
-    { key, label, icon},
-    { key, label, icon},
-    { key, label, icon}
+    { key: 'fadeIn' as const, label: 'Fade In', icon: '✨' },
+    { key: 'slideIn' as const, label: 'Slide In', icon: '➡️' },
+    { key: 'scaleIn' as const, label: 'Scale In', icon: '🔍' },
+    { key: 'bounce' as const, label: 'Bounce', icon: '🎾' }
   ]
 
-  const handleAnimationChange = (animation) => {
+  const handleAnimationChange = (animation: typeof currentAnimation) => {
     setCurrentAnimation(animation)
     setIsAnimating(true)
     
@@ -33,24 +33,31 @@ export const AnimationDemo= () => {
   }
 
   const performanceIndicators = [
-    { label, value, unit, color},
-    { label, value) , unit, color},
-    { label, value) , unit, color}
+    { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
+    { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
+    { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
   ]
 
   return (
     <div className="space-y-6 p-6">
       <div className="text-center">
         <h1 className="text-3xl font-bold mb-2">Mobile-First Animation System</h1>
-        <p className="text-gray-600 dark}
+        <p className="text-gray-600 dark:text-gray-400">
+          Device-specific animations with performance optimization and battery awareness
+        </p>
+      </div>
+
+      {/* Performance Metrics */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Performance Metrics</h2>
-        <div className="grid grid-cols-1 md) => (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {performanceIndicators.map((indicator) => (
             <div key={indicator.label} className="text-center">
               <div className={`text-2xl font-bold text-${indicator.color}-600`}>
                 {indicator.value}{indicator.unit}
               </div>
-              <div className="text-sm text-gray-600 dark}
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {indicator.label}
               </div>
             </div>
           ))}
@@ -58,18 +65,21 @@ export const AnimationDemo= () => {
         
         <div className="mt-4 space-y-2">
           <div className="flex items-center justify-between">
-            <span>Performance Mode={performanceMode === 'high' ? 'default' === 'medium' ? 'secondary' }>
+            <span>Performance Mode:</span>
+            <Badge variant={performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive'}>
               {performanceMode.toUpperCase()}
             </Badge>
           </div>
           <div className="flex items-center justify-between">
-            <span>Battery Optimization={shouldOptimizeForBattery ? 'destructive' }>
-              {shouldOptimizeForBattery ? 'Enabled' }
+            <span>Battery Optimization:</span>
+            <Badge variant={shouldOptimizeForBattery ? 'destructive' : 'default'}>
+              {shouldOptimizeForBattery ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
           <div className="flex items-center justify-between">
-            <span>Reduced Motion={profile.performance.reducedMotion ? 'destructive' }>
-              {profile.performance.reducedMotion ? 'Enabled' }
+            <span>Reduced Motion:</span>
+            <Badge variant={profile.performance.reducedMotion ? 'destructive' : 'default'}>
+              {profile.performance.reducedMotion ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
         </div>
@@ -78,22 +88,34 @@ export const AnimationDemo= () => {
       {/* Device Information */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Device Profile</h2>
-        <div className="grid grid-cols-2 md="text-center">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center">
             <div className="text-lg font-semibold">{deviceInfo.screenSize}</div>
-            <div className="text-sm text-gray-600 dark="text-center">
+            <div className="text-sm text-gray-600 dark:text-gray-400">Screen Size</div>
+          </div>
+          <div className="text-center">
             <div className="text-lg font-semibold">{deviceInfo.orientation}</div>
-            <div className="text-sm text-gray-600 dark="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' }</div>
-            <div className="text-sm text-gray-600 dark="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' }</div>
-            <div className="text-sm text-gray-600 dark}
+            <div className="text-sm text-gray-600 dark:text-gray-400">Orientation</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' : 'Mouse'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Input Type</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Device Type</div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Animation Controls */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Animation Controls</h2>
         <div className="flex flex-wrap gap-2 mb-4">
           {animations.map((animation) => (
             <Button
               key={animation.key}
-              variant={currentAnimation === animation.key ? 'default' }
+              variant={currentAnimation === animation.key ? 'default' : 'outline'}
               onClick={() => handleAnimationChange(animation.key)}
               disabled={isAnimating}
               className="flex items-center gap-2"
@@ -104,16 +126,19 @@ export const AnimationDemo= () => {
           ))}
         </div>
         
-        <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Current Animation Profile</label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Current Animation Profile</label>
             <div className="space-y-2 text-sm">
-              <div>Duration}</div>
-              <div>Easing}</div>
-              <div>Performance}</div>
+              <div>Duration: {profile.duration.normal}</div>
+              <div>Easing: {profile.easing.ease}</div>
+              <div>Performance: {profile.performance.mode}</div>
             </div>
           </div>
           <div>
             <label className="block text-sm font-medium mb-2">Animation Classes</label>
-            <div className="text-xs bg-gray-100 dark}
+            <div className="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded">
+              {deviceInfo.isMobile && 'coach-stan-mobile-animation '}
               {deviceInfo.isTablet && 'coach-stan-tablet-animation '}
               {deviceInfo.isDesktop && 'coach-stan-desktop-animation '}
               {shouldOptimizeForBattery && 'coach-stan-battery-saver '}
@@ -152,7 +177,9 @@ export const AnimationDemo= () => {
             duration="fast"
             staggerDelay={0.1}
             staggerDirection="forward"
-            className="grid grid-cols-2 md, 2, 3, 4].map((num) => (
+            className="grid grid-cols-2 md:grid-cols-4 gap-4"
+          >
+            {[1, 2, 3, 4].map((num) => (
               <div
                 key={num}
                 className="h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl"
@@ -166,7 +193,9 @@ export const AnimationDemo= () => {
         {/* Performance Mode Comparison */}
         <div>
           <h3 className="text-lg font-medium mb-3">Performance Mode Comparison</h3>
-          <div className="grid grid-cols-1 md="fadeIn"
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <AnimatedContainer
+              animation="fadeIn"
               duration="fast"
               className="h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold"
             >
@@ -196,19 +225,22 @@ export const AnimationDemo= () => {
         <div className="space-y-4">
           <div>
             <h3 className="font-medium mb-2">Animation Profile</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(profile, null, 2)}
             </pre>
           </div>
           
           <div>
             <h3 className="font-medium mb-2">Device Info</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(deviceInfo, null, 2)}
             </pre>
           </div>
           
           <div>
             <h3 className="font-medium mb-2">Performance Metrics</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(performanceMetrics, null, 2)}
             </pre>
           </div>
         </div>

package/dist/components/ui/animation-demo.js

@@ -10,7 +10,7 @@ import {
 } from './animation'
 
 
-export const AnimationDemo= () => {
+export const AnimationDemo: React.FC = () => {
   const [currentAnimation, setCurrentAnimation] = useState<'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce'>('fadeIn')
   const [isAnimating, setIsAnimating] = useState(false)
   
@@ -18,13 +18,13 @@ export const AnimationDemo= () => {
   const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode()
 
   const animations = [
-    { key, label, icon},
-    { key, label, icon},
-    { key, label, icon},
-    { key, label, icon}
+    { key: 'fadeIn' as const, label: 'Fade In', icon: '✨' },
+    { key: 'slideIn' as const, label: 'Slide In', icon: '➡️' },
+    { key: 'scaleIn' as const, label: 'Scale In', icon: '🔍' },
+    { key: 'bounce' as const, label: 'Bounce', icon: '🎾' }
   ]
 
-  const handleAnimationChange = (animation) => {
+  const handleAnimationChange = (animation: typeof currentAnimation) => {
     setCurrentAnimation(animation)
     setIsAnimating(true)
     
@@ -33,24 +33,31 @@ export const AnimationDemo= () => {
   }
 
   const performanceIndicators = [
-    { label, value, unit, color},
-    { label, value) , unit, color},
-    { label, value) , unit, color}
+    { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
+    { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
+    { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
   ]
 
   return (
     <div className="space-y-6 p-6">
       <div className="text-center">
         <h1 className="text-3xl font-bold mb-2">Mobile-First Animation System</h1>
-        <p className="text-gray-600 dark}
+        <p className="text-gray-600 dark:text-gray-400">
+          Device-specific animations with performance optimization and battery awareness
+        </p>
+      </div>
+
+      {/* Performance Metrics */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Performance Metrics</h2>
-        <div className="grid grid-cols-1 md) => (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {performanceIndicators.map((indicator) => (
             <div key={indicator.label} className="text-center">
               <div className={`text-2xl font-bold text-${indicator.color}-600`}>
                 {indicator.value}{indicator.unit}
               </div>
-              <div className="text-sm text-gray-600 dark}
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {indicator.label}
               </div>
             </div>
           ))}
@@ -58,18 +65,21 @@ export const AnimationDemo= () => {
         
         <div className="mt-4 space-y-2">
           <div className="flex items-center justify-between">
-            <span>Performance Mode={performanceMode === 'high' ? 'default' === 'medium' ? 'secondary' }>
+            <span>Performance Mode:</span>
+            <Badge variant={performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive'}>
               {performanceMode.toUpperCase()}
             </Badge>
           </div>
           <div className="flex items-center justify-between">
-            <span>Battery Optimization={shouldOptimizeForBattery ? 'destructive' }>
-              {shouldOptimizeForBattery ? 'Enabled' }
+            <span>Battery Optimization:</span>
+            <Badge variant={shouldOptimizeForBattery ? 'destructive' : 'default'}>
+              {shouldOptimizeForBattery ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
           <div className="flex items-center justify-between">
-            <span>Reduced Motion={profile.performance.reducedMotion ? 'destructive' }>
-              {profile.performance.reducedMotion ? 'Enabled' }
+            <span>Reduced Motion:</span>
+            <Badge variant={profile.performance.reducedMotion ? 'destructive' : 'default'}>
+              {profile.performance.reducedMotion ? 'Enabled' : 'Disabled'}
             </Badge>
           </div>
         </div>
@@ -78,22 +88,34 @@ export const AnimationDemo= () => {
       {/* Device Information */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Device Profile</h2>
-        <div className="grid grid-cols-2 md="text-center">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center">
             <div className="text-lg font-semibold">{deviceInfo.screenSize}</div>
-            <div className="text-sm text-gray-600 dark="text-center">
+            <div className="text-sm text-gray-600 dark:text-gray-400">Screen Size</div>
+          </div>
+          <div className="text-center">
             <div className="text-lg font-semibold">{deviceInfo.orientation}</div>
-            <div className="text-sm text-gray-600 dark="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' }</div>
-            <div className="text-sm text-gray-600 dark="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' }</div>
-            <div className="text-sm text-gray-600 dark}
+            <div className="text-sm text-gray-600 dark:text-gray-400">Orientation</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' : 'Mouse'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Input Type</div>
+          </div>
+          <div className="text-center">
+            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop'}</div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Device Type</div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Animation Controls */}
       <Card className="p-4">
         <h2 className="text-xl font-semibold mb-4">Animation Controls</h2>
         <div className="flex flex-wrap gap-2 mb-4">
           {animations.map((animation) => (
             <Button
               key={animation.key}
-              variant={currentAnimation === animation.key ? 'default' }
+              variant={currentAnimation === animation.key ? 'default' : 'outline'}
               onClick={() => handleAnimationChange(animation.key)}
               disabled={isAnimating}
               className="flex items-center gap-2"
@@ -104,16 +126,19 @@ export const AnimationDemo= () => {
           ))}
         </div>
         
-        <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Current Animation Profile</label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Current Animation Profile</label>
             <div className="space-y-2 text-sm">
-              <div>Duration}</div>
-              <div>Easing}</div>
-              <div>Performance}</div>
+              <div>Duration: {profile.duration.normal}</div>
+              <div>Easing: {profile.easing.ease}</div>
+              <div>Performance: {profile.performance.mode}</div>
             </div>
           </div>
           <div>
             <label className="block text-sm font-medium mb-2">Animation Classes</label>
-            <div className="text-xs bg-gray-100 dark}
+            <div className="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded">
+              {deviceInfo.isMobile && 'coach-stan-mobile-animation '}
               {deviceInfo.isTablet && 'coach-stan-tablet-animation '}
               {deviceInfo.isDesktop && 'coach-stan-desktop-animation '}
               {shouldOptimizeForBattery && 'coach-stan-battery-saver '}
@@ -152,7 +177,9 @@ export const AnimationDemo= () => {
             duration="fast"
             staggerDelay={0.1}
             staggerDirection="forward"
-            className="grid grid-cols-2 md, 2, 3, 4].map((num) => (
+            className="grid grid-cols-2 md:grid-cols-4 gap-4"
+          >
+            {[1, 2, 3, 4].map((num) => (
               <div
                 key={num}
                 className="h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl"
@@ -166,7 +193,9 @@ export const AnimationDemo= () => {
         {/* Performance Mode Comparison */}
         <div>
           <h3 className="text-lg font-medium mb-3">Performance Mode Comparison</h3>
-          <div className="grid grid-cols-1 md="fadeIn"
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <AnimatedContainer
+              animation="fadeIn"
               duration="fast"
               className="h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold"
             >
@@ -196,19 +225,22 @@ export const AnimationDemo= () => {
         <div className="space-y-4">
           <div>
             <h3 className="font-medium mb-2">Animation Profile</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(profile, null, 2)}
             </pre>
           </div>
           
           <div>
             <h3 className="font-medium mb-2">Device Info</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(deviceInfo, null, 2)}
             </pre>
           </div>
           
           <div>
             <h3 className="font-medium mb-2">Performance Metrics</h3>
-            <pre className="text-xs bg-gray-100 dark, null, 2)}
+            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
+              {JSON.stringify(performanceMetrics, null, 2)}
             </pre>
           </div>
         </div>