Matiss/xarticleaudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: improve landing page sections

Browse Source
This commit is contained in:
Codex
2026-02-18 14:48:47 +00:00
parent 710624ca78
commit 2b9f4e8b3f
1 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/pages.js
View File

@@ -81,41 +81,73 @@ function renderLandingPage({ authenticated, userId }) {
title: "XArtAudio | Turn X Articles into Audiobooks",
content: `
${nav({ authenticated, userId })}
<section class="grid gap-4 md:gap-6 md:grid-cols-2 items-center mb-8 md:mb-12">
<div class="space-y-4">
<span class="badge badge-accent">Webhook-first automation</span>
<h1 class="text-4xl md:text-5xl font-black leading-tight">From X Article to audiobook in one mention.</h1>
<p class="text-slate-300 text-base md:text-lg">Mention the bot under a long-form X Article. We verify it, convert it, and return an access-controlled public link.</p>
<div class="flex flex-wrap gap-3">${primaryCta}<a href="/app" class="btn btn-outline btn-lg">See Product</a></div>
<p class="text-xs text-slate-400">Caller pays generation credits. Non-owners can unlock permanently with the same credit amount.</p>
</div>
<div class="card bg-slate-900/70 border border-slate-700 shadow-2xl">
<div class="card-body p-4 md:p-5">
<h2 class="font-bold">Live flow</h2>
<ol class="steps steps-vertical">
<li class="step step-primary">User mentions <code>@YourBot</code> on article thread</li>
<li class="step step-primary">Webhook validates article + charges credits</li>
<li class="step step-primary">Audio generated and linked publicly</li>
<li class="step">Others sign in and unlock access if needed</li>
</ol>
<section class="hero min-h-[60vh] bg-base-200 rounded-box mb-12">
<div class="hero-content flex-col lg:flex-row-reverse gap-8 p-8">
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
<div class="card-body">
<h2 class="card-title justify-center mb-4">Live flow</h2>
<ul class="steps steps-vertical w-full">
<li class="step step-primary">User mentions <code>@YourBot</code></li>
<li class="step step-primary">Webhook charges credits</li>
<li class="step step-primary">Audio generated</li>
<li class="step">Unlock &amp; Listen</li>
</ul>
</div>
</div>
<div class="text-center lg:text-left">
<span class="badge badge-accent mb-4">Webhook-first automation</span>
<h1 class="text-5xl font-bold">From X Article to audiobook.</h1>
<p class="py-6 text-lg">Mention the bot under a long-form X Article. We verify it, convert it, and return an access-controlled public link.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
${primaryCta}
<a href="/app" class="btn btn-outline btn-lg">See Product</a>
</div>
<p class="text-xs text-base-content/60 mt-4">Caller pays credits. ID: ${escapeHtml(userId || 'guest')}</p>
</div>
</div>
</section>
<section id="how" class="grid gap-4 md:grid-cols-3 mb-8 md:mb-12">
<article class="card bg-slate-900/70 border border-slate-700"><div class="card-body"><h3 class="font-semibold">For creators</h3><p class="text-sm text-slate-300">Call the bot from X and track generated audiobooks in your dashboard.</p></div></article>
<article class="card bg-slate-900/70 border border-slate-700"><div class="card-body"><h3 class="font-semibold">For listeners</h3><p class="text-sm text-slate-300">Open a public link, authenticate, then unlock once for permanent access.</p></div></article>
<article class="card bg-slate-900/70 border border-slate-700"><div class="card-body"><h3 class="font-semibold">For teams</h3><p class="text-sm text-slate-300">Credit ledger, idempotent webhooks, and predictable per-article pricing.</p></div></article>
<section id="how" class="grid gap-6 md:grid-cols-3 mb-12">
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title">For creators</h2>
<p>Call the bot from X and track generated audiobooks in your dashboard.</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title">For listeners</h2>
<p>Open a public link, authenticate, then unlock once for permanent access.</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title">For teams</h2>
<p>Credit ledger, idempotent webhooks, and predictable per-article pricing.</p>
</div>
</div>
</section>
<section id="pricing" class="card bg-slate-900/70 border border-slate-700">
<div class="card-body p-4 md:p-6">
<h2 class="card-title">Pricing logic</h2>
<p class="text-sm text-slate-300">1 credit up to 25,000 chars, then +1 credit for each additional 10,000 chars.</p>
<div class="stats stats-vertical md:stats-horizontal bg-slate-950/70 border border-slate-700 mt-3">
<div class="stat"><div class="stat-title">Included</div><div class="stat-value text-2xl">25k chars</div></div>
<div class="stat"><div class="stat-title">Step</div><div class="stat-value text-2xl">10k</div></div>
<div class="stat"><div class="stat-title">Max size</div><div class="stat-value text-2xl">120k</div></div>
<section id="pricing" class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title text-2xl mb-2">Pricing logic</h2>
<p class="text-base-content/70">1 credit up to 25,000 chars, then +1 credit for each additional 10,000 chars.</p>
<div class="stats stats-vertical lg:stats-horizontal shadow mt-4 bg-base-200">
<div class="stat">
<div class="stat-title">Included</div>
<div class="stat-value">25k chars</div>
<div class="stat-desc">Base cost</div>
</div>
<div class="stat">
<div class="stat-title">Step</div>
<div class="stat-value">10k chars</div>
<div class="stat-desc">Additional cost</div>
</div>
<div class="stat">
<div class="stat-title">Max size</div>
<div class="stat-value">120k chars</div>
<div class="stat-desc">Hard limit</div>
</div>
</div>
</div>
</section>