import { Metadata } from 'next'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowLeftIcon } from '@heroicons/react/24/outline'
export const metadata: Metadata = {
title: 'How Bookwiz Works: The Modern Writing Workflow',
description: 'Discover the Bookwiz workflow: file-based organization, context-aware AI, and a seamless writing experience. See how Bookwiz transforms the way you write.',
openGraph: {
title: 'How Bookwiz Works: The Modern Writing Workflow',
description: 'Discover the Bookwiz workflow: file-based organization, context-aware AI, and a seamless writing experience. See how Bookwiz transforms the way you write.',
type: 'article',
publishedTime: '2024-06-01',
authors: ['Bookwiz Team'],
},
}
export default function BlogPost() {
return (
<article className="prose prose-invert prose-lg max-w-3xl mx-auto">
<Link href="/blog" className="inline-flex items-center text-teal-400 hover:text-teal-300 mb-8 group">
<ArrowLeftIcon className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
Back to blog
</Link>
<h1>How Bookwiz Works: The Modern Writing Workflow</h1>
<div className="flex items-center space-x-4 text-sm text-slate-400 mb-8">
<span>Workflow</span>
<span>•</span>
<span>June 1, 2024</span>
<span>•</span>
<span>7 min read</span>
</div>
<p className="lead">
Bookwiz is more than just a writing tool—it's a complete creative environment. With a file-based structure, context-aware AI, and a beautiful interface, Bookwiz helps you organize, write, and elevate your stories like never before.
</p>
<figure className="my-8 flex flex-col items-center">
<Image src="/images/logo-glyph-white.png" alt="Bookwiz Logo" width={64} height={64} className="mb-2" />
<figcaption className="text-center text-slate-400 text-sm">A new way to write, powered by AI and thoughtful design.</figcaption>
</figure>
<h2>📚 The Bookwiz Workflow at a Glance</h2>
<div className="overflow-x-auto my-6">
<table>
<thead>
<tr>
<th>Step</th>
<th>What You Do</th>
<th>How Bookwiz Helps</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Organize</td>
<td>Break your book into files: chapters, characters, notes</td>
<td>Drag-and-drop file explorer, folders, instant updates</td>
</tr>
<tr>
<td>2. Write</td>
<td>Edit any file in a rich, distraction-free editor</td>
<td>Live word count, formatting, autosave</td>
</tr>
<tr>
<td>3. Chat</td>
<td>Ask the AI for feedback, ideas, or direct edits</td>
<td>Context-aware AI chat, model selection, streaming responses</td>
</tr>
<tr>
<td>4. Iterate</td>
<td>Refine, reorganize, and collaborate</td>
<td>Real-time updates, usage tracking, version control</td>
</tr>
</tbody>
</table>
</div>
<h2>✨ Three-Column Magic: Your Creative Command Center</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
<div className="flex flex-col items-center">
<span className="text-3xl">🗂️</span>
<h3 className="mt-2 mb-1 text-base font-semibold">File Explorer</h3>
<p className="text-sm text-slate-400 text-center">Organize your book with folders and files for chapters, outlines, and characters. Drag, drop, and instantly see your structure.</p>
</div>
<div className="flex flex-col items-center">
<span className="text-3xl">✍️</span>
<h3 className="mt-2 mb-1 text-base font-semibold">Editor</h3>
<p className="text-sm text-slate-400 text-center">Draft and revise in a professional editor with live word count and beautiful formatting.</p>
</div>
<div className="flex flex-col items-center">
<span className="text-3xl">🤖</span>
<h3 className="mt-2 mb-1 text-base font-semibold">AI Chat</h3>
<p className="text-sm text-slate-400 text-center">Get real-time feedback, creative ideas, and even direct file edits from advanced AI models.</p>
</div>
</div>
<h2>🚀 Why Bookwiz is Different</h2>
<ul>
<li><strong>File-Based Organization:</strong> Treat your book as a project, not just a document.</li>
<li><strong>Context-Aware AI:</strong> The AI understands your whole book, not just the current page.</li>
<li><strong>Flexible Model Selection:</strong> Choose from top AI models for different needs.</li>
<li><strong>Real-Time Collaboration:</strong> Built for future multi-author support and instant updates.</li>
<li><strong>Usage Tracking:</strong> Know your AI usage and upgrade as you grow.</li>
<li><strong>Modern Tech Stack:</strong> Powered by Next.js, React, and OpenRouter for speed and reliability.</li>
</ul>
<h2>🛠️ Visual Workflow</h2>
<figure className="my-8">
<div className="flex flex-col md:flex-row items-center justify-center gap-6">
<div className="flex flex-col items-center">
<span className="text-4xl">📁</span>
<span className="text-slate-400 text-xs mt-1">Organize</span>
</div>
<span className="text-2xl md:text-4xl">→</span>
<div className="flex flex-col items-center">
<span className="text-4xl">📝</span>
<span className="text-slate-400 text-xs mt-1">Write</span>
</div>
<span className="text-2xl md:text-4xl">→</span>
<div className="flex flex-col items-center">
<span className="text-4xl">🤖</span>
<span className="text-slate-400 text-xs mt-1">AI Assist</span>
</div>
<span className="text-2xl md:text-4xl">→</span>
<div className="flex flex-col items-center">
<span className="text-4xl">🔄</span>
<span className="text-slate-400 text-xs mt-1">Iterate</span>
</div>
</div>
<figcaption className="text-center text-slate-400 text-sm mt-2">From idea to finished book, Bookwiz guides you every step of the way.</figcaption>
</figure>
<h2>👩💻 Typical User Journey</h2>
<ol>
<li><strong>Start a Project:</strong> Create a new book or project in seconds.</li>
<li><strong>Organize Content:</strong> Structure your work with folders and files.</li>
<li><strong>Write & Edit:</strong> Draft, revise, and polish in the editor.</li>
<li><strong>Leverage AI:</strong> Get feedback, suggestions, and even direct edits from the AI.</li>
<li><strong>Iterate & Collaborate:</strong> Refine your work, track changes, and (soon) collaborate in real time.</li>
</ol>
<h2>🌟 See Bookwiz in Action</h2>
<blockquote className="border-l-4 border-teal-400 pl-4 text-slate-300 bg-slate-800/40 rounded">
"Bookwiz helped me organize my novel and get feedback on every chapter. The AI chat is like having a co-author who never sleeps!"
<br />
<span className="text-xs text-slate-500">— Early Beta User</span>
</blockquote>
<h2>Ready to try Bookwiz?</h2>
<p>
<Link href="/" className="text-teal-400 hover:text-teal-300 underline">Get started on the homepage</Link> or <Link href="/blog" className="text-teal-400 hover:text-teal-300 underline">explore more blog posts</Link> to learn about our features.
</p>
</article>
)
}