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

update: redesign landing page

Browse Source
This commit is contained in:
Codex
2026-02-18 15:07:35 +00:00
parent 489972c6dc
commit 609aaecf56
1 changed files with 89 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/views/pages.js
View File

@@ -150,79 +150,101 @@ function nav({ authenticated, userId }) {
function renderLandingPage({ authenticated, userId }) { function renderLandingPage({ authenticated, userId }) {
const primaryCta = authenticated const primaryCta = authenticated
? `<a href="/app" class="btn btn-primary btn-lg">Open Dashboard</a>` ? `<a href="/app" class="btn btn-primary btn-lg font-bold">Open Dashboard</a>`
: `<a href="/login" class="btn btn-primary btn-lg">Start Free</a>`; : `<div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
<a href="/login" class="btn btn-primary btn-lg font-bold">Start for Free</a>
<a href="#how" class="btn btn-ghost btn-lg">Learn more <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg></a>
</div>`;
return shell({ return shell({
title: "XArtAudio | Turn X Articles into Audiobooks", title: "XArtAudio | Turn X Articles into Audiobooks",
content: ` content: `
${nav({ authenticated, userId })}
<section class="hero min-h-[60vh] bg-base-200 rounded-box mb-12"> <section class="py-16 md:py-24 text-center max-w-3xl mx-auto">
<div class="hero-content flex-col lg:flex-row-reverse gap-8 p-8"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-base-200 text-sm font-medium mb-8 text-base-content/70">
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100"> <span class="badge badge-accent badge-xs">New</span> Webhook-first automation
<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> <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 bg-gradient-to-br from-base-content to-base-content/50 bg-clip-text text-transparent">
<div class="text-center lg:text-left"> Listen to X Articles.
<span class="badge badge-accent mb-4">Webhook-first automation</span> </h1>
<h1 class="text-5xl font-bold">From X Article to audiobook.</h1> <p class="text-xl md:text-2xl text-base-content/70 mb-10 leading-relaxed">
<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> Mention our bot under any long-form X post. We'll convert it to audio and send you a link instantly.
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> </p>
${primaryCta} ${primaryCta}
<a href="/app" class="btn btn-outline btn-lg">See Product</a> <p class="mt-6 text-sm text-base-content/50">No credit card required for trial • ${escapeHtml(userId ? `Logged in as @${userId}` : "Public access valid")}</p>
</section>
<section id="how" class="py-16 border-t border-base-content/5">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">How it works</h2>
<p class="text-base-content/60 max-w-2xl mx-auto">Three simple steps to turn reading into listening.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="card bg-base-100 border border-base-content/10">
<div class="card-body items-center text-center">
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" /></svg>
</div>
<h3 class="font-bold text-lg mb-2">1. Mention the bot</h3>
<p class="text-base-content/70">Reply to any long article on X with <code>@XArtAudio</code>.</p>
</div>
</div>
<div class="card bg-base-100 border border-base-content/10">
<div class="card-body items-center text-center">
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
</div>
<h3 class="font-bold text-lg mb-2">2. Processing</h3>
<p class="text-base-content/70">Our webhook verifies the article and generates high-quality audio.</p>
</div>
</div>
<div class="card bg-base-100 border border-base-content/10">
<div class="card-body items-center text-center">
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<h3 class="font-bold text-lg mb-2">3. Listen</h3>
<p class="text-base-content/70">Receive a link to your audiobook. Listen anywhere, anytime.</p>
</div> </div>
<p class="text-xs text-base-content/60 mt-4">Caller pays credits. ID: ${escapeHtml(userId || 'guest')}</p>
</div> </div>
</div> </div>
</section> </section>
<section id="how" class="grid gap-6 md:grid-cols-3 mb-12"> <section id="pricing" class="py-16 border-t border-base-content/5">
<div class="card bg-base-100 shadow-xl border border-base-200"> <div class="text-center mb-16">
<div class="card-body"> <h2 class="text-3xl font-bold mb-4">Simple Pricing</h2>
<h2 class="card-title">For creators</h2> <p class="text-base-content/60">Pay only for what you convert. Credits never expire.</p>
<p>Call the bot from X and track generated audiobooks in your dashboard.</p>
</div> </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-base-100 shadow-xl border border-base-200"> <div class="card bg-base-200 border border-base-content/5 max-w-4xl mx-auto overflow-hidden">
<div class="card-body"> <div class="grid md:grid-cols-2">
<h2 class="card-title text-2xl mb-2">Pricing logic</h2> <div class="p-8 md:p-12">
<p class="text-base-content/70">1 credit up to 25,000 chars, then +1 credit for each additional 10,000 chars.</p> <h3 class="text-2xl font-bold mb-4">Pay-as-you-go</h3>
<div class="stats stats-vertical lg:stats-horizontal shadow mt-4 bg-base-200"> <div class="text-5xl font-extrabold mb-6">$1 <span class="text-xl font-normal text-base-content/60">/ 25k chars</span></div>
<div class="stat"> <ul class="space-y-3 mb-8 text-left">
<div class="stat-title">Included</div> <li class="flex items-center gap-2"><svg class="w-5 h-5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> High-quality Neural Voices</li>
<div class="stat-value">25k chars</div> <li class="flex items-center gap-2"><svg class="w-5 h-5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> Permanent Storage</li>
<div class="stat-desc">Base cost</div> <li class="flex items-center gap-2"><svg class="w-5 h-5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> Shareable Links</li>
</ul>
<a href="/login" class="btn btn-primary w-full">Get Started</a>
</div>
<div class="bg-base-300/50 p-8 md:p-12 flex flex-col justify-center">
<h4 class="font-bold mb-4">Credit Logic</h4>
<div class="space-y-4 text-sm">
<div class="flex justify-between border-b border-base-content/10 pb-2">
<span>Base (up to 25k chars)</span>
<span class="font-mono font-bold">1 credit</span>
</div>
<div class="flex justify-between border-b border-base-content/10 pb-2">
<span>Additional 10k chars</span>
<span class="font-mono font-bold">+1 credit</span>
</div>
<div class="flex justify-between text-base-content/60">
<span>Maximum article size</span>
<span class="font-mono">120k chars</span>
</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>
<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> </div>
</div> </div>