PREMIUM STRUCTURED PROMPT: Ultra-Conversion Landing Page – Elo Estratégico Consulting

\n\n\n \n \n \n

\n \n

...

\n \n \n \n

...

\n \n

...

\n\n\n```\n\n### **Advanced JavaScript for Conversion**\n```javascript\n// Advanced Tracking System\nclass ConversionTracker {\n constructor() {\n this.events = {\n timeOnPage: 0,\n scrollDepth: 0,\n ctaClicks: {},\n videoWatched: 0,\n faqOpened: [],\n mouseExits: 0\n };\n this.initTracking();\n }\n initTracking() {\n // Track time on page\n this.trackTimeOnPage();\n\n // Track scroll depth\n this.trackScrollDepth();\n\n // Track CTA clicks\n this.trackCTAClicks();\n\n // Track video engagement\n this.trackVideoEngagement();\n\n // Track FAQ interaction\n this.trackFAQInteraction();\n\n // Detect exit intent\n this.trackExitIntent();\n\n // Send events to Analytics\n this.sendAnalytics();\n }\n trackScrollDepth() {\n let maxScroll = 0;\n window.addEventListener('scroll', () => {\n const scrollPercent = (window.scrollY /\n (document.documentElement.scrollHeight - window.innerHeight)) * 100;\n\n if (scrollPercent > maxScroll) {\n maxScroll = scrollPercent;\n\n // Important scroll milestones\n if (maxScroll > 25 && !this.events.scroll25) {\n this.sendEvent('scroll_25_percent');\n this.events.scroll25 = true;\n }\n if (maxScroll > 50 && !this.events.scroll50) {\n this.sendEvent('scroll_50_percent');\n this.events.scroll50 = true;\n }\n if (maxScroll > 75 && !this.events.scroll75) {\n this.sendEvent('scroll_75_percent');\n this.events.scroll75 = true;\n }\n if (maxScroll > 90 && !this.events.scroll90) {\n this.sendEvent('scroll_90_percent');\n this.events.scroll90 = true;\n // Show special offer for engaged readers\n this.showEngagedReaderOffer();\n }\n }\n });\n }\n trackExitIntent() {\n let exitIntentShown = false;\n\n document.addEventListener('mouseout', (e) => {\n if (e.clientY <= 0 && !exitIntentShown) {\n exitIntentShown = true;\n this.showExitModal();\n this.sendEvent('exit_intent_triggered');\n }\n });\n }\n showExitModal() {\n // Modal with special offer to recover the visitor\n const modal = document.createElement('div');\n modal.className = 'exit-modal';\n modal.innerHTML = `\n \n `;\n document.body.appendChild(modal);\n }\n}\n// Urgency Countdown Timer\nclass UrgencyTimer {\n constructor(deadline) {\n this.deadline = deadline;\n this.init();\n }\n init() {\n const timer = setInterval(() => {\n const now = new Date().getTime();\n const distance = this.deadline - now;\n\n const days = Math.floor(distance / (1000 * 60 * 60 * 24));\n const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((distance % (1000 * 60)) / 1000);\n\n // Update display\n document.getElementById('countdown').innerHTML = `\n

\n ${days}\n days\n

\n ${hours}\n hours\n

\n ${minutes}\n min\n

\n ${seconds}\n sec\n

\n `;\n\n // Increase urgency when less than 24h remain\n if (distance < 86400000) {\n document.getElementById('countdown').classList.add('urgent');\n this.showUrgencyNotification();\n }\n\n if (distance < 0) {\n clearInterval(timer);\n this.showExpiredOffer();\n }\n }, 1000);\n }\n}\n// Interactive ROI Calculator\nclass ROICalculator {\n constructor() {\n this.setupCalculator();\n }\n setupCalculator() {\n const calculator = document.getElementById('roi-calculator');\n\n calculator.innerHTML = `\n

\n \n How many procedures do you perform per month?\n \n \n \n Current average ticket (R$):\n \n \n \n

\n `;\n }\n calculate() {\n const procedures = document.getElementById('procedures').value;\n const currentTicket = document.getElementById('ticket').value;\n\n // Calculations based on average results\n const newTicket = currentTicket * 1.4; // 40% increase\n const monthlyIncrease = (newTicket - currentTicket) * procedures;\n const yearlyIncrease = monthlyIncrease * 12;\n const investmentROI = yearlyIncrease / 10997; // ROI on investment\n\n // Display results impactfully\n document.getElementById('results').innerHTML = `\n

