yuzhiran
f9547ba21f
- 新增 docs/BUSINESS_MODEL.md 商业与营销方案 - landing.html 定价重构为三模式：免费试用 / 私有化部署 / 源码售卖 - 新增「开始合作」联系区（线索表单 + 企业微信二维码 wecom-qr.jpg） - 商务邮箱更新为 contact@yuzhiran.com - deploy/README 交付建议同步三模式 - PROGRESS 记至第十八章
627 lines
39 KiB
HTML
627 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>宇之然 — 让内容被 AI 搜索推荐</title>
|
||
<meta name="description" content="宇之然是一站式 AI 内容获客平台：知乎/公众号/小红书三平台差异化内容生产 + AI 搜索（GEO）推荐 + 独立站 SEO，让零品牌基础的团队也能稳定获取流量。">
|
||
<meta name="keywords" content="AI内容创作,GEO优化,AI搜索推荐,知乎运营,公众号运营,小红书运营,内容获客">
|
||
<meta property="og:title" content="宇之然 — 让内容被 AI 搜索推荐">
|
||
<meta property="og:description" content="三平台差异化内容 + AI 搜索推荐 + 独立站 SEO 的一站式获客系统">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="/automation/images/og-landing.png">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<style>
|
||
/* ===== Reset & Base ===== */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #1a1a2e; background: #fff; line-height: 1.6; overflow-x: hidden; }
|
||
a { text-decoration: none; color: inherit; }
|
||
img { max-width: 100%; height: auto; display: block; }
|
||
ul { list-style: none; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* ===== Nav ===== */
|
||
.landing-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: all 0.3s; }
|
||
.landing-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
|
||
.landing-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
.landing-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: #1a1a2e; letter-spacing: -0.5px; }
|
||
.landing-logo span { background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||
.landing-nav-links { display: flex; align-items: center; gap: 32px; }
|
||
.landing-nav-links a { font-size: 14px; font-weight: 500; color: #4b5563; transition: color 0.2s; position: relative; }
|
||
.landing-nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(135deg, #2563eb, #7c3aed); transition: width 0.3s; border-radius: 1px; }
|
||
.landing-nav-links a:hover { color: #2563eb; }
|
||
.landing-nav-links a:hover::after { width: 100%; }
|
||
.landing-nav-actions { display: flex; align-items: center; gap: 12px; }
|
||
.landing-nav-actions a { font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: 8px; transition: all 0.2s; }
|
||
.landing-btn-login { color: #2563eb; border: 1px solid #dbeafe; }
|
||
.landing-btn-login:hover { background: #eff6ff; border-color: #2563eb; }
|
||
.landing-btn-primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff !important; box-shadow: 0 4px 14px rgba(37,99,235,0.25); }
|
||
.landing-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.35); }
|
||
.landing-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
|
||
.landing-hamburger span { display: block; width: 24px; height: 2px; background: #1a1a2e; border-radius: 2px; transition: all 0.3s; }
|
||
.landing-mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 999; padding: 24px; overflow-y: auto; }
|
||
.landing-mobile-menu.open { display: flex; flex-direction: column; gap: 16px; }
|
||
.landing-mobile-menu a { font-size: 18px; font-weight: 500; color: #1a1a2e; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
|
||
.landing-mobile-menu .landing-btn-primary { text-align: center; padding: 14px; margin-top: 16px; font-size: 16px; }
|
||
|
||
/* ===== Hero ===== */
|
||
.hero { padding: 140px 24px 80px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 50%, #f5f0ff 100%); }
|
||
.hero-bg-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); opacity: 0.15; pointer-events: none; }
|
||
.hero-bg-glow.g1 { top: -200px; left: -200px; background: #2563eb; }
|
||
.hero-bg-glow.g2 { bottom: -200px; right: -200px; background: #7c3aed; }
|
||
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; }
|
||
.hero h1 span { background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||
.hero p { font-size: clamp(1rem, 2vw, 1.2rem); color: #6b7280; max-width: 700px; margin: 0 auto 36px; line-height: 1.8; }
|
||
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
|
||
.hero-actions a { font-size: 16px; font-weight: 600; padding: 14px 32px; border-radius: 10px; transition: all 0.25s; display: inline-flex; align-items: center; gap: 8px; }
|
||
.hero-actions .landing-btn-primary { font-size: 16px; padding: 14px 36px; }
|
||
.hero-actions .landing-btn-secondary { color: #2563eb; border: 2px solid #dbeafe; background: #fff; }
|
||
.hero-actions .landing-btn-secondary:hover { border-color: #2563eb; background: #eff6ff; }
|
||
.hero-stats { display: flex; justify-content: center; gap: 40px; margin-top: 48px; flex-wrap: wrap; }
|
||
.hero-stat { text-align: center; }
|
||
.hero-stat-num { font-size: 2rem; font-weight: 800; color: #1a1a2e; }
|
||
.hero-stat-label { font-size: 0.85rem; color: #9ca3af; margin-top: 4px; }
|
||
|
||
/* ===== Sections ===== */
|
||
section { padding: 80px 0; }
|
||
.section-label { display: inline-block; font-size: 0.8rem; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 1px; background: #eff6ff; padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; }
|
||
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #1a1a2e; text-align: center; margin-bottom: 16px; }
|
||
.section-subtitle { font-size: 1rem; color: #6b7280; text-align: center; max-width: 600px; margin: 0 auto 48px; }
|
||
|
||
/* ===== Features ===== */
|
||
.features { background: #fff; }
|
||
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
||
.feature-card { padding: 32px 24px; border-radius: 16px; border: 1px solid #f3f4f6; background: #fff; transition: all 0.3s; position: relative; overflow: hidden; }
|
||
.feature-card:hover { transform: translateY(-4px); border-color: #e0e7ff; box-shadow: 0 12px 40px rgba(37,99,235,0.08); }
|
||
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #7c3aed); opacity: 0; transition: opacity 0.3s; }
|
||
.feature-card:hover::before { opacity: 1; }
|
||
.feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
|
||
.feature-icon.blue { background: #eff6ff; color: #2563eb; }
|
||
.feature-icon.purple { background: #f5f3ff; color: #7c3aed; }
|
||
.feature-icon.green { background: #ecfdf5; color: #059669; }
|
||
.feature-icon.orange { background: #fff7ed; color: #ea580c; }
|
||
.feature-icon.pink { background: #fdf2f8; color: #db2777; }
|
||
.feature-icon.teal { background: #f0fdfa; color: #0d9488; }
|
||
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
|
||
.feature-card p { font-size: 0.9rem; color: #6b7280; line-height: 1.7; }
|
||
|
||
/* ===== How It Works ===== */
|
||
.how-it-works { background: #f8faff; }
|
||
.steps { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; counter-reset: step; }
|
||
.step { flex: 1; min-width: 260px; max-width: 340px; text-align: center; position: relative; }
|
||
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||
.step-icon { font-size: 40px; margin: 20px 0 16px; }
|
||
.step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
|
||
.step p { font-size: 0.9rem; color: #6b7280; line-height: 1.7; }
|
||
|
||
/* ===== Platform Coverage ===== */
|
||
.platforms { background: #fff; }
|
||
.platform-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
|
||
.platform-card { text-align: center; padding: 32px 40px; border-radius: 16px; border: 1px solid #f3f4f6; min-width: 180px; transition: all 0.3s; }
|
||
.platform-card:hover { border-color: #e0e7ff; box-shadow: 0 8px 24px rgba(37,99,235,0.06); transform: translateY(-2px); }
|
||
.platform-card .icon { font-size: 40px; margin-bottom: 12px; }
|
||
.platform-card h4 { font-size: 1rem; font-weight: 700; }
|
||
.platform-card p { font-size: 0.8rem; color: #9ca3af; margin-top: 4px; }
|
||
|
||
/* ===== Pricing ===== */
|
||
.pricing { background: #f8faff; }
|
||
.pricing-grid { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; align-items: stretch; }
|
||
.pricing-card { flex: 1; min-width: 280px; max-width: 360px; background: #fff; border-radius: 20px; border: 1px solid #f3f4f6; padding: 40px 32px; transition: all 0.3s; display: flex; flex-direction: column; position: relative; }
|
||
.pricing-card.featured { border-color: #2563eb; box-shadow: 0 12px 40px rgba(37,99,235,0.1); transform: scale(1.02); }
|
||
.pricing-card.featured .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 20px; border-radius: 20px; }
|
||
.pricing-card:hover { border-color: #e0e7ff; box-shadow: 0 12px 40px rgba(37,99,235,0.06); }
|
||
.pricing-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
|
||
.pricing-price { font-size: 2.5rem; font-weight: 800; color: #1a1a2e; margin: 16px 0 8px; }
|
||
.pricing-price span { font-size: 1rem; font-weight: 400; color: #9ca3af; }
|
||
.pricing-desc { font-size: 0.85rem; color: #6b7280; margin-bottom: 24px; }
|
||
.pricing-features { flex: 1; display: flex; flex-direction: column; gap: 12px; }
|
||
.pricing-features li { font-size: 0.9rem; color: #4b5563; display: flex; align-items: center; gap: 8px; }
|
||
.pricing-features li::before { content: '✓'; color: #059669; font-weight: 700; font-size: 1rem; }
|
||
.pricing-card .landing-btn-primary { display: block; text-align: center; padding: 12px; border-radius: 10px; margin-top: 24px; font-size: 15px; font-weight: 600; }
|
||
.pricing-card .landing-btn-secondary { display: block; text-align: center; padding: 12px; border-radius: 10px; margin-top: 24px; font-size: 15px; font-weight: 600; border: 2px solid #dbeafe; color: #2563eb; transition: all 0.2s; }
|
||
.pricing-card .landing-btn-secondary:hover { border-color: #2563eb; background: #eff6ff; }
|
||
|
||
/* ===== FAQ ===== */
|
||
.faq { background: #fff; }
|
||
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
|
||
.faq-item { border: 1px solid #f3f4f6; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
|
||
.faq-item:hover { border-color: #e0e7ff; }
|
||
.faq-q { width: 100%; padding: 16px 20px; background: none; border: none; text-align: left; font-size: 0.95rem; font-weight: 600; color: #1a1a2e; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
||
.faq-q::after { content: '+'; font-size: 1.2rem; color: #2563eb; font-weight: 700; transition: transform 0.3s; flex-shrink: 0; }
|
||
.faq-item.open .faq-q::after { transform: rotate(45deg); }
|
||
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; padding: 0 20px; font-size: 0.9rem; color: #6b7280; line-height: 1.7; }
|
||
.faq-item.open .faq-a { max-height: 300px; padding: 0 20px 16px; }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta { text-align: center; padding: 80px 24px; background: linear-gradient(135deg, #1e3a8a, #5b21b6); color: #fff; position: relative; overflow: hidden; }
|
||
.cta::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); top: -200px; right: -100px; }
|
||
.cta::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.03); bottom: -150px; left: -100px; }
|
||
.cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 16px; position: relative; }
|
||
.cta p { font-size: 1rem; opacity: 0.85; max-width: 500px; margin: 0 auto 32px; position: relative; }
|
||
.cta a { display: inline-block; background: #fff; color: #2563eb !important; font-size: 16px; font-weight: 700; padding: 14px 40px; border-radius: 10px; transition: all 0.25s; position: relative; }
|
||
.cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
|
||
|
||
/* ===== Contact / Trial ===== */
|
||
.contact { background: #0f172a; color: #fff; padding: 80px 24px; }
|
||
.contact .section-title { color: #fff; }
|
||
.contact .section-subtitle { color: rgba(255,255,255,0.7); }
|
||
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1000px; margin: 0 auto; align-items: start; }
|
||
.contact-info { display: flex; flex-direction: column; gap: 20px; }
|
||
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
|
||
.ci-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||
.ci-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
|
||
.ci-value { font-size: 1rem; font-weight: 600; color: #fff; }
|
||
.ci-value a { color: #fff; }
|
||
.contact-form { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px; }
|
||
.contact-form h3 { font-size: 1.1rem; margin-bottom: 18px; color: #fff; }
|
||
.form-row { margin-bottom: 16px; }
|
||
.form-row label { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
|
||
.form-row input, .form-row textarea, .form-row select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff; font-size: 14px; box-sizing: border-box; font-family: inherit; }
|
||
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: #2563eb; }
|
||
.form-row textarea { resize: vertical; min-height: 80px; }
|
||
.contact-form .landing-btn-primary { width: 100%; text-align: center; border: none; cursor: pointer; font-size: 15px; }
|
||
.contact-note { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 12px; text-align: center; }
|
||
.contact-note a { color: #93c5fd; }
|
||
.wecom-qr { margin-top: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 16px; text-align: center; }
|
||
.wecom-qr img { width: 160px; height: 160px; object-fit: contain; border-radius: 12px; background: #fff; margin: 0 auto 10px; display: block; }
|
||
.wecom-qr-cap { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
|
||
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
|
||
|
||
/* ===== Footer ===== */
|
||
.landing-footer { background: #0f172a; color: #94a3b8; padding: 64px 24px 32px; }
|
||
.landing-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
|
||
.landing-footer h4 { color: #f1f5f9; font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; }
|
||
.landing-footer p { font-size: 0.85rem; line-height: 1.7; }
|
||
.landing-footer a { display: block; font-size: 0.85rem; color: #94a3b8; padding: 4px 0; transition: color 0.2s; }
|
||
.landing-footer a:hover { color: #fff; }
|
||
.landing-footer-bottom { max-width: 1200px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #1e293b; text-align: center; font-size: 0.8rem; color: #64748b; }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 768px) {
|
||
.landing-nav-links { display: none; }
|
||
.landing-nav-actions a { display: none; }
|
||
.landing-nav-actions .landing-btn-primary { display: inline-flex; font-size: 13px; padding: 6px 14px; }
|
||
.landing-hamburger { display: flex; }
|
||
.hero { padding: 100px 20px 60px; }
|
||
.hero-stats { gap: 24px; }
|
||
.hero-stat-num { font-size: 1.5rem; }
|
||
section { padding: 60px 0; }
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.pricing-card.featured { transform: none; }
|
||
.landing-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.hero { padding: 90px 16px 48px; }
|
||
.hero-stats { gap: 16px; }
|
||
.hero-stat { min-width: 80px; }
|
||
.step { min-width: 100%; }
|
||
.pricing-card { min-width: 100%; }
|
||
.landing-footer-inner { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Nav -->
|
||
<nav class="landing-nav" id="landingNav">
|
||
<div class="landing-nav-inner">
|
||
<a href="/" class="landing-logo">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="8" fill="url(#lg)"/><text x="14" y="19" text-anchor="middle" fill="#fff" font-size="14" font-weight="800">宇</text><defs><linearGradient id="lg" x1="0" y1="0" x2="28" y2="28"><stop stop-color="#2563eb"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs></svg>
|
||
<span>宇之然</span>
|
||
</a>
|
||
<div class="landing-nav-links">
|
||
<a href="#features">产品功能</a>
|
||
<a href="#how-it-works">工作流程</a>
|
||
<a href="#platforms">支持平台</a>
|
||
<a href="#pricing">定价</a>
|
||
<a href="#faq">常见问题</a>
|
||
</div>
|
||
<div class="landing-nav-actions">
|
||
<a href="/login.html" class="landing-btn-login">登录</a>
|
||
<a href="#contact" class="landing-btn-login">联系销售</a>
|
||
<a href="#pricing" class="landing-btn-primary">免费试用 →</a>
|
||
<button class="landing-hamburger" id="hamburger" aria-label="菜单">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile Menu -->
|
||
<div class="landing-mobile-menu" id="mobileMenu">
|
||
<a href="#features" class="mobile-link">产品功能</a>
|
||
<a href="#how-it-works" class="mobile-link">工作流程</a>
|
||
<a href="#platforms" class="mobile-link">支持平台</a>
|
||
<a href="#pricing" class="mobile-link">合作模式</a>
|
||
<a href="#faq" class="mobile-link">常见问题</a>
|
||
<a href="#contact" class="mobile-link">联系销售</a>
|
||
<a href="/login.html" class="landing-btn-login" style="text-align:center;padding:12px;margin-top:8px;">登录</a>
|
||
<a href="#pricing" class="landing-btn-primary">免费试用 →</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="hero-bg-glow g1"></div>
|
||
<div class="hero-bg-glow g2"></div>
|
||
<div class="container">
|
||
<h1>让内容在 AI 时代<br><span>主动找到你的客户</span></h1>
|
||
<p>宇之然是一站式 AI 内容获客系统。自动生成知乎深度文、公众号叙事文、小红书干货贴——三平台差异化分发。通过 AI 搜索推荐（GEO）和独立站 SEO，让零品牌基础的团队也能持续获得精准流量。</p>
|
||
<div class="hero-actions">
|
||
<a href="#pricing" class="landing-btn-primary">免费试用 →</a>
|
||
<a href="#contact" class="landing-btn-secondary">预约演示 / 联系销售</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat"><div class="hero-stat-num">3</div><div class="hero-stat-label">覆盖平台</div></div>
|
||
<div class="hero-stat"><div class="hero-stat-num">100+</div><div class="hero-stat-label">AI 写作模型</div></div>
|
||
<div class="hero-stat"><div class="hero-stat-num">60%+</div><div class="hero-stat-label">AI 引用提升率</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">产品功能</span></div>
|
||
<h2 class="section-title">不仅是内容生成，更是获客系统</h2>
|
||
<p class="section-subtitle">从选题到发布到追踪，覆盖内容获客全链路的自动化工具体系</p>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon blue">📝</div>
|
||
<h3>三平台差异化创作</h3>
|
||
<p>知乎深度分析文（400-800字/节）、公众号个人叙事文（300-500字/节）、小红书精炼干货贴（100-200字/节）——每平台独立展开，不共用同一篇内容。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon purple">🤖</div>
|
||
<h3>AI 搜索推荐（GEO）</h3>
|
||
<p>自动注入 JSON-LD 结构化数据（Article/FAQ/HowTo），每日追踪 DeepSeek/ChatGPT/Perplexity 引用情况，量化 AI 搜索就绪度评分。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon green">🔍</div>
|
||
<h3>独立站 SEO</h3>
|
||
<p>自动生成 SEO 元数据（Title/Description/Keywords），大纲融入 SEO 关键词，每日 Bing 排名追踪，让内容被 Google 等搜索引擎收录。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon orange">📊</div>
|
||
<h3>效果追踪看板</h3>
|
||
<p>搜索排名概览、AI 搜索引用率、GEO 就绪度评分、引擎分布——数据驱动的内容优化闭环，告诉你哪些内容真正带来了曝光。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon pink">🔄</div>
|
||
<h3>全自动流水线</h3>
|
||
<p>定时热点采集 → AI 选题建议 → 自动研究写作 → 合规审查 → 平台差异化改写 → 发布，全流程自动化，每天只需审核确认。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon teal">🔒</div>
|
||
<h3>合规保障</h3>
|
||
<p>内置敏感词过滤、AI 套话检测、平台合规审查、品牌规范检查。违规内容自动阻塞流程，保障账号安全。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works -->
|
||
<section id="how-it-works" class="how-it-works">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">工作流程</span></div>
|
||
<h2 class="section-title">三步开启内容获客</h2>
|
||
<p class="section-subtitle">从配置到见效，只需一个工作日</p>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-icon">🎯</div>
|
||
<h3>配置选题方向</h3>
|
||
<p>设定领域分类（如「AI 与效率」「可持续生活」）、目标平台和关键词。系统自动开始采集热点、推荐选题方向。</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-icon">⚡</div>
|
||
<h3>自动生产内容</h3>
|
||
<p>AI 自动完成研究、大纲、三平台写作、合规审查。你只需审核确认，一键发布到知乎/公众号/小红书及独立站。</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-icon">📈</div>
|
||
<h3>追踪优化迭代</h3>
|
||
<p>每日自动追踪搜索排名和 AI 引用情况。GEO 就绪度评分告诉你内容哪里需要改进，数据驱动持续优化。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Platform Coverage -->
|
||
<section id="platforms" class="platforms">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">支持平台</span></div>
|
||
<h2 class="section-title">覆盖中文内容生态</h2>
|
||
<p class="section-subtitle">三平台差异化策略，内容自动适配每个平台的调性</p>
|
||
<div class="platform-grid">
|
||
<div class="platform-card">
|
||
<div class="icon">📘</div>
|
||
<h4>知乎</h4>
|
||
<p>深度长篇 · 数据驱动 · 专业分析</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="icon">💬</div>
|
||
<h4>微信公众号</h4>
|
||
<p>个人叙事 · 对话感 · 情感共鸣</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="icon">📕</div>
|
||
<h4>小红书</h4>
|
||
<p>精炼干货 · 实操方法 · 可 emoji</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<div class="icon">🌐</div>
|
||
<h4>独立站</h4>
|
||
<p>SEO 优化 · GEO 就绪 · 品牌阵地</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section id="pricing" class="pricing">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">合作模式</span></div>
|
||
<h2 class="section-title">免费试用 · 私有化部署 · 源码售卖</h2>
|
||
<p class="section-subtitle">从零成本体验到整套买断，三种方式总有一种适合你</p>
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card">
|
||
<div class="pricing-name">免费试用</div>
|
||
<div class="pricing-price">¥0 <span>起</span></div>
|
||
<div class="pricing-desc">零成本体验完整创作闭环</div>
|
||
<ul class="pricing-features">
|
||
<li>私有化试用版 / 预约 1v1 演示</li>
|
||
<li>限 5 篇 / 月文章生产</li>
|
||
<li>三平台差异化内容</li>
|
||
<li>基础 AI 味检测</li>
|
||
<li>基础 GEO 就绪度评分</li>
|
||
<li>社区与文档支持</li>
|
||
</ul>
|
||
<a href="#contact" class="landing-btn-secondary">申请试用</a>
|
||
</div>
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-badge">主力推荐</div>
|
||
<div class="pricing-name">私有化部署</div>
|
||
<div class="pricing-price">¥29,800 <span>起 / 买断</span></div>
|
||
<div class="pricing-desc">一套独立部署，数据不出域，可白标</div>
|
||
<ul class="pricing-features">
|
||
<li>完整功能 + 无限文章生产</li>
|
||
<li>部署在你的自有服务器</li>
|
||
<li>品牌白标（名称 / Logo / 主色）</li>
|
||
<li>AI 味检测 + 合规人工闸门</li>
|
||
<li>GEO / SEO 全维度优化</li>
|
||
<li>多用户 / 多租户隔离</li>
|
||
<li>年运维与更新订阅</li>
|
||
</ul>
|
||
<a href="#contact" class="landing-btn-primary">获取报价</a>
|
||
</div>
|
||
<div class="pricing-card">
|
||
<div class="pricing-name">源码售卖</div>
|
||
<div class="pricing-price">面议 <span>/ 授权</span></div>
|
||
<div class="pricing-desc">一次性授权，自主迭代可控</div>
|
||
<ul class="pricing-features">
|
||
<li>完整源代码交付</li>
|
||
<li>永久授权 + 年订阅支持</li>
|
||
<li>可二次开发 / 集成</li>
|
||
<li>含私有化部署包</li>
|
||
<li>技术文档 + 部署指导</li>
|
||
<li>商务定制谈价</li>
|
||
</ul>
|
||
<a href="#contact" class="landing-btn-secondary">联系销售</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section id="faq" class="faq">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">常见问题</span></div>
|
||
<h2 class="section-title">关于宇之然</h2>
|
||
<p class="section-subtitle">你可能想了解的事情</p>
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<button class="faq-q">什么是 GEO（生成式引擎优化）？</button>
|
||
<div class="faq-a">GEO（Generative Engine Optimization）是针对 ChatGPT、DeepSeek、Perplexity 等 AI 搜索的优化策略。与传统 SEO 不同，GEO 关注如何让内容被 AI 模型引用为回答来源。宇之然通过结构化数据注入（JSON-LD）、FAQ/HowTo Schema 和可引用数据点，系统性提升内容被 AI 搜索引用的概率。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">三平台差异化是什么意思？</button>
|
||
<div class="faq-a">传统工具三平台共用一篇文章，只改人称和 emoji。宇之然为每个平台调用独立的扩展提示词——知乎写深度分析（400-800字/节），公众号写个人叙事（300-500字/节），小红书写精炼干货（100-200字/节）。每篇文章都是针对该平台读者量身定制的原创内容。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">我完全没有内容创作经验，能用吗？</button>
|
||
<div class="faq-a">可以。系统内置了从选题、研究、写作到合规审查的全自动流水线。你只需要设定领域方向（如「AI 与效率」），系统会自动采集热点、生成选题建议、完成三平台内容创作。你只需在发布前审核确认即可。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">内容会有 AI 味吗？</button>
|
||
<div class="faq-a">不会。系统内置了 AI 套话检测引擎（从 DB 加载 30+ 条规则），自动删除「首先/其次/综上所述/值得注意的是」等 AI 高频表达。生成时使用去套路化的自然语言提示词，配合平台差异化策略，产出接近真人写作水准。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">我需要自己准备 API Key 吗？</button>
|
||
<div class="faq-a">系统预置了多 LLM 供应商配置（sensenova/nvidia/opencode-go），开箱即用。你也可以在管理后台添加自己的 API Key，支持自定义模型、温度和 system prompt。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">我的数据安全吗？</button>
|
||
<div class="faq-a">系统支持多租户隔离（组织级数据隔离），用户只能看到自己组织的数据。部署在你的自有服务器上，数据不出你的网络。支持 JWT 认证、HTTPS、管理员权限分级管理。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">什么是私有化部署？和 SaaS 有什么区别？</button>
|
||
<div class="faq-a">私有化部署把整套平台装在你自己的服务器（或云主机）上，数据完全由你掌控、不出域，可彻底去掉"宇之然"品牌换成你自己的（白标）。相比公有云 SaaS，它更适合对数据合规、品牌自主有要求的 MCN、企业市场部和政务 / 行业机构。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">可以买源码自己改吗？</button>
|
||
<div class="faq-a">可以。源码售卖提供完整源代码（后端 FastAPI + 前端 Vue3 CDN + 部署脚本），一次性授权后你拥有永久使用权，可自主二次开发、接入内部系统，并享受年度订阅技术支持与版本更新。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">免费试用怎么申请？</button>
|
||
<div class="faq-a">无需信用卡。你可以申请私有化试用版（功能完整、限文章数）自行验证，或预约一次 1v1 在线演示，由我们带你走通选题→生成→AI 味检测→合规发布的完整流程。点击页面底部"申请试用"留下联系方式即可。</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">AI 生成的内容合规吗？</button>
|
||
<div class="faq-a">合规责任在内容发布方。平台内置"不代发"原则：所有 AI 稿必须经过真人校验、手动标记发布；同时提供 AI 套话检测与软硬问题分级，确保内容可读、可溯源、符合《AI 生成合成内容标识办法》的要求。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta">
|
||
<div class="container" style="position:relative;">
|
||
<h2>准备好了吗？</h2>
|
||
<p>免费试用、私有化部署或源码采购——选一种方式，让 AI 为你的内容获取精准流量</p>
|
||
<a href="#contact">获取专属方案 →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact / Trial -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<div style="text-align:center;"><span class="section-label">开始合作</span></div>
|
||
<h2 class="section-title">选一种方式，和我们聊聊</h2>
|
||
<p class="section-subtitle">无论是免费试用、私有化部署还是源码采购，留下信息我们会在 1 个工作日内联系你</p>
|
||
<div class="contact-grid">
|
||
<div class="contact-info">
|
||
<div class="contact-info-item">
|
||
<div class="ci-icon">✉</div>
|
||
<div>
|
||
<div class="ci-label">商务邮箱</div>
|
||
<div class="ci-value"><a href="mailto:contact@yuzhiran.com">contact@yuzhiran.com</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="ci-icon">💬</div>
|
||
<div>
|
||
<div class="ci-label">微信 / 商务对接</div>
|
||
<div class="ci-value">扫码上方企业微信二维码添加</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="ci-icon">📦</div>
|
||
<div>
|
||
<div class="ci-label">交付形式</div>
|
||
<div class="ci-value">私有化实例 / 源码授权 / 试用版</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-info-item">
|
||
<div class="ci-icon">🛡</div>
|
||
<div>
|
||
<div class="ci-label">合规承诺</div>
|
||
<div class="ci-value">数据不出域 · 不代发 · 人工闸门</div>
|
||
</div>
|
||
</div>
|
||
<div class="wecom-qr">
|
||
<img src="/automation/images/wecom-qr.jpg" alt="企业微信二维码">
|
||
<div class="wecom-qr-cap">企业微信扫码添加 · 备注：私有化 / 源码</div>
|
||
</div>
|
||
</div>
|
||
<form class="contact-form" id="trialForm">
|
||
<h3>预约咨询 / 申请试用</h3>
|
||
<div class="form-row">
|
||
<label>姓名 *</label>
|
||
<input type="text" name="name" required placeholder="您的称呼">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>公司 / 团队</label>
|
||
<input type="text" name="company" placeholder="选填">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>合作方式 *</label>
|
||
<select name="need" required>
|
||
<option value="免费试用">免费试用（私有化试用版 / 演示）</option>
|
||
<option value="私有化部署">私有化部署（买断 + 运维）</option>
|
||
<option value="源码售卖">源码售卖（授权 + 支持）</option>
|
||
<option value="其他">其他 / 还不确定</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>联系方式 *</label>
|
||
<input type="text" name="contact" required placeholder="邮箱 / 微信 / 电话">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>需求说明</label>
|
||
<textarea name="remark" placeholder="简单描述您的场景与规模（选填）"></textarea>
|
||
</div>
|
||
<button type="submit" class="landing-btn-primary">提交，获取方案</button>
|
||
<div class="contact-note">提交将唤起邮件客户端发往 <a href="mailto:contact@yuzhiran.com">contact@yuzhiran.com</a></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="landing-footer">
|
||
<div class="landing-footer-inner">
|
||
<div>
|
||
<h4>宇之然</h4>
|
||
<p>一站式 AI 内容获客系统。<br>让内容在 AI 时代主动找到你的客户。</p>
|
||
</div>
|
||
<div>
|
||
<h4>产品</h4>
|
||
<a href="#features">产品功能</a>
|
||
<a href="#how-it-works">工作流程</a>
|
||
<a href="#pricing">定价</a>
|
||
</div>
|
||
<div>
|
||
<h4>支持</h4>
|
||
<a href="#faq">常见问题</a>
|
||
<a href="https://github.com" target="_blank">GitHub</a>
|
||
<a href="mailto:contact@yuzhiran.com">联系我们</a>
|
||
</div>
|
||
<div>
|
||
<h4>法律</h4>
|
||
<a href="#">隐私政策</a>
|
||
<a href="#">服务条款</a>
|
||
</div>
|
||
</div>
|
||
<div class="landing-footer-bottom">
|
||
© 2026 宇之然. All rights reserved.
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Mobile menu toggle
|
||
document.getElementById('hamburger').addEventListener('click', function() {
|
||
document.getElementById('mobileMenu').classList.toggle('open');
|
||
document.body.style.overflow = document.getElementById('mobileMenu').classList.contains('open') ? 'hidden' : '';
|
||
});
|
||
document.querySelectorAll('.mobile-link').forEach(function(el) {
|
||
el.addEventListener('click', function() {
|
||
document.getElementById('mobileMenu').classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
});
|
||
});
|
||
|
||
// Nav shadow on scroll
|
||
window.addEventListener('scroll', function() {
|
||
document.getElementById('landingNav').classList.toggle('scrolled', window.scrollY > 20);
|
||
});
|
||
|
||
// FAQ accordion
|
||
document.querySelectorAll('.faq-q').forEach(function(btn) {
|
||
btn.addEventListener('click', function() {
|
||
var item = this.parentElement;
|
||
var isOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item.open').forEach(function(i) { i.classList.remove('open'); });
|
||
if (!isOpen) item.classList.add('open');
|
||
});
|
||
});
|
||
|
||
// Trial / contact form -> mailto
|
||
var trialForm = document.getElementById('trialForm');
|
||
if (trialForm) {
|
||
trialForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
var fd = new FormData(trialForm);
|
||
var name = (fd.get('name') || '').toString().trim();
|
||
var company = (fd.get('company') || '').toString().trim();
|
||
var need = (fd.get('need') || '').toString().trim();
|
||
var contact = (fd.get('contact') || '').toString().trim();
|
||
var remark = (fd.get('remark') || '').toString().trim();
|
||
var subject = '【宇之然】' + need + ' - ' + (name || '客户');
|
||
var body = '姓名：' + name + '\n公司/团队：' + (company || '（未填）') +
|
||
'\n合作方式：' + need + '\n联系方式：' + contact + '\n需求说明：' + (remark || '（未填）');
|
||
window.location.href = 'mailto:contact@yuzhiran.com?subject=' +
|
||
encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|