Upload 5 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+monetization_bubble_chart.png filter=lfs diff=lfs merge=lfs -text

app.js

@@ -0,0 +1,867 @@
+// AutoRevenue Generator JavaScript
+
+// Application Data
+const appData = {
+  revenue_data: {
+    total_generated: 1847.50,
+    this_month: 1250.00,
+    daily_average: 42.30,
+    payment_links: {
+      active: 12,
+      total_revenue: 680.00,
+      conversion_rate: 8.5
+    },
+    pdf_sales: {
+      active: 8,
+      total_revenue: 420.00,
+      downloads: 156
+    },
+    forms: {
+      active: 5,
+      leads_generated: 89,
+      revenue: 747.50
+    }
+  },
+  recent_transactions: [
+    {type: "Payment Link", amount: 25.00, product: "SEO Guide", time: "2 min ago"},
+    {type: "PDF Sale", amount: 15.00, product: "Marketing Templates", time: "8 min ago"},
+    {type: "Form Lead", amount: 50.00, product: "Consultation Booking", time: "15 min ago"},
+    {type: "Payment Link", amount: 35.00, product: "Design Course", time: "23 min ago"}
+  ],
+  weekly_revenue: [
+    {day: "Mon", amount: 45.20},
+    {day: "Tue", amount: 67.80},
+    {day: "Wed", amount: 23.50},
+    {day: "Thu", amount: 89.30},
+    {day: "Fri", amount: 112.70},
+    {day: "Sat", amount: 78.90},
+    {day: "Sun", amount: 156.40}
+  ],
+  payment_links: [
+    {id: 1, name: "SEO Masterclass", price: 25.00, clicks: 234, conversions: 18, revenue: 450.00},
+    {id: 2, name: "Design Templates Pack", price: 15.00, clicks: 156, conversions: 12, revenue: 180.00},
+    {id: 3, name: "Marketing Automation Course", price: 50.00, clicks: 89, conversions: 5, revenue: 250.00}
+  ],
+  pdf_products: [
+    {id: 1, name: "Complete Marketing Guide", price: 20.00, downloads: 67, revenue: 340.00},
+    {id: 2, name: "Business Plan Template", price: 10.00, downloads: 89, revenue: 180.00}
+  ],
+  forms: [
+    {id: 1, name: "Consultation Booking", submissions: 34, value_per_lead: 50.00, revenue: 450.00},
+    {id: 2, name: "Premium Newsletter", submissions: 156, value_per_lead: 5.00, revenue: 300.00}
+  ]
+};
+
+// Global variables
+let revenueChart = null;
+let toolsChart = null;
+let currentRevenue = appData.revenue_data.total_generated;
+
+// DOM Content Loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeApp();
+});
+
+// Initialize Application
+function initializeApp() {
+    setupNavigation();
+    setupRevenueCounter();
+    setupCharts();
+    populateTransactions();
+    populatePaymentLinks();
+    populatePDFProducts();
+    populateForms();
+    setupFormHandlers();
+    setupNotifications();
+    startRevenueSimulation();
+    setupInteractivity();
+}
+
+// Navigation Setup
+function setupNavigation() {
+    const navLinks = document.querySelectorAll('.nav-link');
+    const actionBtns = document.querySelectorAll('.action-btn');
+    const sections = document.querySelectorAll('.section');
+
+    // Navigation links
+    navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const targetSection = link.dataset.section;
+            showSection(targetSection);
+            
+            // Update active nav link
+            navLinks.forEach(nl => nl.classList.remove('active'));
+            link.classList.add('active');
+        });
+    });
+
+    // Action buttons
+    actionBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const targetSection = btn.dataset.section;
+            showSection(targetSection);
+            
+            // Update active nav link
+            navLinks.forEach(nl => nl.classList.remove('active'));
+            document.querySelector(`[data-section="${targetSection}"]`).classList.add('active');
+        });
+    });
+}
+
+// Show Section
+function showSection(sectionId) {
+    const sections = document.querySelectorAll('.section');
+    sections.forEach(section => {
+        section.classList.remove('active');
+    });
+    
+    const targetSection = document.getElementById(sectionId);
+    if (targetSection) {
+        targetSection.classList.add('active');
+    }
+}
+
+// Revenue Counter Animation
+function setupRevenueCounter() {
+    const revenueElement = document.getElementById('total-revenue');
+    animateCounter(revenueElement, 0, currentRevenue, 2000);
+}
+
+function animateCounter(element, start, end, duration) {
+    const startTime = performance.now();
+    
+    function updateCounter(currentTime) {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        
+        // Easing function
+        const easeOut = 1 - Math.pow(1 - progress, 3);
+        const current = start + (end - start) * easeOut;
+        
+        element.textContent = current.toFixed(2);
+        element.classList.add('count-up');
+        
+        if (progress < 1) {
+            requestAnimationFrame(updateCounter);
+        } else {
+            element.classList.remove('count-up');
+        }
+    }
+    
+    requestAnimationFrame(updateCounter);
+}
+
+// Charts Setup
+function setupCharts() {
+    setupRevenueChart();
+    setupToolsChart();
+}
+
+function setupRevenueChart() {
+    const ctx = document.getElementById('revenueChart')?.getContext('2d');
+    if (!ctx) return;
+
+    const chartData = {
+        labels: appData.weekly_revenue.map(item => item.day),
+        datasets: [{
+            label: 'Ingresos Diarios',
+            data: appData.weekly_revenue.map(item => item.amount),
+            borderColor: '#667eea',
+            backgroundColor: 'rgba(102, 126, 234, 0.1)',
+            borderWidth: 3,
+            fill: true,
+            tension: 0.4,
+            pointBackgroundColor: '#667eea',
+            pointBorderColor: '#ffffff',
+            pointBorderWidth: 2,
+            pointRadius: 6
+        }]
+    };
+
+    revenueChart = new Chart(ctx, {
+        type: 'line',
+        data: chartData,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return '$' + value.toFixed(0);
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+function setupToolsChart() {
+    const ctx = document.getElementById('toolsChart')?.getContext('2d');
+    if (!ctx) return;
+
+    const chartData = {
+        labels: ['Enlaces de Pago', 'PDFs', 'Formularios'],
+        datasets: [{
+            data: [
+                appData.revenue_data.payment_links.total_revenue,
+                appData.revenue_data.pdf_sales.total_revenue,
+                appData.revenue_data.forms.revenue
+            ],
+            backgroundColor: ['#667eea', '#764ba2', '#f093fb'],
+            borderWidth: 0
+        }]
+    };
+
+    toolsChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: chartData,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom'
+                }
+            }
+        }
+    });
+}
+
+// Populate Transactions
+function populateTransactions() {
+    const container = document.getElementById('transactions-list');
+    if (!container) return;
+
+    container.innerHTML = '';
+    
+    appData.recent_transactions.forEach(transaction => {
+        const transactionElement = createTransactionElement(transaction);
+        container.appendChild(transactionElement);
+    });
+}
+
+function createTransactionElement(transaction) {
+    const div = document.createElement('div');
+    div.className = 'transaction-item';
+    
+    const iconClass = getTransactionIcon(transaction.type);
+    
+    div.innerHTML = `
+        <div class="transaction-info">
+            <div class="transaction-icon">
+                <i class="${iconClass}"></i>
+            </div>
+            <div class="transaction-details">
+                <h4>${transaction.product}</h4>
+                <p>${transaction.type}</p>
+            </div>
+        </div>
+        <div class="transaction-amount">$${transaction.amount.toFixed(2)}</div>
+        <div class="transaction-time">${transaction.time}</div>
+    `;
+    
+    return div;
+}
+
+function getTransactionIcon(type) {
+    const icons = {
+        'Payment Link': 'fas fa-link',
+        'PDF Sale': 'fas fa-file-pdf',
+        'Form Lead': 'fas fa-clipboard-list'
+    };
+    return icons[type] || 'fas fa-dollar-sign';
+}
+
+// Populate Payment Links
+function populatePaymentLinks() {
+    const container = document.getElementById('links-table');
+    if (!container) return;
+
+    container.innerHTML = '';
+    
+    appData.payment_links.forEach(link => {
+        const linkElement = createLinkElement(link);
+        container.appendChild(linkElement);
+    });
+}
+
+function createLinkElement(link) {
+    const div = document.createElement('div');
+    div.className = 'link-item';
+    
+    const conversionRate = ((link.conversions / link.clicks) * 100).toFixed(1);
+    
+    div.innerHTML = `
+        <div class="item-info">
+            <h4>${link.name}</h4>
+            <p>$${link.price.toFixed(2)} • ${link.clicks} clics</p>
+        </div>
+        <div class="item-stats">
+            <span>${link.conversions} conversiones</span>
+            <span>${conversionRate}% tasa</span>
+        </div>
+        <div class="item-revenue">$${link.revenue.toFixed(2)}</div>
+        <button class="btn btn--sm btn--outline">Ver</button>
+    `;
+    
+    return div;
+}
+
+// Populate PDF Products
+function populatePDFProducts() {
+    const container = document.getElementById('pdf-products-grid');
+    if (!container) return;
+
+    container.innerHTML = '';
+    
+    appData.pdf_products.forEach(product => {
+        const productElement = createProductElement(product);
+        container.appendChild(productElement);
+    });
+}
+
+function createProductElement(product) {
+    const div = document.createElement('div');
+    div.className = 'product-item';
+    
+    div.innerHTML = `
+        <div class="item-info">
+            <h4>${product.name}</h4>
+            <p>$${product.price.toFixed(2)} • ${product.downloads} descargas</p>
+        </div>
+        <div class="item-stats">
+            <span>Landing activa</span>
+        </div>
+        <div class="item-revenue">$${product.revenue.toFixed(2)}</div>
+        <button class="btn btn--sm btn--outline">Editar</button>
+    `;
+    
+    return div;
+}
+
+// Populate Forms
+function populateForms() {
+    const container = document.getElementById('forms-list');
+    if (!container) return;
+
+    container.innerHTML = '';
+    
+    appData.forms.forEach(form => {
+        const formElement = createFormElement(form);
+        container.appendChild(formElement);
+    });
+}
+
+function createFormElement(form) {
+    const div = document.createElement('div');
+    div.className = 'form-item';
+    
+    div.innerHTML = `
+        <div class="item-info">
+            <h4>${form.name}</h4>
+            <p>${form.submissions} submissions • $${form.value_per_lead.toFixed(2)}/lead</p>
+        </div>
+        <div class="item-stats">
+            <span>Activo</span>
+        </div>
+        <div class="item-revenue">$${form.revenue.toFixed(2)}</div>
+        <button class="btn btn--sm btn--outline">Config</button>
+    `;
+    
+    return div;
+}
+
+// Form Handlers
+function setupFormHandlers() {
+    setupPaymentLinkForm();
+    setupPDFUpload();
+    setupFormBuilder();
+}
+
+function setupPaymentLinkForm() {
+    const form = document.getElementById('payment-link-form');
+    if (!form) return;
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const formData = new FormData(form);
+        const productName = form.querySelector('input[type="text"]').value;
+        const price = form.querySelector('input[type="number"]').value;
+        
+        if (productName && price) {
+            generatePaymentLink(productName, price);
+            showSuccessNotification('¡Enlace de pago creado!', `${productName} - $${price}`);
+            playSuccessSound();
+        }
+    });
+}
+
+function generatePaymentLink(productName, price) {
+    const linkContainer = document.getElementById('generated-link');
+    const placeholder = document.getElementById('link-placeholder');
+    const urlInput = document.getElementById('payment-url');
+    const qrCanvas = document.getElementById('qr-canvas');
+    
+    if (!linkContainer || !urlInput || !qrCanvas) return;
+    
+    // Generate fake URL
+    const linkId = Math.random().toString(36).substr(2, 9);
+    const paymentUrl = `https://autorevenue.app/pay/${linkId}`;
+    
+    urlInput.value = paymentUrl;
+    
+    // Generate QR Code
+    QRCode.toCanvas(qrCanvas, paymentUrl, {
+        width: 150,
+        margin: 2,
+        color: {
+            dark: '#667eea',
+            light: '#ffffff'
+        }
+    });
+    
+    placeholder.style.display = 'none';
+    linkContainer.style.display = 'block';
+    
+    // Copy link functionality
+    const copyBtn = document.getElementById('copy-link');
+    copyBtn.addEventListener('click', () => {
+        navigator.clipboard.writeText(paymentUrl).then(() => {
+            showSuccessNotification('¡Enlace copiado!', 'El enlace se ha copiado al portapapeles');
+        });
+    });
+}
+
+function setupPDFUpload() {
+    const dropzone = document.getElementById('pdf-dropzone');
+    const fileInput = document.getElementById('pdf-input');
+    const configSection = document.getElementById('pdf-config');
+    
+    if (!dropzone || !fileInput) return;
+
+    dropzone.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    dropzone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropzone.classList.add('dragover');
+    });
+
+    dropzone.addEventListener('dragleave', () => {
+        dropzone.classList.remove('dragover');
+    });
+
+    dropzone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropzone.classList.remove('dragover');
+        
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            handlePDFUpload(files[0]);
+        }
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handlePDFUpload(e.target.files[0]);
+        }
+    });
+}
+
+function handlePDFUpload(file) {
+    const configSection = document.getElementById('pdf-config');
+    const titleInput = document.getElementById('pdf-title');
+    
+    if (!configSection || !titleInput) return;
+    
+    // Simulate upload
+    titleInput.value = file.name.replace('.pdf', '');
+    configSection.style.display = 'block';
+    
+    showSuccessNotification('¡PDF subido!', `${file.name} está listo para monetizar`);
+    
+    // Create PDF page button
+    const createBtn = document.getElementById('create-pdf-page');
+    createBtn.addEventListener('click', () => {
+        showSuccessNotification('¡Landing page creada!', 'Tu PDF ya está monetizando automáticamente');
+        playSuccessSound();
+        
+        // Simulate adding revenue
+        setTimeout(() => {
+            simulateNewTransaction('PDF Sale', 15.00, titleInput.value);
+        }, 3000);
+    });
+}
+
+function setupFormBuilder() {
+    const templates = document.querySelectorAll('.template-card');
+    const builderTool = document.getElementById('form-builder-tool');
+    const previewArea = document.getElementById('form-preview-area');
+    
+    templates.forEach(template => {
+        template.addEventListener('click', () => {
+            // Remove previous selection
+            templates.forEach(t => t.classList.remove('selected'));
+            template.classList.add('selected');
+            
+            // Show builder
+            builderTool.style.display = 'block';
+            
+            // Generate form preview
+            const templateType = template.dataset.template;
+            generateFormPreview(templateType, previewArea);
+            
+            showSuccessNotification('Template seleccionado', `${template.querySelector('h4').textContent} está listo para personalizar`);
+        });
+    });
+    
+    // Publish form
+    const publishBtn = document.getElementById('publish-form');
+    if (publishBtn) {
+        publishBtn.addEventListener('click', () => {
+            showSuccessNotification('¡Formulario publicado!', 'Ya está generando leads automáticamente');
+            playSuccessSound();
+            
+            // Simulate form submission after a while
+            setTimeout(() => {
+                simulateNewTransaction('Form Lead', 50.00, 'Nuevo Lead');
+            }, 5000);
+        });
+    }
+}
+
+function generateFormPreview(templateType, container) {
+    const templates = {
+        contact: `
+            <form class="preview-form">
+                <div class="form-group">
+                    <label class="form-label">Nombre completo</label>
+                    <input type="text" class="form-control" placeholder="Tu nombre">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Email</label>
+                    <input type="email" class="form-control" placeholder="tu@email.com">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Mensaje</label>
+                    <textarea class="form-control" rows="3" placeholder="Tu mensaje..."></textarea>
+                </div>
+                <button type="submit" class="btn btn--primary">Enviar</button>
+            </form>
+        `,
+        consultation: `
+            <form class="preview-form">
+                <div class="form-group">
+                    <label class="form-label">Nombre y empresa</label>
+                    <input type="text" class="form-control" placeholder="Tu nombre y empresa">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Email de contacto</label>
+                    <input type="email" class="form-control" placeholder="tu@email.com">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Tipo de consultoría</label>
+                    <select class="form-control">
+                        <option>Marketing Digital</option>
+                        <option>Estrategia de Negocios</option>
+                        <option>Análisis Financiero</option>
+                    </select>
+                </div>
+                <button type="submit" class="btn btn--primary">Reservar Consultoría - $50</button>
+            </form>
+        `,
+        newsletter: `
+            <form class="preview-form">
+                <div class="form-group">
+                    <label class="form-label">Email</label>
+                    <input type="email" class="form-control" placeholder="tu@email.com">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Intereses</label>
+                    <select class="form-control">
+                        <option>Marketing</option>
+                        <option>Ventas</option>
+                        <option>Emprendimiento</option>
+                    </select>
+                </div>
+                <button type="submit" class="btn btn--primary">Suscribirse - $5/mes</button>
+            </form>
+        `,
+        survey: `
+            <form class="preview-form">
+                <div class="form-group">
+                    <label class="form-label">¿Cuál es tu mayor desafío en marketing?</label>
+                    <select class="form-control">
+                        <option>Generar leads</option>
+                        <option>Aumentar ventas</option>
+                        <option>Retener clientes</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Email para recibir recompensa</label>
+                    <input type="email" class="form-control" placeholder="tu@email.com">
+                </div>
+                <button type="submit" class="btn btn--primary">Completar Encuesta - $10</button>
+            </form>
+        `
+    };
+    
+    container.innerHTML = templates[templateType] || '<p>Template no encontrado</p>';
+}
+
+// Notifications System
+function setupNotifications() {
+    // Initial notifications
+    setTimeout(() => {
+        showSuccessNotification('¡Bienvenido!', 'Tu plataforma está generando ingresos automáticamente');
+    }, 1000);
+}
+
+function showSuccessNotification(title, message) {
+    const container = document.getElementById('notifications-container');
+    if (!container) return;
+    
+    const notification = document.createElement('div');
+    notification.className = 'notification';
+    
+    notification.innerHTML = `
+        <i class="fas fa-check-circle"></i>
+        <div class="notification-content">
+            <h4>${title}</h4>
+            <p>${message}</p>
+        </div>
+    `;
+    
+    container.appendChild(notification);
+    
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}
+
+// Revenue Simulation
+function startRevenueSimulation() {
+    // Simulate new transactions every 30-60 seconds
+    setInterval(() => {
+        if (Math.random() > 0.3) { // 70% chance
+            simulateRandomTransaction();
+        }
+    }, 45000); // Every 45 seconds
+    
+    // Initial simulation after 10 seconds
+    setTimeout(() => {
+        simulateRandomTransaction();
+    }, 10000);
+}
+
+function simulateRandomTransaction() {
+    const transactionTypes = [
+        { type: 'Payment Link', amounts: [15, 25, 35, 50], products: ['SEO Course', 'Design Pack', 'Marketing Guide', 'Business Template'] },
+        { type: 'PDF Sale', amounts: [10, 15, 20, 25], products: ['Marketing Guide', 'Business Plan', 'Templates Pack', 'Strategy Manual'] },
+        { type: 'Form Lead', amounts: [30, 50, 75, 100], products: ['Consultation', 'Premium Lead', 'Expert Call', 'Strategy Session'] }
+    ];
+    
+    const randomType = transactionTypes[Math.floor(Math.random() * transactionTypes.length)];
+    const randomAmount = randomType.amounts[Math.floor(Math.random() * randomType.amounts.length)];
+    const randomProduct = randomType.products[Math.floor(Math.random() * randomType.products.length)];
+    
+    simulateNewTransaction(randomType.type, randomAmount, randomProduct);
+}
+
+function simulateNewTransaction(type, amount, product) {
+    // Update total revenue
+    currentRevenue += amount;
+    const revenueElement = document.getElementById('total-revenue');
+    if (revenueElement) {
+        animateCounter(revenueElement, currentRevenue - amount, currentRevenue, 1000);
+    }
+    
+    // Add to transactions list
+    const newTransaction = {
+        type: type,
+        amount: amount,
+        product: product,
+        time: 'Ahora'
+    };
+    
+    const container = document.getElementById('transactions-list');
+    if (container) {
+        const transactionElement = createTransactionElement(newTransaction);
+        container.insertBefore(transactionElement, container.firstChild);
+        
+        // Add animation
+        transactionElement.style.animation = 'slideInUp 0.5s ease-out';
+        
+        // Remove oldest if more than 5
+        const transactions = container.querySelectorAll('.transaction-item');
+        if (transactions.length > 5) {
+            transactions[transactions.length - 1].remove();
+        }
+    }
+    
+    // Show notification
+    showSuccessNotification(
+        `¡Nueva ${type}!`,
+        `+$${amount.toFixed(2)} de ${product}`
+    );
+    
+    // Play success sound
+    playSuccessSound();
+    
+    // Update charts if visible
+    updateCharts();
+}
+
+function updateCharts() {
+    // Update revenue chart with new data point
+    if (revenueChart) {
+        const today = new Date().toLocaleDateString('es', { weekday: 'short' });
+        const lastValue = revenueChart.data.datasets[0].data[revenueChart.data.datasets[0].data.length - 1];
+        
+        revenueChart.data.datasets[0].data[revenueChart.data.datasets[0].data.length - 1] = lastValue + (Math.random() * 20 + 10);
+        revenueChart.update();
+    }
+}
+
+// Interactivity Setup
+function setupInteractivity() {
+    // Add click handlers for all interactive elements
+    document.addEventListener('click', (e) => {
+        // Handle button clicks with feedback
+        if (e.target.matches('.btn')) {
+            e.target.classList.add('success-animation');
+            setTimeout(() => {
+                e.target.classList.remove('success-animation');
+            }, 600);
+        }
+        
+        // Handle card clicks
+        if (e.target.closest('.stat-card, .overview-card')) {
+            e.target.closest('.stat-card, .overview-card').classList.add('success-animation');
+            setTimeout(() => {
+                e.target.closest('.stat-card, .overview-card').classList.remove('success-animation');
+            }, 600);
+        }
+    });
+    
+    // Add hover effects for interactive elements
+    const interactiveElements = document.querySelectorAll('.btn, .card, .nav-link, .action-btn');
+    interactiveElements.forEach(element => {
+        element.addEventListener('mouseenter', () => {
+            element.style.transform = element.style.transform + ' scale(1.02)';
+        });
+        
+        element.addEventListener('mouseleave', () => {
+            element.style.transform = element.style.transform.replace(' scale(1.02)', '');
+        });
+    });
+}
+
+// Utility Functions
+function playSuccessSound() {
+    const audio = document.getElementById('success-sound');
+    if (audio) {
+        audio.currentTime = 0;
+        audio.play().catch(() => {
+            // Handle autoplay policy restrictions
+            console.log('Audio play prevented by browser policy');
+        });
+    }
+}
+
+function formatCurrency(amount) {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD'
+    }).format(amount);
+}
+
+function getRandomColor() {
+    const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#11998e', '#38ef7d'];
+    return colors[Math.floor(Math.random() * colors.length)];
+}
+
+// Initialize special effects
+function initializeEffects() {
+    // Add floating animation to money icons
+    const floatingIcons = document.querySelectorAll('.floating-money i');
+    floatingIcons.forEach((icon, index) => {
+        icon.style.animationDelay = `${index * 0.5}s`;
+    });
+    
+    // Add pulse effect to live indicator
+    const pulseElement = document.querySelector('.pulse');
+    if (pulseElement) {
+        pulseElement.style.animation = 'pulse 2s infinite';
+    }
+}
+
+// Performance optimization
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Initialize effects when DOM is ready
+document.addEventListener('DOMContentLoaded', initializeEffects);
+
+// Handle window resize for charts
+window.addEventListener('resize', debounce(() => {
+    if (revenueChart) revenueChart.resize();
+    if (toolsChart) toolsChart.resize();
+}, 250));
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    if (e.ctrlKey || e.metaKey) {
+        switch (e.key) {
+            case '1':
+                e.preventDefault();
+                showSection('dashboard');
+                break;
+            case '2':
+                e.preventDefault();
+                showSection('payment-links');
+                break;
+            case '3':
+                e.preventDefault();
+                showSection('pdf-monetization');
+                break;
+            case '4':
+                e.preventDefault();
+                showSection('form-builder');
+                break;
+            case '5':
+                e.preventDefault();
+                showSection('analytics');
+                break;
+        }
+    }
+});
+
+// Export for potential external use
+window.AutoRevenueApp = {
+    showSection,
+    simulateNewTransaction,
+    showSuccessNotification,
+    currentRevenue: () => currentRevenue
+};