💰 Your Growth Potential:

\n New Average Ticket:\n R$ ${newTicket.toLocaleString('pt-BR')}\n

\n Monthly Increase:\n R$ ${monthlyIncrease.toLocaleString('pt-BR')}\n

\n Yearly Increase:\n R$ ${yearlyIncrease.toLocaleString('pt-BR')}\n

\n Investment ROI:\n ${Math.round(investmentROI)}x\n

\n 💡 In just ${Math.ceil(10997/monthlyIncrease)} month(s),\n the investment pays for itself. After that, it’s pure profit!\n

\n `;\n\n // Send calculation event to analytics\n gtag('event', 'roi_calculated', {\n 'monthly_increase': monthlyIncrease,\n 'yearly_increase': yearlyIncrease,\n 'roi_multiple': investmentROI\n });\n }\n}\n```\n\n### **Advanced CSS with Conversion Animations**\n```css\n/* Complete Design System */\n:root {\n /* Strategic Colors */\n --color-authority: #694B3C;\n --color-trust: #3498DB;\n --color-success: #27AE60;\n --color-urgency: #E74C3C;\n --color-premium: #F39C12;\n\n /* Golden Ratio Spacing */\n --space-xs: 0.382rem;\n --space-sm: 0.618rem;\n --space-md: 1rem;\n --space-lg: 1.618rem;\n --space-xl: 2.618rem;\n --space-xxl: 4.236rem;\n\n /* Smooth Animations */\n --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n}\n/* Hero Entrance Animation */\n@keyframes heroFadeIn {\n 0% {\n opacity: 0;\n transform: translateY(30px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hero-content {\n animation: heroFadeIn 1.2s ease-out;\n}\n/* CTA Buttons with Micro-interactions */\n.cta-primary {\n background: linear-gradient(135deg, var(--color-authority) 0%, #4A342A 100%);\n color: white;\n padding: 1.2rem 2.5rem;\n font-size: 1.1rem;\n font-weight: 600;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all var(--transition-smooth);\n box-shadow: 0 4px 15px rgba(105, 75, 60, 0.3);\n}\n.cta-primary::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: width 0.6s, height 0.6s;\n}\n.cta-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(105, 75, 60, 0.4);\n}\n.cta-primary:hover::before {\n width: 300px;\n height: 300px;\n}\n/* FAQ Section with Smooth Animation */\n.faq-item {\n border-bottom: 1px solid var(--color-light);\n overflow: hidden;\n}\n.faq-question {\n padding: var(--space-lg);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all var(--transition-fast);\n}\n.faq-question:hover {\n background: rgba(206, 199, 194, 0.3);\n padding-left: calc(var(--space-lg) + 10px);\n}\n.faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height var(--transition-smooth);\n padding: 0 var(--space-lg);\n}\n.faq-item.active .faq-answer {\n max-height: 500px;\n padding: var(--space-lg);\n}\n.faq-icon {\n transition: transform var(--transition-fast);\n}\n.faq-item.active .faq-icon {\n transform: rotate(180deg);\n}\n/* Pulsing Urgency Counter */\n.countdown-urgent {\n animation: pulse 1s infinite;\n}\n@keyframes pulse {\n 0%, 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.05);\n }\n}\n/* Spot Progress Bar */\n.spots-progress {\n width: 100%;\n height: 40px;\n background: #f0f0f0;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n}\n.spots-filled {\n height: 100%;\n background: linear-gradient(90deg, var(--color-success) 0%, var(--color-urgency) 100%);\n width: 62.5%; /* 5 out of 8 spots = 62.5% */\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n position: relative;\n animation: fillProgress 2s ease-out;\n}\n@keyframes fillProgress {\n 0% {\n width: 0%;\n }\n 100% {\n width: 62.5%;\n }\n}\n/* Social Proof Notifications */\n.social-proof-notification {\n position: fixed;\n bottom: 20px;\n left: 20px;\n background: white;\n padding: 15px 20px;\n border-radius: 10px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n display: flex;\n align-items: center;\n gap: 15px;\n animation: slideIn 0.5s ease-out;\n z-index: 1000;\n}\n@keyframes slideIn {\n 0% {\n transform: translateX(-100%);\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}\n```\n\n---\n\n## **🚀 STEP-BY-STEP IMPLEMENTATION INSTRUCTIONS**\n\n### **Phase 1: Preparation and Setup (30 minutes)**\n1. **Set up development environment**\n - Create organized folder structure\n - Set up local server for testing\n - Install minification tools\n2. **Prepare assets and resources**\n - Optimize images (WebP with JPEG fallback)\n - Compress background video (max 2MB)\n - Prepare SVG icons\n3. **Configure tracking and analytics**\n - Install Google Tag Manager\n - Set up custom events\n - Prepare Facebook pixel\n\n### **Phase 2: Structure Development (2 hours)**\n4. **Create semantic HTML**\n - Implement all sections in strategic order\n - Add schema markup\n - Insert optimized meta tags\n5. **Implement responsive CSS**\n - Mobile-first approach\n - Flexible grid system\n - Micro-interaction animations\n6. **Add interactive JavaScript**\n - Advanced tracking system\n - ROI calculator\n - Countdown timer\n - Exit intent popup\n\n### **Phase 3: Content and Copy (2 hours)**\n7. **Insert optimized copy**\n - Headlines with A/B test variants\n - Benefit bullet points\n - Structured testimonials\n - Strategic FAQ\n8. **Add urgency elements**\n - Real countdown timer\n - Limited spots bar\n - Social proof notifications\n\n### **Phase 4: Optimization and Testing (1 hour)**\n9. **Optimize performance**\n - Lazy loading for images\n - Minify CSS and JavaScript\n - Implement browser cache\n10. **Test conversions**\n - Verify all CTAs\n - Test forms\n - Confirm tracking\n\n---\n\n## **📊 SUCCESS METRICS AND OPTIMIZATION**\n\n### **Primary KPIs (Monitor Daily)**\n- **Overall Conversion Rate:** Goal > 5%\n- **Mobile Conversion Rate:** Goal > 3%\n- **Average Time on Page:** Goal > 7 minutes\n- **Bounce Rate:** Goal < 30%\n\n### **Secondary KPIs (Weekly Analysis)**\n- **Scroll Depth:** 80% of visitors reach the end\n- **Video Engagement:** 50% watch > 30 seconds\n- **Calculator Interaction:** 30% use the tool\n- **Return Rate:** 25% return within 7 days\n\n### **Priority A/B Tests**\n**Test 1 – Headlines (Week 1)**\n- Version A: Focus on authority\n- Version B: Focus on financial result\n\n**Test 2 – Entry Offer (Week 2)**\n- Version A: Free strategic session\n- Version B: Free e-book + discounted session\n\n**Test 3 – Urgency (Week 3)**\n- Version A: Time countdown\n- Version B: Spot countdown\n\n---\n\n## **🎯 EXPECTED FINAL RESULT**\nA landing page that not only converts but creates a **transformative experience** for the visiting surgeon. Every element is designed to guide the visitor through an **emotional and logical journey** that results in action. The page should feel like a **personal conversation with an elite consultant**, not a generic sales pitch.\n\nSuccess will be measured not only in immediate conversions but in the **quality of leads generated**—surgeons committed to their digital transformation, willing to invest in excellence, and ready to become digital leaders in their specialties.\n\n---\n**CRITICAL NOTE:** This prompt is designed to produce a landing page that **stands out completely** in the medical consulting market, combining **visual sophistication, persuasive copy based on psychology, and cutting-edge technology** to create a premium conversion machine.","model_settings":{"top_p":null,"models":[],"max_tokens":null,"temperature":null,"presence_penalty":null,"frequency_penalty":null,"additional_instructions":null},"categories":["GPT-5","Cursor Rules","Programming"],"description":"This prompt is designed to guide a multidisciplinary team (sales psychologist, medical copywriter, and full-stack developer) in creating a high-conversion landing page for **Elo Estratégico Consulting**. It targets high-income plastic surgeons (earning R$100k–500k/month) and aims to convert them into clients using a **three-phase commitment ladder strategy**. The prompt provides **detailed audience psychographics, competitive differentiation, visual psychology, technical specifications, and conversion architecture** to ensure the landing page achieves **15–20% conversion to free sessions** and **30–40% conversion from session to paid client**.\n\nUse this prompt to **develop a landing page** that combines **persuasive copywriting, advanced design, and technical optimization** for maximum engagement and conversion. It includes **ready-to-implement HTML, CSS, and JavaScript snippets**, as well as **A/B testing plans** and **success metrics**.","updated_at":"2025-09-15T23:10:28.190206+00:00","rating":0,"fork_count":0,"profiles":{"username":"humbertobrunolopes_976a"},"authorUsername":"humbertobrunolopes_976a"};

⚡ Wait! Exclusive Offer

💰 Your Growth Potential: