# AI Agent Coding Prompt: Professional CPA Social Media Content Creator ## 🎯 PROJECT OVERVIEW You are tasked to build a **professional web application** specifically designed for **CPA (Cost Per Action) marketers** to create high-converting social media content for **Instagram and TikTok** promotions. This tool should focus on **VPN offers, mobile apps, and software promotions** with optimized aspect ratios and engagement-driven designs. --- ## 📱 CORE SPECIFICATIONS ### **Primary Focus Areas:** - **Instagram Stories/Reels**: 9:16 aspect ratio (1080x1920px) - **Instagram Feed Posts**: 1:1 aspect ratio (1080x1080px) - **TikTok Videos/Slides**: 9:16 aspect ratio (1080x1920px) - **Carousel Posts**: Multiple slides for step-by-step promotions ### **Target Niches:** - VPN services and privacy tools - Mobile productivity apps - Gaming applications - Security software - Streaming and entertainment apps - Finance and crypto apps --- ## 🚀 TECHNICAL REQUIREMENTS ### **Frontend Architecture:** ``` - HTML5 Canvas for dynamic content generation - CSS3 with modern animations and glassmorphism effects - Vanilla JavaScript or React.js framework - TensorFlow.js for AI-powered optimization - Responsive design for all devices ``` ### **Key Libraries to Include:** - **Fabric.js** for advanced canvas manipulation - **GSAP** for professional animations - **Chart.js** for data visualization elements - **QR Code generation** for landing page links - **Font loading** with Google Fonts API --- ## 🎨 DESIGN STUDIO FEATURES ### **Template Categories:** 1. **Hook Templates** - Attention-grabbing opening slides 2. **Problem/Solution** - Pain point identification and resolution 3. **Social Proof** - Testimonials and reviews mockups 4. **Before/After** - Transformation showcases 5. **Urgency/Scarcity** - Limited time offers and countdowns 6. **CTA (Call-to-Action)** - Conversion-focused final slides ### **Visual Elements Library:** ```html <!-- Implement these interactive components --> - Progress bars and loading animations - Fake notification bubbles - Mock phone interfaces with app screenshots - Gradient overlays with brand colors - Icon libraries (Lucide, Feather, FontAwesome) - Mockup frames (phone, laptop, tablet) - Emoji and reaction elements - Price comparison tables - Star ratings and review systems ``` ### **Content Generation Tools:** - **Hook Generator**: AI-powered opening line suggestions - **Pain Point Database**: Common problems for each niche - **Benefit Translator**: Feature → Benefit conversion - **Urgency Creator**: Scarcity and time-sensitive elements - **CTA Optimizer**: Action-oriented button and text generator --- ## 📊 CPA-FOCUSED FEATURES ### **Conversion Elements:** ```javascript // Implement these conversion-boosting components: const cpaElements = { socialProof: ['5-star ratings', 'user counters', 'testimonials'], urgency: ['countdown timers', 'limited spots', 'price increases'], authority: ['expert badges', 'security seals', 'certifications'], curiosity: ['hidden benefits', 'secret methods', 'exclusive access'], fear: ['what you lose', 'competitor advantages', 'missed opportunities'] }; ``` ### **A/B Testing Components:** - Multiple headline variations - Color scheme alternatives - CTA button text options - Layout arrangement tests - Font and typography choices ### **Analytics Integration:** - Click-through rate predictions - Engagement score calculations - Conversion probability estimates - Performance benchmarking --- ## 🛠️ INTERACTIVE FEATURES ### **Smart Content Builder:** 1. **Niche Selection** → Auto-load relevant templates 2. **Offer Input** → Generate compelling headlines 3. **Target Audience** → Adjust language and visuals 4. **Platform Choice** → Optimize dimensions and format 5. **Campaign Goal** → Focus on specific conversion actions ### **AI-Powered Enhancements:** ```javascript // TensorFlow.js implementations: - Color psychology optimization - Text readability analysis - Visual hierarchy scoring - Attention heatmap prediction - Conversion rate estimation - A/B test winner prediction ``` ### **Template Customization:** - **Drag-and-drop** element positioning - **Real-time preview** with device mockups - **Bulk generation** for campaign variations - **Brand kit integration** for consistent styling - **Export options**: PNG, JPG, MP4 (for animated content) --- ## 📈 MARKETING PSYCHOLOGY INTEGRATION ### **Persuasion Triggers Database:** ```json { "scarcity": ["Only 100 spots left", "Offer expires in 24h"], "authority": ["#1 Rated App", "Trusted by 1M+ users"], "social_proof": ["Join 50K satisfied customers", "Featured in TechCrunch"], "reciprocity": ["Free trial", "No credit card required"], "commitment": ["30-day guarantee", "Risk-free trial"], "liking": ["Made for people like you", "Perfect for [audience]"] } ``` ### **Emotional Hooks Library:** - **Fear-based**: "Your data is being sold right now..." - **Curiosity**: "The secret VPN trick nobody talks about..." - **Desire**: "Get premium features for free..." - **Pride**: "Join the smart ones who already know..." - **Greed**: "Save 90% with this hidden method..." --- ## 🎯 USER INTERFACE REQUIREMENTS ### **Dashboard Layout:** ``` ┌─────────────────────────────────────────────────────┐ │ 🎨 Quick Templates 📱 Platform Selector │ ├─────────────────────────────────────────────────────┤ │ 📊 Canvas Editor 🛠️ Element Library │ ├─────────────────────────────────────────────────────┤ │ 🎯 CPA Tools 📈 Performance Predictor │ ├─────────────────────────────────────────────────────┤ │ 💾 Export Hub 🔄 Batch Generator │ └─────────────────────────────────────────────────────┘ ``` ### **Mobile-First Approach:** - Touch-optimized controls - Swipe navigation between templates - Pinch-to-zoom canvas editing - Voice input for text elements - One-tap export to social platforms --- ## 🔧 TECHNICAL IMPLEMENTATION ### **Canvas System:** ```javascript // Advanced canvas implementation class CPAContentCreator { constructor() { this.canvas = new fabric.Canvas('editor'); this.templates = new TemplateManager(); this.aiOptimizer = new AIOptimizer(); } generateContent(niche, platform, goal) { // AI-driven content generation logic } optimizeForConversion() { // TensorFlow.js optimization algorithms } exportForPlatform(platform) { // Platform-specific export with correct dimensions } } ``` ### **Performance Requirements:** - **Loading time**: < 3 seconds initial load - **Canvas rendering**: 60fps smooth interactions - **Export speed**: < 5 seconds for high-res images - **Mobile responsiveness**: Works on all devices - **Offline capability**: Core features work without internet ### **Data Architecture:** ```javascript // Content structure for CPA optimization const contentData = { hook: "Attention-grabbing headline", problem: "Pain point identification", solution: "Product/service presentation", proof: "Social proof and testimonials", urgency: "Time-sensitive elements", cta: "Clear call-to-action", tracking: "UTM parameters and analytics" }; ``` --- ## 🎨 VISUAL DESIGN GUIDELINES ### **Color Psychology for CPA:** - **Red**: Urgency, action, alerts - **Green**: Trust, money, success - **Blue**: Security, reliability, tech - **Orange**: Enthusiasm, creativity, fun - **Purple**: Premium, luxury, exclusivity ### **Typography Hierarchy:** 1. **Headlines**: Bold, large, attention-grabbing 2. **Subheads**: Medium weight, supporting info 3. **Body text**: Readable, scannable, persuasive 4. **CTA text**: Action-oriented, contrasting ### **Layout Patterns:** - **F-Pattern**: For text-heavy content - **Z-Pattern**: For visual storytelling - **Grid System**: For organized information - **Center Focus**: For single call-to-action --- ## 🚀 ADVANCED FEATURES TO IMPLEMENT ### **AI Content Assistant:** - **Auto-headline generation** based on niche and offer - **Image suggestion** from stock photo APIs - **Color scheme recommendation** using color theory - **Layout optimization** based on conversion data - **Copy improvement** suggestions using NLP ### **Campaign Management:** ```javascript // Campaign tracking and optimization class CampaignManager { createCampaign(name, niche, budget) { // Campaign setup with tracking } generateVariations(baseContent, count) { // A/B test variations generator } trackPerformance(campaignId) { // Analytics and performance monitoring } } ``` ### **Integration Capabilities:** - **Social media APIs** for direct posting - **UTM builder** for campaign tracking - **Webhook support** for CPA networks - **CSV export** for bulk campaign data - **Third-party tool integrations** (ClickFunnels, etc.) --- ## 📱 PLATFORM-SPECIFIC OPTIMIZATIONS ### **Instagram Requirements:** ```javascript const instagramSpecs = { stories: { width: 1080, height: 1920, duration: 15 }, reels: { width: 1080, height: 1920, duration: 60 }, feed: { width: 1080, height: 1080 }, carousel: { width: 1080, height: 1080, maxSlides: 10 } }; ``` ### **TikTok Specifications:** ```javascript const tiktokSpecs = { video: { width: 1080, height: 1920, duration: 60 }, slideshow: { width: 1080, height: 1920, slides: '3-10' }, aspectRatio: '9:16', safeArea: { top: 100, bottom: 200 } // For UI elements }; ``` --- ## 🎯 SUCCESS METRICS & KPIs ### **App Performance Indicators:** - **User engagement**: Time spent in app - **Template usage**: Most popular templates - **Export rate**: Completion percentage - **User retention**: Return usage rates - **Feature adoption**: AI tool usage ### **CPA Campaign Metrics:** - **CTR prediction accuracy**: AI vs actual results - **Conversion rate improvement**: Before/after comparison - **Cost per acquisition**: Campaign efficiency - **ROAS (Return on Ad Spend)**: Revenue tracking --- ## 🛡️ TECHNICAL CONSIDERATIONS ### **Security & Privacy:** - **No user data storage** without consent - **GDPR compliance** for EU users - **Secure export** with watermark options - **API rate limiting** to prevent abuse ### **Scalability:** - **CDN integration** for fast asset delivery - **Modular architecture** for feature updates - **Database optimization** for quick template loading - **Caching strategies** for repeated operations --- ## 📋 DEVELOPMENT PHASES ### **Phase 1 - MVP (Minimum Viable Product):** - Basic canvas editor with templates - Instagram/TikTok dimension presets - Simple text and image editing - Basic export functionality ### **Phase 2 - CPA Enhancement:** - Conversion-focused templates - Psychology-based element library - A/B testing variations - Performance prediction tools ### **Phase 3 - AI Integration:** - TensorFlow.js optimization - Smart content suggestions - Automated campaign generation - Advanced analytics dashboard ### **Phase 4 - Platform Integration:** - Direct social media posting - Campaign tracking integration - Third-party tool connections - Enterprise features --- ## 🎨 FINAL IMPLEMENTATION NOTES **Code Architecture**: Use modern ES6+ JavaScript with modular design patterns. Implement Progressive Web App (PWA) features for mobile installation and offline usage. **User Experience**: Focus on one-click template selection, drag-and-drop simplicity, and instant preview updates. Every feature should reduce the time from idea to published content. **Conversion Focus**: Every design element, color choice, and template should be optimized for CPA campaign success. Include built-in best practices and automated optimization suggestions. **Performance**: Prioritize fast loading, smooth interactions, and quick exports. The tool should feel professional and reliable for daily marketing use. --- *This prompt provides a comprehensive blueprint for building a professional CPA-focused social media content creation tool. Implement with attention to conversion optimization, user experience, and platform-specific requirements.* - Initial Deployment
c406546
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CPA Content Studio | Social Media Creator for Marketers</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4361ee', | |
| secondary: '#3f37c9', | |
| accent: '#4cc9f0', | |
| dark: '#1e1e2d', | |
| light: '#f8f9fa', | |
| success: '#4ade80', | |
| warning: '#facc15', | |
| danger: '#f87171' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| heading: ['Poppins', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glassmorphism { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .canvas-container { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .element-item { | |
| transition: all 0.2s ease; | |
| } | |
| .element-item:hover { | |
| background: rgba(67, 97, 238, 0.1); | |
| } | |
| .phone-mockup { | |
| position: relative; | |
| width: 300px; | |
| height: 600px; | |
| background: #1e1e2d; | |
| border-radius: 40px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); | |
| } | |
| .phone-screen { | |
| position: absolute; | |
| top: 20px; | |
| left: 15px; | |
| width: 270px; | |
| height: 560px; | |
| border-radius: 30px; | |
| overflow: hidden; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.3s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .drag-over { | |
| border: 2px dashed #4361ee ; | |
| background: rgba(67, 97, 238, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="glassmorphism py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-accent w-10 h-10 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold font-heading">CPA<span class="text-accent">Studio</span></h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-accent font-medium">Dashboard</a> | |
| <a href="#" class="hover:text-accent transition">Templates</a> | |
| <a href="#" class="hover:text-accent transition">Analytics</a> | |
| <a href="#" class="hover:text-accent transition">Campaigns</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-primary hover:bg-secondary transition px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-plus mr-2"></i>New Project | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Layout --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar - Templates and Elements --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Quick Templates --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold font-heading flex items-center"> | |
| <i class="fas fa-layer-group mr-2 text-accent"></i> Quick Templates | |
| </h2> | |
| <button class="text-sm text-gray-400 hover:text-white"> | |
| See All | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="template-card bg-gradient-to-br from-primary to-secondary rounded-lg p-4 cursor-pointer transition transform hover:scale-105"> | |
| <div class="h-24 rounded bg-gray-700 mb-2"></div> | |
| <p class="text-sm font-medium">Hook Templates</p> | |
| </div> | |
| <div class="template-card bg-gradient-to-br from-warning to-danger rounded-lg p-4 cursor-pointer transition transform hover:scale-105"> | |
| <div class="h-24 rounded bg-gray-700 mb-2"></div> | |
| <p class="text-sm font-medium">Problem/Solution</p> | |
| </div> | |
| <div class="template-card bg-gradient-to-br from-success to-accent rounded-lg p-4 cursor-pointer transition transform hover:scale-105"> | |
| <div class="h-24 rounded bg-gray-700 mb-2"></div> | |
| <p class="text-sm font-medium">Social Proof</p> | |
| </div> | |
| <div class="template-card bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg p-4 cursor-pointer transition transform hover:scale-105"> | |
| <div class="h-24 rounded bg-gray-700 mb-2"></div> | |
| <p class="text-sm font-medium">Before/After</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Platform Selector --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <h2 class="text-xl font-bold font-heading flex items-center mb-4"> | |
| <i class="fas fa-mobile-alt mr-2 text-accent"></i> Platform | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-primary py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fab fa-instagram mr-2"></i> Instagram | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fab fa-tiktok mr-2"></i> TikTok | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium mb-2">Aspect Ratio</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg">9:16</button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg">1:1</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Element Library --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <h2 class="text-xl font-bold font-heading flex items-center mb-4"> | |
| <i class="fas fa-shapes mr-2 text-accent"></i> Elements | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-text"></i> | |
| </div> | |
| <p>Text</p> | |
| </div> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center mr-3"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <p>Image</p> | |
| </div> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-warning flex items-center justify-center mr-3"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p>Ratings</p> | |
| </div> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-danger flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <p>CTA Button</p> | |
| </div> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center mr-3"> | |
| <i class="fas fa-qrcode"></i> | |
| </div> | |
| <p>QR Code</p> | |
| </div> | |
| <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-bar"></i> | |
| </div> | |
| <p>Chart</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Canvas Area --> | |
| <div class="lg:col-span-2"> | |
| <div class="glassmorphism rounded-xl p-5 h-full"> | |
| <div class="flex justify-between items-center mb-5"> | |
| <h2 class="text-2xl font-bold font-heading">Content Editor</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-undo mr-2"></i>Undo | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-redo mr-2"></i>Redo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mb-6"> | |
| <div class="phone-mockup"> | |
| <div class="phone-screen"> | |
| <canvas id="contentCanvas" width="270" height="560" class="bg-gray-800"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <h3 class="font-medium mb-3">Current Template: <span class="text-accent">Hook + Social Proof</span></h3> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 bg-primary hover:bg-secondary py-2 rounded-lg"> | |
| Save Draft | |
| </button> | |
| <button class="flex-1 bg-success hover:bg-green-600 py-2 rounded-lg"> | |
| Export Content | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Tools and Properties --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- CPA Tools --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <h2 class="text-xl font-bold font-heading flex items-center mb-4"> | |
| <i class="fas fa-tools mr-2 text-accent"></i> CPA Tools | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Hook Generator</label> | |
| <div class="bg-gray-800 rounded-lg p-3"> | |
| <p class="text-sm mb-2">"Unlock Premium VPN Access for Free - Limited Time!"</p> | |
| <button class="text-xs bg-primary hover:bg-secondary px-2 py-1 rounded"> | |
| Generate New | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">CTA Optimizer</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-2"> | |
| <option>Get Instant Access</option> | |
| <option>Download Now</option> | |
| <option>Claim Your Free Trial</option> | |
| <option>Unlock Premium Features</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Urgency Creator</label> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">24h</button> | |
| <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">48h</button> | |
| <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">Countdown</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Predictor --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <h2 class="text-xl font-bold font-heading flex items-center mb-4"> | |
| <i class="fas fa-chart-line mr-2 text-accent"></i> Performance | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CTR Prediction</span> | |
| <span>8.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-success h-2 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Conversion Probability</span> | |
| <span>4.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-accent h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Engagement Score</span> | |
| <span>92/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-primary h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Hub --> | |
| <div class="glassmorphism rounded-xl p-5"> | |
| <h2 class="text-xl font-bold font-heading flex items-center mb-4"> | |
| <i class="fas fa-file-export mr-2 text-accent"></i> Export | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-image text-xl mb-2 text-success"></i> | |
| <span>PNG</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-file-image text-xl mb-2 text-accent"></i> | |
| <span>JPG</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-video text-xl mb-2 text-warning"></i> | |
| <span>MP4</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fab fa-instagram text-xl mb-2 text-purple-400"></i> | |
| <span>Post</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Categories --> | |
| <div class="glassmorphism rounded-xl p-6 mt-6"> | |
| <h2 class="text-2xl font-bold font-heading mb-6">CPA Template Gallery</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Hook Templates --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Hook Templates</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Attention-grabbing openings for your content</p> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg"> | |
| Explore 12 Templates | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Problem/Solution --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-success flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Problem/Solution</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Identify pain points and present your solution</p> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg"> | |
| Explore 8 Templates | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Social Proof --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-warning flex items-center justify-center mr-3"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Social Proof</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Showcase testimonials and user reviews</p> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg"> | |
| Explore 10 Templates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Section --> | |
| <div class="glassmorphism rounded-xl p-6 mt-6"> | |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold font-heading">AI Content Assistant</h2> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="bg-primary hover:bg-secondary px-4 py-2 rounded-lg"> | |
| <i class="fas fa-robot mr-2"></i>Generate Headline | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-palette mr-2"></i>Color Suggestion | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <h3 class="font-bold text-lg mb-3">Suggested Headlines</h3> | |
| <div class="space-y-3"> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p>"How I Got Premium VPN Access For Free (Legal)"</p> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p>"Stop Overpaying for VPN Services - This Method is Free"</p> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p>"The VPN Trick Big Companies Don't Want You to Know"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <h3 class="font-bold text-lg mb-3">Color Scheme Suggestions</h3> | |
| <div class="flex space-x-4"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600"></div> | |
| <p class="text-sm mt-2">Trust</p> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-green-500 to-teal-600"></div> | |
| <p class="text-sm mt-2">Growth</p> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-red-500 to-orange-600"></div> | |
| <p class="text-sm mt-2">Urgency</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="glassmorphism mt-12 py-8 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <div class="bg-accent w-8 h-8 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <h2 class="text-xl font-bold font-heading">CPA<span class="text-accent">Studio</span></h2> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-accent transition">Terms</a> | |
| <a href="#" class="hover:text-accent transition">Privacy</a> | |
| <a href="#" class="hover:text-accent transition">Docs</a> | |
| <a href="#" class="hover:text-accent transition">Contact</a> | |
| </div> | |
| <div class="flex space-x-4 mt-6 md:mt-0"> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <i class="fab fa-twitter"></i> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CPA Content Studio. All rights reserved. Designed for professional CPA marketers.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Fabric.js canvas | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const canvas = new fabric.Canvas('contentCanvas'); | |
| // Add sample content to canvas | |
| const sampleText = new fabric.Text('Get Premium VPN Access', { | |
| left: 50, | |
| top: 100, | |
| fontSize: 28, | |
| fontFamily: 'Poppins', | |
| fontWeight: 'bold', | |
| fill: '#ffffff' | |
| }); | |
| const subText = new fabric.Text('Free for 30 days - Limited offer', { | |
| left: 50, | |
| top: 150, | |
| fontSize: 18, | |
| fontFamily: 'Inter', | |
| fill: '#4cc9f0' | |
| }); | |
| const ctaButton = new fabric.Rect({ | |
| left: 50, | |
| top: 220, | |
| width: 170, | |
| height: 50, | |
| rx: 10, | |
| ry: 10, | |
| fill: '#4361ee' | |
| }); | |
| const ctaText = new fabric.Text('CLAIM OFFER', { | |
| left: 125, | |
| top: 245, | |
| fontSize: 16, | |
| fontFamily: 'Poppins', | |
| fontWeight: 'bold', | |
| fill: '#ffffff', | |
| originX: 'center', | |
| originY: 'center' | |
| }); | |
| const group = new fabric.Group([ctaButton, ctaText], { | |
| left: 50, | |
| top: 220 | |
| }); | |
| // Add social proof element | |
| const proofBox = new fabric.Rect({ | |
| left: 30, | |
| top: 330, | |
| width: 210, | |
| height: 100, | |
| rx: 15, | |
| ry: 15, | |
| fill: 'rgba(255, 255, 255, 0.1)' | |
| }); | |
| const proofText = new fabric.Text('"This VPN saved me $120/year!\nWorks perfectly with Netflix."', { | |
| left: 135, | |
| top: 380, | |
| fontSize: 14, | |
| fontFamily: 'Inter', | |
| fill: '#ffffff', | |
| textAlign: 'center', | |
| originX: 'center', | |
| originY: 'center', | |
| lineHeight: 1.4 | |
| }); | |
| const starGroup = new fabric.Group([], { | |
| left: 135, | |
| top: 350, | |
| originX: 'center' | |
| }); | |
| // Add 5 stars | |
| for(let i = 0; i < 5; i++) { | |
| const star = new fabric.Text('★', { | |
| left: i * 20, | |
| fontSize: 20, | |
| fill: '#facc15' | |
| }); | |
| starGroup.addWithUpdate(star); | |
| } | |
| const proofGroup = new fabric.Group([proofBox, proofText, starGroup], { | |
| left: 135, | |
| top: 380, | |
| originX: 'center', | |
| originY: 'center' | |
| }); | |
| canvas.add(sampleText); | |
| canvas.add(subText); | |
| canvas.add(group); | |
| canvas.add(proofGroup); | |
| // Set canvas background | |
| canvas.setBackgroundColor('#1e1e2d', canvas.renderAll.bind(canvas)); | |
| // Add animation to CTA button | |
| gsap.to(ctaButton, { | |
| duration: 2, | |
| repeat: -1, | |
| yoyo: true, | |
| alpha: 0.8, | |
| ease: "power1.inOut" | |
| }); | |
| // Add animation to text | |
| gsap.from(sampleText, { | |
| duration: 1, | |
| y: -20, | |
| opacity: 0, | |
| ease: "power2.out" | |
| }); | |
| // Add drag and drop functionality for elements | |
| const elements = document.querySelectorAll('.element-item'); | |
| elements.forEach(element => { | |
| element.addEventListener('dragstart', function(e) { | |
| e.dataTransfer.setData('text/plain', element.querySelector('p').textContent); | |
| }); | |
| }); | |
| const canvasContainer = document.getElementById('contentCanvas'); | |
| canvasContainer.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| this.classList.add('drag-over'); | |
| }); | |
| canvasContainer.addEventListener('dragleave', function() { | |
| this.classList.remove('drag-over'); | |
| }); | |
| canvasContainer.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| this.classList.remove('drag-over'); | |
| const elementType = e.dataTransfer.getData('text/plain'); | |
| const pointer = canvas.getPointer(e); | |
| switch(elementType) { | |
| case 'Text': | |
| const newText = new fabric.Text('New Text', { | |
| left: pointer.x, | |
| top: pointer.y, | |
| fontSize: 20, | |
| fill: '#ffffff', | |
| fontFamily: 'Inter' | |
| }); | |
| canvas.add(newText); | |
| break; | |
| case 'Image': | |
| // In a real app, this would open a file dialog | |
| fabric.Image.fromURL('https://via.placeholder.com/150', function(img) { | |
| img.set({ | |
| left: pointer.x, | |
| top: pointer.y, | |
| scaleX: 0.5, | |
| scaleY: 0.5 | |
| }); | |
| canvas.add(img); | |
| }); | |
| break; | |
| case 'Ratings': | |
| const ratingGroup = new fabric.Group([], { | |
| left: pointer.x, | |
| top: pointer.y | |
| }); | |
| for(let i = 0; i < 5; i++) { | |
| const star = new fabric.Text('★', { | |
| left: i * 24, | |
| fontSize: 24, | |
| fill: '#facc15' | |
| }); | |
| ratingGroup.addWithUpdate(star); | |
| } | |
| canvas.add(ratingGroup); | |
| break; | |
| case 'CTA Button': | |
| const buttonRect = new fabric.Rect({ | |
| width: 150, | |
| height: 45, | |
| rx: 8, | |
| ry: 8, | |
| fill: '#4361ee' | |
| }); | |
| const buttonText = new fabric.Text('CALL TO ACTION', { | |
| fontSize: 14, | |
| fontWeight: 'bold', | |
| fill: '#ffffff', | |
| originX: 'center', | |
| originY: 'center' | |
| }); | |
| const buttonGroup = new fabric.Group([buttonRect, buttonText], { | |
| left: pointer.x, | |
| top: pointer.y | |
| }); | |
| canvas.add(buttonGroup); | |
| break; | |
| } | |
| canvas.renderAll(); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Saad4web/top" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |