AItoWP Bridge 鈥?AI 鐢熸垚 HTML 鏃犳崯閮ㄧ讲鍒?WordPress锛屽彲瑙嗗寲缂栬緫涓嶇牬鐗?/title> <meta name="description" content="AItoWP Bridge 灏?AI 鐢熸垚鐨勫畬鏁?HTML 鏃犳崯閮ㄧ讲鍒?WordPress锛屽苟鎻愪緵鍓嶅彴鍙鍖栫紪杈戝櫒锛屽畨鍏ㄤ慨鏀瑰唴瀹硅€屼笉鐮村潖甯冨眬銆?> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> /* Language switcher */ .lang-switch{position:relative} .lang-current{display:flex;align-items:center;gap:.35rem;background:var(--card);border:1px solid var(--card-border);color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.82rem;padding:.4rem .7rem;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap} .lang-current:hover{border-color:var(--accent)} .lang-current svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .lang-current .arrow{transition:transform .2s} .lang-switch.open .lang-current .arrow{transform:rotate(180deg)} .lang-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;background:rgba(26,26,46,.98);backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:10px;padding:4px;min-width:130px;z-index:100;box-shadow:0 8px 28px rgba(0,0,0,.45)} .lang-switch.open .lang-dropdown{display:flex;flex-direction:column;gap:2px} .lang-dropdown button{background:none;border:none;color:var(--muted);font-size:.82rem;padding:.5rem .75rem;border-radius:6px;cursor:pointer;font-family:var(--font-head);font-weight:500;text-align:left;transition:all .15s;white-space:nowrap} .lang-dropdown button:hover{background:var(--card);color:var(--ink)} .lang-dropdown button.active{background:var(--accent);color:#fff} </style> <style> /* ============ Design Tokens ============ */ :root{ --bg:#0F0F1A; --bg2:#1A1A2E; --ink:#E8E8F0; --muted:#9CA3AF; --rule:#2D2D44; --accent:#6366F1; --accent2:#8B5CF6; --grad:linear-gradient(135deg,#6366F1,#8B5CF6); --grad-soft:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.18)); --card:rgba(255,255,255,.05); --card-strong:rgba(255,255,255,.07); --card-border:rgba(255,255,255,.10); --card-blur:blur(14px); --font-head:'Outfit',sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; --radius:16px; --radius-sm:10px; --shadow:0 18px 50px -20px rgba(0,0,0,.6); --max:1180px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); background-image: radial-gradient(ellipse 80% 60% at 15% 0%,rgba(99,102,241,.10),transparent 60%), radial-gradient(ellipse 70% 50% at 85% 25%,rgba(139,92,246,.09),transparent 55%), radial-gradient(ellipse 60% 50% at 50% 100%,rgba(99,102,241,.07),transparent 60%); background-attachment:fixed; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.25;letter-spacing:-.01em} /* ============ Layout ============ */ .wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem} section{padding:5.5rem 0} .section-head{text-align:center;max-width:680px;margin:0 auto 3rem} .eyebrow{ display:inline-block;font-family:var(--font-head);font-size:.78rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent2); padding:.4rem .9rem;border:1px solid var(--card-border);border-radius:999px; background:var(--card);backdrop-filter:var(--card-blur);margin-bottom:1.1rem; } h2.section-title{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:.8rem} .section-sub{color:var(--muted);font-size:1.05rem} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ============ Buttons ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-head);font-weight:600;font-size:.98rem; padding:.85rem 1.6rem;border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; white-space:nowrap; } .btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px rgba(99,102,241,.55)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(99,102,241,.7)} .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--card-border);backdrop-filter:var(--card-blur)} .btn-ghost:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--card-strong)} .btn-lg{padding:1.05rem 2rem;font-size:1.05rem} /* ============ Navbar ============ */ .nav{ position:sticky;top:0;z-index:50; background:rgba(15,15,26,.72);backdrop-filter:blur(16px); border-bottom:1px solid var(--card-border); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:800;font-size:1.2rem} .brand-logo{ width:34px;height:34px;border-radius:9px;background:var(--grad); display:grid;place-items:center;font-size:1rem;color:#fff;font-weight:800; box-shadow:0 6px 18px -4px rgba(99,102,241,.6); } .brand span{color:var(--muted);font-weight:500} .nav-links{display:flex;align-items:center;gap:2rem} .nav-links a{color:var(--muted);font-size:.95rem;font-weight:500;transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:.75rem} .nav-toggle{display:none;background:none;border:1px solid var(--card-border);border-radius:8px;color:var(--ink); width:40px;height:40px;cursor:pointer;font-size:1.2rem;align-items:center;justify-content:center} /* ============ Hero ============ */ .hero{padding:6.5rem 0 4rem;text-align:center;position:relative} .hero-badge{ display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;color:var(--muted); padding:.45rem 1rem;border:1px solid var(--card-border);border-radius:999px; background:var(--card);backdrop-filter:var(--card-blur);margin-bottom:1.6rem; } .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)} .hero h1{ font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:800;letter-spacing:-.02em; max-width:940px;margin:0 auto 1.3rem; } .hero h1 .grad-text{display:block} .hero-lead{ font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--muted);max-width:680px;margin:0 auto 2.2rem; } .hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem} .hero-stats{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap} .hero-stat .num{font-family:var(--font-head);font-size:1.7rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero-stat .label{font-size:.82rem;color:var(--muted)} /* ============ Feature Grid ============ */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .card{ background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius); padding:2rem;backdrop-filter:var(--card-blur);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; position:relative;overflow:hidden; } .card::before{ content:'';position:absolute;inset:0;border-radius:var(--radius); background:var(--grad-soft);opacity:0;transition:opacity .3s ease;pointer-events:none; } .card:hover{transform:translateY(-6px);border-color:rgba(99,102,241,.4);box-shadow:var(--shadow)} .card:hover::before{opacity:1} .card-icon{ width:52px;height:52px;border-radius:13px;background:var(--grad-soft); border:1px solid var(--card-border);display:grid;place-items:center;margin-bottom:1.3rem; position:relative;z-index:1; } .card-icon svg{width:26px;height:26px;stroke:var(--accent2);fill:none;stroke-width:1.8} .card h3{font-size:1.2rem;margin-bottom:.6rem;position:relative;z-index:1} .card p{color:var(--muted);font-size:.96rem;position:relative;z-index:1} /* ============ How it works ============ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative} .step{ text-align:center;padding:2.2rem 1.6rem;background:var(--card);border:1px solid var(--card-border); border-radius:var(--radius);backdrop-filter:var(--card-blur);position:relative; } .step-num{ width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff; font-family:var(--font-head);font-weight:800;font-size:1.15rem;display:grid;place-items:center; margin:0 auto 1.2rem;box-shadow:0 8px 22px -6px rgba(99,102,241,.6); } .step h3{font-size:1.15rem;margin-bottom:.55rem} .step p{color:var(--muted);font-size:.95rem} .step-arrow{position:absolute;top:50%;right:-.9rem;transform:translateY(-50%);color:var(--accent);font-size:1.4rem;z-index:2} /* ============ Pricing (mini) ============ */ .pricing-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:980px;margin:0 auto} .price-card{ background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius); padding:2rem;backdrop-filter:var(--card-blur);text-align:center;position:relative;transition:transform .3s ease; } .price-card:hover{transform:translateY(-5px)} .price-card.featured{ border-color:rgba(99,102,241,.55); box-shadow:0 0 0 1px rgba(99,102,241,.35),0 20px 50px -20px rgba(99,102,241,.55); background:linear-gradient(180deg,rgba(99,102,241,.10),var(--card)); } .price-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:600;font-size:.78rem; padding:.3rem .9rem;border-radius:999px;letter-spacing:.04em} .plan-name{font-family:var(--font-head);font-weight:600;color:var(--muted);font-size:.95rem;margin-bottom:.4rem} .plan-price{font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1} .plan-price .per{font-size:1rem;font-weight:500;color:var(--muted)} .plan-desc{color:var(--muted);font-size:.9rem;margin:1rem 0 1.4rem;min-height:2.6em} .plan-feats{list-style:none;text-align:left;margin-bottom:1.6rem;display:flex;flex-direction:column;gap:.55rem} .plan-feats li{display:flex;gap:.6rem;font-size:.88rem;color:var(--ink);align-items:flex-start} .plan-feats li svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--accent2);fill:none;stroke-width:2.4;margin-top:.15rem} /* Coming-soon mini card (below the 3 main cards, centered) */ .price-coming{ background:var(--card);border:1px dashed var(--card-border);border-radius:var(--radius); padding:1.4rem 2rem;backdrop-filter:var(--card-blur);position:relative;display:flex;flex-direction:column; align-items:center;text-align:center;max-width:380px;margin:1.5rem auto 0;opacity:.85; } .price-coming:hover{border-color:var(--accent);opacity:1} .price-coming .coming-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bg2);color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.76rem;padding:.32rem .9rem;border-radius:999px;letter-spacing:.04em;white-space:nowrap;border:1px solid var(--card-border)} .price-coming .coming-name{font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin-bottom:.3rem} .price-coming .coming-desc{color:var(--muted);font-size:.85rem;margin-bottom:.9rem} .price-coming .coming-notify{ background:var(--card);border:1px solid var(--card-border);color:var(--muted); font-family:var(--font-head);font-weight:600;font-size:.82rem;padding:.55rem 1.2rem;border-radius:999px; cursor:not-allowed;transition:all .2s; } .price-coming .coming-notify:hover{color:var(--ink);border-color:var(--accent)} /* ============ CTA ============ */ .cta-band{ background:var(--grad-soft);border:1px solid var(--card-border);border-radius:24px; padding:3.5rem 2rem;text-align:center;backdrop-filter:var(--card-blur);position:relative;overflow:hidden; } .cta-band::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%);top:-100px;right:-60px} .cta-band h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.8rem;position:relative} .cta-band p{color:var(--muted);max-width:540px;margin:0 auto 1.8rem;position:relative} /* ============ Footer ============ */ .footer{border-top:1px solid var(--card-border);padding:3rem 0 2rem;margin-top:2rem} .footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap} .footer-brand{max-width:320px} .footer-brand p{color:var(--muted);font-size:.9rem;margin-top:.7rem} .footer-cols{display:flex;gap:3rem;flex-wrap:wrap} .footer-col h4{font-family:var(--font-head);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.9rem} .footer-col a{display:block;color:var(--ink);font-size:.92rem;margin-bottom:.5rem;transition:color .2s} .footer-col a:hover{color:var(--accent2)} .footer-bottom{border-top:1px solid var(--card-border);margin-top:2rem;padding-top:1.5rem;text-align:center;color:var(--muted);font-size:.85rem} /* ============ Reveal animation ============ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* ============ Responsive ============ */ @media(max-width:900px){ .features-grid,.steps{grid-template-columns:repeat(2,1fr)} .pricing-mini-grid{grid-template-columns:repeat(2,1fr);max-width:680px} .step-arrow{display:none} } @media(max-width:760px){ .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0; background:rgba(15,15,26,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border);padding:.5rem 1.25rem 1.2rem} .nav-links.open{display:flex} .nav-links a{padding:.8rem 0;border-bottom:1px solid var(--rule);width:100%} .nav-toggle{display:inline-flex} .nav-cta .btn-ghost{display:none} section{padding:4rem 0} .features-grid,.steps,.pricing-mini-grid{grid-template-columns:1fr} .hero-stats{gap:1.6rem} } @media(max-width:420px){ .hero-actions{flex-direction:column} .hero-actions .btn{width:100%} } </style> </head> <body>  <header class="nav"> <div class="wrap nav-inner"> <a href="index.html" class="brand"> <span class="brand-logo"><svg viewBox="0 0 32 32" style="width:62%;height:62%" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="5" x2="30" y2="5"/><line x1="16" y1="5" x2="16" y2="29"/><path d="M8 5 L3 24 M8 5 L13 24"/><line x1="5.5" y1="17" x2="10.5" y2="17"/><path d="M19 5 L21.5 23 L24 15 L26.5 23 L29 5"/></svg></span>AItoWP<span> Bridge</span> </a> <nav class="nav-links" id="navLinks"> <a href="index.html" class="active" data-i18n="nav_home">棣栭〉</a> <a href="features.html" data-i18n="nav_features">鍔熻兘</a> <a href="pricing.html" data-i18n="nav_pricing">浠锋牸</a> <a href="download.html" data-i18n="nav_download">涓嬭浇</a> <a href="account.html" data-i18n="nav_account">璐︽埛</a> </nav> <div class="nav-cta"> <div class="lang-switch" id="langSwitch"> <button class="lang-current" onclick="AITOWP_I18N.toggleLangMenu()"> <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> <span class="lang-label">涓枃</span> <svg class="arrow" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg> </button> <div class="lang-dropdown"> <button data-lang-btn="zh" onclick="AITOWP_I18N.setLang('zh')">涓枃</button> <button data-lang-btn="en" onclick="AITOWP_I18N.setLang('en')">English</button> <button data-lang-btn="ja" onclick="AITOWP_I18N.setLang('ja')">鏃ユ湰瑾?/button> <button data-lang-btn="ko" onclick="AITOWP_I18N.setLang('ko')">頃滉淡鞏?/button> <button data-lang-btn="es" onclick="AITOWP_I18N.setLang('es')">Espa帽ol</button> </div> </div> <a href="download.html" class="btn btn-ghost" data-i18n="nav_download">鍏嶈垂涓嬭浇</a> <a href="pricing.html" class="btn btn-primary">Pro</a> <button class="nav-toggle" id="navToggle" aria-label="鑿滃崟">☰</button> </div> </div> </header>  <section class="hero"> <div class="wrap"> <span class="hero-badge reveal"><span class="dot"></span><span data-i18n="hero_badge">宸蹭负 AI 鐢熸垚椤甸潰鑰岀敓路 WordPress 鏃犳崯閮ㄧ讲寮曟搸</span></span> <h1 class="reveal"> <span data-i18n="hero_title_1">灏?AI 鐢熸垚鐨?HTML 閮ㄧ讲鍒?WordPress</span> <span class="grad-text" data-i18n="hero_title_2">瀹夊叏缂栬緫锛屼笉鐮村潖甯冨眬</span> </h1> <p class="hero-lead reveal" data-i18n="hero_lead"> AItoWP Bridge 鎶?AI 宸ュ叿鐢熸垚鐨勫畬鏁?HTML 鏃犳崯鍐欏叆 WordPress锛屽苟鎻愪緵鍓嶅彴鍙鍖栫紪杈戝櫒锛岃浣犲儚缂栬緫鏂囨。涓€鏍蜂慨鏀瑰唴瀹光€斺€擟SS 闅旂銆丼VG 娑堟瘨銆侀浂涓婚渚濊禆銆? </p> <div class="hero-actions reveal"> <a href="download.html" class="btn btn-primary btn-lg" data-i18n="hero_cta_primary">鍏嶈垂寮€濮嬩娇鐢?/a> <a href="#features" class="btn btn-ghost btn-lg" data-i18n="hero_cta_explore">浜嗚В鍔熻兘</a> </div> <div class="hero-stats reveal"> <div class="hero-stat"><div class="num">100%</div><div class="label" data-i18n="hero_stat_render">HTML 鏃犳崯娓叉煋</div></div> <div class="hero-stat"><div class="num">0</div><div class="label" data-i18n="hero_stat_dependency">涓婚/鏋勫缓鍣ㄤ緷璧?/div></div> <div class="hero-stat"><div class="num"><80KB</div><div class="label" data-i18n="hero_stat_size">缂栬緫鍣ㄤ綋绉?/div></div> <div class="hero-stat"><div class="num" data-i18n="hero_stat_svg_num">3 姝?/div><div class="label" data-i18n="hero_stat_svg">SVG 娑堟瘨娴佺▼</div></div> </div> </div> </section>  <section id="features"> <div class="wrap"> <div class="section-head reveal"> <span class="eyebrow" data-i18n="features_eyebrow">鏍稿績鍔熻兘</span> <h2 class="section-title" data-i18n-html="features_title">涓?AI 鐢熸垚椤甸潰鎵撻€犵殑<span class="grad-text">鏃犳崯閮ㄧ讲涓庣紪杈?/span></h2> <p class="section-sub" data-i18n="features_sub">浠?AI 瀹㈡埛绔埌 WordPress锛屽啀鍒板彲瑙嗗寲寰皟鈥斺€斿叏閾捐矾淇濇寔璁捐瀹屾暣銆?/p> </div> <div class="features-grid"> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v16"/></svg></div> <h3 data-i18n="feat_deploy_title">HTML 鏃犳崯閮ㄧ讲</h3> <p data-i18n="feat_deploy_desc">AI 鐢熸垚鐨勫畬鏁?HTML 鐩存帴鍐欏叆 postmeta锛岃嚜瀹氫箟鍏ㄥ妯℃澘鍘熸牱杈撳嚭锛孋SS 鍏ㄥ眬闅旂锛岀Щ闄や富棰樹笌鏋勫缓鍣ㄦ牱寮忚〃骞叉壈銆?/p> </div> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg></div> <h3 data-i18n="feat_edit_title">鍙鍖栫紪杈戝櫒</h3> <p data-i18n="feat_edit_desc">鍓嶅彴鎵€瑙佸嵆鎵€寰楋紝鐩存帴鍦ㄧ湡瀹?DOM 涓婄紪杈戞枃瀛椼€佸浘鐗囥€侀摼鎺ャ€倂anilla JS 浠?40-50KB锛屼繚瀛樻椂鏅鸿兘娓呯悊 WP 娉ㄥ叆鍐呭銆?/p> </div> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg></div> <h3 data-i18n="feat_svg_title">SVG 瀹夊叏澶勭悊</h3> <p data-i18n="feat_svg_desc">涓夋娑堟瘨娴佺▼鍓ョ鍐呰仈鑴氭湰涓庡嵄闄╁睘鎬э紝闃叉 XSS锛屼繚鐣欑煝閲忓浘褰㈡竻鏅板害涓庢牱寮忚〃鐜般€?/p> </div> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div> <h3 data-i18n="feat_multi_title">澶氶〉闈㈤儴缃?/h3> <p data-i18n="feat_multi_desc">涓€娆￠儴缃插涓〉闈紝鑷姩璺ㄩ〉闈㈠浘鐗囧幓閲嶃€佸唴閮ㄩ摼鎺ラ噸鍐欙紝椤电湁椤佃剼鍏ㄥ眬鍏冪礌鍚屾鏇存柊銆?/p> </div> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/><circle cx="18" cy="17" r="2.5"/></svg></div> <h3 data-i18n="feat_form_title">琛ㄥ崟闆嗘垚</h3> <p data-i18n="feat_form_desc">灏嗛潤鎬?HTML 琛ㄥ崟鎺ュ叆 WordPress 鍘熺敓澶勭悊涓庨偖浠堕€氱煡锛屾棤闇€绗笁鏂规湇鍔★紝鎻愪氦鏁版嵁瀹夊叏鍙帶銆?/p> </div> <div class="card reveal"> <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 109-9"/><path d="M3 12l3-3M3 12l3 3"/><circle cx="12" cy="12" r="3"/></svg></div> <h3 data-i18n="feat_version_title">鐗堟湰鍘嗗彶</h3> <p data-i18n="feat_version_desc">姣忔淇濆瓨鑷姩鐣欏瓨鍘嗗彶鐗堟湰锛堟渶澶?10 鐗堬級锛岄殢鏃堕瑙堝姣斻€佷竴閿洖婊氬埌浠绘剰鍘嗗彶鐘舵€併€?/p> </div> </div> </div> </section>  <section style="padding-top:0"> <div class="wrap"> <div class="section-head reveal"> <span class="eyebrow" data-i18n="how_eyebrow">宸ヤ綔娴佺▼</span> <h2 class="section-title" data-i18n-html="how_title">涓夋瀹屾垚<span class="grad-text">浠?AI 鍒颁笂绾?/span></h2> <p class="section-sub" data-i18n="how_sub">鏃犻渶澶嶅埗绮樿创锛屾棤闇€鎵嬪姩杩佺Щ锛孉I 璐熻矗鐢熸垚锛屾彃浠惰礋璐ｈ惤鍦帮紝缂栬緫鍣ㄨ礋璐ｅ井璋冦€?/p> </div> <div class="steps"> <div class="step reveal"> <div class="step-num">1</div> <h3 data-i18n="how_step1_title">杩炴帴 AI 宸ュ叿</h3> <p data-i18n="how_step1_desc">鍦?AI 瀹㈡埛绔紙ChatGPT銆丆laude銆丆ursor 绛夛級鐢熸垚瀹屾暣椤甸潰 HTML锛岄€氳繃 MCP 鎴?REST API 鐩磋繛浣犵殑 WordPress 绔欑偣銆?/p> <span class="step-arrow">➞</span> </div> <div class="step reveal"> <div class="step-num">2</div> <h3 data-i18n="how_step2_title">閮ㄧ讲 HTML</h3> <p data-i18n="how_step2_desc">鎻掍欢鏃犳崯鎺ユ敹 HTML锛屽畬鎴?SVG 娑堟瘨銆佸浘鐗囧幓閲嶃€侀摼鎺ラ噸鍐欙紝鍐欏叆鍏ㄥ妯℃澘娓叉煋锛孋SS 瀹屽叏闅旂涓嶅彈涓婚骞叉壈銆?/p> <span class="step-arrow">➞</span> </div> <div class="step reveal"> <div class="step-num">3</div> <h3 data-i18n="how_step3_title">鍙鍖栫紪杈?/h3> <p data-i18n="how_step3_desc">鐧诲綍鍚庡湪鍓嶅彴鐐瑰嚮銆屽彲瑙嗗寲缂栬緫銆嶏紝鎵€瑙佸嵆鎵€寰椾慨鏀规枃瀛椼€佸浘鐗囥€佹牱寮忥紝淇濆瓨鍗崇敓鏁堬紝甯冨眬闆剁牬鍧忋€?/p> </div> </div> </div> </section>  <section id="pricing" style="padding-top:0"> <div class="wrap"> <div class="section-head reveal"> <span class="eyebrow" data-i18n="pricing_eyebrow">浠锋牸鏂规</span> <h2 class="section-title" data-i18n-html="pricing_title">浠庡厤璐瑰紑濮嬶紝<span class="grad-text">鎸夐渶鍗囩骇</span></h2> <p class="section-sub" data-i18n="pricing_sub">涓汉椤圭洰姘镐箙鍏嶈垂锛屼笓涓氬姛鑳芥寜骞磋闃咃紝鏃犻殣钘忚垂鐢ㄣ€?/p> </div> <div class="pricing-mini-grid"> <div class="price-card reveal"> <div class="plan-name" data-i18n="plan_free">Free</div> <div class="plan-price">$0<span class="per" data-i18n="plan_per_forever">/姘镐箙</span></div> <p class="plan-desc" data-i18n="plan_free_blurb">閫傚悎涓汉椤圭洰涓庡姛鑳戒綋楠岋紝姘镐箙鍏嶈垂浣跨敤銆?/p> <ul class="plan-feats"> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_1site">1 涓珯鐐?/span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_3pages">3 涓〉闈?/span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_basic_edit">鍩虹鏂囧瓧/鍥剧墖/閾炬帴缂栬緫</span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_deploy">HTML 鏃犳崯閮ㄧ讲</span></li> </ul> <a href="download.html" class="btn btn-ghost" style="width:100%" data-i18n="btn_free_download">鍏嶈垂涓嬭浇</a> </div> <div class="price-card featured reveal"> <span class="price-tag" data-i18n="plan_popular_tag">鏈€鍙楁杩?/span> <div class="plan-name" data-i18n="plan_pro">Pro</div> <div class="plan-price">$49<span class="per" data-i18n="plan_per_year">/骞?/span></div> <p class="plan-desc" data-i18n="plan_pro_blurb">瑙ｉ攣鍏ㄩ儴涓撲笟缂栬緫鑳藉姏锛屾棤闄愬埗椤甸潰閮ㄧ讲銆?/p> <ul class="plan-feats"> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_pro_unlimited">1 涓珯鐐?路鏃犻檺椤甸潰</span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_pro_styles">CSS 瑙勫垯 / 鎮仠鐘舵€?/ 鍝嶅簲寮忚鍙?/span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_pro_tools">鐗堟湰鍘嗗彶 / 浠ｇ爜瑙嗗浘 / 鑷畾涔?CSS</span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="plan_feat_pro_design">鑳屾櫙 / 杈规 / 闃村奖 / 杩囨浮 / 瀹瑰櫒甯冨眬</span></li> </ul> <a href="pricing.html" class="btn btn-primary" style="width:100%" data-i18n="btn_upgrade">鍗囩骇 Pro</a> </div> <div class="price-card reveal"> <div class="plan-name" data-i18n="plan_business">Business</div> <div class="plan-price">$149<span class="per" data-i18n="plan_per_year">/骞?/span></div> <p class="plan-desc" data-i18n="plan_business_blurb">澶氱珯鐐瑰洟闃熷崗浣滐紝閫傚悎灏忓瀷宸ヤ綔瀹ゃ€?/p> <ul class="plan-feats"> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="pricing_feat_5sites">5 涓珯鐐?/span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="pricing_feat_all_pro">Pro 鍏ㄩ儴鍔熻兘</span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="pricing_feat_unlimited_pages">鏃犻檺椤甸潰</span></li> <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span data-i18n="pricing_feat_cross_page_sync">璺ㄩ〉闈㈡牱寮忓悓姝?/span></li> </ul> <a href="pricing.html" class="btn btn-secondary" style="width:100%" data-i18n="btn_upgrade_business">鍗囩骇 Business</a> </div> </div> <div class="price-coming reveal"> <span class="coming-tag" data-i18n="plan_coming_soon_tag">鍗冲皢鎺ㄥ嚭</span> <div class="coming-name" data-i18n="plan_agency">Agency</div> <div class="coming-desc" data-i18n="plan_agency_blurb">鏃犻檺绔欑偣锛岄潰鍚戜唬鐞嗗晢涓庡伐浣滃銆傜櫧鏍囬€夐」涓庝笓灞炲鎴风粡鐞嗐€?/div> <button class="coming-notify" disabled data-i18n="pricing_btn_notify">涓婄嚎鏃堕€氱煡鎴?/button> </div> </div> </section>  <section style="padding-top:0"> <div class="wrap"> <div class="cta-band reveal"> <h2 data-i18n-html="cta_title">鍑嗗濂借 AI 鐢熸垚鐨勯〉闈?span class="grad-text">鏃犳崯钀藉湴 WordPress</span> 浜嗗悧锛?/h2> <p data-i18n="cta_desc">鍑犲垎閽熷唴瀹屾垚閮ㄧ讲锛屾棤闇€浠ｇ爜杩佺Щ锛屾棤闇€涓婚閫傞厤銆備粠鍏嶈垂鐗堝紑濮嬶紝闅忔椂鍗囩骇瑙ｉ攣涓撲笟缂栬緫鑳藉姏銆?/p> <div class="hero-actions"> <a href="download.html" class="btn btn-primary btn-lg" data-i18n="cta_btn_primary">鍏嶈垂涓嬭浇鎻掍欢</a> <a href="pricing.html" class="btn btn-ghost btn-lg" data-i18n="cta_btn_secondary">鏌ョ湅瀹屾暣浠锋牸</a> </div> </div> </div> </section>  <footer class="footer"> <div class="wrap footer-inner"> <div class="footer-brand"> <a href="index.html" class="brand"><span class="brand-logo"><svg viewBox="0 0 32 32" style="width:62%;height:62%" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="5" x2="30" y2="5"/><line x1="16" y1="5" x2="16" y2="29"/><path d="M8 5 L3 24 M8 5 L13 24"/><line x1="5.5" y1="17" x2="10.5" y2="17"/><path d="M19 5 L21.5 23 L24 15 L26.5 23 L29 5"/></svg></span>AItoWP<span> Bridge</span></a> <p data-i18n="footer_tagline">灏?AI 鐢熸垚鐨?HTML 鏃犳崯閮ㄧ讲鍒?WordPress锛屽彲瑙嗗寲缂栬緫涓嶇牬鐗堛€備负 AI 鏃朵唬鐨勫缓绔欏伐浣滄祦鑰岀敓銆?/p> </div> <div class="footer-cols"> <div class="footer-col"> <h4 data-i18n="footer_product">浜у搧</h4> <a href="features.html" data-i18n="footer_features">鍔熻兘鐗规€?/a> <a href="pricing.html" data-i18n="footer_pricing">浠锋牸鏂规</a> <a href="download.html" data-i18n="footer_download">涓嬭浇鎻掍欢</a> </div> <div class="footer-col"> <h4 data-i18n="footer_solutions">鏂规</h4> <a href="pricing.html" data-i18n="footer_plan_free">Free 鍏嶈垂鐗?/a> <a href="pricing.html#pro" data-i18n="footer_plan_pro">Pro 涓撲笟鐗?/a> <a href="pricing.html" data-i18n="footer_plan_business">Business 鍟嗕笟鐗?/a> <a href="pricing.html" style="color:var(--muted)" data-i18n="footer_plan_agency">Agency锛堝嵆灏嗘帹鍑猴級</a> </div> <div class="footer-col"> <h4 data-i18n="footer_get_started">寮€濮?/h4> <a href="download.html" data-i18n="btn_free_download">鍏嶈垂涓嬭浇</a> <a href="download.html#activate" data-i18n="footer_activate">婵€娲昏鍙瘉</a> <a href="index.html#features" data-i18n="footer_workflow">浜嗚В宸ヤ綔娴?/a> </div> </div> </div> <div class="wrap footer-bottom" data-i18n="footer_copyright">漏 2026 AItoWP Bridge. 淇濈暀鎵€鏈夋潈鍒┿€?/div> </footer> <script> // Mobile nav toggle var t=document.getElementById('navToggle'),l=document.getElementById('navLinks'); t.addEventListener('click',function(){l.classList.toggle('open')}); l.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){l.classList.remove('open')})}); // Reveal on scroll var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12}); document.querySelectorAll('.reveal').forEach(function(el){io.observe(el)}); </script> <script src="i18n.js?v=atw6"></script> </body> </html>