liquid-glass-cards

import React from 'react';
import { StackedCards } from '../components/ui/liquid-glass-cards';
import '../index.css';

// Demo component showcasing liquid glass with neumorphic background cards
export const DefaultDemo: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh'
    }}>
      <StackedCards />
    </div>
  );
};

// Alternative demo with enhanced neumorphic styling
export const AlternativeDemo: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: `
        radial-gradient(circle at 25% 25%, rgba(230, 230, 250, 0.6), transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(245, 245, 255, 0.4), transparent 50%),
        linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)
      `
    }}>
      <div style={{ padding: '2rem' }}>
        <h1 style={{
          textAlign: 'center',
          color: '#2c3e50',
          marginBottom: '2rem',
          fontSize: '2.5rem',
          fontWeight: '600',
          textShadow: '0 2px 4px rgba(255, 255, 255, 0.8)',
          fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif'
        }}>
          Enhanced Neumorphic Demo
        </h1>
        <StackedCards />
      </div>
    </div>
  );
};

export default DefaultDemo;