${content.title}

Lead magnet data not found. Please start over.

\n );\n }\n\n const downloadHTML = () => {\n const htmlContent = generateHTML(state.leadMagnet);\n const blob = new Blob([htmlContent], { type: 'text/html' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${state.leadMagnet.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.html`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n // You could add a toast notification here\n } catch (err) {\n console.error('Failed to copy text: ', err);\n }\n };\n\n const generateHTML = (content: typeof state.leadMagnet) => {\n if (!content) return '';\n \n return `\n\n\n \n \n ${content.title}\n \n\n\n \n\n

\n ${content.introduction.split('\\n').map(p => `

${p}

`).join('')}\n

\n\n ${content.sections.map(section => `\n

${section.title}

\n ${section.content.split('\\n').map(p => `

${p}

`).join('')}\n

\n ${section.keyPoints ? `\n

Key Takeaways:

${point}

\n ` : ''}\n ${section.quote ? `\n

\n \"${section.quote}\"\n

\n ` : ''}\n

\n `).join('')}\n\n

${content.callToAction.headline}

${content.callToAction.description}

\n \n ${content.callToAction.buttonText}\n \n ${content.callToAction.urgencyText ? `\n

${content.callToAction.urgencyText}

\n ` : ''}\n

\n\n

\n ${content.conclusion.split('\\n').map(p => `

${p}

`).join('')}\n

\n\n \n\n`;\n };\n\n return (\n

\n {/* Success Header */}\n

🎉

\n Your Lead Magnet is Ready!\n

\n AI has created a compelling lead magnet based on your product. \n Download it, customize if needed, and start capturing leads!\n

\n\n {/* Lead Magnet Preview */}\n

Lead Magnet Preview

\n setShowPreview(!showPreview)}\n className=\"px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors\"\n >\n {showPreview ? 'Hide Preview' : 'Show Preview'}\n \n

\n\n {/* Quick Stats */}\n

{state.leadMagnet.sections.length}

Sections

\n {state.leadMagnet.sections.reduce((acc, section) => acc + (section.keyPoints?.length || 0), 0)}\n

Key Points

\n {state.leadMagnet.sections.filter(section => section.quote).length}\n

Quotes

3-5

Pages

\n\n {/* Title and Subtitle */}\n

{state.leadMagnet.title}

{state.leadMagnet.subtitle}

\n\n {/* Sections Overview */}\n

Content Sections:

\n {state.leadMagnet.sections.map((section, index) => (\n

{section.title}

\n {section.content.substring(0, 150)}...\n

\n {section.keyPoints && (\n

\n {section.keyPoints.length} key takeaways included\n

\n )}\n

\n ))}\n

\n\n {/* Call to Action Preview */}\n

{state.leadMagnet.callToAction.headline}

{state.leadMagnet.callToAction.description}

\n {state.leadMagnet.callToAction.buttonText}\n

\n\n {/* Full Preview */}\n {showPreview && (\n

\n )}\n

\n\n {/* Download and Actions */}\n

Download & Share

\n \n

\n {/* Download Options */}\n

📥 Download Options

\n \n \n 📄\n Download HTML File\n \n \n copyToClipboard(generateHTML(state.leadMagnet!))}\n className=\"w-full flex items-center justify-center px-6 py-4 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-semibold\"\n >\n 📋\n Copy HTML Code\n \n

\n\n {/* Next Steps */}\n

🚀 Next Steps

\n \n

\n 1.\n Download the HTML file and review the content\n

\n 2.\n Customize styling or add your branding if needed\n

\n 3.\n Convert to PDF or use as web page for distribution\n

\n 4.\n Set up lead capture forms and start collecting emails\n

\n 5.\n Monitor conversions to your main product\n

\n\n {/* Tips */}\n

💡 Pro Tips

\n •\n Test different headlines and CTAs to optimize conversions\n
\n •\n Use this lead magnet in email campaigns, social media, and your website\n
\n •\n Consider creating variations for different audience segments\n
\n •\n Track which sections generate the most interest for future content\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/andiebuk/Leadmagmagic/code/frontend/components/Complete.tsx","extension","actionData","errors"]