import React, { useState } from "react"; import { Button } from "@/components/ui/button"; import { Container } from "@/components/ui/container"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Switch } from "@/components/ui/switch"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { Menu, X, Zap, Shield, PieChart, CreditCard, Youtube, Twitter, Mail, Check, ChevronDown, Star, Sun, Moon, ArrowRight, Layers } from "lucide-react"; // --- Mock Data --- const integrations = [ { name: "Stripe", icon: CreditCard }, { name: "YouTube", icon: Youtube }, { name: "Twitter", icon: Twitter }, { name: "Discord", icon: Shield }, { name: "Patreon", icon: Star }, { name: "Gumroad", icon: Layers }, ]; const testimonials = [ { name: "Sarah Jenkins", role: "Digital Artist", handle: "@sarahdraws", content: "Lumina completely changed how I manage my commissions. The automation is next-level.", }, { name: "Marcus Chen", role: "Tech Educator", handle: "@marcustech", content: "Finally, a platform that doesn't take a massive cut of my course sales. The analytics are chef's kiss.", }, { name: "Elena Rodriguez", role: "Music Producer", handle: "@elenabeats", content: "Integrated with my workflow in seconds. The fan club features are exactly what I needed in 2026.", }, ]; const faqData = [ { question: "How much does Lumina take per transaction?", answer: "We charge a flat 5% fee on all transactions. No hidden fees, no monthly minimums on the Starter plan.", }, { question: "Can I import my existing subscribers?", answer: "Absolutely. Our one-click importer works with Patreon, Substack, and CSV exports. We handle the migration seamlessly.", }, { question: "Is there a limit on the number of members?", answer: "No limits on the Starter and Pro plans. Scale as big as you want without worrying about per-member fees.", }, ]; // --- Components --- function Header({ theme, toggleTheme }: { theme: string; toggleTheme: () => void }) { const [isOpen, setIsOpen] = useState(false); return (

Lumina

); } function Hero() { return (

New: AI-Driven Audience Insights

Monetize your craft
without the chaos.

The all-in-one platform for creators to sell products, manage memberships, and build community. Launch your empire in minutes, not months.

No credit card required · Cancel anytime

); } function Integrations() { return (

Powering top creators worldwide

{integrations.map((item) => (

{item.name}

))}

); } function ProductDemo() { return (

Everything you need to grow

From your first dollar to your first million, Lumina scales with your ambition.

Analytics Community Commerce Deep Dive Analytics Understand your audience behavior.

Revenue Chart Visualization

$12.4k

MRR

8.2%

Churn

1,240

Active Subs

Engagement Hub Keep your superfans close.

Live Chat & Forum Preview

Seamless Sales Sell digital products, courses, and merch.

Checkout Flow Preview

); } function PricingSection() { const [isYearly, setIsYearly] = useState(false); return (

Simple, transparent pricing

Start free, upgrade when you're ready to scale.

Monthly Yearly (Save 20%)

{/* Starter */} Starter Perfect for creators just getting started.

${isYearly ? '0' : '0'} /month

Unlimited members

Basic Analytics

Community Tools

{/* Pro */}

Loved by creators

{testimonials.map((item, index) => (

{[...Array(5)].map((_, i) => ( ))}

"{item.content}"

{item.name[0]}

{item.name}

{item.role} · {item.handle}

))}

); } function FAQ() { return (

Frequently Asked Questions

{faqData.map((item, index) => (

{item.question}

{item.answer}

))}

); } function Footer() { return ( ); } // --- Main App --- export default function App() { // Check system preference for dark mode default const [theme, setTheme] = useState('dark'); const toggleTheme = () => { const newTheme = theme === 'dark' ? 'light' : 'dark'; setTheme(newTheme); if (newTheme === 'dark') { document.documentElement.classList.add('dark'); document.body.classList.remove('light'); } else { document.documentElement.classList.remove('dark'); document.body.classList.add('light'); } }; React.useEffect(() => { // Initialize theme document.documentElement.classList.add('dark'); }, []); return (

); }

Monetize your craft without the chaos.

Everything you need to grow

Simple, transparent pricing

Loved by creators

Frequently Asked Questions

Monetize your craft
without the chaos.

Lumina Creator Monetization Platform