index.html

@@ -1,19 +1,484 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AutoRevenue Generator - Generador de Ingresos Automáticos</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container flex items-center justify-between">
+            <div class="flex items-center gap-16">
+                <div class="logo">
+                    <i class="fas fa-coins"></i>
+                    <span>AutoRevenue</span>
+                </div>
+                <nav class="nav">
+                    <a href="#dashboard" class="nav-link active" data-section="dashboard">Dashboard</a>
+                    <a href="#payment-links" class="nav-link" data-section="payment-links">Enlaces de Pago</a>
+                    <a href="#pdf-monetization" class="nav-link" data-section="pdf-monetization">PDFs</a>
+                    <a href="#form-builder" class="nav-link" data-section="form-builder">Formularios</a>
+                    <a href="#analytics" class="nav-link" data-section="analytics">Analytics</a>
+                </nav>
+            </div>
+            <div class="profile">
+                <i class="fas fa-user-circle"></i>
+                <span>Mi Cuenta</span>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main">
+        <!-- Dashboard Section -->
+        <section id="dashboard" class="section active">
+            <div class="container">
+                <!-- Hero Section -->
+                <div class="hero">
+                    <div class="hero-content">
+                        <h1>¡Generando Ingresos Automáticamente!</h1>
+                        <p>Tu plataforma está trabajando 24/7 para crear ingresos pasivos</p>
+                        <div class="revenue-counter">
+                            <span class="currency">$</span>
+                            <span id="total-revenue">1847.50</span>
+                            <div class="revenue-label">Total Generado</div>
+                        </div>
+                    </div>
+                    <div class="hero-visual">
+                        <div class="floating-money">
+                            <i class="fas fa-dollar-sign"></i>
+                            <i class="fas fa-coins"></i>
+                            <i class="fas fa-money-bill-wave"></i>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Stats -->
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-link"></i>
+                        </div>
+                        <div class="stat-content">
+                            <div class="stat-value">12</div>
+                            <div class="stat-label">Enlaces Activos</div>
+                            <div class="stat-change positive">+3 esta semana</div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-file-pdf"></i>
+                        </div>
+                        <div class="stat-content">
+                            <div class="stat-value">8</div>
+                            <div class="stat-label">PDFs Vendidos</div>
+                            <div class="stat-change positive">+$420</div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-clipboard-list"></i>
+                        </div>
+                        <div class="stat-content">
+                            <div class="stat-value">89</div>
+                            <div class="stat-label">Leads Generados</div>
+                            <div class="stat-change positive">+15 hoy</div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-chart-line"></i>
+                        </div>
+                        <div class="stat-content">
+                            <div class="stat-value">$42.30</div>
+                            <div class="stat-label">Promedio Diario</div>
+                            <div class="stat-change positive">+12%</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Revenue Chart -->
+                <div class="chart-section">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Ingresos de los Últimos 7 Días</h3>
+                        </div>
+                        <div class="card__body">
+                            <canvas id="revenueChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Recent Transactions -->
+                <div class="transactions-section">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Transacciones Recientes</h3>
+                            <div class="live-indicator">
+                                <span class="pulse"></span>
+                                <span>En Vivo</span>
+                            </div>
+                        </div>
+                        <div class="card__body">
+                            <div class="transactions-list" id="transactions-list">
+                                <!-- Transactions will be populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="quick-actions">
+                    <h3>Acciones Rápidas</h3>
+                    <div class="actions-grid">
+                        <button class="action-btn" data-section="payment-links">
+                            <i class="fas fa-link"></i>
+                            <span>Crear Enlace de Pago</span>
+                        </button>
+                        <button class="action-btn" data-section="pdf-monetization">
+                            <i class="fas fa-file-pdf"></i>
+                            <span>Monetizar PDF</span>
+                        </button>
+                        <button class="action-btn" data-section="form-builder">
+                            <i class="fas fa-edit"></i>
+                            <span>Crear Formulario</span>
+                        </button>
+                        <button class="action-btn" data-section="analytics">
+                            <i class="fas fa-chart-bar"></i>
+                            <span>Ver Analytics</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Payment Links Section -->
+        <section id="payment-links" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Generador de Enlaces de Pago</h2>
+                    <p>Crea enlaces de pago instantáneos y empieza a generar ingresos</p>
+                </div>
+
+                <div class="tools-grid">
+                    <div class="tool-panel">
+                        <div class="card">
+                            <div class="card__header">
+                                <h3>Crear Nuevo Enlace</h3>
+                            </div>
+                            <div class="card__body">
+                                <form id="payment-link-form">
+                                    <div class="form-group">
+                                        <label class="form-label">Nombre del Producto</label>
+                                        <input type="text" class="form-control" placeholder="Ej: Curso de Marketing">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="form-label">Precio (USD)</label>
+                                        <input type="number" class="form-control" placeholder="25.00">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="form-label">Descripción</label>
+                                        <textarea class="form-control" rows="3" placeholder="Describe tu producto..."></textarea>
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="form-label">Email de Notificación</label>
+                                        <input type="email" class="form-control" placeholder="tu@email.com">
+                                    </div>
+                                    <button type="submit" class="btn btn--primary btn--full-width">
+                                        <i class="fas fa-magic"></i>
+                                        Generar Enlace
+                                    </button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tool-panel">
+                        <div class="card">
+                            <div class="card__header">
+                                <h3>Enlace Generado</h3>
+                            </div>
+                            <div class="card__body">
+                                <div id="generated-link" class="generated-content" style="display: none;">
+                                    <div class="link-preview">
+                                        <input type="text" class="form-control" id="payment-url" readonly>
+                                        <button class="btn btn--secondary" id="copy-link">
+                                            <i class="fas fa-copy"></i>
+                                            Copiar
+                                        </button>
+                                    </div>
+                                    <div class="qr-code">
+                                        <canvas id="qr-canvas"></canvas>
+                                    </div>
+                                </div>
+                                <div id="link-placeholder" class="placeholder">
+                                    <i class="fas fa-link"></i>
+                                    <p>Tu enlace de pago aparecerá aquí</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Active Links List -->
+                <div class="active-links">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Enlaces Activos</h3>
+                        </div>
+                        <div class="card__body">
+                            <div class="links-table" id="links-table">
+                                <!-- Will be populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- PDF Monetization Section -->
+        <section id="pdf-monetization" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Monetización de PDFs</h2>
+                    <p>Convierte tus PDFs en fuentes de ingresos automáticos</p>
+                </div>
+
+                <div class="upload-zone">
+                    <div class="card">
+                        <div class="card__body">
+                            <div class="dropzone" id="pdf-dropzone">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                                <h3>Arrastra tu PDF aquí</h3>
+                                <p>o haz clic para seleccionar archivo</p>
+                                <input type="file" id="pdf-input" accept=".pdf" style="display: none;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pdf-config" id="pdf-config" style="display: none;">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Configuración de Monetización</h3>
+                        </div>
+                        <div class="card__body">
+                            <div class="config-grid">
+                                <div class="form-group">
+                                    <label class="form-label">Título del PDF</label>
+                                    <input type="text" class="form-control" id="pdf-title">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Precio</label>
+                                    <input type="number" class="form-control" id="pdf-price" placeholder="10.00">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Tipo de Acceso</label>
+                                    <select class="form-control" id="pdf-access">
+                                        <option value="free">Gratuito (con email)</option>
+                                        <option value="paid">Pago único</option>
+                                        <option value="subscription">Suscripción</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <button class="btn btn--primary" id="create-pdf-page">
+                                <i class="fas fa-rocket"></i>
+                                Crear Landing Page
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- PDF Products List -->
+                <div class="pdf-products">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>PDFs Monetizados</h3>
+                        </div>
+                        <div class="card__body">
+                            <div class="products-grid" id="pdf-products-grid">
+                                <!-- Will be populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Form Builder Section -->
+        <section id="form-builder" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Constructor de Formularios Inteligentes</h2>
+                    <p>Crea formularios que conviertan visitantes en ingresos</p>
+                </div>
+
+                <div class="form-templates">
+                    <h3>Templates Disponibles</h3>
+                    <div class="templates-grid">
+                        <div class="template-card" data-template="contact">
+                            <i class="fas fa-envelope"></i>
+                            <h4>Formulario de Contacto</h4>
+                            <p>Captura leads básicos</p>
+                        </div>
+                        <div class="template-card" data-template="consultation">
+                            <i class="fas fa-calendar-alt"></i>
+                            <h4>Reserva de Consultoría</h4>
+                            <p>$50 por lead calificado</p>
+                        </div>
+                        <div class="template-card" data-template="newsletter">
+                            <i class="fas fa-newspaper"></i>
+                            <h4>Newsletter Premium</h4>
+                            <p>Suscripción mensual</p>
+                        </div>
+                        <div class="template-card" data-template="survey">
+                            <i class="fas fa-poll"></i>
+                            <h4>Encuesta Pagada</h4>
+                            <p>Recompensa por participar</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-builder-tool" id="form-builder-tool" style="display: none;">
+                    <div class="builder-grid">
+                        <div class="form-elements">
+                            <div class="card">
+                                <div class="card__header">
+                                    <h3>Elementos</h3>
+                                </div>
+                                <div class="card__body">
+                                    <div class="elements-list">
+                                        <div class="element-item" data-type="text">
+                                            <i class="fas fa-font"></i>
+                                            <span>Campo de Texto</span>
+                                        </div>
+                                        <div class="element-item" data-type="email">
+                                            <i class="fas fa-at"></i>
+                                            <span>Email</span>
+                                        </div>
+                                        <div class="element-item" data-type="textarea">
+                                            <i class="fas fa-align-left"></i>
+                                            <span>Área de Texto</span>
+                                        </div>
+                                        <div class="element-item" data-type="select">
+                                            <i class="fas fa-list"></i>
+                                            <span>Lista Desplegable</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-preview">
+                            <div class="card">
+                                <div class="card__header">
+                                    <h3>Vista Previa</h3>
+                                </div>
+                                <div class="card__body">
+                                    <div id="form-preview-area">
+                                        <p>Selecciona un template para empezar</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-actions">
+                        <button class="btn btn--primary" id="publish-form">
+                            <i class="fas fa-globe"></i>
+                            Publicar Formulario
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Active Forms -->
+                <div class="active-forms">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Formularios Activos</h3>
+                        </div>
+                        <div class="card__body">
+                            <div class="forms-list" id="forms-list">
+                                <!-- Will be populated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Analytics Section -->
+        <section id="analytics" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Analytics Avanzados</h2>
+                    <p>Analiza y optimiza tus fuentes de ingresos</p>
+                </div>
+
+                <div class="analytics-overview">
+                    <div class="overview-cards">
+                        <div class="overview-card">
+                            <h4>Ingresos por Herramienta</h4>
+                            <canvas id="toolsChart"></canvas>
+                        </div>
+                        <div class="overview-card">
+                            <h4>Proyección Mensual</h4>
+                            <div class="projection">
+                                <div class="projection-value">$3,250</div>
+                                <div class="projection-growth">+24% vs mes anterior</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailed-analytics">
+                    <div class="card">
+                        <div class="card__header">
+                            <h3>Métricas Detalladas</h3>
+                        </div>
+                        <div class="card__body">
+                            <div class="metrics-grid">
+                                <div class="metric">
+                                    <div class="metric-label">Tasa de Conversión Global</div>
+                                    <div class="metric-value">8.7%</div>
+                                    <div class="metric-change positive">+1.2%</div>
+                                </div>
+                                <div class="metric">
+                                    <div class="metric-label">Valor Promedio por Cliente</div>
+                                    <div class="metric-value">$28.45</div>
+                                    <div class="metric-change positive">+5.8%</div>
+                                </div>
+                                <div class="metric">
+                                    <div class="metric-label">ROI de Marketing</div>
+                                    <div class="metric-value">340%</div>
+                                    <div class="metric-change positive">+15%</div>
+                                </div>
+                                <div class="metric">
+                                    <div class="metric-label">Tiempo Promedio de Conversión</div>
+                                    <div class="metric-value">2.3 días</div>
+                                    <div class="metric-change negative">-0.5 días</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Floating Notifications -->
+    <div id="notifications-container"></div>
+
+    <!-- Success Sound -->
+    <audio id="success-sound" preload="auto">
+        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSs=" type="audio/wav">
+    </audio>
+
+    <script src="app.js"></script>
+</body>
+</html>

