html-to-pdf 🚀
1. HTML Content (Paste your complete HTML structure here)
<!DOCTYPE html> <html lang="zh-MY"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Website 买家指南 2025</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Noto Sans SC', sans-serif; background-color: #0f172a; /* Slate 900 */ color: #f8fafc; } /* Slide Container Styling */ .slide-container { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem; } .slide { width: 100%; max-width: 1200px; aspect-ratio: 16/9; /* Force Presentation Ratio */ background-color: #1e293b; border: 1px solid #334155; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); border-radius: 1rem; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 3rem 4rem; page-break-after: always; /* Essential for PDF generation */ break-after: page; } /* Image Backgrounds with Overlay */ .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 0; } .slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%); z-index: 1; } /* Specific Overlay Adjustments for better image visibility */ .slide-overlay-light { background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%); } /* Content Styling */ h1 { font-weight: 900; letter-spacing: -0.05em; } h2 { font-weight: 700; letter-spacing: -0.025em; } .highlight { color: #f59e0b; } /* Amber 500 */ .accent-bg { background-color: #f59e0b; color: #0f172a; } /* Background Decorations */ .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; z-index: 2; } .orb-blue { background: #3b82f6; width: 400px; height: 400px; top: -100px; right: -100px; } .orb-orange { background: #f59e0b; width: 300px; height: 300px; bottom: -50px; left: -50px; } .content-layer { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; } /* Print Specifics */ @media print { @page { size: landscape; margin: 0; } body { background-color: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; margin: 0; padding: 0; } .slide-container { padding: 0; gap: 0; display: block; /* Fix flex issues in print */ } .slide { border: none; box-shadow: none; border-radius: 0; width: 100%; /* Use full width of page */ height: 100vh; /* Use full height of page */ page-break-after: always; break-after: page; margin: 0; print-color-adjust: exact; background-color: #1e293b !important; /* Force bg color */ } .no-print { display: none !important; } /* Hide scrollbars */ ::-webkit-scrollbar { display: none; } } </style> <script> function printPDF() { // Friendly reminder to ensure backgrounds are printed alert("⚠️ 导出提示 (Export Tip):\n\n在打印窗口中,请务必勾选 '背景图形' (Background Graphics) 选项,否则图片和背景颜色将无法显示。\n\nPlease ensure 'Background graphics' is checked in the 'More settings' of the print window to capture all images."); window.print(); } </script> </head> <body> <!-- Control Bar --> <div class="fixed top-4 right-4 z-50 no-print flex gap-4"> <button onclick="printPDF()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition flex items-center gap-2"> <i class="fas fa-file-pdf"></i> 导出 PDF / 打印 </button> </div> <div class="slide-container"> <!-- SLIDE 1: Cover --> <div class="slide"> <!-- Realistic BG: Abstract Tech City --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');"></div> <div class="slide-overlay slide-overlay-light"></div> <div class="orb orb-blue"></div> <div class="content-layer justify-center items-start text-left h-full"> <div class="inline-block bg-blue-900/80 backdrop-blur text-blue-100 px-4 py-1 rounded-full text-sm font-bold mb-6 border border-blue-500"> 🇲🇾 马来西亚版 · 2025 </div> <h1 class="text-6xl mb-4 leading-tight drop-shadow-lg"> Smart Website<span class="text-blue-500">™</span><br> <span class="highlight">买家指南</span> </h1> <p class="text-2xl text-slate-200 mb-8 max-w-3xl drop-shadow-md"> “让网站从展示型变成赚钱型——<br>马来西亚中小企业的数字化新标准” </p> <div class="border-t border-slate-500/50 pt-8 w-full flex justify-between items-end"> <div> <p class="text-sm text-slate-400 uppercase tracking-widest">Prepared For</p> <p class="text-lg font-bold">Forward-Thinking Entrepreneurs</p> </div> <div class="text-right"> <p class="text-5xl text-slate-700"><i class="fas fa-rocket"></i></p> </div> </div> </div> </div> <!-- SLIDE 2: The Context --> <div class="slide"> <!-- Realistic BG: Busy Business / Analytics --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center"> <h2 class="text-4xl mb-12 border-l-8 border-blue-600 pl-6">前言:马来西亚企业正经历的重大转折</h2> <div class="grid grid-cols-2 gap-12 items-center"> <div class="space-y-6"> <p class="text-xl text-slate-300">过去 3 年,中小企业的数字化环境发生了剧烈变化:</p> <ul class="space-y-4 text-lg"> <li class="flex items-center gap-4"><i class="fas fa-arrow-up text-red-500"></i> <span>广告费用越来越贵</span></li> <li class="flex items-center gap-4"><i class="fas fa-arrow-down text-red-500"></i> <span>自然咨询量下降</span></li> <li class="flex items-center gap-4"><i class="fas fa-clock text-red-500"></i> <span>客户反应越来越慢</span></li> <li class="flex items-center gap-4"><i class="fas fa-comment-slash text-red-500"></i> <span>WhatsApp 回复率变低</span></li> </ul> </div> <div class="bg-slate-800/90 backdrop-blur p-8 rounded-xl border border-slate-600 shadow-2xl"> <p class="text-2xl font-bold mb-4 text-white">真正的问题不是“流量变少”</p> <p class="text-slate-400 mb-6">真正的问题是:客户点击进来之后,发生了什么?</p> <div class="bg-blue-900/50 p-4 rounded border border-blue-500/30 text-blue-200"> <strong>核心洞察:</strong> 企业需要的不是一个“好看的网站”,而是一台 <span class="text-white font-bold underline decoration-orange-500">自动赚钱机器</span>。 </div> </div> </div> </div> </div> <!-- SLIDE 3: The 87% Problem --> <div class="slide"> <!-- Realistic BG: Frustrated Tech User --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1526649661456-89c7ed4d00b8?q=80&w=2070&auto=format&fit=crop'); filter: grayscale(100%);"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center"> <div class="text-center mb-10"> <h2 class="text-5xl font-bold mb-4">为什么 <span class="text-red-500">87%</span> 的网站不能带来销售?</h2> <p class="text-xl text-slate-400">大多数网站陷在“展示型”陷阱里,只赚面子,不赚业绩。</p> </div> <div class="grid grid-cols-2 gap-8"> <!-- Traditional Website --> <div class="bg-slate-800/80 backdrop-blur p-8 rounded-xl border border-slate-700 relative overflow-hidden group"> <div class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-bl">传统网站</div> <!-- Inner Image --> <div class="h-32 w-full mb-4 rounded overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover opacity-50" alt="Old boring design"> <div class="absolute inset-0 flex items-center justify-center bg-black/40"> <i class="fas fa-ban text-4xl text-red-500"></i> </div> </div> <h3 class="text-2xl font-bold mb-4 text-slate-300">展示型 (Showcase)</h3> <ul class="space-y-3 text-slate-400"> <li class="flex items-start gap-3"><i class="fas fa-times text-red-500 mt-1"></i> 被动等待客户联络</li> <li class="flex items-start gap-3"><i class="fas fa-times text-red-500 mt-1"></i> 缺乏说服力与信任机制</li> <li class="flex items-start gap-3"><i class="fas fa-times text-red-500 mt-1"></i> 无法过滤“无效 PM”</li> </ul> </div> <!-- Smart Website --> <div class="bg-blue-900/60 backdrop-blur p-8 rounded-xl border border-blue-500 relative overflow-hidden"> <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl">Smart Website™</div> <!-- Inner Image --> <div class="h-32 w-full mb-4 rounded overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover" alt="Cybersecurity and modern tech"> </div> <h3 class="text-2xl font-bold mb-4 text-white">成交型 (Conversion)</h3> <ul class="space-y-3 text-white"> <li class="flex items-start gap-3"><i class="fas fa-check text-green-400 mt-1"></i> 主动引导,层层递进</li> <li class="flex items-start gap-3"><i class="fas fa-check text-green-400 mt-1"></i> 心理学编码,建立信任</li> <li class="flex items-start gap-3"><i class="fas fa-check text-green-400 mt-1"></i> 24/7 自动跟进系统</li> </ul> </div> </div> </div> </div> <!-- SLIDE 4: What is Smart Website? --> <div class="slide"> <!-- Realistic BG: Abstract Neural Network --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2065&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center items-center text-center"> <h2 class="text-4xl mb-4">什么是真正的 Smart Website™?</h2> <p class="text-xl text-slate-400 mb-10">( ⚠️ 误区:不是简单的 AI 聊天机器人 + 好看设计 )</p> <div class="flex gap-4 w-full justify-center"> <!-- Layer 1 --> <div class="w-1/5 bg-slate-800/90 backdrop-blur p-6 rounded-lg border-t-4 border-blue-400 shadow-lg flex flex-col items-center"> <i class="fas fa-brain text-3xl text-blue-400 mb-4"></i> <h3 class="font-bold text-lg mb-2">心理学层</h3> <p class="text-xs text-slate-400">内置人性触发点<br>提高说服力</p> </div> <!-- Layer 2 --> <div class="w-1/5 bg-slate-800/90 backdrop-blur p-6 rounded-lg border-t-4 border-blue-500 shadow-lg flex flex-col items-center transform -translate-y-4"> <i class="fas fa-filter text-3xl text-blue-500 mb-4"></i> <h3 class="font-bold text-lg mb-2">漏斗层</h3> <p class="text-xs text-slate-400">结构化用户旅程<br>步步为营</p> </div> <!-- Layer 3 --> <div class="w-1/5 bg-slate-800/90 backdrop-blur p-6 rounded-lg border-t-4 border-orange-500 shadow-xl flex flex-col items-center transform -translate-y-8 z-10 scale-110"> <i class="fas fa-cogs text-3xl text-orange-500 mb-4"></i> <h3 class="font-bold text-lg mb-2">自动化层</h3> <p class="text-xs text-slate-400">自动跟进、培育<br>全天候运转</p> </div> <!-- Layer 4 --> <div class="w-1/5 bg-slate-800/90 backdrop-blur p-6 rounded-lg border-t-4 border-blue-500 shadow-lg flex flex-col items-center transform -translate-y-4"> <i class="fas fa-shield-alt text-3xl text-blue-500 mb-4"></i> <h3 class="font-bold text-lg mb-2">过滤层</h3> <p class="text-xs text-slate-400">剔除无效询盘<br>保护销售时间</p> </div> <!-- Layer 5 --> <div class="w-1/5 bg-slate-800/90 backdrop-blur p-6 rounded-lg border-t-4 border-blue-400 shadow-lg flex flex-col items-center"> <i class="fas fa-chart-line text-3xl text-blue-400 mb-4"></i> <h3 class="font-bold text-lg mb-2">资产层</h3> <p class="text-xs text-slate-400">模块化、可扩展<br>陪企业成长</p> </div> </div> <p class="mt-12 text-lg font-bold text-orange-400 drop-shadow-md">结论:Smart Website™ 从来不是设计项目,而是“销售系统”项目。</p> </div> </div> <!-- SLIDE 5: 9 Core USPs (Grid) --> <div class="slide"> <!-- Realistic BG: Modern Office Architecture --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="content-layer"> <h2 class="text-3xl font-bold mb-8 text-center">Smart Website™ 的 <span class="highlight">9 大核心 USP</span></h2> <div class="grid grid-cols-3 gap-5 h-full"> <!-- USP Cards with backdrop blur --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-orange-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">01</span> <h3 class="font-bold text-white">自动赚钱网站</h3> </div> <p class="text-sm text-slate-400">Money-Making Website™。不是名片,是主动创造销售的资产。</p> </div> <!-- USP 2 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">02</span> <h3 class="font-bold text-white">心理学代码化</h3> </div> <p class="text-sm text-slate-400">Psychology-Encoded。把行为学写进代码,大幅提高成交率。</p> </div> <!-- USP 3 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">03</span> <h3 class="font-bold text-white">实战验证架构</h3> </div> <p class="text-sm text-slate-400">新马市场验证过的高转化结构,上线即具备战斗力。</p> </div> <!-- USP 4 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">04</span> <h3 class="font-bold text-white">模块化扩张</h3> </div> <p class="text-sm text-slate-400">像搭积木一样增加功能(CRM/支付/会员),永不过时。</p> </div> <!-- USP 5 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-orange-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">05</span> <h3 class="font-bold text-white">精准受众过滤</h3> </div> <p class="text-sm text-slate-400">过滤“PM价钱”、“看看先”,只保留有潜力客户。</p> </div> <!-- USP 6 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">06</span> <h3 class="font-bold text-white">转化效率倍增</h3> </div> <p class="text-sm text-slate-400">平均提高至少 50% 的线索转化率。</p> </div> <!-- USP 7 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">07</span> <h3 class="font-bold text-white">业绩流失挽回</h3> </div> <p class="text-sm text-slate-400">自动召回被遗漏客户,平均挽回 RM43,000+。</p> </div> <!-- USP 8 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-orange-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">08</span> <h3 class="font-bold text-white">全天候业务员</h3> </div> <p class="text-sm text-slate-400">24/7 Virtual Sales Rep。无情绪、不请假、随时跟进。</p> </div> <!-- USP 9 --> <div class="bg-slate-800/80 backdrop-blur p-4 rounded border-l-4 border-blue-500"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl font-bold text-slate-500">09</span> <h3 class="font-bold text-white">管道全景透视</h3> </div> <p class="text-sm text-slate-400">CRM Dashboard。告别 Excel,一眼看清谁最可能成交。</p> </div> </div> </div> </div> <!-- SLIDE 6: Psychology Encoding --> <div class="slide"> <!-- Realistic BG: Human Eye / Focus --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1499557354967-2b2d8910bcca?q=80&w=2536&auto=format&fit=crop'); opacity: 0.2;"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center"> <div class="flex items-center justify-between mb-10"> <h2 class="text-4xl font-bold">“心理学编码”如何提升转化?</h2> <div class="bg-white/10 px-4 py-2 rounded text-sm backdrop-blur">说服力提升 <span class="text-green-400 font-bold">+300%</span></div> </div> <div class="grid grid-cols-4 gap-6"> <!-- Engine 1 --> <div class="bg-slate-800/90 backdrop-blur rounded-xl p-6 relative overflow-hidden group hover:bg-slate-700 transition"> <div class="absolute top-0 left-0 w-full h-1 bg-red-500"></div> <div class="text-red-500 text-4xl mb-4"><i class="fas fa-eye"></i></div> <h3 class="text-xl font-bold mb-2">① 注意力引擎</h3> <p class="text-slate-400 text-sm">3秒定胜负。抓住访客注意力,拒绝“跳出率”。</p> </div> <!-- Engine 2 --> <div class="bg-slate-800/90 backdrop-blur rounded-xl p-6 relative overflow-hidden group hover:bg-slate-700 transition"> <div class="absolute top-0 left-0 w-full h-1 bg-blue-500"></div> <div class="text-blue-500 text-4xl mb-4"><i class="fas fa-handshake"></i></div> <h3 class="text-xl font-bold mb-2">② 信任引擎</h3> <p class="text-slate-400 text-sm">权威、案例、数据、认证。瞬间建立专家形象。</p> </div> <!-- Engine 3 --> <div class="bg-slate-800/90 backdrop-blur rounded-xl p-6 relative overflow-hidden group hover:bg-slate-700 transition"> <div class="absolute top-0 left-0 w-full h-1 bg-orange-500"></div> <div class="text-orange-500 text-4xl mb-4"><i class="fas fa-fire"></i></div> <h3 class="text-xl font-bold mb-2">③ 欲望引擎</h3> <p class="text-slate-400 text-sm">激发“我需要这个”的冲动。放大价值、渴望与恐惧。</p> </div> <!-- Engine 4 --> <div class="bg-slate-800/90 backdrop-blur rounded-xl p-6 relative overflow-hidden group hover:bg-slate-700 transition"> <div class="absolute top-0 left-0 w-full h-1 bg-green-500"></div> <div class="text-green-500 text-4xl mb-4"><i class="fas fa-mouse-pointer"></i></div> <h3 class="text-xl font-bold mb-2">④ 行动引擎</h3> <p class="text-slate-400 text-sm">消除犹豫,清晰引导。让“点击”成为唯一选择。</p> </div> </div> </div> </div> <!-- SLIDE 7: Platform Comparison --> <div class="slide"> <!-- Plain dark BG for data heavy slide --> <div class="slide-bg" style="background-color: #0f172a;"></div> <div class="content-layer justify-center"> <h2 class="text-4xl font-bold mb-8 text-center">三大平台终极对比</h2> <table class="w-full text-left border-collapse"> <thead> <tr class="text-slate-400 border-b border-slate-600"> <th class="p-4 w-1/4">功能项</th> <th class="p-4 w-1/4 text-center text-white bg-blue-900/40 rounded-t-lg border-t-4 border-blue-500"> <i class="fas fa-star text-yellow-400 mr-2"></i>Smart Website™ </th> <th class="p-4 w-1/4 text-center">普通网站</th> <th class="p-4 w-1/4 text-center">Facebook Page</th> </tr> </thead> <tbody class="text-lg"> <tr class="border-b border-slate-700/50"> <td class="p-4 font-bold text-slate-300">自动过滤无效询盘</td> <td class="p-4 text-center bg-blue-900/20 text-green-400"><i class="fas fa-check-double"></i> 完美</td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> </tr> <tr class="border-b border-slate-700/50"> <td class="p-4 font-bold text-slate-300">24H 自动跟进 & 挽回</td> <td class="p-4 text-center bg-blue-900/20 text-green-400"><i class="fas fa-check"></i> 是</td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> </tr> <tr class="border-b border-slate-700/50"> <td class="p-4 font-bold text-slate-300">消费心理学编码</td> <td class="p-4 text-center bg-blue-900/20 text-green-400">★★★★★</td> <td class="p-4 text-center text-yellow-600">★★☆☆☆</td> <td class="p-4 text-center text-yellow-700">★☆☆☆☆</td> </tr> <tr class="border-b border-slate-700/50"> <td class="p-4 font-bold text-slate-300">CRM 管道管理</td> <td class="p-4 text-center bg-blue-900/20 text-green-400"><i class="fas fa-check"></i> 有</td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> <td class="p-4 text-center text-slate-600"><i class="fas fa-times"></i></td> </tr> <tr> <td class="p-4 font-bold text-slate-300">资产价值</td> <td class="p-4 text-center bg-blue-900/20 font-bold text-orange-400">高 (可扩展)</td> <td class="p-4 text-center text-slate-500">低</td> <td class="p-4 text-center text-slate-500">低 (属于FB)</td> </tr> </tbody> </table> </div> </div> <!-- SLIDE 8: Automation & Case Study --> <div class="slide"> <!-- Realistic BG: Financial Growth / Tablet Dashboard --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center"> <div class="flex gap-12"> <!-- Left: Automation Logic --> <div class="w-1/2 bg-slate-900/80 p-8 rounded-xl backdrop-blur"> <h2 class="text-3xl font-bold mb-6">漏斗加压 & 自动跟进</h2> <div class="space-y-6"> <div class="flex items-center gap-4"> <div class="bg-slate-700 p-3 rounded-full h-12 w-12 flex items-center justify-center font-bold text-white">1</div> <div> <h4 class="font-bold text-orange-400">过滤层</h4> <p class="text-sm text-slate-400">增加“步骤压力”,自动剔除“PM价钱”党。</p> </div> </div> <div class="flex items-center gap-4"> <div class="bg-slate-700 p-3 rounded-full h-12 w-12 flex items-center justify-center font-bold text-white">2</div> <div> <h4 class="font-bold text-blue-400">培育层</h4> <p class="text-sm text-slate-400">即刻回复,提供价值,建立信任。</p> </div> </div> <div class="flex items-center gap-4"> <div class="bg-slate-700 p-3 rounded-full h-12 w-12 flex items-center justify-center font-bold text-white">3</div> <div> <h4 class="font-bold text-green-400">挽回层</h4> <p class="text-sm text-slate-400">客户犹豫?系统自动召回,无需人工介入。</p> </div> </div> </div> </div> <!-- Right: Proof --> <div class="w-1/2 bg-white/10 p-8 rounded-xl border border-white/20 flex flex-col justify-center items-center text-center backdrop-blur"> <div class="mb-4 text-6xl text-orange-500"><i class="fas fa-hand-holding-usd"></i></div> <h3 class="text-2xl font-bold mb-2">案例证明</h3> <p class="text-4xl font-black text-white mb-4">RM 43,000+</p> <p class="text-slate-300">新马企业平均每月<br>自动挽回的流失业绩</p> <div class="mt-6 text-sm text-slate-500 bg-black/30 px-4 py-2 rounded"> 来源:下班后回复、遗漏跟进、决策犹豫期自动提醒 </div> </div> </div> </div> </div> <!-- SLIDE 9: Checklist --> <div class="slide"> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2070&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="content-layer justify-center"> <h2 class="text-3xl font-bold mb-8 text-center border-b border-slate-500 pb-4"> 2025 网站自测表 (Self-Check) </h2> <div class="grid grid-cols-2 gap-x-12 gap-y-4 text-lg bg-slate-900/70 p-8 rounded-xl backdrop-blur"> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">能自动过滤低质量客户?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">是否使用心理学编码?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">能自动跟进客户?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">是否支持 CRM 管道管理?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">能自动挽回流失业绩?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">是否减少了销售人工时间?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">首屏 3 秒内是否抓人眼球?</span> </div> <!-- Check Item --> <div class="flex items-center gap-3"> <div class="w-6 h-6 border-2 border-slate-500 rounded flex items-center justify-center text-transparent"><i class="fas fa-check"></i></div> <span class="text-slate-300">是否为马来西亚买家习惯优化?</span> </div> </div> <div class="mt-10 bg-slate-800/90 p-6 rounded text-center backdrop-blur"> <p class="text-sm text-slate-400 mb-2">评分标准:</p> <div class="flex justify-center gap-8"> <span class="text-red-400">0-4项: 严重落后</span> <span class="text-yellow-400">5-7项: 需要升级</span> <span class="text-green-400">8项全对: 完美资产</span> </div> </div> </div> </div> <!-- SLIDE 10: CTA --> <div class="slide"> <!-- Realistic BG: Professional Handshake / Meeting --> <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2084&auto=format&fit=crop');"></div> <div class="slide-overlay"></div> <div class="orb orb-blue" style="width:500px; height:500px; opacity:0.2;"></div> <div class="content-layer justify-center items-center text-center h-full"> <h2 class="text-5xl font-bold mb-6">下一步:专属增长策略会</h2> <p class="text-2xl text-slate-300 mb-10 max-w-2xl"> 让 Smart Website™ 帮你在 2025 年<br>打造一套自动化的业绩增长系统。 </p> <div class="bg-white/10 border border-white/20 p-8 rounded-xl max-w-3xl w-full mb-10 backdrop-blur-md"> <h3 class="text-xl font-bold mb-4 text-left text-orange-400">Strategy Session 包含:</h3> <div class="grid grid-cols-2 gap-4 text-left"> <div class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> 网站诊断 (找出业绩流失点)</div> <div class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> RM 43,000 挽回机会评估</div> <div class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> 自动化路线图设计</div> <div class="flex items-center gap-2"><i class="fas fa-check text-green-400"></i> 行业专属案例拆解</div> </div> </div> <a href="https://urls.gainmarket.com.my/cta251202" class="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold py-4 px-10 rounded-full text-xl shadow-lg transform hover:scale-105 transition duration-300"> 立即预约 Strategy Session <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </div> </body> </html>
2. Slides CSS Class Selector
3. Slide Aspect Ratio
16:9
4:3
Output size: 1600x900 points.
Generate and Download PDF