Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Powered Meta Ads Intelligence & Optimization Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .pulse-glow { | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.4); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .card-hover { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .metric-card { | |
| background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass-effect backdrop-blur-xl border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">AI</span> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">MetaAds AI</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#modules" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('modules')">Modules</a> | |
| <a href="#predictor" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('predictor')">Predictor</a> | |
| <a href="#competitors" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('competitors')">Competitors</a> | |
| <a href="#fatigue" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('fatigue')">Fatigue</a> | |
| <a href="#optimizer" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('optimizer')">Optimizer</a> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-24 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 animate-pulse"></div> | |
| <div class="max-w-7xl mx-auto px-6 text-center relative z-10"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight"> | |
| AI-Powered Meta Ads | |
| <span class="block gradient-text text-6xl md:text-8xl">Intelligence Platform</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12 leading-relaxed"> | |
| Predict performance, spy on competitors, detect ad fatigue, and optimize copy with | |
| <span class="gradient-text font-semibold">enterprise-grade AI</span> | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-2xl mx-auto"> | |
| <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-12 py-4 rounded-2xl font-semibold text-lg card-hover shadow-2xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300"> | |
| Start Free Trial | |
| </button> | |
| <button class="border-2 border-white/30 text-white px-12 py-4 rounded-2xl font-semibold text-lg backdrop-blur-sm card-hover hover:border-white/50 transition-all duration-300"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-40 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute -top-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: -3s;"></div> | |
| </section> | |
| <!-- Features Overview --> | |
| <section id="modules" class="py-32 relative"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-4xl md:text-6xl font-bold text-white mb-6">4 Powerful AI Modules</h2> | |
| <p class="text-xl text-white/80 max-w-2xl mx-auto">All integrated into one seamless platform</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Module A --> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('predictor')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Ad Performance Predictor</h3> | |
| <p class="text-white/70 text-lg">AI scores your ads before launch</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-3xl font-bold gradient-text">A</span> | |
| </div> | |
| </div> | |
| <!-- Module B --> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('competitors')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M4.661 4.182l-1.504-.87M10.649 5.23l-.828 3.65"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Competitor Intelligence</h3> | |
| <p class="text-white/70 text-lg">Spy on winning ad strategies</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-3xl font-bold gradient-text">B</span> | |
| </div> | |
| </div> | |
| <!-- Module C --> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('fatigue')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Ad Fatigue Detector</h3> | |
| <p class="text-white/70 text-lg">Prevent performance drops</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-3xl font-bold gradient-text">C</span> | |
| </div> | |
| </div> | |
| <!-- Module D --> | |
| <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('optimizer')"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"> | |
| <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.5h3m1.5-3l-3-3 3-3 3 3-3 3z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">AI Copy Optimizer</h3> | |
| <p class="text-white/70 text-lg">Generate high-converting copy</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-3xl font-bold gradient-text">D</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Module A: Ad Performance Predictor --> | |
| <section id="predictor" class="py-32 hidden relative"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center mb-16"> | |
| <div> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Performance Predictor</h2> | |
| <p class="text-xl text-white/80 mb-8">Get instant AI-powered performance predictions before launching your ads</p> | |
| <div class="space-y-4 mb-12"> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-green-400 rounded-full"></div> | |
| <span>Performance Score (0-100)</span> | |
| </div> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-yellow-400 rounded-full"></div> | |
| <span>Risk Level Assessment</span> | |
| </div> | |
| <div class="flex items-center space-x-4 text-white/70"> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full"></div> | |
| <span>Optimization Recommendations</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-10 shadow-2xl"> | |
| <div id="prediction-results" class="space-y-6 hidden"> | |
| <div class="grid grid-cols-3 gap-6"> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-green-400/10 to-green-500/10 border border-green-400/30"> | |
| <div class="text-4xl font-bold text-green-400 mb-2" id="perf-score">92</div> | |
| <div class="text-sm font-semibold text-green-300 uppercase tracking-wide">Performance Score</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-blue-400/10 to-blue-500/10 border border-blue-400/30"> | |
| <div class="text-4xl font-bold text-blue-400 mb-2" id="risk-level">LOW</div> | |
| <div class="text-sm font-semibold text-blue-300 uppercase tracking-wide">Risk Level</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-purple-400/10 to-purple-500/10 border border-purple-400/30"> | |
| <div class="text-3xl font-bold text-purple-400 mb-2" id="confidence">94%</div> | |
| <div class="text-sm font-semibold text-purple-300 uppercase tracking-wide">Confidence</div> | |
| </div> | |
| </div> | |
| <canvas id="perfChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Form --> | |
| <div class="metric-card rounded-3xl p-12 max-w-2xl mx-auto"> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">Analyze Your Ad</h3> | |
| <form id="predictor-form" class="space-y-6"> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-3">Ad Copy</label> | |
| <textarea id="ad-copy" rows="4" class="w-full p-6 rounded-2xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 resize-vertical text-lg font-medium" placeholder="Enter your ad primary text...">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today!</textarea> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-2">CTA</label> | |
| <select id="cta" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg"> | |
| <option>Shop Now</option> | |
| <option>Learn More</option> | |
| <option>Get Offer</option> | |
| <option>Sign Up</option> | |
| <option>Buy Now</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-2">Industry</label> | |
| <select id="industry" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg"> | |
| <option>E-commerce</option> | |
| <option>SaaS</option> | |
| <option>Finance</option> | |
| <option>Health</option> | |
| <option>Education</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-lg font-semibold text-gray-900 mb-2">Country</label> | |
| <select id="country" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg"> | |
| <option>USA</option> | |
| <option>UK</option> | |
| <option>Canada</option> | |
| <option>Australia</option> | |
| <option>Germany</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300"> | |
| Predict Performance | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Module B: Competitor Intelligence --> | |
| <section id="competitors" class="py-32 hidden bg-white/5 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Competitor Ad Intelligence</h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto">Real-time insights into competitor strategies across 100M+ ads</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <!-- Keywords & CTA --> | |
| <div class="space-y-8"> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Top Keywords by Niche</h3> | |
| <div id="top-keywords" class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <!-- Dynamic keywords will be populated by JS --> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">CTA Frequency</h3> | |
| <canvas id="ctaChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <!-- Creative Formats & Trends --> | |
| <div class="space-y-8"> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Creative Formats Used</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-6"> | |
| <div class="text-center p-6 rounded-2xl hover:bg-blue-50/50 cursor-pointer transition-colors"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <div class="font-bold text-xl text-gray-900 mb-1">Video</div> | |
| <div class="text-sm text-gray-600">67%</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl hover:bg-green-50/50 cursor-pointer transition-colors"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <div class="font-bold text-xl text-gray-900 mb-1">Image</div> | |
| <div class="text-sm text-gray-600">24%</div> | |
| </div> | |
| <div class="text-center p-6 rounded-2xl hover:bg-purple-50/50 cursor-pointer transition-colors"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div class="font-bold text-xl text-gray-900 mb-1">Carousel</div> | |
| <div class="text-sm text-gray-600">9%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Trending Themes</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center p-4 bg-gradient-to-r from-orange-400/10 to-orange-500/10 rounded-xl border border-orange-400/30"> | |
| <span class="font-semibold text-gray-900">Limited Time Offers</span> | |
| <span class="px-3 py-1 bg-orange-400 text-white text-xs font-bold rounded-full">↑ 43%</span> | |
| </div> | |
| <div class="flex justify-between items-center p-4 bg-gradient-to-r from-green-400/10 to-green-500/10 rounded-xl border border-green-400/30"> | |
| <span class="font-semibold text-gray-900">Social Proof</span> | |
| <span class="px-3 py-1 bg-green-400 text-white text-xs font-bold rounded-full">↑ 28%</span> | |
| </div> | |
| <div class="flex justify-between items-center p-4 bg-gradient-to-r from-blue-400/10 to-blue-500/10 rounded-xl border border-blue-400/30"> | |
| <span class="font-semibold text-gray-900">Urgency Triggers</span> | |
| <span class="px-3 py-1 bg-blue-400 text-white text-xs font-bold rounded-full">↑ 19%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Module C: Ad Fatigue Detector --> | |
| <section id="fatigue" class="py-32 hidden"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Fatigue Detector</h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto">AI monitors your campaigns 24/7 for fatigue signals</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div class="metric-card rounded-3xl p-12"> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">Fatigue Score</h3> | |
| <canvas id="fatigueChart" height="400"></canvas> | |
| <div class="mt-8 pt-8 border-t border-gray-200/50"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-4"> | |
| <span>0</span> | |
| <span>50</span> | |
| <span>100</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-3"> | |
| <div class="bg-gradient-to-r from-orange-400 to-red-500 h-3 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">Your campaigns are showing <span class="font-semibold text-orange-600">moderate fatigue risk</span></p> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Repetition Alerts</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-4 bg-red-50/50 border border-red-200/50 rounded-2xl"> | |
| <div> | |
| <div class="font-bold text-lg text-red-600">High Repetition</div> | |
| <div class="text-sm text-red-500">Ad ID: 12345AB</div> | |
| </div> | |
| <div class="text-2xl font-bold text-red-500">14 days</div> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-yellow-50/50 border border-yellow-200/50 rounded-2xl"> | |
| <div> | |
| <div class="font-bold text-lg text-yellow-600">Medium Repetition</div> | |
| <div class="text-sm text-yellow-500">Ad ID: 67890CD</div> | |
| </div> | |
| <div class="text-2xl font-bold text-yellow-500">9 days</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metric-card rounded-3xl p-8"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Creative Refresh Suggestions</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="p-6 border-2 border-dashed border-gray-300/50 rounded-2xl text-center hover:border-blue-400 transition-colors cursor-pointer"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> | |
| </svg> | |
| </div> | |
| <div class="font-semibold text-gray-900 mb-1">New Video Creative</div> | |
| <div class="text-sm text-gray-600">Generate video variant</div> | |
| </div> | |
| <div class="p-6 border-2 border-dashed border-gray-300/50 rounded-2xl text-center hover:border-green-400 transition-colors cursor-pointer"> | |
| <div class="w-16 h-16 bg-green-100 rounded-2xl mx-auto mb-4 flex items-center justify-center"> | |
| <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.5h3m1.5-3l-3-3 3-3 3 3-3 3z"></path> | |
| </svg> | |
| </div> | |
| <div class="font-semibold text-gray-900 mb-1">Copy Refresh</div> | |
| <div class="text-sm text-gray-600">AI-optimized text</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Module D: AI Ad Copy Optimizer --> | |
| <section id="optimizer" class="py-32 hidden bg-white/5 backdrop-blur-sm"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="text-center mb-24"> | |
| <h2 class="text-5xl font-bold text-white mb-6 gradient-text">AI Ad Copy Optimizer</h2> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto">Transform your copy with industry-leading AI optimization</p> | |
| </div> | |
| <div class="metric-card rounded-3xl p-12 max-w-4xl mx-auto"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-start"> | |
| <div> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">Original Copy</h3> | |
| <div class="bg-gray-50/50 p-8 rounded-2xl border-2 border-gray-200/50 min-h-[300px]"> | |
| <textarea id="original-copy" rows="12" class="w-full bg-transparent border-none outline-none text-lg font-medium text-gray-900 resize-none">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today! Don't miss out on this incredible deal.</textarea> | |
| </div> | |
| <button onclick="optimizeCopy()" class="mt-6 w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white py-4 px-8 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300"> | |
| ✨ Optimize with AI | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-8">AI Optimized Copy <span class="text-sm font-normal text-green-600">(+47% predicted performance)</span></h3> | |
| <div id="optimized-copy" class="bg-gradient-to-br from-emerald-50 to-green-50/50 p-8 rounded-2xl border-2 border-emerald-200/50 min-h-[300px] hidden"> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="font-bold text-2xl text-emerald-800 mb-2 leading-tight">🎉 50% OFF Your First Order - Limited Spots!</div> | |
| <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">Primary Text</div> | |
| </div> | |
| <div> | |
| <div class="font-bold text-xl text-gray-900 mb-2">⚡ Join 10K+ Happy Customers Today</div> | |
| <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">Headline</div> | |
| </div> | |
| <div> | |
| <div class="font-bold text-xl text-blue-600 mb-2">🛒 Shop Now - Free Shipping Worldwide!</div> | |
| <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">CTA</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="optimization-stats" class="mt-6 grid grid-cols-3 gap-4 hidden"> | |
| <div class="text-center p-4 bg-white/50 rounded-xl"> | |
| <div class="text-2xl font-bold text-emerald-600 mb-1">92</div> | |
| <div class="text-xs text-gray-600 uppercase tracking-wide">Score</div> | |
| </div> | |
| <div class="text-center p-4 bg-white/50 rounded-xl"> | |
| <div class="text-2xl font-bold text-blue-600 mb-1">✓</div> | |
| <div class="text-xs text-gray-600 uppercase tracking-wide">Tone Match</div> | |
| </div> | |
| <div class="text-center p-4 bg-white/50 rounded-xl"> | |
| <div class="text-2xl font-bold text-purple-600 mb-1">3.2x</div> | |
| <div class="text-xs text-gray-600 uppercase tracking-wide">Engagement</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-16 mt-32 border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto px-6 text-center"> | |
| <div class="flex items-center justify-center space-x-3 mb-8"> | |
| <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">AI</span> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">MetaAds AI</span> | |
| </div> | |
| <p class="text-white/60 text-lg mb-8 max-w-2xl mx-auto"> | |
| The most advanced AI-powered Meta Ads intelligence and optimization platform | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-6 text-white/70 text-sm"> | |
| <a href="#" class="hover:text-white transition-colors">Privacy</a> | |
| <a href="#" class="hover:text-white transition-colors">Terms</a> | |
| <a href="#" class="hover:text-white transition-colors">Security</a> | |
| <a href="#" class="hover:text-white transition-colors">Support</a> | |
| </div> | |
| <p class="text-white/40 text-xs mt-8">© 2024 MetaAds AI. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling and module navigation | |
| function openModule(moduleId) { | |
| document.querySelectorAll('section[id]').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| document.getElementById(moduleId).classList.remove('hidden'); | |
| document.querySelector('.gradient-bg')?.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Predictor Form Handler | |
| document.getElementById('predictor-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const results = document.getElementById('prediction-results'); | |
| results.classList.remove('hidden'); | |
| results.scrollIntoView({ behavior: 'smooth' }); | |
| // Animate score | |
| const scoreEl = document.getElementById('perf-score'); | |
| const riskEl = document.getElementById('risk-level'); | |
| scoreEl.textContent = '0'; | |
| riskEl.textContent = 'CALCULATING...'; | |
| setTimeout(() => { | |
| let score = 0; | |
| const interval = setInterval(() => { | |
| score += Math.random() * 5; | |
| if (score > 92) { | |
| score = 92; | |
| clearInterval(interval); | |
| } | |
| scoreEl.textContent = Math.floor(score); | |
| }, 50); | |
| setTimeout(() => { | |
| riskEl.textContent = 'LOW'; | |
| }, 1500); | |
| }, 500); | |
| // Update chart | |
| updatePerfChart(); | |
| }); | |
| function updatePerfChart() { | |
| const ctx = document.getElementById('perfChart').getContext('2d'); | |
| new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['CTR', 'Conversion', 'Engagement'], | |
| datasets: [{ | |
| data: [92, 87, 95], | |
| backgroundColor: ['#10b981', '#3b82f6', '#8b5cf6'], | |
| borderWidth: 0, | |
| cutout: '70%' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { display: false } | |
| } | |
| } | |
| }); | |
| } | |
| // Competitor Intelligence Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // CTA Chart | |
| const ctaCtx = document.getElementById('ctaChart').getContext('2d'); | |
| new Chart(ctaCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Shop Now', 'Learn More', 'Get Offer', 'Sign Up', 'Buy Now'], | |
| datasets: [{ | |
| label: 'Usage %', | |
| data: [45, 28, 15, 8, 4], | |
| backgroundColor: 'rgba(34, 197, 94, 0.8)', | |
| borderRadius: 8 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { | |
| y: { beginAtZero: true, max: 50 } | |
| }, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| // Fatigue Chart | |
| const fatigueCtx = document.getElementById('fatigueChart').getContext('2d'); | |
| new Chart(fatigueCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Day 1', 'Day 3', 'Day 7', 'Day 10', 'Day 14', 'Day 18'], | |
| datasets: [{ | |
| label: 'Fatigue Score', | |
| data: [12, 25, 45, 62, 78, 82], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { | |
| y: { beginAtZero: true, max: 100 } | |
| }, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| // Top Keywords | |
| const keywords = [ | |
| 'discount', 'free shipping', 'limited time', '50% off', 'best seller', | |
| 'new arrival', 'shop now', 'limited stock', 'holiday sale', 'buy now' | |
| ]; | |
| const keywordsContainer = document.getElementById('top-keywords'); | |
| keywords.slice(0, 9).forEach((keyword, index) => { | |
| const div = document.createElement('div'); | |
| div.className = 'p-3 bg-gradient-to-r from-blue-500/10 to-blue-600/10 rounded-xl border border-blue-400/30'; | |
| div.innerHTML = ` | |
| <div class="font-bold text-white text-lg">#${keyword}</div> | |
| <div class="text-blue-200 text-sm">${Math.floor(Math.random() * 5000) + 1000} ads</div> | |
| `; | |
| keywordsContainer.appendChild(div); | |
| }); | |
| }); | |
| // Copy Optimizer | |
| function optimizeCopy() { | |
| const optimized = document.getElementById('optimized-copy'); | |
| const stats = document.getElementById('optimization-stats'); | |
| optimized.classList.remove('hidden'); | |
| stats.classList.remove('hidden'); | |
| optimized.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Mobile menu toggle (simplified) | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| // Mobile menu functionality | |
| }); | |
| // Parallax effect on scroll | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelectorAll('.animate-float'); | |
| parallax.forEach(el => { | |
| const speed = 0.5; | |
| el.style.transform = `translateY(${scrolled * speed}px)`; | |
| }); | |
| }); | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.card-hover').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| observer.observe(el); | |
| }); | |
| </script> | |
| </body> | |
| </html> |