monetization_opportunities_2025.csv

@@ -0,0 +1,11 @@
+Tipo de Aplicación,Potencial de Ingresos (USD/mes),Dificultad Técnica (1-10),Tiempo de Setup (días),Potencial Viral,Mantenimiento Requerido,APIs Necesarias
+Micro SaaS API Gateway,"2,000-15,000",7,14,Alto,Bajo,"Stripe, Auth0, Multiple"
+AI Content Generator,"1,500-25,000",8,21,Muy Alto,Medio,"OpenAI, Anthropic, Stability AI"
+Automated Newsletter Tool,"800-8,000",4,7,Medio,Muy Bajo,"Mailchimp, ConvertKit, Sendgrid"
+Social Media Scheduler,"1,200-12,000",5,10,Alto,Bajo,"Twitter, Instagram, LinkedIn"
+No-Code Form Builder,"600-6,000",3,5,Bajo,Muy Bajo,"Typeform, Stripe, Zapier"
+Webhook Automation Hub,"1,000-10,000",6,12,Medio,Bajo,"Multiple webhooks, Stripe"
+PDF Document Tools,"400-4,000",2,3,Bajo,Muy Bajo,"PDF libraries, Stripe"
+Browser Extension Toolkit,"500-5,000",4,7,Medio,Bajo,"Chrome APIs, Analytics"
+Subscription Analytics,"1,500-15,000",6,15,Medio,Bajo,"Stripe, PayPal, Analytics"
+Payment Link Generator,"300-3,000",2,2,Bajo,Muy Bajo,"Stripe, QR Generator"

