@jerydam/lumina-sdk 0.1.0

package/app/page.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import Link from 'next/link'
+import { ArrowRight, Shield, Zap, TrendingUp, Code2, Lock, CheckCircle, Loader2, Menu, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useState, useEffect } from 'react'
+
+interface PlatformStats {
+  active_wallets: number
+  operations_processed: number
+  uptime_pct: number
+}
+
+interface Plan {
+  name: string
+  monthly_usd: number
+  monthly_ops: number | null
+  gas_markup_pct: number
+  price_usd: number
+}
+
+export default function Home() {
+  const [stats, setStats] = useState<PlatformStats | null>(null)
+  const [plans, setPlans] = useState<Plan[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false) // ✅ Fix: was missing
+
+  useEffect(() => {
+    const fetchPublicData = async () => {
+      try {
+        const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+        
+        const [statsRes, plansRes] = await Promise.all([
+          fetch(`${baseUrl}/v1/billing/platform-stats`).then(res => res.json()),
+          fetch(`${baseUrl}/v1/billing/plans`).then(res => res.json())
+        ])
+
+        setStats(statsRes)
+        setPlans(plansRes.plans || [])
+      } catch (error) {
+        console.error('Failed to fetch platform data:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchPublicData()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-background">
+
+      {/* Navigation */}
+      <nav className="fixed top-0 z-50 w-full backdrop-blur-md bg-background/80 border-b border-border">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
+
+          {/* Logo */}
+          <div className="flex items-center">
+            <div className="flex items-center h-35 w-56 sm:w-64">
+              <img
+                src="/logo.png"
+                alt="Lumina Logo"
+                className="h-full w-full object-contain object-left"
+              />
+            </div>
+          </div>
+
+          {/* Desktop Links */}
+          <div className="hidden md:flex items-center gap-8">
+            <a href="#features" className="text-sm text-foreground/70 hover:text-foreground transition">Features</a>
+            <a href="#how-it-works" className="text-sm text-foreground/70 hover:text-foreground transition">How It Works</a>
+            <a href="#pricing" className="text-sm text-foreground/70 hover:text-foreground transition">Pricing</a>
+            <a href="/docs" className="text-sm text-foreground/70 hover:text-foreground transition">Docs</a>
+          </div>
+
+          {/* Desktop Buttons */}
+          <div className="hidden md:flex items-center gap-3">
+            <Link href="/login">
+              <Button variant="ghost" size="sm">Sign In</Button>
+            </Link>
+            <Link href="/login">
+              <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">Get Started</Button>
+            </Link>
+          </div>
+
+          {/* Mobile Hamburger Button */}
+          <button
+            className="md:hidden p-2 rounded-md text-foreground/70 hover:text-foreground hover:bg-white/10 transition"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Toggle menu"
+          >
+            {mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
+          </button>
+        </div>
+
+        {/* Mobile Menu Dropdown */}
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t border-border/50 bg-background/95 backdrop-blur-md px-4 py-4 flex flex-col gap-4">
+            <a href="#features" onClick={() => setMobileMenuOpen(false)} className="text-sm text-foreground/70 hover:text-foreground transition py-2">
+              Features
+            </a>
+            <a href="#how-it-works" onClick={() => setMobileMenuOpen(false)} className="text-sm text-foreground/70 hover:text-foreground transition py-2">
+              How It Works
+            </a>
+            <a href="#pricing" onClick={() => setMobileMenuOpen(false)} className="text-sm text-foreground/70 hover:text-foreground transition py-2">
+              Pricing
+            </a>
+            <a href="/docs" onClick={() => setMobileMenuOpen(false)} className="text-sm text-foreground/70 hover:text-foreground transition py-2">
+              Docs
+            </a>
+            <div className="flex flex-col gap-2 pt-2 border-t border-border/50">
+              <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
+                <Button variant="ghost" size="sm" className="w-full justify-center">Sign In</Button>
+              </Link>
+              <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
+                <Button size="sm" className="w-full bg-emerald-600 hover:bg-emerald-700">Get Started</Button>
+              </Link>
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-20 left-1/2 -translate-x-1/2 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl opacity-20"></div>
+        </div>
+        <div className="max-w-4xl mx-auto text-center animate-fade-in">
+          <h1 className="text-5xl md:text-7xl font-bold mb-6 text-balance">
+            Embedded Wallets for <span className="bg-gradient-to-r from-emerald-400 to-emerald-600 bg-clip-text text-transparent">Web3 Apps</span>
+          </h1>
+          <p className="text-xl text-foreground/70 mb-8 max-w-2xl mx-auto text-balance">
+            Secure, scalable wallet infrastructure that lets your users manage digital assets without leaving your app. Built for production.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link href="/login">
+              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-lg">
+                Start Building <ArrowRight className="ml-2" size={20} />
+              </Button>
+            </Link>
+            <Link href="/docs">
+              <Button size="lg" variant="outline" className="text-lg border-emerald-600/30 hover:bg-emerald-600/10">
+                View Documentation
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Real-time Stats Section */}
+      <section className="py-16 px-4 sm:px-6 lg:px-8 border-b border-border/30">
+        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="text-center">
+            <div className="text-4xl font-bold text-emerald-500 mb-2">
+              {isLoading ? <Loader2 className="w-8 h-8 animate-spin mx-auto" /> : (stats?.active_wallets.toLocaleString() || '0')}
+            </div>
+            <p className="text-foreground/60">Active Wallets</p>
+          </div>
+          <div className="text-center">
+            <div className="text-4xl font-bold text-emerald-500 mb-2">
+              {isLoading ? <Loader2 className="w-8 h-8 animate-spin mx-auto" /> : (stats?.operations_processed.toLocaleString() || '0')}
+            </div>
+            <p className="text-foreground/60">Operations Processed</p>
+          </div>
+          <div className="text-center">
+            <div className="text-4xl font-bold text-emerald-500 mb-2">
+              {stats?.uptime_pct || '99.99'}%
+            </div>
+            <p className="text-foreground/60">Uptime SLA</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Everything You Need</h2>
+            <p className="text-foreground/60 text-lg max-w-2xl mx-auto">
+              A complete embedded wallet solution with all the features modern Web3 apps require
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              { icon: Shield, title: 'Bank-Level Security', description: 'Multi-signature wallets, hardware security modules, and insurance coverage for complete peace of mind.' },
+              { icon: Zap, title: 'Lightning Fast', description: 'Sub-second transaction finality with our optimized node infrastructure across multiple networks.' },
+              { icon: TrendingUp, title: 'Scalable Infrastructure', description: 'Handle millions of transactions per day without compromise on speed or security.' },
+              { icon: Code2, title: 'Developer Friendly', description: 'Simple REST APIs and SDKs in JavaScript, Python, and Go. Complete documentation and examples.' },
+              { icon: Lock, title: 'Privacy First', description: "End-to-end encryption with zero-knowledge proofs. Your users' data stays private." },
+              { icon: CheckCircle, title: 'Multi-Chain Support', description: 'Seamlessly integrate with Ethereum, Polygon, Solana, Arbitrum, and more.' },
+            ].map((feature, index) => (
+              <div key={index} className="glassmorphism-dark p-8 rounded-xl hover:bg-white/15 transition-all duration-300">
+                <feature.icon className="w-12 h-12 text-emerald-500 mb-4" />
+                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+                <p className="text-foreground/60">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section id="how-it-works" className="py-24 px-4 sm:px-6 lg:px-8 border-t border-border/30">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">How It Works</h2>
+            <p className="text-foreground/60 text-lg max-w-2xl mx-auto">
+              Get your embedded wallet running in minutes, not weeks
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            {[
+              { step: '01', title: 'Create Account', description: 'Sign up for Lumina and get your API credentials.' },
+              { step: '02', title: 'Install SDK', description: 'Add our SDK to your application with npm or yarn.' },
+              { step: '03', title: 'Integrate Wallet', description: 'Initialize the wallet with your app configuration.' },
+              { step: '04', title: 'Go Live', description: 'Your users can now manage wallets seamlessly.' },
+            ].map((item, index) => (
+              <div key={index} className="relative">
+                <div className="glassmorphism-dark p-8 rounded-xl h-full">
+                  <div className="text-4xl font-bold text-emerald-500 mb-4">{item.step}</div>
+                  <h3 className="text-lg font-semibold mb-2">{item.title}</h3>
+                  <p className="text-foreground/60">{item.description}</p>
+                </div>
+                {index < 3 && (
+                  <div className="hidden md:block absolute top-1/2 -right-4 w-8 h-8 bg-emerald-500/20 rounded-full border border-emerald-500/40 z-10">
+                    <ArrowRight className="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-emerald-500" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Dynamic Pricing Section */}
+      <section id="pricing" className="py-24 px-4 sm:px-6 lg:px-8 border-t border-border/30">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Simple, Transparent Pricing</h2>
+            <p className="text-foreground/60 text-lg max-w-2xl mx-auto">
+              Scale at your own pace. Pay seamlessly entirely on-chain.
+            </p>
+          </div>
+          {isLoading ? (
+            <div className="flex justify-center py-12">
+              <Loader2 className="w-12 h-12 animate-spin text-emerald-500" />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 justify-center">
+              {plans.map((plan, index) => {
+                const isPro = plan.name.toLowerCase() === 'pro'
+                return (
+                  <div
+                    key={index}
+                    className={`rounded-xl p-8 transition-all duration-300 ${
+                      isPro
+                        ? 'glassmorphism-dark border-emerald-500/50 ring-1 ring-emerald-500/30 shadow-[0_0_30px_rgba(16,185,129,0.15)]'
+                        : 'glassmorphism-dark'
+                    }`}
+                  >
+                    <h3 className="text-2xl font-bold mb-2 capitalize">{plan.name}</h3>
+                    <p className="text-foreground/60 mb-4">
+                      {isPro ? 'For scaling applications' : plan.price_usd === 0 ? 'Perfect for testing and development' : 'For growing businesses'}
+                    </p>
+                    <div className="mb-6">
+                      <span className="text-4xl font-bold">${plan.price_usd}</span>
+                      <span className="text-foreground/60 ml-2">/month</span>
+                    </div>
+                    <Link href="/login" className="w-full block">
+                      <Button className={`w-full mb-8 ${isPro ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-emerald-600/20 hover:bg-emerald-600/30'}`}>
+                        Get Started
+                      </Button>
+                    </Link>
+                    <ul className="space-y-3">
+                      <li className="flex items-center gap-2">
+                        <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                        <span className="text-foreground/70">
+                          {plan.monthly_ops === null ? 'Unlimited Operations' : `Up to ${plan.monthly_ops.toLocaleString()} Operations/mo`}
+                        </span>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                        <span className="text-foreground/70">{plan.gas_markup_pct}% Gas Sponsorship Markup</span>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                        <span className="text-foreground/70">Multi-chain Paymaster Access</span>
+                      </li>
+                      {isPro && (
+                        <li className="flex items-center gap-2">
+                          <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                          <span className="text-foreground/70">Priority Support</span>
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 px-4 sm:px-6 lg:px-8 border-t border-border/30">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">Ready to Build?</h2>
+          <p className="text-xl text-foreground/60 mb-8 max-w-2xl mx-auto text-balance">
+            Join hundreds of Web3 developers using Lumina to power their applications.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link href="/login">
+              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-lg">
+                Start Free Trial
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border/30 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
+          <div className="flex items-center gap-2 mb-4 md:mb-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center">
+              <span className="text-white font-bold text-sm">L</span>
+            </div>
+            <span className="font-bold">Lumina</span>
+          </div>
+          <p className="text-foreground/60 text-sm">© 2024 Lumina. All rights reserved.</p>
+        </div>
+      </footer>
+
+    </div>
+  )
+}

package/app/sdk-demo/page.tsx

@@ -0,0 +1,239 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { LuminaProvider } from '@/components/sdk/lumina-provider'
+import  WalletLogin  from '@/components/sdk/wallet-login'
+import { WalletDisplay } from '@/components/sdk/wallet-display'
+import { TransactionConfirm } from '@/components/sdk/transaction-confirm'
+
+export default function SDKDemoPage() {
+  const [currentStep, setCurrentStep] = useState<'login' | 'wallet' | 'transaction'>('login')
+  const [walletAddress, setWalletAddress] = useState('')
+
+  const handleLoginSuccess = (address: string) => {
+    setWalletAddress(address)
+    setCurrentStep('wallet')
+  }
+
+  return (
+    <LuminaProvider apiKey="demo_key_123456" environment="development">
+      <div className="min-h-screen bg-background">
+        {/* Header */}
+        <nav className="border-b border-border/30 backdrop-blur-md bg-background/80">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition">
+              <ArrowLeft size={20} />
+              <span className="font-semibold">Back to Home</span>
+            </Link>
+            <h1 className="text-xl font-bold">SDK Components Demo</h1>
+            <div className="w-24"></div>
+          </div>
+        </nav>
+
+        {/* Main Content */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <div className="mb-8">
+            <h2 className="text-3xl font-bold mb-2">Lumina SDK Components</h2>
+            <p className="text-foreground/60">Interactive demonstration of wallet, authentication, and transaction components</p>
+          </div>
+
+          {/* Component Showcase */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            {/* Step Indicators */}
+            <Card className="glassmorphism-dark p-6 border-border lg:col-span-1">
+              <h3 className="text-lg font-semibold mb-4">Demo Steps</h3>
+              <div className="space-y-3">
+                {[
+                  { id: 'login', label: 'Login Component', desc: 'User authentication' },
+                  { id: 'wallet', label: 'Wallet Display', desc: 'Balance & address' },
+                  { id: 'transaction', label: 'Transaction', desc: 'Confirm & send' },
+                ].map((step) => (
+                  <button
+                    key={step.id}
+                    onClick={() => setCurrentStep(step.id as any)}
+                    className={`w-full text-left p-4 rounded-lg transition-all ${
+                      currentStep === step.id
+                        ? 'glassmorphism-dark border-emerald-600/50'
+                        : 'bg-white/5 border border-border/50 hover:bg-white/10'
+                    }`}
+                  >
+                    <p className="font-medium">{step.label}</p>
+                    <p className="text-xs text-foreground/60 mt-1">{step.desc}</p>
+                  </button>
+                ))}
+              </div>
+            </Card>
+
+            {/* Component Display */}
+            <div className="lg:col-span-2">
+              {currentStep === 'login' && (
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold">Wallet Login Component</h3>
+                  <p className="text-foreground/60 text-sm mb-4">Email and biometric authentication for wallet creation</p>
+                  <WalletLogin
+                    authMethods={['email', 'passkey', 'social']}
+                    onSuccess={handleLoginSuccess}
+                    onError={(err: Error) => console.error(err)} 
+                  />
+                </div>
+              )}
+
+              {/* Note: I added WalletDisplay back in since it was missing from your snippet! */}
+              {currentStep === 'wallet' && walletAddress && (
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold">Wallet Display Component</h3>
+                  <p className="text-foreground/60 text-sm mb-4">Shows balance, address, and transaction actions</p>
+                  <WalletDisplay
+                    signerAddress={walletAddress} // Passed the new required prop
+                    smartAccountAddress={walletAddress} // Passed the new required prop
+                    balance="2.5"
+                    token="ETH"
+                    network="Ethereum"
+                    chainId="1"
+                    onSend={() => setCurrentStep('transaction')}
+                    onReceive={() => alert('Receive functionality')}
+                  />
+                </div>
+              )}
+
+              {/* ONLY ONE TransactionConfirm block now */}
+              {currentStep === 'transaction' && walletAddress && (
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold">Transaction Confirmation Component</h3>
+                  <p className="text-foreground/60 text-sm mb-4">Secure transaction review and confirmation</p>
+                  <TransactionConfirm
+                    transaction={{
+                      to: '0x742d35Cc6634C0532925a3b844Bc7e7595f1a2b8',
+                      from: walletAddress,
+                      signerAddress: walletAddress, 
+                      amount: '1.5',
+                      token: 'ETH',
+                      network: 'Ethereum',
+                      gasFee: '0.012 ETH',
+                      estimatedTime: '2-4 minutes',
+                    }}
+                    onConfirm={async () => {
+                      await new Promise(r => setTimeout(r, 2000))
+                    }}
+                    onCancel={() => setCurrentStep('wallet')}
+                  />
+                </div>
+              )}
+            </div>
+          
+          </div>
+
+          {/* Code Examples */}
+          <div className="space-y-6">
+            <h2 className="text-2xl font-bold">Usage Examples</h2>
+
+            <Card className="glassmorphism-dark p-6 border-border">
+              <h3 className="text-lg font-semibold mb-4">1. Wrap your app with LuminaProvider</h3>
+              <div className="bg-white/5 p-4 rounded-lg overflow-x-auto">
+                <pre className="font-mono text-sm text-emerald-400">{`import { LuminaProvider } from '@lumina/sdk'
+
+export default function App() {
+  return (
+    <LuminaProvider apiKey="your_api_key">
+      <YourApp />
+    </LuminaProvider>
+  )
+}`}</pre>
+              </div>
+            </Card>
+
+            <Card className="glassmorphism-dark p-6 border-border">
+              <h3 className="text-lg font-semibold mb-4">2. Use the WalletLogin component</h3>
+              <div className="bg-white/5 p-4 rounded-lg overflow-x-auto">
+                <pre className="font-mono text-sm text-emerald-400">{`import { WalletLogin } from '@lumina/sdk'
+
+export function LoginPage() {
+  const handleSuccess = (walletAddress) => {
+    console.log('User created wallet:', walletAddress)
+  }
+
+  return (
+    <WalletLogin
+      authMethods={['email', 'passkey']}
+      onSuccess={handleSuccess}
+    />
+  )
+}`}</pre>
+              </div>
+            </Card>
+
+            <Card className="glassmorphism-dark p-6 border-border">
+              <h3 className="text-lg font-semibold mb-4">3. Display wallet information</h3>
+              <div className="bg-white/5 p-4 rounded-lg overflow-x-auto">
+                <pre className="font-mono text-sm text-emerald-400">{`import { WalletDisplay } from '@lumina/sdk'
+
+export function Dashboard() {
+  return (
+    <WalletDisplay
+      address="0x742d35Cc6634C0532925a3b844Bc7e7595f1a2b8"
+      balance="2.5"
+      token="ETH"
+      network="Ethereum"
+      onSend={handleSendClick}
+    />
+  )
+}`}</pre>
+              </div>
+            </Card>
+
+            <Card className="glassmorphism-dark p-6 border-border">
+              <h3 className="text-lg font-semibold mb-4">4. Confirm transactions</h3>
+              <div className="bg-white/5 p-4 rounded-lg overflow-x-auto">
+                <pre className="font-mono text-sm text-emerald-400">{`import { TransactionConfirm } from '@lumina/sdk'
+
+export function SendPage() {
+  return (
+    <TransactionConfirm
+      transaction={{
+        to: '0x...',
+        amount: '1.5',
+        token: 'ETH',
+        network: 'Ethereum',
+        gasFee: '0.012 ETH',
+      }}
+      onConfirm={submitTransaction}
+    />
+  )
+}`}</pre>
+              </div>
+            </Card>
+          </div>
+
+          {/* Features List */}
+          <div className="mt-12">
+            <h2 className="text-2xl font-bold mb-6">SDK Features</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {[
+                'Email Authentication',
+                'Biometric Login',
+                'Social Auth',
+                'Multi-Chain',
+                'Gas Estimation',
+                'Real-time Balance',
+                'Transaction History',
+                'Webhook Support',
+                'Custom Styling',
+                'Type-Safe APIs',
+                'Error Handling',
+                'Rate Limiting',
+              ].map((feature, index) => (
+                <div key={index} className="p-4 glassmorphism-dark rounded-lg border border-border">
+                  <p className="font-medium">{feature}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </LuminaProvider>
+  )
+}