Yuzhiran Dev
24e46eced5
- landing.html: Full product website (hero, features, how-it-works, platform coverage, pricing, FAQ, CTA, footer) - main.py: Route / to landing.html (overrides StaticFiles default index.html) - Workspace dashboard remains at /index.html - Responsive: desktop nav, hamburger mobile menu, single-column on small screens - No Vue/Element Plus dependency; standalone HTML+CSS+JS (~30KB) Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
493 lines
30 KiB
HTML
493 lines
30 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); }
|
||
|
||
/* ===== 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="/login.html" 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="/login.html" class="landing-btn-login" style="text-align:center;padding:12px;margin-top:8px;">登录</a>
|
||
<a href="/login.html" 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="/login.html" class="landing-btn-primary">免费开始使用 →</a>
|
||
<a href="#features" 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">¥299 <span>/月</span></div>
|
||
<div class="pricing-desc">个人创作者试水 AI 内容获客</div>
|
||
<ul class="pricing-features">
|
||
<li>每月 20 篇文章生产</li>
|
||
<li>三平台差异化内容</li>
|
||
<li>基础 SEO 元数据注入</li>
|
||
<li>搜索排名追踪（Bing）</li>
|
||
<li>GEO 就绪度基础评分</li>
|
||
<li>标准合规审查</li>
|
||
</ul>
|
||
<a href="/login.html" 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">¥799 <span>/月</span></div>
|
||
<div class="pricing-desc">内容团队稳定获客的日常工具</div>
|
||
<ul class="pricing-features">
|
||
<li>每月 100 篇文章生产</li>
|
||
<li>三平台差异化内容</li>
|
||
<li>高级 SEO + GEO 元数据</li>
|
||
<li>搜索排名追踪（Bing + AI）</li>
|
||
<li>AI 搜索引用检测</li>
|
||
<li>GEO 就绪度完整评分（6维度）</li>
|
||
<li>全自动定时流水线</li>
|
||
<li>多用户协作</li>
|
||
</ul>
|
||
<a href="/login.html" class="landing-btn-primary">开始试用</a>
|
||
</div>
|
||
<div class="pricing-card">
|
||
<div class="pricing-name">企业版</div>
|
||
<div class="pricing-price">¥2,499 <span>/月</span></div>
|
||
<div class="pricing-desc">品牌化内容运营的完整方案</div>
|
||
<ul class="pricing-features">
|
||
<li>不限文章数量</li>
|
||
<li>所有平台差异化内容</li>
|
||
<li>全维度 SEO + GEO 优化</li>
|
||
<li>全平台搜索排名追踪</li>
|
||
<li>AI 搜索引用深度分析</li>
|
||
<li>数据看板 + 定制报告</li>
|
||
<li>专属 LLM 模型配置</li>
|
||
<li>API 接入</li>
|
||
<li>专属技术支持</li>
|
||
</ul>
|
||
<a href="/login.html" 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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta">
|
||
<div class="container" style="position:relative;">
|
||
<h2>准备好了吗？</h2>
|
||
<p>立即开始使用宇之然，让 AI 为你的内容获取精准流量</p>
|
||
<a href="/login.html">免费开始使用 →</a>
|
||
</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/your-org/yu-zhi-ran" target="_blank">GitHub</a>
|
||
<a href="mailto:hello@yu-zhi-ran.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');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|