97:I[903690,["/chat-static/_next/static/immutable/chunks/30lnb4k9wre0m.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/2mir3-5f6t3o5.js","/chat-static/_next/static/immutable/chunks/1t1q53932g_z8.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/12ugihi8z3aeb.js","/chat-static/_next/static/immutable/chunks/0qzyexb_zkjwf.js","/chat-static/_next/static/immutable/chunks/1nokw8-t4vcwo.js","/chat-static/_next/static/immutable/chunks/2mce1eey0jgp7.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/3f22wvu9ilyi1.js","/chat-static/_next/static/immutable/chunks/1czp3b0g85f02.js","/chat-static/_next/static/immutable/chunks/228q2klxykhwx.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/08xf8vb78poqo.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/3_l4uui0hp3eb.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/42n54f9o31v4d.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1xhvpb4uihhla.js","/chat-static/_next/static/immutable/chunks/225gu8164id0o.js","/chat-static/_next/static/immutable/chunks/2o-n3975q38j1.js","/chat-static/_next/static/immutable/chunks/25341_r2y14gk.js","/chat-static/_next/static/immutable/chunks/38k-aabziryr6.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/0huj7k3hvxe1h.js","/chat-static/_next/static/immutable/chunks/2n3pdme24p3jh.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/0ie61nirtqfup.js","/chat-static/_next/static/immutable/chunks/0f4s5-a1kt5_3.js","/chat-static/_next/static/immutable/chunks/3tlz18-5zm74b.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/1m82ozg5v84up.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/3f8qailuhp8mh.js","/chat-static/_next/static/immutable/chunks/3j4n20zvat2gd.js","/chat-static/_next/static/immutable/chunks/38dlhojrh5jn2.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/29t5emya7qxfu.js","/chat-static/_next/static/immutable/chunks/3dejmxwb2du9j.js","/chat-static/_next/static/immutable/chunks/2y9cujgqfy_t_.js","/chat-static/_next/static/immutable/chunks/3e-zc_q-gjz53.js"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/immutable/chunks/30lnb4k9wre0m.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/2mir3-5f6t3o5.js","/chat-static/_next/static/immutable/chunks/1t1q53932g_z8.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/12ugihi8z3aeb.js","/chat-static/_next/static/immutable/chunks/0qzyexb_zkjwf.js","/chat-static/_next/static/immutable/chunks/1nokw8-t4vcwo.js","/chat-static/_next/static/immutable/chunks/2mce1eey0jgp7.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/3f22wvu9ilyi1.js","/chat-static/_next/static/immutable/chunks/1czp3b0g85f02.js","/chat-static/_next/static/immutable/chunks/228q2klxykhwx.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/08xf8vb78poqo.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/3_l4uui0hp3eb.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/42n54f9o31v4d.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1xhvpb4uihhla.js","/chat-static/_next/static/immutable/chunks/225gu8164id0o.js","/chat-static/_next/static/immutable/chunks/2o-n3975q38j1.js","/chat-static/_next/static/immutable/chunks/25341_r2y14gk.js","/chat-static/_next/static/immutable/chunks/38k-aabziryr6.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/0huj7k3hvxe1h.js","/chat-static/_next/static/immutable/chunks/2n3pdme24p3jh.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/0ie61nirtqfup.js","/chat-static/_next/static/immutable/chunks/0f4s5-a1kt5_3.js","/chat-static/_next/static/immutable/chunks/3tlz18-5zm74b.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/1m82ozg5v84up.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/3f8qailuhp8mh.js","/chat-static/_next/static/immutable/chunks/3j4n20zvat2gd.js","/chat-static/_next/static/immutable/chunks/38dlhojrh5jn2.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/29t5emya7qxfu.js","/chat-static/_next/static/immutable/chunks/3dejmxwb2du9j.js","/chat-static/_next/static/immutable/chunks/2y9cujgqfy_t_.js","/chat-static/_next/static/immutable/chunks/3e-zc_q-gjz53.js"],"SWRDataProvider"] 99:T15dd9,[V0_FILE]html:file="index.html" isMerged="true" Social Media Autopilot Agent

⚡ Powered By AWS Bedrock AgentCore

Claude 3.5 Sonnet Multi-Agent System AWS Lambda DynamoDB S3

📤

Drop Your Content Here

Photos, videos, or random clips

The agents will figure out what to do with them

⚡ Agent System Running...

ACTIVE

🧠

Agent 1: Audience Intelligence

Waiting...

📝

Agent 2: Content Strategy

Waiting...

🎰

Agent 3: EV Optimizer

Waiting...

💼

Agent 4: Brand Outreach

Waiting...

⚡

Agent 5: Execution

Waiting...

Agent Logs

[V0_FILE]css:file="styles.css" isMerged="true" * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #667eea; --primary-dark: #764ba2; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --text-primary: #1f2937; --text-secondary: #6b7280; --bg-light: #f9fafb; --bg-card: #ffffff; --border: #e5e7eb; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg-gradient); min-height: 100vh; padding: 20px; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; background: var(--bg-card); border-radius: 24px; padding: 48px; box-shadow: var(--shadow-lg); } /* Header */ .header { text-align: center; margin-bottom: 40px; } .logo { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .logo-icon { font-size: 3em; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } h1 { font-size: 2.5em; background: var(--bg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; } .tagline { font-size: 1.25em; color: var(--text-secondary); font-weight: 500; } /* Tech Stack */ .tech-stack { background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); padding: 24px; border-radius: 16px; margin-bottom: 40px; text-align: center; } .tech-stack h3 { color: var(--primary); margin-bottom: 16px; font-size: 1.1em; } .badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tech-badge { background: var(--bg-gradient); color: white; padding: 8px 20px; border-radius: 24px; font-size: 0.9em; font-weight: 600; box-shadow: var(--shadow); } /* Upload Section */ .upload-section { margin-bottom: 40px; } .upload-zone { border: 3px dashed var(--primary); border-radius: 20px; padding: 60px 40px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--bg-light); position: relative; overflow: hidden; } .upload-zone::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-gradient); opacity: 0; transition: opacity 0.3s ease; } .upload-zone:hover { border-color: var(--primary-dark); transform: translateY(-4px); box-shadow: var(--shadow); } .upload-zone:hover::before { opacity: 0.05; } .upload-zone.dragover { border-color: var(--success); background: #f0fdf4; } .upload-zone.dragover::before { opacity: 0.1; } .upload-icon { font-size: 4em; margin-bottom: 16px; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .upload-zone h2 { color: var(--primary); font-size: 1.8em; margin-bottom: 8px; } .upload-subtitle { color: var(--text-secondary); font-size: 1.1em; margin-bottom: 4px; } .upload-hint { color: var(--text-secondary); font-size: 0.95em; opacity: 0.8; margin-bottom: 24px; } .browse-btn { background: var(--bg-card); border: 2px solid var(--primary); color: var(--primary); padding: 12px 32px; border-radius: 12px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .browse-btn:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: var(--shadow); } /* File List */ .file-list { margin: 24px 0; padding: 20px; background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); border-radius: 16px; display: none; } .file-list.show { display: block; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .file-list strong { color: var(--primary); font-size: 1.1em; display: block; margin-bottom: 12px; } .file-item { padding: 12px; background: var(--bg-card); border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); } .file-icon { font-size: 1.5em; } .file-info { flex: 1; } .file-name { font-weight: 600; color: var(--text-primary); } .file-size { font-size: 0.9em; color: var(--text-secondary); } /* Primary Button */ .btn-primary { width: 100%; background: var(--bg-gradient); color: white; border: none; padding: 20px 40px; font-size: 1.25em; font-weight: 700; border-radius: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: var(--shadow); } .btn-primary:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary.loading { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); } .btn-primary.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .btn-icon { font-size: 1.2em; } /* Status Section */ .status-section { display: none; margin-top: 40px; } .status-section.show { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .status-header h3 { color: var(--primary); font-size: 1.5em; } .status-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); border-radius: 24px; font-weight: 600; color: var(--primary); } .pulse { width: 12px; height: 12px; background: var(--success); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } /* Agents Grid */ .agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 32px; } .agent-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px; padding: 20px; transition: all 0.3s ease; } .agent-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .agent-card.complete { border-color: var(--success); background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); } .agent-header { display: flex; gap: 16px; margin-bottom: 16px; } .agent-icon { font-size: 2em; } .agent-card h4 { color: var(--text-primary); font-size: 1em; margin-bottom: 4px; } .agent-status { color: var(--text-secondary); font-size: 0.9em; } .agent-card.active .agent-status { color: var(--primary); font-weight: 600; } .agent-card.complete .agent-status { color: var(--success); font-weight: 600; } .agent-progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; background: var(--bg-gradient); width: 0%; transition: width 0.5s ease; } .agent-card.complete .progress-bar { width: 100%; background: linear-gradient(135deg, var(--success) 0%, #059669 100%); } /* Terminal */ .terminal { background: #1e1e1e; border-radius: 12px; overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-lg); } .terminal-header { background: #2d2d2d; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; } .terminal-title { color: #9ca3af; font-size: 0.9em; font-weight: 600; } .terminal-controls { display: flex; gap: 8px; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; } .terminal-body { padding: 20px; font-family: "Courier New", monospace; font-size: 0.9em; line-height: 1.8; color: #10b981; max-height: 400px; overflow-y: auto; } .terminal-body::-webkit-scrollbar { width: 8px; } .terminal-body::-webkit-scrollbar-track { background: #1e1e1e; } .terminal-body::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } .log-line { margin: 4px 0; animation: typeIn 0.3s ease; } @keyframes typeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .log-separator { color: var(--primary); } .log-header { color: #ffffff; font-weight: bold; } .log-success { color: #10b981; } .log-info { color: #60a5fa; } .log-warning { color: #f59e0b; } .log-error { color: #ef4444; } /* Results */ .results { background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); border-left: 5px solid var(--primary); border-radius: 16px; padding: 32px; display: none; } .results.show { display: block; animation: slideUp 0.5s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .results h3 { color: var(--primary); font-size: 1.8em; margin-bottom: 24px; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; } .metric { background: var(--bg-card); padding: 24px; border-radius: 12px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s ease; } .metric:hover { transform: translateY(-4px); } .metric-value { font-size: 2.5em; font-weight: 800; background: var(--bg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .metric-label { color: var(--text-secondary); font-size: 0.95em; font-weight: 600; } .next-steps { background: var(--bg-card); padding: 24px; border-radius: 12px; box-shadow: var(--shadow); } .next-steps h4 { color: var(--text-primary); font-size: 1.2em; margin-bottom: 16px; } .next-steps ul { list-style: none; } .next-steps li { padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); display: flex; align-items: center; gap: 12px; } .next-steps li:last-child { border-bottom: none; } .next-steps li::before { content: "✓"; color: var(--success); font-weight: bold; font-size: 1.2em; } /* Responsive */ @media (max-width: 768px) { .container { padding: 24px; } h1 { font-size: 2em; } .tagline { font-size: 1em; } .upload-zone { padding: 40px 20px; } .agents-grid { grid-template-columns: 1fr; } .metrics-grid { grid-template-columns: 1fr; } } [V0_FILE]javascript:file="script.js" isMerged="true" // Configuration const API_ENDPOINT = "YOUR_API_ENDPOINT_HERE" // Replace with your actual API endpoint const USE_MOCK_DATA = true // Set to false when backend is ready // State let selectedFiles = [] // DOM Elements const uploadZone = document.getElementById("uploadZone") const fileInput = document.getElementById("fileInput") const fileList = document.getElementById("fileList") const startBtn = document.getElementById("startBtn") const statusSection = document.getElementById("statusSection") const terminalBody = document.getElementById("terminalBody") const results = document.getElementById("results") // Initialize function init() { setupEventListeners() } // Event Listeners function setupEventListeners() { // File input change fileInput.addEventListener("change", (e) => { handleFiles(e.target.files) }) // Drag and drop uploadZone.addEventListener("dragover", (e) => { e.preventDefault() uploadZone.classList.add("dragover") }) uploadZone.addEventListener("dragleave", () => { uploadZone.classList.remove("dragover") }) uploadZone.addEventListener("drop", (e) => { e.preventDefault() uploadZone.classList.remove("dragover") handleFiles(e.dataTransfer.files) }) // Click to browse uploadZone.addEventListener("click", (e) => { if (e.target !== fileInput) { fileInput.click() } }) // Start button startBtn.addEventListener("click", startAutopilot) } // Handle file selection function handleFiles(files) { selectedFiles = Array.from(files) if (selectedFiles.length === 0) { fileList.classList.remove("show") startBtn.disabled = true return } // Display file list fileList.innerHTML = ` ✅ Selected ${selectedFiles.length} file(s): ${selectedFiles .map( (file) => `

${getFileIcon(file.type)}

${file.name}

${formatFileSize(file.size)}

`, ) .join("")} ` fileList.classList.add("show") startBtn.disabled = false } // Get file icon based on type function getFileIcon(type) { if (type.startsWith("image/")) return "🖼️" if (type.startsWith("video/")) return "🎥" return "📄" } // Format file size function formatFileSize(bytes) { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i] } // Start autopilot workflow async function startAutopilot() { if (selectedFiles.length === 0) { alert("⚠️ Please select some files first!") return } // Update button state startBtn.disabled = true startBtn.classList.add("loading") startBtn.innerHTML = '🔄AGENTS WORKING...' // Show status section statusSection.classList.add("show") // Clear previous logs terminalBody.innerHTML = "" results.classList.remove("show") // Add initial logs addLog("═══════════════════════════════════════════════════════════", "separator") addLog("🚀 SOCIAL MEDIA AUTOPILOT INITIATED", "header") addLog("═══════════════════════════════════════════════════════════", "separator") addLog("") try { if (USE_MOCK_DATA) { await runMockWorkflow() } else { await runRealWorkflow() } } catch (error) { addLog("", "error") addLog("❌ ERROR: " + error.message, "error") addLog("Please check the console for details", "error") console.error(error) startBtn.disabled = false startBtn.classList.remove("loading") startBtn.innerHTML = '🚀START AUTOPILOT' } } // Run mock workflow (for frontend testing) async function runMockWorkflow() { // Agent 1: Audience Intelligence await runAgent(1, "Audience Intelligence", async () => { addLog("📤 Uploading content to S3...") await sleep(800) addLog("✅ Content uploaded to S3", "success") addLog("") addLog("🧠 AGENT 1: Audience Intelligence Agent", "info") addLog(" Analyzing followers across Instagram, LinkedIn, TikTok...") await sleep(1200) addLog(" ✅ 3 audience segments identified", "success") addLog(" ✅ Engagement patterns analyzed", "success") addLog("") }) // Agent 2: Content Strategy await runAgent(2, "Content Strategy", async () => { addLog("📝 AGENT 2: Content Strategy Agent", "info") addLog(" Creating 7-day optimized content strategy...") await sleep(1200) addLog(" ✅ 7 days planned", "success") addLog(" ✅ 14 posts scheduled", "success") addLog("") }) // Agent 3: EV Optimizer await runAgent(3, "EV Optimizer", async () => { addLog("🎰 AGENT 3: EV Optimizer Agent", "info") addLog(" Calculating Expected Value (poker-style)...") await sleep(1000) addLog(" ✅ EV scores calculated for all content", "success") addLog(" ✅ Optimal posting order determined", "success") addLog("") }) // Agent 4: Brand Outreach await runAgent(4, "Brand Outreach", async () => { addLog("💼 AGENT 4: Brand Outreach Agent", "info") addLog(" Finding partnership opportunities...") await sleep(1200) addLog(" ✅ 3 brand opportunities identified", "success") addLog(" ✅ Personalized pitch emails generated", "success") addLog(" ✅ Outreach sent (simulated for demo)", "success") addLog("") }) // Agent 5: Execution await runAgent(5, "Execution", async () => { addLog("⚡ AGENT 5: Execution Agent", "info") addLog(" Scheduling posts across platforms...") await sleep(1000) addLog(" ✅ 14 posts scheduled", "success") addLog(" ✅ Auto-posting configured", "success") addLog("") }) // Final summary addLog("═══════════════════════════════════════════════════════════", "separator") addLog("🎉 AUTOPILOT ACTIVE!", "header") addLog("═══════════════════════════════════════════════════════════", "separator") addLog("") addLog("Your social media is now running on AUTOPILOT! 🚀", "info") addLog("") addLog("Next steps:", "header") addLog(" • Posts will publish automatically at optimal times", "success") addLog(" • Brand pitches have been sent", "success") addLog(" • Strategy will adapt based on performance", "success") addLog(" • Upload more content anytime to keep autopilot running", "success") // Show results showResults({ posts_scheduled: 14, brands_contacted: 3, days_planned: 7, files_uploaded: selectedFiles.length, }) // Update button startBtn.classList.remove("loading") startBtn.classList.add("success") startBtn.innerHTML = '✅AUTOPILOT ACTIVE' } // Run real workflow (with actual API) async function runRealWorkflow() { const formData = new FormData() selectedFiles.forEach((file) => formData.append("files", file)) formData.append("user_id", "demo_user") const response = await fetch(`${API_ENDPOINT}/upload`, { method: "POST", body: formData, }) if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } const result = await response.json() // Process real results // ... (implement based on actual API response) } // Run individual agent async function runAgent(agentNum, agentName, workFn) { const agentCard = document.getElementById(`agent${agentNum}`) const statusEl = agentCard.querySelector(".agent-status") const progressBar = agentCard.querySelector(".progress-bar") // Mark as active agentCard.classList.add("active") statusEl.textContent = "Running..." progressBar.style.width = "50%" // Run agent work await workFn() // Mark as complete agentCard.classList.remove("active") agentCard.classList.add("complete") statusEl.textContent = "Complete ✓" progressBar.style.width = "100%" } // Add log to terminal function addLog(message, type = "") { const line = document.createElement("div") line.className = `log-line ${type ? "log-" + type : ""}` line.textContent = message terminalBody.appendChild(line) terminalBody.scrollTop = terminalBody.scrollHeight } // Show results function showResults(data) { results.innerHTML = `

📊 Autopilot Summary

${data.posts_scheduled}

Posts Scheduled

${data.brands_contacted}

Brands Contacted

${data.days_planned}

Days Planned

${data.files_uploaded}

Content Uploaded

🎯 What Happens Next

Posts will publish automatically at scheduled times
Monitor brand responses in your email
Check back for weekly performance report
Upload more content anytime to keep autopilot running

` results.classList.add("show") } // Utility: Sleep function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) } // Initialize on load document.addEventListener("DOMContentLoaded", init) [V0_FILE]markdown:file="README.md" isMerged="true" # Social Media Autopilot Agent - Frontend A beautiful, interactive frontend for the Social Media Autopilot Agent system. ## Features - 🎨 Modern, gradient-based design - 📤 Drag-and-drop file upload - 🤖 Real-time agent status visualization - 📊 Terminal-style logging - 📈 Results dashboard with metrics - 📱 Fully responsive ## Local Development 1. **Open the frontend:** \`\`\`bash # Simply open index.html in your browser open index.html # or double-click the file \`\`\` 2. **Edit the files:** - `index.html` - Structure and content - `styles.css` - All styling and animations - `script.js` - Functionality and API integration 3. **Connect to backend (when ready):** - Open `script.js` - Change `USE_MOCK_DATA` to `false` - Update `API_ENDPOINT` with your actual API URL ## File Structure \`\`\` ├── index.html # Main HTML structure ├── styles.css # All styles and animations ├── script.js # Frontend logic and API calls └── README.md # This file \`\`\` ## Customization ### Colors Edit CSS variables in `styles.css`: \`\`\`css :root { --primary: #667eea; --primary-dark: #764ba2; --success: #10b981; /* ... */ } \`\`\` ### API Integration In `script.js`, update: \`\`\`javascript const API_ENDPOINT = 'https://your-api-gateway-url.com'; const USE_MOCK_DATA = false; \`\`\` ### Agent Configuration Modify the agents in `index.html` or add new ones following the same pattern. ## Features to Customize - Upload file types (currently images/videos) - Agent names and icons - Terminal log colors and formatting - Results metrics display - Animation speeds and effects ## Next Steps 1. ✅ Test locally with mock data 2. 🔄 Your friend builds the backend 3. 🔌 Connect frontend to backend API 4. 🚀 Deploy to production ## Notes - Currently uses mock data for demonstration - All animations are CSS-based (no external libraries) - Fully self-contained (no CDN dependencies) - Works offline for development [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist } from "next/font/google" import { Suspense } from "react" import "./globals.css" const geistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans", }) const geistMono = Geist({ subsets: ["latin"], variable: "--font-geist-mono", weight: ["400", "500", "600", "700"], }) export const metadata: Metadata = { title: "Social Media Autopilot", description: "AI-Powered Multi-Agent System for Social Media Domination", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...}>{children} ) } [V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true" export function Twitter({ className }: { className?: string }) { return ( ) } export function Linkedin({ className }: { className?: string }) { return ( ) } export function Instagram({ className }: { className?: string }) { return ( ) } export function Facebook({ className }: { className?: string }) { return ( ) } export function Upload({ className }: { className?: string }) { return ( ) } export function Calendar({ className }: { className?: string }) { return ( ) } export function Send({ className }: { className?: string }) { return ( ) } export function TrendingUp({ className }: { className?: string }) { return ( ) } export function Users({ className }: { className?: string }) { return ( ) } export function Target({ className }: { className?: string }) { return ( ) } export function Zap({ className }: { className?: string }) { return ( ) } export function Mail({ className }: { className?: string }) { return ( ) } export function CheckCircle2({ className }: { className?: string }) { return ( ) } export function Plus({ className }: { className?: string }) { return ( ) } export function BarChart3({ className }: { className?: string }) { return ( ) } export function Clock({ className }: { className?: string }) { return ( ) } export function DollarSign({ className }: { className?: string }) { return ( ) } export function Sparkles({ className }: { className?: string }) { return ( ) } export function Rocket({ className }: { className?: string }) { return ( ) } export function Brain({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) }, ) Input.displayName = "Input" export { Input } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to clean dark theme with blue/purple accents for hustler vibe */ --background: oklch(0.12 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.25 265); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.2 0 0); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.25 265); --chart-1: oklch(0.65 0.25 265); --chart-2: oklch(0.6 0.25 285); --chart-3: oklch(0.7 0.2 200); --chart-4: oklch(0.75 0.2 150); --chart-5: oklch(0.7 0.25 320); --radius: 0.75rem; --sidebar: oklch(0.15 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.25 265); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.65 0.25 265); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); /* Clean dark theme matching Vercel design system */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Adding smooth glass morphism support */ @supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)) { .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } } } /* Adding sparkle animation delays for the seal meme */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Twitter, Linkedin, Instagram, Facebook, Upload, Calendar, Send, TrendingUp, Users, Zap, Mail, CheckCircle2, Plus, BarChart3, DollarSign, Sparkles, Rocket, } from "@/components/icons" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Input } from "@/components/ui/input" const AGENTS = [ { id: "audience", name: "Audience Intelligence Agent", description: "Scans your followers, analyzes demographics, interests, and engagement patterns. This data gets automatically fed into all other agents so your content, timing, and outreach are perfectly tailored to your audience.", benefit: "Powers all other agents with deep audience insights", }, { id: "content", name: "Content Strategy Agent", description: "Creates data-driven content calendars with optimal posting times (when YOUR audience is most active), trending formats, and viral hooks. Calculates the best time to post for each platform based on your audience's activity patterns.", benefit: "Post at the perfect time with the perfect message", }, { id: "ev", name: "EV Optimizer Agent", description: "Calculates expected value scores for every post. Predicts reach, engagement, and ROI before you hit publish. Only post winners.", benefit: "Maximize every post's earning potential", }, { id: "outreach", name: "Brand Outreach Agent", description: "Finds brands that match your niche and audience demographics, drafts personalized outreach emails with your engagement stats, tracks collaboration opportunities, and estimates partnership value. Automatically updates you when new opportunities arise.", benefit: "Turn followers into revenue streams automatically", }, { id: "execution", name: "Execution Agent", description: "Automatically posts or schedules content across all platforms at peak times determined by the Content Strategy Agent. Set it once, let it run. True passive income.", benefit: "Post while you sleep, grow while you work", }, ] const PLATFORMS = [ { id: "twitter", name: "Twitter/X", icon: Twitter, connected: false, color: "text-blue-400" }, { id: "linkedin", name: "LinkedIn", icon: Linkedin, connected: false, color: "text-blue-600" }, { id: "instagram", name: "Instagram", icon: Instagram, connected: false, color: "text-pink-500" }, { id: "facebook", name: "Facebook", icon: Facebook, connected: false, color: "text-blue-500" }, { id: "tiktok", name: "TikTok", icon: Users, connected: false, color: "text-black dark:text-white" }, ] export default function SocialAutopilot() { const [content, setContent] = useState("") const [platforms, setPlatforms] = useState(PLATFORMS) const [isAnalyzing, setIsAnalyzing] = useState(false) const [results, setResults] = useState(null) const [agentStates, setAgentStates] = useState( AGENTS.reduce((acc, agent) => ({ ...acc, [agent.id]: { enabled: true, customInstruction: "" } }), {}), ) const [showIdeaModal, setShowIdeaModal] = useState(false) const [showMoneyBreakdown, setShowMoneyBreakdown] = useState(false) const [dailyIdea, setDailyIdea] = useState(null) const [revenueBreakdown, setRevenueBreakdown] = useState(null) useEffect(() => { const timer = setTimeout(() => { setShowIdeaModal(true) }, 500) return () => clearTimeout(timer) }, []) useEffect(() => { fetchDailyIdea() fetchRevenueBreakdown() }, []) const fetchDailyIdea = async () => { try { const response = await fetch("/api/daily-idea") const data = await response.json() setDailyIdea(data) } catch (error) { console.error("Failed to fetch daily idea:", error) } } const fetchRevenueBreakdown = async () => { try { const response = await fetch("/api/revenue-breakdown") const data = await response.json() setRevenueBreakdown(data) } catch (error) { console.error("Failed to fetch revenue breakdown:", error) } } const togglePlatform = (id: string) => { setPlatforms((prev) => prev.map((p) => (p.id === id ? { ...p, connected: !p.connected } : p))) } const toggleAgent = (id: string) => { setAgentStates((prev) => ({ ...prev, [id]: { ...prev[id], enabled: !prev[id].enabled }, })) } const updateAgentInstruction = (id: string, instruction: string) => { setAgentStates((prev) => ({ ...prev, [id]: { ...prev[id], customInstruction: instruction }, })) } const analyzeContent = async () => { if (!content) return setIsAnalyzing(true) try { const response = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ content, platforms: platforms.filter((p) => p.connected).map((p) => p.id), agentStates, }), }) if (!response.ok) { throw new Error("Analysis failed") } const data = await response.json() setResults(data) } catch (error) { console.error("Failed to analyze content:", error) alert("Failed to analyze content. Please try again.") } finally { setIsAnalyzing(false) } } return (

{showIdeaModal && dailyIdea && (

✨ ✨ ✨ ✨

Content Idea of the Day

AI-forecasted for maximum engagement

Trending Format Today

{dailyIdea.format}

{dailyIdea.description}

Best Platform

{dailyIdea.platform}

Optimal Time

{dailyIdea.optimalTime}

Est. Reach

{dailyIdea.estimatedReach}

Revenue Est.

{dailyIdea.revenueEstimate}

)} {showMoneyBreakdown && revenueBreakdown && (

Revenue Breakdown

How you made ${revenueBreakdown.total} this month

By Platform

{revenueBreakdown.byPlatform.map((platform: any) => { const Icon = PLATFORMS.find((p) => p.id === platform.id)?.icon || Users const color = PLATFORMS.find((p) => p.id === platform.id)?.color || "text-foreground" return (

{platform.name}

${platform.revenue}

) })}

Revenue Sources

{revenueBreakdown.bySources.map((source: any) => (

{source.name} ${source.revenue}

))}

Total This Month ${revenueBreakdown.total}

{revenueBreakdown.growth > 0 ? "+" : ""} {revenueBreakdown.growth}% from last month. Keep grinding! 💪

)}

Social Autopilot

Passive income while you sleep

5 AI Agents Working For You 24/7

Turn Your Social Media Into a Money Machine

For Hustlers & Creators

No Time Commitment

Profit Without Distraction

Beat the Algorithm

Drop Here & Watch the Magic (and Money) Flow

Paste and move on with your life. AI handles everything else.

Paste Content Upload Files

setContent(e.target.value)}
                />
                <div className="flex flex-col sm:flex-row items-center gap-3">
                  <Button
                    onClick={analyzeContent}
                    disabled={!content || isAnalyzing}
                    className="w-full sm:flex-1"
                    size="lg"
                  >
                    {isAnalyzing ? (
                      <>
                        <Zap className="h-5 w-5 mr-2 animate-pulse" />
                        AI Analyzing...
                      </>
                    ) : (
                      <>
                        <Sparkles className="h-5 w-5 mr-2" />
                        Analyze with 5 AI Agents
                      </>
                    )}
                  </Button>
                  <Button variant="outline" size="lg" className="w-full sm:w-auto bg-transparent">
                    <Upload className="h-5 w-5 mr-2" />
                    Add Media
                  </Button>
                </div>
              </TabsContent>
              <TabsContent value="upload">
                <div className="border-2 border-dashed border-primary/50 rounded-lg p-12 text-center hover:border-primary transition-colors cursor-pointer bg-background">
                  <Upload className="h-16 w-16 text-primary mx-auto mb-4" />
                  <p className="text-base text-foreground font-semibold mb-2">Drop images, videos, or documents</p>
                  <p className="text-sm text-muted-foreground mb-4">AI will extract and optimize the content</p>
                  <Button variant="outline" size="lg">
                    Browse Files
                  </Button>
                </div>
              </TabsContent>
            </Tabs>
          </Card>
        </section>

<section className="mb-8 sm:mb-10">
          <div className="flex items-center justify-between mb-4 sm:mb-5">
            <h3 className="text-lg sm:text-xl font-semibold text-foreground">Connect Your Socials</h3>
            <span className="text-sm text-muted-foreground">
              {platforms.filter((p) => p.connected).length}/{platforms.length} connected
            </span>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
            {platforms.map((platform) => {
              const Icon = platform.icon
              return (
                <Card
                  key={platform.id}
                  className={`p-4 sm:p-5 cursor-pointer transition-all hover:border-primary/50 hover:shadow-xl backdrop-blur-lg ${
                    platform.connected
                      ? "border-primary/50 bg-primary/10 shadow-lg shadow-primary/20"
                      : "border-white/10 bg-white/5"
                  }`}
                  onClick={() => togglePlatform(platform.id)}
                >
                  <div className="flex items-center justify-between mb-2">
                    <Icon className={`h-6 w-6 sm:h-7 sm:w-7 ${platform.color}`} />
                    {platform.connected ? (
                      <CheckCircle2 className="h-5 w-5 text-primary" />
                    ) : (
                      <Plus className="h-5 w-5 text-muted-foreground" />
                    )}
                  </div>
                  <div className="text-sm font-semibold text-foreground mb-1">{platform.name}</div>
                  <div className="text-xs text-muted-foreground">
                    {platform.connected ? "Connected" : "Tap to connect"}
                  </div>
                </Card>
              )
            })}
          </div>
        </section>

<section className="mb-6 sm:mb-8">
          <Card className="p-4 sm:p-6 bg-card/60 backdrop-blur-xl border-white/10 shadow-xl">
            <div className="space-y-3 sm:space-y-4">
              <div className="flex items-start gap-3">
                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Sparkles className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <h3 className="text-sm sm:text-base font-semibold text-foreground mb-1">
                    Paste, Optimize, Post - That's It
                  </h3>
                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
                    Paste your content, let AI optimize it, and post to all platforms instantly. No scheduling tools, no
                    analytics dashboards, no manual posting. Just results.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Zap className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <h3 className="text-sm sm:text-base font-semibold text-foreground mb-1">
                    Beat the Algorithm Without Understanding It
                  </h3>
                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
                    The app just does it for you. No need to study posting times, hashtags, or engagement tactics. AI
                    handles all the complex analysis.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="h-8 w-8 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0">
                  <DollarSign className="h-4 w-4 text-green-500" />
                </div>
                <div>
                  <h3 className="text-sm sm:text-base font-semibold text-foreground mb-1">
                    Reduce Screentime, Increase Income
                  </h3>
                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
                    Disconnect from social media scrolling but still profit from it. Stay focused on your grind, let AI
                    handle the posting. Block the distraction, keep the revenue stream flowing.
                  </p>
                </div>
              </div>
            </div>
          </Card>
        </section>

<section className="mb-6 sm:mb-8">
          <div className="grid md:grid-cols-2 gap-4 sm:gap-6 items-center">
            <div className="order-2 md:order-1">
              <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-3">
                You Don't Need to Understand the Algorithm
              </h3>
              <p className="text-sm sm:text-base text-muted-foreground leading-relaxed mb-4">
                Stop trying to figure out when to post, what hashtags to use, or how to "beat" the algorithm. Our 5 AI
                agents do all the complex analysis for you. Just paste your content and let the system work its magic.
              </p>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                  <span>AI calculates optimal posting times for YOUR specific audience</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                  <span>Predicts engagement and revenue before you post</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                  <span>Automatically finds brand partnership opportunities</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
                  <span>Reduce screentime while making passive income - disconnect but profit</span>
                </li>
              </ul>
            </div>
            <div className="order-1 md:order-2 flex justify-center md:justify-end">
              <div className="rounded-lg overflow-hidden border border-white/10 shadow-xl backdrop-blur-sm max-w-[240px] w-full">
                <img
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-10-10%20at%201.16.01%E2%80%AFPM-tSl1fPtt51F9ufmA54ovp1MZeAVEFp.png"
                  alt="Complex algorithm"
                  className="w-full h-auto"
                />
                <div className="p-2 bg-card/80 backdrop-blur-md border-t border-white/10">
                  <p className="text-[10px] text-center font-medium text-foreground">
                    This is what the algorithm looks like. Good thing you don't need to understand it.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

<div className="grid lg:grid-cols-3 gap-6 sm:gap-8">
          <div className="lg:col-span-2 space-y-4 sm:space-y-6">
            <Card className="p-4 sm:p-6 bg-card/60 backdrop-blur-xl border-white/10 shadow-xl">
              <div className="flex items-center justify-between mb-3 sm:mb-4">
                <h2 className="text-base sm:text-lg font-semibold text-foreground">Your AI Team</h2>
                <div className="flex items-center gap-2 px-2 sm:px-3 py-1 rounded-full bg-primary/10 border border-white/10">
                  <Zap className="h-3 w-3 text-primary" />
                  <span className="text-[10px] sm:text-xs font-semibold text-primary">
                    {Object.values(agentStates).filter((s: any) => s.enabled).length} Agents Active
                  </span>
                </div>
              </div>

<p className="text-xs sm:text-sm text-muted-foreground mb-4 sm:mb-6 leading-relaxed">
                Most tools give you basic scheduling. We give you 5 specialized AI agents that work together to maximize
                your reach, engagement, and revenue. This is what the big brands use, now available to hustlers.
              </p>

<div className="space-y-3 sm:space-y-4">
                {AGENTS.map((agent) => {
                  const agentState = agentStates[agent.id]
                  return (
                    <div
                      key={agent.id}
                      className={`p-3 sm:p-4 rounded-lg border transition-all backdrop-blur-sm ${
                        agentState.enabled
                          ? "border-primary/30 bg-primary/10 shadow-lg shadow-primary/10"
                          : "border-white/10 bg-white/5 opacity-60"
                      }`}
                    >
                      <div className="flex items-start justify-between gap-3 mb-2">
                        <h3 className="text-xs sm:text-sm font-bold text-foreground">{agent.name}</h3>
                        <Switch checked={agentState.enabled} onCheckedChange={() => toggleAgent(agent.id)} />
                      </div>
                      <p className="text-xs text-muted-foreground leading-relaxed mb-2">{agent.description}</p>
                      <div className="flex items-center gap-2 text-[10px] sm:text-xs text-primary font-medium">
                        <TrendingUp className="h-3 w-3 flex-shrink-0" />
                        <span>{agent.benefit}</span>
                      </div>
                      {agentState.enabled && (
                        <div className="mt-3 pt-3 border-t border-border">
                          <label className="text-[10px] sm:text-xs text-muted-foreground mb-1.5 block">
                            Custom Instructions (optional)
                          </label>
                          <Input
                            placeholder={`e.g., "Focus on tech audience" or "Prioritize LinkedIn"`}
                            value={agentState.customInstruction}
                            onChange={(e) => updateAgentInstruction(agent.id, e.target.value)}
                            className="text-xs h-8"
                          />
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            </Card>

{results && (
              <Card className="p-4 sm:p-6 border border-primary/30 bg-primary/10 backdrop-blur-xl shadow-2xl shadow-primary/20">
                <div className="flex items-center gap-2 mb-3 sm:mb-4">
                  <Sparkles className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
                  <h2 className="text-base sm:text-lg font-semibold text-foreground">AI Analysis Complete</h2>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 mb-4 sm:mb-6">
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <DollarSign className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">Revenue Est.</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-green-500">{results.revenueEstimate}</div>
                    <div className="text-[10px] sm:text-xs text-muted-foreground mt-1">From this post</div>
                  </div>
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <Zap className="h-3 w-3 sm:h-4 sm:w-4 text-primary" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">EV Score</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-foreground">{results.evScore}/10</div>
                    <div className="text-[10px] sm:text-xs text-green-500 mt-1">High potential</div>
                  </div>
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <Users className="h-3 w-3 sm:h-4 sm:w-4 text-primary" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">Audience Match</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-foreground">{results.audienceMatch}%</div>
                    <div className="text-[10px] sm:text-xs text-green-500 mt-1">Perfect fit</div>
                  </div>
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 text-primary" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">Est. Reach</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-foreground">{results.estimatedReach}</div>
                    <div className="text-[10px] sm:text-xs text-muted-foreground mt-1">People</div>
                  </div>
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <BarChart3 className="h-3 w-3 sm:h-4 sm:w-4 text-primary" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">Engagement</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-foreground">{results.engagement}</div>
                    <div className="text-[10px] sm:text-xs text-green-500 mt-1">Above average</div>
                  </div>
                  <div className="p-3 sm:p-4 rounded-lg border border-border bg-card">
                    <div className="flex items-center gap-2 mb-2">
                      <Mail className="h-3 w-3 sm:h-4 sm:w-4 text-primary" />
                      <span className="text-[10px] sm:text-xs text-muted-foreground">Brand Leads</span>
                    </div>
                    <div className="text-xl sm:text-2xl font-bold text-foreground">{results.outreachTargets}</div>
                    <div className="text-[10px] sm:text-xs text-muted-foreground mt-1">Opportunities</div>
                  </div>
                </div>
                <div className="flex flex-col sm:flex-row items-center gap-3">
                  <Button className="w-full sm:flex-1" size="lg">
                    <Send className="h-4 w-4 sm:h-5 sm:w-5 mr-2" />
                    <span className="text-sm sm:text-base">Post to All Platforms Now</span>
                  </Button>
                  <Button variant="outline" className="w-full sm:flex-1 bg-transparent" size="lg">
                    <Calendar className="h-4 w-4 sm:h-5 sm:w-5 mr-2" />
                    <span className="text-sm sm:text-base hidden sm:inline">Schedule for {results.optimalTime}</span>
                    <span className="text-sm sm:text-base sm:hidden">Schedule</span>
                  </Button>
                </div>
              </Card>
            )}
          </div>

<div className="space-y-4 sm:space-y-6">
            <Card className="p-4 sm:p-6 bg-gradient-to-br from-green-500/10 to-emerald-600/20 backdrop-blur-xl border-white/10 shadow-xl">
              <h3 className="text-xs sm:text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
                <Rocket className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
                Why This Beats Everything Else
              </h3>
              <ul className="space-y-2 text-[10px] sm:text-xs text-muted-foreground">
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>5 AI agents vs competitors' 1-2 basic tools</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>Auto brand outreach (no one else has this)</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>EV calculator predicts revenue before posting</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>True set-it-and-forget-it automation</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>Built for hustlers, not enterprise teams</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>Block distractions, keep the profit - better than Brick/Opal</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0 mt-0.5" />
                  <span>Passive income while you grind on other projects</span>
                </li>
              </ul>
            </Card>

<div className="rounded-lg overflow-hidden border border-white/10 shadow-xl backdrop-blur-sm max-w-[240px] w-full">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-10-10%20at%201.10.27%E2%80%AFPM-Ir6UApIpimKfRUMDLY0zC6gS7rIQ0V.png"
                alt="Checking passive income"
                className="w-full h-auto"
              />
              <div className="p-2 bg-card/80 backdrop-blur-md border-t border-white/10">
                <p className="text-[10px] text-center font-medium text-foreground">
                  When you let AI do all the work while you focus on the bag
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/analyze/route.ts"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const { content, platforms, agentStates } = await request.json()

// TODO: Integrate with AWS Bedrock AgentCore backend
    // This is where you'll call your friend's backend API
    // const response = await fetch('YOUR_BACKEND_API_URL/analyze', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ content, platforms, agentStates })
    // })
    // const data = await response.json()
    // return NextResponse.json(data)

// Placeholder response structure - replace with real API call
    return NextResponse.json({
      evScore: 0,
      audienceMatch: 0,
      optimalTime: "",
      estimatedReach: "",
      engagement: "",
      outreachTargets: 0,
      revenueEstimate: "",
      error: "Backend API not connected yet",
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to analyze content" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/daily-idea/route.ts"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    // TODO: Integrate with AWS Bedrock AgentCore backend
    // const response = await fetch('YOUR_BACKEND_API_URL/daily-idea')
    // const data = await response.json()
    // return NextResponse.json(data)

// Placeholder response structure - replace with real API call
    return NextResponse.json({
      format: "",
      description: "",
      platform: "",
      optimalTime: "",
      estimatedReach: "",
      revenueEstimate: "",
      error: "Backend API not connected yet",
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch daily idea" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/revenue-breakdown/route.ts"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    // TODO: Integrate with AWS Bedrock AgentCore backend
    // const response = await fetch('YOUR_BACKEND_API_URL/revenue-breakdown')
    // const data = await response.json()
    // return NextResponse.json(data)

// Placeholder response structure - replace with real API call
    return NextResponse.json({
      total: 0,
      growth: 0,
      byPlatform: [],
      bySources: [],
      error: "Backend API not connected yet",
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch revenue breakdown" }, { status: 500 })
  }
}90:["$","$L97",null,{"chatId":"bMQnrdqk3Wx","children":["$","$L98",null,{"data":{"@\"active-block\",\"bMQnrdqk3Wx\",":{"id":"b_FReX9qdKTsu","messageId":"CWnlLry0a82vszYZDsdhhKLglmDM4dNQ","source":"$99","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"social-autopilot-frontend","type":"code-project","project":"social-autopilot-frontend","taskNameActive":"Removing mock data","taskNameComplete":"Removed mock data"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"bMQnrdqk3Wx\",":false},"children":"$L9a"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This