style.css

@@ -1,28 +1,1631 @@
+
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  --color-background: rgba(31, 33, 33, 1);
+  --color-surface: rgba(38, 40, 40, 1);
+  --color-text: rgba(245, 245, 245, 1);
+  --color-text-secondary: rgba(167, 169, 169, 0.7);
+  --color-primary: rgba(50, 184, 198, 1);
+  --color-primary-hover: rgba(45, 166, 178, 1);
+  --color-primary-active: rgba(41, 150, 161, 1);
+  --color-secondary: rgba(119, 124, 124, 0.15);
+  --color-secondary-hover: rgba(119, 124, 124, 0.25);
+  --color-secondary-active: rgba(119, 124, 124, 0.3);
+  --color-border: rgba(119, 124, 124, 0.3);
+  --color-error: rgba(255, 84, 89, 1);
+  --color-success: rgba(50, 184, 198, 1);
+  --color-warning: rgba(230, 129, 97, 1);
+  --color-info: rgba(167, 169, 169, 1);
+  --color-focus-ring: rgba(50, 184, 198, 0.4);
+  --color-btn-primary-text: rgba(19, 52, 59, 1);
+  --color-card-border: rgba(119, 124, 124, 0.15);
+  --color-card-border-inner: rgba(119, 124, 124, 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(119, 124, 124, 0.2);
+  --color-select-caret: rgba(245, 245, 245, 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: 50, 184, 198;
+  --color-error-rgb: 255, 84, 89;
+  --color-warning-rgb: 230, 129, 97;
+  --color-info-rgb: 167, 169, 169;
+}
+
+[data-color-scheme="light"] {
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
 }
 
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* Custom styles for AutoRevenue Generator */
+
+/* Custom Color Palette */
+:root {
+  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  --gradient-warning: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
+  --color-accent-1: #667eea;
+  --color-accent-2: #764ba2;
+  --color-accent-3: #f093fb;
+  --color-accent-4: #f5576c;
+  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Header Styles */
+.header {
+  background: var(--gradient-primary);
+  color: white;
+  padding: var(--space-16) 0;
+  box-shadow: var(--shadow-lg);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+}
+
+.logo i {
+  font-size: var(--font-size-2xl);
+  color: #ffd700;
+  margin-right: var(--space-4);
+}
+
+.nav {
+  display: flex;
+  gap: var(--space-8);
+}
+
+.nav-link {
+  color: rgba(255, 255, 255, 0.8);
+  padding: var(--space-10) var(--space-16);
+  border-radius: var(--radius-base);
+  transition: all var(--duration-normal) var(--ease-standard);
+  cursor: pointer;
+  font-weight: var(--font-weight-medium);
+  border: 2px solid transparent;
+  position: relative;
+}
+
+.nav-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.nav-link.active {
+  background: rgba(255, 255, 255, 0.25);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.nav-link.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 3px;
+  background: #ffd700;
+  border-radius: var(--radius-full);
+}
+
+.profile {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-base);
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.profile:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
+.profile i {
+  font-size: var(--font-size-xl);
+  margin-right: var(--space-4);
+}
+
+/* Main Layout */
+.main {
+  min-height: calc(100vh - 80px);
+  padding: var(--space-32) 0;
+}
+
+.section {
+  display: none;
+}
+
+.section.active {
+  display: block;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--space-32);
+}
+
+.section-header h2 {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: var(--space-8);
+}
+
+/* Hero Section - Fixed overlapping issues */
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-32);
+  align-items: center;
+  margin-bottom: var(--space-32);
+  padding: var(--space-32);
+  background: var(--gradient-primary);
+  border-radius: var(--radius-lg);
+  color: white;
+  position: relative;
+  overflow: hidden;
+  min-height: 400px;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
+  pointer-events: none;
+  z-index: 1;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  padding: var(--space-24);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.hero h1 {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-16);
+  animation: slideInUp 0.8s var(--animation-bounce);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.hero p {
+  font-size: var(--font-size-lg);
+  opacity: 0.9;
+  margin-bottom: var(--space-24);
+  animation: slideInUp 0.8s var(--animation-bounce) 0.2s both;
+}
+
+.revenue-counter {
+  text-align: center;
+  animation: slideInUp 0.8s var(--animation-bounce) 0.4s both;
+  background: rgba(255, 255, 255, 0.1);
+  padding: var(--space-20);
+  border-radius: var(--radius-lg);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.currency {
+  font-size: var(--font-size-3xl);
+  opacity: 0.8;
+  display: inline-block;
+  margin-right: var(--space-8);
+}
+
+#total-revenue {
+  font-size: 3.5rem;
+  font-weight: var(--font-weight-bold);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  display: inline-block;
+  letter-spacing: -0.02em;
+}
+
+.revenue-label {
+  font-size: var(--font-size-lg);
+  opacity: 0.9;
+  margin-top: var(--space-12);
+  font-weight: var(--font-weight-medium);
+}
+
+.hero-visual {
+  position: relative;
+  height: 350px;
+  z-index: 2;
+}
+
+.floating-money {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.floating-money i {
+  position: absolute;
+  font-size: 2.5rem;
+  color: #ffd700;
+  animation: float 3s ease-in-out infinite;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.floating-money i:nth-child(1) {
+  top: 20%;
+  left: 20%;
+  animation-delay: 0s;
 }
+
+.floating-money i:nth-child(2) {
+  top: 60%;
+  left: 60%;
+  animation-delay: 1s;
+}
+
+.floating-money i:nth-child(3) {
+  top: 40%;
+  left: 80%;
+  animation-delay: 2s;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-24);
+  margin-bottom: var(--space-32);
+}
+
+.stat-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-card-border);
+  display: flex;
+  gap: var(--space-16);
+  transition: transform var(--duration-normal) var(--ease-standard);
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.stat-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: var(--radius-base);
+  background: var(--gradient-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: var(--font-size-xl);
+  flex-shrink: 0;
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  line-height: 1.2;
+}
+
+.stat-label {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-4);
+}
+
+.stat-change {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--space-4);
+}
+
+.stat-change.positive {
+  color: var(--color-success);
+}
+
+.stat-change.negative {
+  color: var(--color-error);
+}
+
+/* Chart Section */
+.chart-section {
+  margin-bottom: var(--space-32);
+}
+
+.chart-section canvas {
+  max-height: 300px;
+}
+
+/* Transactions */
+.transactions-section {
+  margin-bottom: var(--space-32);
+}
+
+.live-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: var(--color-success);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-success);
+  animation: pulse 2s infinite;
+}
+
+.transaction-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.transaction-item:hover {
+  background: var(--color-secondary);
+}
+
+.transaction-item:last-child {
+  border-bottom: none;
+}
+
+.transaction-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+.transaction-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-base);
+  background: var(--gradient-success);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.transaction-details h4 {
+  margin: 0;
+  font-size: var(--font-size-base);
+}
+
+.transaction-details p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.transaction-amount {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-success);
+}
+
+.transaction-time {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Quick Actions */
+.quick-actions {
+  margin-bottom: var(--space-32);
+}
+
+.quick-actions h3 {
+  margin-bottom: var(--space-16);
+  text-align: center;
+}
+
+.actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-16);
+}
+
+.action-btn {
+  background: var(--gradient-secondary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-12);
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  text-align: center;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.action-btn i {
+  font-size: var(--font-size-2xl);
+}
+
+.action-btn span {
+  font-weight: var(--font-weight-medium);
+}
+
+/* Tools Grid */
+.tools-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-24);
+  margin-bottom: var(--space-32);
+}
+
+.tool-panel {
+  min-height: 400px;
+}
+
+/* Generated Content */
+.generated-content {
+  text-align: center;
+}
+
+.link-preview {
+  display: flex;
+  gap: var(--space-8);
+  margin-bottom: var(--space-16);
+}
+
+.link-preview input {
+  flex: 1;
+}
+
+.qr-code {
+  display: flex;
+  justify-content: center;
+}
+
+.qr-code canvas {
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-base);
+}
+
+.placeholder {
+  text-align: center;
+  padding: var(--space-32);
+  color: var(--color-text-secondary);
+}
+
+.placeholder i {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-16);
+  opacity: 0.5;
+}
+
+/* Tables */
+.links-table,
+.products-grid,
+.forms-list {
+  display: grid;
+  gap: var(--space-16);
+}
+
+.link-item,
+.product-item,
+.form-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  gap: var(--space-16);
+  align-items: center;
+  padding: var(--space-16);
+  background: var(--color-secondary);
+  border-radius: var(--radius-base);
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.link-item:hover,
+.product-item:hover,
+.form-item:hover {
+  background: var(--color-secondary-hover);
+  transform: translateX(4px);
+}
+
+.item-info h4 {
+  margin: 0;
+  font-size: var(--font-size-base);
+}
+
+.item-info p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.item-stats {
+  display: flex;
+  gap: var(--space-16);
+  font-size: var(--font-size-sm);
+}
+
+.item-revenue {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-success);
+}
+
+/* Upload Zone */
+.upload-zone {
+  margin-bottom: var(--space-32);
+}
+
+.dropzone {
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-32);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+}
+
+.dropzone:hover {
+  border-color: var(--color-primary);
+  background: var(--color-secondary);
+}
+
+.dropzone.dragover {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: white;
+}
+
+.dropzone i {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-16);
+  color: var(--color-primary);
+}
+
+.dropzone h3 {
+  margin-bottom: var(--space-8);
+}
+
+.dropzone p {
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Configuration */
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-16);
+  margin-bottom: var(--space-24);
+}
+
+/* Templates */
+.templates-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-16);
+  margin-bottom: var(--space-32);
+}
+
+.template-card {
+  background: var(--color-surface);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+}
+
+.template-card:hover {
+  border-color: var(--color-primary);
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.template-card.selected {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: white;
+}
+
+.template-card i {
+  font-size: var(--font-size-3xl);
+  margin-bottom: var(--space-16);
+  color: var(--color-primary);
+}
+
+.template-card.selected i {
+  color: white;
+}
+
+.template-card h4 {
+  margin-bottom: var(--space-8);
+}
+
+.template-card p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  opacity: 0.8;
+}
+
+/* Form Builder */
+.builder-grid {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  gap: var(--space-24);
+  margin-bottom: var(--space-24);
+}
+
+.elements-list {
+  display: grid;
+  gap: var(--space-8);
+}
+
+.element-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.element-item:hover {
+  background: var(--color-secondary);
+}
+
+.form-actions {
+  text-align: center;
+  margin-bottom: var(--space-32);
+}
+
+/* Analytics */
+.analytics-overview {
+  margin-bottom: var(--space-32);
+}
+
+.overview-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-24);
+}
+
+.overview-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-card-border);
+}
+
+.overview-card h4 {
+  margin-bottom: var(--space-16);
+  text-align: center;
+}
+
+.overview-card canvas {
+  max-height: 200px;
+}
+
+.projection {
+  text-align: center;
+}
+
+.projection-value {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-success);
+  margin-bottom: var(--space-8);
+}
+
+.projection-growth {
+  font-size: var(--font-size-lg);
+  color: var(--color-success);
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-24);
+}
+
+.metric {
+  text-align: center;
+  padding: var(--space-16);
+  border-radius: var(--radius-base);
+  background: var(--color-secondary);
+}
+
+.metric-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-8);
+}
+
+.metric-value {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-4);
+}
+
+.metric-change {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Notifications */
+#notifications-container {
+  position: fixed;
+  top: 100px;
+  right: var(--space-24);
+  z-index: 1000;
+  max-width: 400px;
+}
+
+.notification {
+  background: var(--gradient-success);
+  color: white;
+  padding: var(--space-16);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-8);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  animation: slideInRight 0.5s var(--animation-bounce);
+}
+
+.notification i {
+  font-size: var(--font-size-xl);
+}
+
+.notification-content h4 {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--font-size-base);
+}
+
+.notification-content p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  opacity: 0.9;
+}
+
+/* Animations */
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--color-success-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0);
+  }
+}
+
+@keyframes countUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.count-up {
+  animation: countUp 0.6s var(--animation-bounce);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero {
+    grid-template-columns: 1fr;
+    text-align: center;
+    min-height: 300px;
+  }
+  
+  .hero-content {
+    margin-bottom: var(--space-16);
+  }
+  
+  .hero-visual {
+    height: 200px;
+  }
+  
+  #total-revenue {
+    font-size: 2.5rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .tools-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .builder-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .overview-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .nav {
+    gap: var(--space-4);
+  }
+  
+  .nav-link {
+    padding: var(--space-8) var(--space-12);
+    font-size: var(--font-size-sm);
+  }
+  
+  .actions-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .templates-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .link-item,
+  .product-item,
+  .form-item {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  
+  .container {
+    padding-left: var(--space-12);
+    padding-right: var(--space-12);
+  }
+}
+
+/* Loading States */
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Success States */
+.success-animation {
+  animation: successPulse 0.6s var(--animation-bounce);
+}
+
+@keyframes successPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Micro-interactions */
+.btn:active {
+  transform: scale(0.98);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+}
+
+.form-control:focus {
+  transform: scale(1.02);
+}
+
+/* Dark Mode Enhancements */
+@media (prefers-color-scheme: dark) {
+  .stat-card,
+  .overview-card {
+    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(119, 124, 124, 0.05) 100%);
+  }
+  
+  .template-card:hover {
+    background: linear-gradient(135deg, var(--color-secondary) 0%, rgba(119, 124, 124, 0.1) 100%);
+  }
+}