Hugging Face's logo

Spaces:
Saad4web
/
top
Running

App Files Community
Saad4web commited on
Commit
c406546
·
verified ·
1 Parent(s): ff909fc

# 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

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +722 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Top
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: top
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,722 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CPA Content Studio | Social Media Creator for Marketers</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <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">
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: '#4361ee',
20
+ secondary: '#3f37c9',
21
+ accent: '#4cc9f0',
22
+ dark: '#1e1e2d',
23
+ light: '#f8f9fa',
24
+ success: '#4ade80',
25
+ warning: '#facc15',
26
+ danger: '#f87171'
27
+ },
28
+ fontFamily: {
29
+ sans: ['Inter', 'sans-serif'],
30
+ heading: ['Poppins', 'sans-serif']
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <style>
37
+ .glassmorphism {
38
+ background: rgba(255, 255, 255, 0.08);
39
+ backdrop-filter: blur(12px);
40
+ -webkit-backdrop-filter: blur(12px);
41
+ border: 1px solid rgba(255, 255, 255, 0.1);
42
+ }
43
+ .canvas-container {
44
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
45
+ border-radius: 12px;
46
+ overflow: hidden;
47
+ }
48
+ .template-card:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
51
+ }
52
+ .element-item {
53
+ transition: all 0.2s ease;
54
+ }
55
+ .element-item:hover {
56
+ background: rgba(67, 97, 238, 0.1);
57
+ }
58
+ .phone-mockup {
59
+ position: relative;
60
+ width: 300px;
61
+ height: 600px;
62
+ background: #1e1e2d;
63
+ border-radius: 40px;
64
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
65
+ }
66
+ .phone-screen {
67
+ position: absolute;
68
+ top: 20px;
69
+ left: 15px;
70
+ width: 270px;
71
+ height: 560px;
72
+ border-radius: 30px;
73
+ overflow: hidden;
74
+ }
75
+ .progress-ring__circle {
76
+ transition: stroke-dashoffset 0.3s;
77
+ transform: rotate(-90deg);
78
+ transform-origin: 50% 50%;
79
+ }
80
+ .drag-over {
81
+ border: 2px dashed #4361ee !important;
82
+ background: rgba(67, 97, 238, 0.05);
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="bg-gray-900 text-gray-100 font-sans">
87
+ <!-- Navigation -->
88
+ <nav class="glassmorphism py-4 px-6 flex items-center justify-between">
89
+ <div class="flex items-center space-x-3">
90
+ <div class="bg-accent w-10 h-10 rounded-lg flex items-center justify-center">
91
+ <i class="fas fa-chart-line text-white text-xl"></i>
92
+ </div>
93
+ <h1 class="text-2xl font-bold font-heading">CPA<span class="text-accent">Studio</span></h1>
94
+ </div>
95
+
96
+ <div class="hidden md:flex space-x-6">
97
+ <a href="#" class="text-accent font-medium">Dashboard</a>
98
+ <a href="#" class="hover:text-accent transition">Templates</a>
99
+ <a href="#" class="hover:text-accent transition">Analytics</a>
100
+ <a href="#" class="hover:text-accent transition">Campaigns</a>
101
+ </div>
102
+
103
+ <div class="flex items-center space-x-4">
104
+ <button class="bg-primary hover:bg-secondary transition px-4 py-2 rounded-lg font-medium">
105
+ <i class="fas fa-plus mr-2"></i>New Project
106
+ </button>
107
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
108
+ <i class="fas fa-user"></i>
109
+ </div>
110
+ </div>
111
+ </nav>
112
+
113
+ <div class="container mx-auto px-4 py-8">
114
+ <!-- Dashboard Layout -->
115
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
116
+ <!-- Left Sidebar - Templates and Elements -->
117
+ <div class="lg:col-span-1 space-y-6">
118
+ <!-- Quick Templates -->
119
+ <div class="glassmorphism rounded-xl p-5">
120
+ <div class="flex items-center justify-between mb-4">
121
+ <h2 class="text-xl font-bold font-heading flex items-center">
122
+ <i class="fas fa-layer-group mr-2 text-accent"></i> Quick Templates
123
+ </h2>
124
+ <button class="text-sm text-gray-400 hover:text-white">
125
+ See All
126
+ </button>
127
+ </div>
128
+
129
+ <div class="grid grid-cols-2 gap-3">
130
+ <div class="template-card bg-gradient-to-br from-primary to-secondary rounded-lg p-4 cursor-pointer transition transform hover:scale-105">
131
+ <div class="h-24 rounded bg-gray-700 mb-2"></div>
132
+ <p class="text-sm font-medium">Hook Templates</p>
133
+ </div>
134
+ <div class="template-card bg-gradient-to-br from-warning to-danger rounded-lg p-4 cursor-pointer transition transform hover:scale-105">
135
+ <div class="h-24 rounded bg-gray-700 mb-2"></div>
136
+ <p class="text-sm font-medium">Problem/Solution</p>
137
+ </div>
138
+ <div class="template-card bg-gradient-to-br from-success to-accent rounded-lg p-4 cursor-pointer transition transform hover:scale-105">
139
+ <div class="h-24 rounded bg-gray-700 mb-2"></div>
140
+ <p class="text-sm font-medium">Social Proof</p>
141
+ </div>
142
+ <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">
143
+ <div class="h-24 rounded bg-gray-700 mb-2"></div>
144
+ <p class="text-sm font-medium">Before/After</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Platform Selector -->
150
+ <div class="glassmorphism rounded-xl p-5">
151
+ <h2 class="text-xl font-bold font-heading flex items-center mb-4">
152
+ <i class="fas fa-mobile-alt mr-2 text-accent"></i> Platform
153
+ </h2>
154
+
155
+ <div class="grid grid-cols-2 gap-3">
156
+ <button class="bg-primary py-3 rounded-lg font-medium flex items-center justify-center">
157
+ <i class="fab fa-instagram mr-2"></i> Instagram
158
+ </button>
159
+ <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg font-medium flex items-center justify-center">
160
+ <i class="fab fa-tiktok mr-2"></i> TikTok
161
+ </button>
162
+ </div>
163
+
164
+ <div class="mt-4">
165
+ <label class="block text-sm font-medium mb-2">Aspect Ratio</label>
166
+ <div class="grid grid-cols-2 gap-3">
167
+ <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg">9:16</button>
168
+ <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg">1:1</button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Element Library -->
174
+ <div class="glassmorphism rounded-xl p-5">
175
+ <h2 class="text-xl font-bold font-heading flex items-center mb-4">
176
+ <i class="fas fa-shapes mr-2 text-accent"></i> Elements
177
+ </h2>
178
+
179
+ <div class="space-y-3">
180
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
181
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
182
+ <i class="fas fa-text"></i>
183
+ </div>
184
+ <p>Text</p>
185
+ </div>
186
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
187
+ <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center mr-3">
188
+ <i class="fas fa-image"></i>
189
+ </div>
190
+ <p>Image</p>
191
+ </div>
192
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
193
+ <div class="w-8 h-8 rounded-full bg-warning flex items-center justify-center mr-3">
194
+ <i class="fas fa-star"></i>
195
+ </div>
196
+ <p>Ratings</p>
197
+ </div>
198
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
199
+ <div class="w-8 h-8 rounded-full bg-danger flex items-center justify-center mr-3">
200
+ <i class="fas fa-bolt"></i>
201
+ </div>
202
+ <p>CTA Button</p>
203
+ </div>
204
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
205
+ <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center mr-3">
206
+ <i class="fas fa-qrcode"></i>
207
+ </div>
208
+ <p>QR Code</p>
209
+ </div>
210
+ <div class="element-item flex items-center p-3 rounded-lg cursor-pointer bg-gray-800">
211
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3">
212
+ <i class="fas fa-chart-bar"></i>
213
+ </div>
214
+ <p>Chart</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Center Canvas Area -->
221
+ <div class="lg:col-span-2">
222
+ <div class="glassmorphism rounded-xl p-5 h-full">
223
+ <div class="flex justify-between items-center mb-5">
224
+ <h2 class="text-2xl font-bold font-heading">Content Editor</h2>
225
+ <div class="flex space-x-3">
226
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg">
227
+ <i class="fas fa-undo mr-2"></i>Undo
228
+ </button>
229
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg">
230
+ <i class="fas fa-redo mr-2"></i>Redo
231
+ </button>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="flex justify-center mb-6">
236
+ <div class="phone-mockup">
237
+ <div class="phone-screen">
238
+ <canvas id="contentCanvas" width="270" height="560" class="bg-gray-800"></canvas>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="bg-gray-800 rounded-lg p-4">
244
+ <h3 class="font-medium mb-3">Current Template: <span class="text-accent">Hook + Social Proof</span></h3>
245
+ <div class="flex space-x-3">
246
+ <button class="flex-1 bg-primary hover:bg-secondary py-2 rounded-lg">
247
+ Save Draft
248
+ </button>
249
+ <button class="flex-1 bg-success hover:bg-green-600 py-2 rounded-lg">
250
+ Export Content
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Right Sidebar - Tools and Properties -->
258
+ <div class="lg:col-span-1 space-y-6">
259
+ <!-- CPA Tools -->
260
+ <div class="glassmorphism rounded-xl p-5">
261
+ <h2 class="text-xl font-bold font-heading flex items-center mb-4">
262
+ <i class="fas fa-tools mr-2 text-accent"></i> CPA Tools
263
+ </h2>
264
+
265
+ <div class="space-y-4">
266
+ <div>
267
+ <label class="block text-sm font-medium mb-2">Hook Generator</label>
268
+ <div class="bg-gray-800 rounded-lg p-3">
269
+ <p class="text-sm mb-2">"Unlock Premium VPN Access for Free - Limited Time!"</p>
270
+ <button class="text-xs bg-primary hover:bg-secondary px-2 py-1 rounded">
271
+ Generate New
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <div>
277
+ <label class="block text-sm font-medium mb-2">CTA Optimizer</label>
278
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-2">
279
+ <option>Get Instant Access</option>
280
+ <option>Download Now</option>
281
+ <option>Claim Your Free Trial</option>
282
+ <option>Unlock Premium Features</option>
283
+ </select>
284
+ </div>
285
+
286
+ <div>
287
+ <label class="block text-sm font-medium mb-2">Urgency Creator</label>
288
+ <div class="flex space-x-2">
289
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">24h</button>
290
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">48h</button>
291
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 py-2 rounded">Countdown</button>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Performance Predictor -->
298
+ <div class="glassmorphism rounded-xl p-5">
299
+ <h2 class="text-xl font-bold font-heading flex items-center mb-4">
300
+ <i class="fas fa-chart-line mr-2 text-accent"></i> Performance
301
+ </h2>
302
+
303
+ <div class="space-y-4">
304
+ <div>
305
+ <div class="flex justify-between text-sm mb-1">
306
+ <span>CTR Prediction</span>
307
+ <span>8.7%</span>
308
+ </div>
309
+ <div class="w-full bg-gray-700 rounded-full h-2">
310
+ <div class="bg-success h-2 rounded-full" style="width: 87%"></div>
311
+ </div>
312
+ </div>
313
+
314
+ <div>
315
+ <div class="flex justify-between text-sm mb-1">
316
+ <span>Conversion Probability</span>
317
+ <span>4.2%</span>
318
+ </div>
319
+ <div class="w-full bg-gray-700 rounded-full h-2">
320
+ <div class="bg-accent h-2 rounded-full" style="width: 42%"></div>
321
+ </div>
322
+ </div>
323
+
324
+ <div>
325
+ <div class="flex justify-between text-sm mb-1">
326
+ <span>Engagement Score</span>
327
+ <span>92/100</span>
328
+ </div>
329
+ <div class="w-full bg-gray-700 rounded-full h-2">
330
+ <div class="bg-primary h-2 rounded-full" style="width: 92%"></div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Export Hub -->
337
+ <div class="glassmorphism rounded-xl p-5">
338
+ <h2 class="text-xl font-bold font-heading flex items-center mb-4">
339
+ <i class="fas fa-file-export mr-2 text-accent"></i> Export
340
+ </h2>
341
+
342
+ <div class="grid grid-cols-2 gap-3">
343
+ <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
344
+ <i class="fas fa-image text-xl mb-2 text-success"></i>
345
+ <span>PNG</span>
346
+ </button>
347
+ <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
348
+ <i class="fas fa-file-image text-xl mb-2 text-accent"></i>
349
+ <span>JPG</span>
350
+ </button>
351
+ <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
352
+ <i class="fas fa-video text-xl mb-2 text-warning"></i>
353
+ <span>MP4</span>
354
+ </button>
355
+ <button class="bg-gray-800 hover:bg-gray-700 py-3 rounded-lg flex flex-col items-center justify-center">
356
+ <i class="fab fa-instagram text-xl mb-2 text-purple-400"></i>
357
+ <span>Post</span>
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Template Categories -->
365
+ <div class="glassmorphism rounded-xl p-6 mt-6">
366
+ <h2 class="text-2xl font-bold font-heading mb-6">CPA Template Gallery</h2>
367
+
368
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
369
+ <!-- Hook Templates -->
370
+ <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden">
371
+ <div class="p-5">
372
+ <div class="flex items-center mb-4">
373
+ <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center mr-3">
374
+ <i class="fas fa-bullhorn"></i>
375
+ </div>
376
+ <h3 class="text-xl font-bold">Hook Templates</h3>
377
+ </div>
378
+ <p class="text-gray-400 mb-4">Attention-grabbing openings for your content</p>
379
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg">
380
+ Explore 12 Templates
381
+ </button>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Problem/Solution -->
386
+ <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden">
387
+ <div class="p-5">
388
+ <div class="flex items-center mb-4">
389
+ <div class="w-10 h-10 rounded-lg bg-success flex items-center justify-center mr-3">
390
+ <i class="fas fa-lightbulb"></i>
391
+ </div>
392
+ <h3 class="text-xl font-bold">Problem/Solution</h3>
393
+ </div>
394
+ <p class="text-gray-400 mb-4">Identify pain points and present your solution</p>
395
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg">
396
+ Explore 8 Templates
397
+ </button>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Social Proof -->
402
+ <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden">
403
+ <div class="p-5">
404
+ <div class="flex items-center mb-4">
405
+ <div class="w-10 h-10 rounded-lg bg-warning flex items-center justify-center mr-3">
406
+ <i class="fas fa-users"></i>
407
+ </div>
408
+ <h3 class="text-xl font-bold">Social Proof</h3>
409
+ </div>
410
+ <p class="text-gray-400 mb-4">Showcase testimonials and user reviews</p>
411
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg">
412
+ Explore 10 Templates
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- AI Assistant Section -->
420
+ <div class="glassmorphism rounded-xl p-6 mt-6">
421
+ <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
422
+ <h2 class="text-2xl font-bold font-heading">AI Content Assistant</h2>
423
+ <div class="flex space-x-3 mt-4 md:mt-0">
424
+ <button class="bg-primary hover:bg-secondary px-4 py-2 rounded-lg">
425
+ <i class="fas fa-robot mr-2"></i>Generate Headline
426
+ </button>
427
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg">
428
+ <i class="fas fa-palette mr-2"></i>Color Suggestion
429
+ </button>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
434
+ <div class="bg-gray-800 rounded-xl p-5">
435
+ <h3 class="font-bold text-lg mb-3">Suggested Headlines</h3>
436
+ <div class="space-y-3">
437
+ <div class="bg-gray-700 p-3 rounded-lg">
438
+ <p>"How I Got Premium VPN Access For Free (Legal)"</p>
439
+ </div>
440
+ <div class="bg-gray-700 p-3 rounded-lg">
441
+ <p>"Stop Overpaying for VPN Services - This Method is Free"</p>
442
+ </div>
443
+ <div class="bg-gray-700 p-3 rounded-lg">
444
+ <p>"The VPN Trick Big Companies Don't Want You to Know"</p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-gray-800 rounded-xl p-5">
450
+ <h3 class="font-bold text-lg mb-3">Color Scheme Suggestions</h3>
451
+ <div class="flex space-x-4">
452
+ <div class="flex flex-col items-center">
453
+ <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600"></div>
454
+ <p class="text-sm mt-2">Trust</p>
455
+ </div>
456
+ <div class="flex flex-col items-center">
457
+ <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-green-500 to-teal-600"></div>
458
+ <p class="text-sm mt-2">Growth</p>
459
+ </div>
460
+ <div class="flex flex-col items-center">
461
+ <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-red-500 to-orange-600"></div>
462
+ <p class="text-sm mt-2">Urgency</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <footer class="glassmorphism mt-12 py-8 px-6">
471
+ <div class="container mx-auto">
472
+ <div class="flex flex-col md:flex-row justify-between items-center">
473
+ <div class="flex items-center mb-6 md:mb-0">
474
+ <div class="bg-accent w-8 h-8 rounded-lg flex items-center justify-center mr-3">
475
+ <i class="fas fa-chart-line text-white"></i>
476
+ </div>
477
+ <h2 class="text-xl font-bold font-heading">CPA<span class="text-accent">Studio</span></h2>
478
+ </div>
479
+
480
+ <div class="flex space-x-6">
481
+ <a href="#" class="hover:text-accent transition">Terms</a>
482
+ <a href="#" class="hover:text-accent transition">Privacy</a>
483
+ <a href="#" class="hover:text-accent transition">Docs</a>
484
+ <a href="#" class="hover:text-accent transition">Contact</a>
485
+ </div>
486
+
487
+ <div class="flex space-x-4 mt-6 md:mt-0">
488
+ <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
489
+ <i class="fab fa-twitter"></i>
490
+ </div>
491
+ <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
492
+ <i class="fab fa-linkedin-in"></i>
493
+ </div>
494
+ <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
495
+ <i class="fab fa-instagram"></i>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">
501
+ <p>© 2023 CPA Content Studio. All rights reserved. Designed for professional CPA marketers.</p>
502
+ </div>
503
+ </div>
504
+ </footer>
505
+
506
+ <script>
507
+ // Initialize Fabric.js canvas
508
+ document.addEventListener('DOMContentLoaded', function() {
509
+ const canvas = new fabric.Canvas('contentCanvas');
510
+
511
+ // Add sample content to canvas
512
+ const sampleText = new fabric.Text('Get Premium VPN Access', {
513
+ left: 50,
514
+ top: 100,
515
+ fontSize: 28,
516
+ fontFamily: 'Poppins',
517
+ fontWeight: 'bold',
518
+ fill: '#ffffff'
519
+ });
520
+
521
+ const subText = new fabric.Text('Free for 30 days - Limited offer', {
522
+ left: 50,
523
+ top: 150,
524
+ fontSize: 18,
525
+ fontFamily: 'Inter',
526
+ fill: '#4cc9f0'
527
+ });
528
+
529
+ const ctaButton = new fabric.Rect({
530
+ left: 50,
531
+ top: 220,
532
+ width: 170,
533
+ height: 50,
534
+ rx: 10,
535
+ ry: 10,
536
+ fill: '#4361ee'
537
+ });
538
+
539
+ const ctaText = new fabric.Text('CLAIM OFFER', {
540
+ left: 125,
541
+ top: 245,
542
+ fontSize: 16,
543
+ fontFamily: 'Poppins',
544
+ fontWeight: 'bold',
545
+ fill: '#ffffff',
546
+ originX: 'center',
547
+ originY: 'center'
548
+ });
549
+
550
+ const group = new fabric.Group([ctaButton, ctaText], {
551
+ left: 50,
552
+ top: 220
553
+ });
554
+
555
+ // Add social proof element
556
+ const proofBox = new fabric.Rect({
557
+ left: 30,
558
+ top: 330,
559
+ width: 210,
560
+ height: 100,
561
+ rx: 15,
562
+ ry: 15,
563
+ fill: 'rgba(255, 255, 255, 0.1)'
564
+ });
565
+
566
+ const proofText = new fabric.Text('"This VPN saved me $120/year!\nWorks perfectly with Netflix."', {
567
+ left: 135,
568
+ top: 380,
569
+ fontSize: 14,
570
+ fontFamily: 'Inter',
571
+ fill: '#ffffff',
572
+ textAlign: 'center',
573
+ originX: 'center',
574
+ originY: 'center',
575
+ lineHeight: 1.4
576
+ });
577
+
578
+ const starGroup = new fabric.Group([], {
579
+ left: 135,
580
+ top: 350,
581
+ originX: 'center'
582
+ });
583
+
584
+ // Add 5 stars
585
+ for(let i = 0; i < 5; i++) {
586
+ const star = new fabric.Text('★', {
587
+ left: i * 20,
588
+ fontSize: 20,
589
+ fill: '#facc15'
590
+ });
591
+ starGroup.addWithUpdate(star);
592
+ }
593
+
594
+ const proofGroup = new fabric.Group([proofBox, proofText, starGroup], {
595
+ left: 135,
596
+ top: 380,
597
+ originX: 'center',
598
+ originY: 'center'
599
+ });
600
+
601
+ canvas.add(sampleText);
602
+ canvas.add(subText);
603
+ canvas.add(group);
604
+ canvas.add(proofGroup);
605
+
606
+ // Set canvas background
607
+ canvas.setBackgroundColor('#1e1e2d', canvas.renderAll.bind(canvas));
608
+
609
+ // Add animation to CTA button
610
+ gsap.to(ctaButton, {
611
+ duration: 2,
612
+ repeat: -1,
613
+ yoyo: true,
614
+ alpha: 0.8,
615
+ ease: "power1.inOut"
616
+ });
617
+
618
+ // Add animation to text
619
+ gsap.from(sampleText, {
620
+ duration: 1,
621
+ y: -20,
622
+ opacity: 0,
623
+ ease: "power2.out"
624
+ });
625
+
626
+ // Add drag and drop functionality for elements
627
+ const elements = document.querySelectorAll('.element-item');
628
+ elements.forEach(element => {
629
+ element.addEventListener('dragstart', function(e) {
630
+ e.dataTransfer.setData('text/plain', element.querySelector('p').textContent);
631
+ });
632
+ });
633
+
634
+ const canvasContainer = document.getElementById('contentCanvas');
635
+ canvasContainer.addEventListener('dragover', function(e) {
636
+ e.preventDefault();
637
+ this.classList.add('drag-over');
638
+ });
639
+
640
+ canvasContainer.addEventListener('dragleave', function() {
641
+ this.classList.remove('drag-over');
642
+ });
643
+
644
+ canvasContainer.addEventListener('drop', function(e) {
645
+ e.preventDefault();
646
+ this.classList.remove('drag-over');
647
+
648
+ const elementType = e.dataTransfer.getData('text/plain');
649
+ const pointer = canvas.getPointer(e);
650
+
651
+ switch(elementType) {
652
+ case 'Text':
653
+ const newText = new fabric.Text('New Text', {
654
+ left: pointer.x,
655
+ top: pointer.y,
656
+ fontSize: 20,
657
+ fill: '#ffffff',
658
+ fontFamily: 'Inter'
659
+ });
660
+ canvas.add(newText);
661
+ break;
662
+ case 'Image':
663
+ // In a real app, this would open a file dialog
664
+ fabric.Image.fromURL('https://via.placeholder.com/150', function(img) {
665
+ img.set({
666
+ left: pointer.x,
667
+ top: pointer.y,
668
+ scaleX: 0.5,
669
+ scaleY: 0.5
670
+ });
671
+ canvas.add(img);
672
+ });
673
+ break;
674
+ case 'Ratings':
675
+ const ratingGroup = new fabric.Group([], {
676
+ left: pointer.x,
677
+ top: pointer.y
678
+ });
679
+
680
+ for(let i = 0; i < 5; i++) {
681
+ const star = new fabric.Text('★', {
682
+ left: i * 24,
683
+ fontSize: 24,
684
+ fill: '#facc15'
685
+ });
686
+ ratingGroup.addWithUpdate(star);
687
+ }
688
+
689
+ canvas.add(ratingGroup);
690
+ break;
691
+ case 'CTA Button':
692
+ const buttonRect = new fabric.Rect({
693
+ width: 150,
694
+ height: 45,
695
+ rx: 8,
696
+ ry: 8,
697
+ fill: '#4361ee'
698
+ });
699
+
700
+ const buttonText = new fabric.Text('CALL TO ACTION', {
701
+ fontSize: 14,
702
+ fontWeight: 'bold',
703
+ fill: '#ffffff',
704
+ originX: 'center',
705
+ originY: 'center'
706
+ });
707
+
708
+ const buttonGroup = new fabric.Group([buttonRect, buttonText], {
709
+ left: pointer.x,
710
+ top: pointer.y
711
+ });
712
+
713
+ canvas.add(buttonGroup);
714
+ break;
715
+ }
716
+
717
+ canvas.renderAll();
718
+ });
719
+ });
720
+ </script>
721
+ <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>
722
+ </html>