Cosmic Dark Glass Style

# Cosmic Dark Glass Style

This is a reference implementation of cosmic dark glass style

~~~/README.md
# Tubes Interactive Background

A high-performance 3D interactive background featuring neon tubes that follow the user's cursor. Built with `threejs-components`.

## Features
- 🖱️ **Interactive Cursor**: Tubes follow mouse movement in 3D space
- 🎨 **Dynamic Colors**: Click to randomize tube and light colors instantly
- ⚡ **High Performance**: Optimized WebGL rendering
- 📱 **Responsive**: Adapts to container size

## Dependencies
- `three`
- `framer-motion` (optional, for overlay animations)

## Usage

```tsx
import { TubesBackground } from '@/sd-components/070b9477-5ebf-41b4-ab04-9b4d4975e984';

function MyPage() {
  return (
    <div style={{ height: '100vh' }}>
      <TubesBackground>
        {/* Your content overlay goes here */}
        <h1>Hello World</h1>
      </TubesBackground>
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | `undefined` | Content to overlay on top of the canvas |
| `className` | `string` | `undefined` | Additional CSS classes for the container |
| `enableClickInteraction` | `boolean` | `true` | Whether clicking randomizes colors |

## Credits
Original concept and implementation by [Kevin Levron](https://www.framer.com/@kevin-levron/).
Based on `threejs-components` library.
~~~

~~~/src/App.tsx
import StellarAiLanding from './Component';

export default function App() {
  return <StellarAiLanding />;
}
~~~

~~~/package.json
{
  "name": "tubes-interactive-background",
  "description": "Interactive neon tubes 3D cursor effect background",
  "dependencies": {
    "three": "^0.160.0",
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.300.0",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.0"
  }
}
~~~

~~~/src/Component.tsx
import React, { useEffect, useRef, useState } from 'react';
import { 
  Menu, X, ArrowRight, Calendar, Cloud, Box, 
  Search, Globe, Database, Shield, Zap, 
  Layout, Code, Cpu, Smartphone, Layers,
  Terminal, GitBranch, CheckCircle, Lock,
  Server, HardDrive, Share2, MousePointer2
} from 'lucide-react';
import { TubesBackground } from '@/sd-components/f67f03ef-7904-4c3f-bd28-789d1929f8d5';

// --- CSS Styles & Animations ---
const styles = `
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

  :root {
    --font-sans: 'Manrope', 'Inter', sans-serif;
  }

  body {
    font-family: var(--font-sans);
    background-color: #030014; /* Deep Violet/Black */
    color: #fff;
    overflow-x: hidden;
  }

  /* Smooth Reveal Animation */
  @keyframes clipReveal {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  
  .animate-intro {
    animation: clipReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  
  /* Mobile Menu Animation */
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-slide-down {
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Flashlight Effect Classes */
  .flashlight-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s;
  }
  
  .flashlight-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .flashlight-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(255, 255, 255, 0.06), transparent 40%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .flashlight-card:hover::before {
    opacity: 1;
  }

  /* Border Glow */
  .flashlight-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(400px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(192, 132, 252, 0.3), transparent 40%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
    border-radius: inherit;
  }
  
  .flashlight-card:hover::after {
    opacity: 1;
  }

  /* Text Shimmer & Reflection */
  @keyframes reflection-loop {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  .title-reflection {
    background: linear-gradient(110deg, #ffffff 45%, #e879f9 50%, #ffffff 55%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: reflection-loop 6s ease-in-out infinite;
  }

  /* Floating Animations */
  @keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  @keyframes float-delayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
  }
  @keyframes float-reverse {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(6px); }
  }
  
  .animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
  .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite 1s; }
  .animate-float-reverse { animation: float-reverse 8s ease-in-out infinite; }
  
  /* Map Blinking */
  @keyframes blink-random {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
  }
  .animate-blink-1 { animation: blink-random 3s infinite ease-in-out 0s; }
  .animate-blink-2 { animation: blink-random 4s infinite ease-in-out 1s; }
  .animate-blink-3 { animation: blink-random 3.5s infinite ease-in-out 0.5s; }

  /* Sonar Animation */
  @keyframes sonar {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
  }
  
  .sonar-emitter {
    position: relative;
  }
  
  .sonar-emitter::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background-color: inherit;
    z-index: -1;
    animation: sonar 2s infinite cubic-bezier(0, 0, 0.2, 1);
  }

  /* Shimmer for text */
  .text-shimmer {
    background: linear-gradient(to right, #94a3b8 20%, #f8fafc 50%, #94a3b8 80%);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: shimmer 5s linear infinite;
  }
  
  @keyframes shimmer {
    to { background-position: 200% center; }
  }
  
  /* Button Sheen */
  .btn-sheen {
    position: relative;
    overflow: hidden;
  }
  
  .btn-sheen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg);
    transition: left 0.5s;
  }
  
  .btn-sheen:hover::before {
    left: 150%;
    transition: left 0.7s;
  }

  /* 3D Utilities (simulated for Tailwind) */
  .perspective-1000 { perspective: 1000px; }
  .transform-style-3d { transform-style: preserve-3d; }
  .backface-hidden { backface-visibility: hidden; }
  .rotate-x-6 { transform: rotateX(6deg); }
  .rotate-x-12 { transform: rotateX(12deg); }
`;

// --- Components ---

const FlashlightCard = ({ children, className = "", style = {} }: { children: React.ReactNode, className?: string, style?: React.CSSProperties }) => {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    cardRef.current.style.setProperty('--mouse-x', `${x}px`);
    cardRef.current.style.setProperty('--mouse-y', `${y}px`);
  };

  return (
    <div 
      ref={cardRef} 
      className={`flashlight-card ${className}`} 
      onMouseMove={handleMouseMove}
      style={style}
    >
      {children}
    </div>
  );
};

export function StellarAiLanding() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const NOISE_SVG_DATA_URI = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJub2lzZUZpbHRlciI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2VGaWx0ZXIpIiBvcGFjaXR5PSIxIi8+PC9zdmc+";

  return (
    <div className="min-h-screen bg-[#030014] text-slate-300 font-sans selection:bg-fuchsia-500/30 overflow-x-hidden relative">
      <style>{styles}</style>
      
      {/* Interactive Tubes Background - Now using the reusable component */}
      <div className="fixed inset-0 z-0">
        <TubesBackground className="w-full h-full">
            {/* Deep Space Gradient Overlay for Depth */}
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_#030014_90%)] pointer-events-none" />
            <div 
              className="absolute inset-0 opacity-10 brightness-100 contrast-150 pointer-events-none" 
              style={{ backgroundImage: `url('${NOISE_SVG_DATA_URI}')` }}
            />
        </TubesBackground>
      </div>
      
      {/* Content Wrapper */}
      <div className="relative z-10">
        
        {/* Navigation */}
        <nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-[#030014]/80 backdrop-blur-xl">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-fuchsia-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-[0_0_15px_rgba(192,132,252,0.5)]">
                  S
                </div>
                <span className="font-bold text-lg text-white tracking-tight">Superdesign</span>
              </div>
              
              <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-400">
                <a href="#" className="hover:text-white transition-colors">Features</a>
                <a href="#" className="hover:text-white transition-colors">Generative UI</a>
                <a href="#" className="hover:text-white transition-colors">Pricing</a>
                <a href="#" className="hover:text-white transition-colors">Enterprise</a>
              </div>

              <div className="hidden md:flex items-center gap-4">
                <a href="#" className="text-sm font-medium hover:text-white transition-colors">Log in</a>
                <button className="px-4 py-2 bg-white text-black text-sm font-semibold rounded-full hover:bg-slate-200 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.5)]">
                  Get Started
                </button>
              </div>

              <div className="md:hidden">
                <button 
                  onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 
                  className="text-white p-2 hover:bg-white/10 rounded-lg transition-colors"
                  aria-label="Toggle menu"
                >
                  {isMobileMenuOpen ? <X /> : <Menu />}
                </button>
              </div>
            </div>
          </div>
          
          {/* Mobile Menu */}
          {isMobileMenuOpen && (
            <div className="md:hidden bg-[#030014]/95 backdrop-blur-xl border-b border-white/10 p-4 absolute w-full animate-slide-down shadow-2xl">
              <div className="flex flex-col gap-4 text-sm font-medium">
                <a href="#" className="text-white/80 hover:text-white py-2 border-b border-white/5">Features</a>
                <a href="#" className="text-white/80 hover:text-white py-2 border-b border-white/5">Generative UI</a>
                <a href="#" className="text-white/80 hover:text-white py-2 border-b border-white/5">Pricing</a>
                <div className="flex flex-col gap-3 mt-2">
                  <a href="#" className="text-white/80 hover:text-white py-2">Log in</a>
                  <button className="w-full py-3 bg-white text-black font-semibold rounded-lg hover:bg-slate-200 transition-colors">
                    Get Started
                  </button>
                </div>
              </div>
            </div>
          )}
        </nav>

        {/* Hero Section */}
        <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden perspective-1000">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-fuchsia-300 mb-6 hover:bg-white/10 transition-colors cursor-pointer group">
              <span className="flex h-2 w-2 rounded-full bg-fuchsia-500 animate-pulse sonar-emitter"></span>
              <span className="text-shimmer group-hover:text-fuchsia-200 transition-colors">v2.0 is now live: Generative UI &rarr;</span>
            </div>
            
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-6">
              <span className="block animate-intro">Design at the</span>
              <span className="block title-reflection animate-intro" style={{animationDelay: '0.1s'}}>Speed of Thought</span>
            </h1>
            
            <p className="mt-6 text-lg md:text-xl text-slate-400 max-w-2xl mx-auto animate-intro" style={{animationDelay: '0.2s'}}>
              The first AI-native interface design tool. Generate production-ready UI components, entire design systems, and functional React code in seconds.
            </p>
            
            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-intro" style={{animationDelay: '0.3s'}}>
              <button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-fuchsia-600 to-indigo-600 rounded-full text-white font-semibold hover:scale-105 transition-transform shadow-[0_0_40px_rgba(192,132,252,0.4)] flex items-center justify-center gap-2 btn-sheen">
                <Zap className="w-5 h-5 fill-current" />
                Start Creating Free
              </button>
              <button className="w-full sm:w-auto px-8 py-4 bg-white/5 border border-white/10 rounded-full text-white font-semibold hover:bg-white/10 transition-colors backdrop-blur-md flex items-center justify-center gap-2 hover:border-white/20">
                <Layout className="w-5 h-5" />
                View Components
              </button>
            </div>

            {/* 3D Mockup Container */}
            <div className="mt-20 relative mx-auto max-w-5xl transform-style-3d rotate-x-12 animate-float-slow">
              <FlashlightCard className="rounded-xl bg-[#0a0a0a]/90 backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden aspect-[16/9] group">
                {/* Fake Browser Chrome */}
                <div className="h-10 border-b border-white/10 flex items-center px-4 gap-2 bg-white/5">
                  <div className="flex gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                    <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
                  </div>
                  <div className="mx-auto px-3 py-1 bg-black/40 rounded-md text-[10px] text-slate-500 font-mono flex items-center gap-2 border border-white/5">
                    <Lock className="w-3 h-3" />
                    superdesign.app/editor
                  </div>
                </div>
                
                {/* Editor UI Mockup */}
                <div className="flex h-full">
                  {/* Sidebar */}
                  <div className="w-16 border-r border-white/10 flex flex-col items-center py-4 gap-4 bg-white/5">
                    {[Box, Layout, MousePointer2, Layers, Code, Globe].map((Icon, i) => (
                      <div key={i} className="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer">
                        <Icon className="w-5 h-5" />
                      </div>
                    ))}
                  </div>
                  
                  {/* Canvas Area */}
                  <div className="flex-1 bg-[#050505] relative p-8 flex items-center justify-center">
                    <div 
                      className="absolute inset-0 opacity-20 pointer-events-none" 
                      style={{ backgroundImage: `url('${NOISE_SVG_DATA_URI}')` }}
                    />
                    
                    {/* Floating Elements in Canvas */}
                    <div className="absolute top-1/4 left-1/4 p-4 rounded-xl bg-[#111] border border-white/10 shadow-xl animate-float-delayed backdrop-blur-md">
                      <div className="flex gap-3 mb-2">
                        <div className="w-8 h-8 rounded-full bg-white/10"></div>
                        <div className="h-2 w-20 bg-white/10 rounded mt-3"></div>
                      </div>
                      <div className="h-2 w-32 bg-white/5 rounded"></div>
                      <div className="h-2 w-24 bg-white/5 rounded mt-2"></div>
                    </div>
                    
                    <div className="absolute bottom-1/3 right-1/4 p-4 rounded-xl bg-[#111] border border-white/10 shadow-xl animate-float-reverse backdrop-blur-md z-10">
                      <div className="h-3 w-16 bg-fuchsia-500/80 rounded-full mb-3"></div>
                      <div className="h-2 w-28 bg-white/10 rounded"></div>
                    </div>

                    {/* Central active element */}
                    <div className="relative z-20 bg-black border border-indigo-500/50 shadow-[0_0_50px_rgba(99,102,241,0.2)] rounded-2xl p-6 w-96 transform scale-100 group-hover:scale-105 transition-transform duration-500">
                      <div className="flex justify-between items-start mb-4">
                        <h3 className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent">Payment Method</h3>
                        <div className="px-2 py-1 bg-indigo-500/20 text-indigo-300 text-xs rounded">Active</div>
                      </div>
                      <div className="space-y-3">
                        <div className="h-10 rounded-lg border border-white/10 bg-white/5 flex items-center px-3 text-sm text-slate-500">
                          0000 0000 0000 0000
                        </div>
                        <div className="flex gap-3">
                          <div className="h-10 flex-1 rounded-lg border border-white/10 bg-white/5"></div>
                          <div className="h-10 w-20 rounded-lg border border-white/10 bg-white/5"></div>
                        </div>
                        <button className="w-full h-10 rounded-lg bg-indigo-600 text-white font-medium text-sm hover:bg-indigo-500 transition-colors">Pay Now</button>
                      </div>
                      
                      {/* Cursor */}
                      <div className="absolute -bottom-10 -right-10 pointer-events-none drop-shadow-lg">
                        <MousePointer2 className="w-6 h-6 fill-fuchsia-500 text-fuchsia-500 transform -rotate-12" />
                        <div className="ml-4 mt-1 px-2 py-1 bg-fuchsia-500 text-white text-[10px] font-bold rounded-md">
                          Sarah is editing...
                        </div>
                      </div>
                    </div>
                    
                  </div>
                  
                  {/* Right Panel */}
                  <div className="w-64 border-l border-white/10 bg-white/5 p-4 hidden md:block">
                    <div className="flex items-center justify-between mb-6">
                      <span className="text-xs font-bold uppercase tracking-wider text-slate-500">Properties</span>
                      <SettingsIcon />
                    </div>
                    <div className="space-y-4">
                      {[1, 2, 3, 4].map(i => (
                        <div key={i} className="space-y-1">
                          <div className="flex justify-between">
                            <div className="h-3 w-12 bg-white/10 rounded"></div>
                            <div className="h-3 w-8 bg-white/10 rounded"></div>
                          </div>
                          <div className="h-8 w-full bg-white/5 border border-white/5 rounded"></div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </FlashlightCard>
            </div>
          </div>
        </section>

        {/* Feature Grid */}
        <section className="py-24 relative z-10">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-5xl font-bold mb-4">Supercharged Workflow</h2>
              <p className="text-slate-400 max-w-2xl mx-auto">Everything you need to build world-class interfaces, powered by our proprietary Generative UI engine.</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  title: "Generative UI",
                  desc: "Describe your interface in natural language and watch it build itself.",
                  icon: <Zap className="w-6 h-6 text-yellow-400" />,
                  color: "from-yellow-500/20 to-orange-500/20"
                },
                {
                  title: "Code Export",
                  desc: "Production-ready React, Vue, or Svelte code with one click.",
                  icon: <Code className="w-6 h-6 text-cyan-400" />,
                  color: "from-cyan-500/20 to-blue-500/20"
                },
                {
                  title: "Design Systems",
                  desc: "Automatically maintain consistency across your entire project.",
                  icon: <Layout className="w-6 h-6 text-fuchsia-400" />,
                  color: "from-fuchsia-500/20 to-purple-500/20"
                }
              ].map((feature, i) => (
                <FlashlightCard key={i} className="p-8 rounded-2xl bg-white/5 border border-white/10 hover:-translate-y-1 transition-transform duration-300">
                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-6 border border-white/10`}>
                    {feature.icon}
                  </div>
                  <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
                  <p className="text-slate-400 leading-relaxed">{feature.desc}</p>
                </FlashlightCard>
              ))}
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <FlashlightCard className="p-8 rounded-2xl bg-white/5 border border-white/10 min-h-[300px] flex flex-col justify-between overflow-hidden group">
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="p-2 rounded-lg bg-green-500/20 text-green-400"><Database className="w-5 h-5" /></div>
                    <h3 className="text-xl font-bold">Real-time Data Binding</h3>
                  </div>
                  <p className="text-slate-400 mb-8 max-w-sm">Connect your UI directly to your PostgreSQL or Firebase database visually.</p>
                </div>
                
                <div className="relative h-32 bg-[#050505] rounded-lg border border-white/10 overflow-hidden">
                  <div 
                    className="absolute inset-0 opacity-10 pointer-events-none" 
                    style={{ backgroundImage: `url('${NOISE_SVG_DATA_URI}')` }}
                  />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <svg width="100%" height="100%" viewBox="0 0 300 100" className="opacity-50">
                      <path d="M50,50 L250,50" stroke="currentColor" strokeWidth="2" strokeDasharray="5,5" className="text-slate-600" />
                      <circle cx="50" cy="50" r="4" className="fill-green-500 animate-pulse" />
                      <circle cx="250" cy="50" r="4" className="fill-blue-500" />
                      
                      {/* Moving packets */}
                      <circle cx="50" cy="50" r="3" className="fill-white">
                        <animate attributeName="cx" from="50" to="250" dur="2s" repeatCount="indefinite" />
                      </circle>
                    </svg>
                  </div>
                </div>
              </FlashlightCard>

              <FlashlightCard className="p-8 rounded-2xl bg-white/5 border border-white/10 min-h-[300px] flex flex-col justify-between">
                 <div>
                  <div className="flex items-center gap-3 mb-6">
                    <div className="p-2 rounded-lg bg-blue-500/20 text-blue-400"><Globe className="w-5 h-5" /></div>
                    <h3 className="text-xl font-bold">Global Collaboration</h3>
                  </div>
                  <p className="text-slate-400 mb-8 max-w-sm">Multiplayer editing built-in. See cursors and changes in real-time.</p>
                </div>
                
                <div className="relative h-32 w-full flex items-center justify-center gap-8">
                  {[1, 2, 3].map((_, i) => (
                    <div key={i} className={`relative flex items-center justify-center w-12 h-12 rounded-full border border-white/20 bg-white/5 animate-blink-${i+1}`}>
                      <div className="w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_10px_rgba(96,165,250,0.8)]"></div>
                      <div className="absolute inset-0 rounded-full border border-blue-500/30 animate-ping" style={{animationDuration: '3s'}}></div>
                    </div>
                  ))}
                </div>
              </FlashlightCard>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-24 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-t from-fuchsia-900/20 to-transparent pointer-events-none" />
          
          <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
            <h2 className="text-4xl md:text-6xl font-bold tracking-tight mb-8">
              Ready to build the <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-indigo-400">impossible?</span>
            </h2>
            <p className="text-xl text-slate-400 mb-10">
              Join 50,000+ designers and engineers building the future of software with Superdesign.
            </p>
            <button className="px-10 py-5 bg-white text-black text-lg font-bold rounded-full hover:bg-slate-200 transition-colors shadow-[0_0_50px_rgba(255,255,255,0.2)] btn-sheen">
              Get Started for Free
            </button>
            <p className="mt-6 text-sm text-slate-500">No credit card required • Free forever plan available</p>
          </div>
        </section>
        
        {/* Footer */}
        <footer className="border-t border-white/5 bg-[#02010a] py-12">
          <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6">
             <div className="flex items-center gap-2">
                <div className="w-6 h-6 rounded bg-white/10 flex items-center justify-center text-xs font-bold">S</div>
                <span className="font-semibold tracking-tight text-slate-300">Superdesign</span>
              </div>
              <div className="flex gap-6 text-sm text-slate-500">
                <a href="#" className="hover:text-white">Privacy</a>
                <a href="#" className="hover:text-white">Terms</a>
                <a href="#" className="hover:text-white">Twitter</a>
                <a href="#" className="hover:text-white">GitHub</a>
              </div>
              <div className="text-sm text-slate-600">
                © 2024 Superdesign Inc.
              </div>
          </div>
        </footer>
      </div>
    </div>
  );
}

// Simple icon for settings
const SettingsIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-slate-500">
    <circle cx="12" cy="12" r="3"></circle>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
  </svg>
);

export default StellarAiLanding;
~~~

Please use the above as reference and apply to our context