diff --git a/website/.eslintrc.json b/website/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/website/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/website/.gitignore b/website/.gitignore
new file mode 100644
index 0000000..ed785d2
--- /dev/null
+++ b/website/.gitignore
@@ -0,0 +1,20 @@
+node_modules
+.next
+out
+dist
+build
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+.env
+.env*.local
+
+.DS_Store
+*.pem
+
+.vercel
+*.tsbuildinfo
+next-env.d.ts
diff --git a/website/.prettierrc.json b/website/.prettierrc.json
new file mode 100644
index 0000000..2510718
--- /dev/null
+++ b/website/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "es5",
+ "printWidth": 90,
+ "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/website/README.md b/website/README.md
new file mode 100644
index 0000000..d3b38d1
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,70 @@
+# Folio website
+
+Marketing and documentation site for [Folio](https://github.com/woosal1337/folio),
+the local-first meeting transcription app for macOS. Built with Next.js, React,
+TypeScript, and Tailwind CSS, and styled with Folio's own design tokens. Lives in
+`website/` inside the main Folio repository.
+
+## Stack
+
+- **Next.js 15** (App Router) + **React 18**
+- **TypeScript**
+- **Tailwind CSS 3** with Folio's color, type, and motion tokens
+- **Radix UI** primitives (tabs, accordion) and **lucide-react** icons
+- **Bun** as the package manager and runtime
+
+## Develop
+
+```sh
+bun install
+bun run dev
+```
+
+The site runs at `http://localhost:3000`.
+
+## Scripts
+
+| Script | What it does |
+| --- | --- |
+| `bun run dev` | Start the dev server |
+| `bun run build` | Production build |
+| `bun run start` | Serve the production build |
+| `bun run lint` | Lint with `next lint` |
+| `bun run typecheck` | Type-check without emitting |
+| `bun run format` | Format with Prettier |
+
+## Structure
+
+```
+website/
+├── app/ # routes (landing, features, docs/*)
+│ ├── layout.tsx # fonts, dark theme, header, footer
+│ ├── page.tsx # landing page
+│ ├── features/ # features page
+│ └── docs/ # documentation (overview, install, usage, architecture, ...)
+├── components/
+│ ├── ui/ # design-system primitives (button, card, badge, tabs, ...)
+│ ├── site/ # header, footer, logo, code blocks, sections
+│ ├── landing/ # landing-page sections and visuals
+│ └── docs/ # docs shell, sidebar, pager, and content primitives
+├── lib/ # site config, docs navigation, utils
+└── public/ # logo and favicon
+```
+
+## Design
+
+Dark mode only, with a monochrome palette taken straight from the Folio desktop app
+(`src/styles/globals.css` and `tailwind.config.ts` in the repo root): near-black
+surfaces, white and gray foreground, no accent color. The logo is Folio's own app
+mark, and the wordmark is set in Spectral. Body and headings use the system font
+stack (SF Pro on macOS), matching the app.
+
+## Deploy
+
+A standard Next.js App Router project. On Vercel, set the project root to `website/`,
+keep the default build command (`next build`), and Bun is detected from `bun.lock`.
+
+## Code style
+
+No source comments, per the Folio convention. Code is kept self-explanatory through
+naming and small components. Prose belongs in the docs, not in the source.
diff --git a/website/app/docs/architecture/page.tsx b/website/app/docs/architecture/page.tsx
new file mode 100644
index 0000000..c663e87
--- /dev/null
+++ b/website/app/docs/architecture/page.tsx
@@ -0,0 +1,209 @@
+import type { Metadata } from "next";
+import { siteConfig } from "@/lib/site-config";
+import { CodeBlock } from "@/components/site/code-block";
+import {
+ DocHeader,
+ DocH2,
+ Prose,
+ Callout,
+ FieldList,
+ Field,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "Architecture",
+ description:
+ "How Folio is built, from the Rust core through the Tauri shell to the data flow that moves a meeting from microphone to markdown.",
+};
+
+const repositoryLayout = `folio/
+ Cargo.toml workspace root
+ rust-toolchain.toml Rust 1.88, both Apple targets
+ crates/
+ folio-core/ audio capture, storage, transcription, diarization
+ folio-cli/ CLI test harness
+ folio-mcp/ local MCP stdio server (notes, tasks, memories)
+ src-tauri/ Tauri 2 desktop binary
+ src/ React 18 + TypeScript + Tailwind frontend
+ Casks/ Homebrew cask (the repo doubles as its own tap)
+ docs/ repo-local documentation`;
+
+const dataFlow = `React (src/)
+ features/* + Zustand stores + shared/lib/ipc.ts
+ | invoke: JSON over Tauri IPC
+ v
+src-tauri/
+ commands/* + app/state.rs + folio-core re-exports
+ | direct function calls
+ v
+folio-core
+ audio:: + llm:: + memory:: + storage:: + transcription::
+ | OS APIs + OpenAI + whisper.cpp + SQLite
+ v
+Disk + Hardware + Network`;
+
+export default function ArchitecturePage() {
+ return (
+ <>
+ The stack
+
+
+ {siteConfig.name} is a Rust program with a desktop face. About 70
+ percent of the code is a Rust core that owns audio capture, storage,
+ and transcription. That core is wrapped by a Tauri 2 desktop binary,
+ which gives it a native window, OS permissions, and a menu-bar
+ presence without shipping a full browser engine.
+
+
+ The interface is a React 18 frontend written in TypeScript and styled
+ with Tailwind. The two halves talk over Tauri IPC. The types that
+ cross that boundary are not written twice. They are defined once in
+ Rust and generated to TypeScript with ts-rs, so the
+ frontend always sees the same shapes the core returns.
+
+
+
+ Repository layout
+
+
+ The repository is a single Cargo workspace plus the frontend and the
+ packaging it ships with. The Rust toolchain is pinned, the crates are
+ split by responsibility, and the Homebrew cask lives in the repository
+ itself, so the project doubles as its own tap.
+
+
+ The Rust core
+
+
+ The workspace holds three crates. Each has one job and a clear edge
+ against the others.
+
+
+
+
+ The framework-agnostic core. It owns audio capture, storage,
+ transcription, diarization, the agent, and the memory and task stores.
+ It is embeddable by the Tauri app, by the CLI, or by a future Swift
+ app via UniFFI.
+
+
+ A CLI test harness. It exercises the core from the terminal without
+ the desktop shell, which makes audio devices and recording easy to
+ probe in isolation.
+
+
+ The local MCP stdio server. It exposes notes, tasks, and memories to
+ MCP-aware tools with read-only access and no network hop.
+
+
+
+
+ A few rules hold across the core. FolioError is the
+ single public error type, so callers handle one shape instead of a
+ dozen. Logging goes through the tracing crate, never{" "}
+ println, and audio callbacks are alloc-free hot paths
+ that never log inside the callback body. macOS-specific code is gated
+ behind a cfg(target_os = "macos") attribute,
+ with stubs for other targets so the whole workspace still builds
+ everywhere.
+
+
+
+ Capture pipeline
+
+
+ When a meeting starts, {siteConfig.name} records two independent
+ streams. cpal captures the microphone. ScreenCaptureKit
+ captures system audio, which is everyone else on the call. Keeping the
+ streams separate is what makes the rest of the pipeline honest. Your
+ voice and the room never get mixed into one undecodable track.
+
+
+ The two streams rarely share a sample rate, so rubato{" "}
+ resamples them to a common rate, and hound writes the
+ result to WAV files on disk. The microphone track is always labelled{" "}
+ You, which the transcription and diarization steps then
+ rely on.
+
+
+
+
+ Transcription and diarization
+
+
+
+ Transcription runs locally by default. The bundled backend is
+ whisper.cpp through the whisper-rs bindings,
+ Metal-accelerated on Apple Silicon. This is the primary path and it
+ needs no network once the weights are present. The OpenAI Whisper API
+ is an opt-in fallback for faster cloud transcription on long meetings.
+ It needs an OpenAI key and it is never the default.
+
+
+ Diarization runs on-device against the system-audio track. It uses a
+ pyannote-segmentation-3.0 model plus a WeSpeaker speaker-embedding
+ model, both run through sherpa-onnx, then clusters the voices into
+ Speaker 1, Speaker 2, Speaker 3 and so on. The microphone is always{" "}
+ You, and no cloud is involved in diarization at all.
+
+
+
+ The IPC contract
+
+
+ Every Tauri command is the contract between the core and the frontend.
+ The argument and return types of those commands are defined in{" "}
+ folio-core and generated to TypeScript by{" "}
+ ts-rs. There is no second source of truth to keep in
+ sync. Running cargo test regenerates the bindings, and CI
+ catches any drift between what Rust declares and what TypeScript
+ expects, so a changed signature cannot silently reach the UI.
+
+
+
+
+ File-backed stores write in two phases. The canonical on-disk file
+ lands first. That is the .md for notes and the{" "}
+ .json for tasks. The derived index is written second. The
+ index is always rebuildable from the files, so the files are the
+ source of truth and the index is just a fast read path you can throw
+ away and regenerate.
+
+
+
+ Data flow
+
+
+ Top to bottom, a request starts in React, crosses the IPC boundary as
+ JSON, lands in the Tauri commands layer, and calls into{" "}
+ folio-core, which is the only layer that talks to the OS,
+ to OpenAI, to whisper.cpp, and to SQLite.
+
+
+
+
+ This page is the working summary. For the full account, including the
+ module boundaries inside folio-core and the reasoning
+ behind each layer, read the{" "}
+
+ architecture document
+ {" "}
+ in the repository.
+
+
+
+ );
+}
diff --git a/website/app/docs/connectors/page.tsx b/website/app/docs/connectors/page.tsx
new file mode 100644
index 0000000..abab480
--- /dev/null
+++ b/website/app/docs/connectors/page.tsx
@@ -0,0 +1,164 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import { CodeBlock } from "@/components/site/code-block";
+import {
+ DocHeader,
+ DocH2,
+ Prose,
+ Callout,
+ Steps,
+ Step,
+ FieldList,
+ Field,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "Connectors (MCP)",
+ description:
+ "Expose your transcripts, tasks, and memory to MCP-aware tools over a local stdio server, with nothing sent to a third party.",
+};
+
+const mcpConfig = `{
+ "mcpServers": {
+ "folio": {
+ "command": "folio-mcp",
+ "args": []
+ }
+ }
+}`;
+
+export default function ConnectorsPage() {
+ return (
+ <>
+ What is MCP
+
+
+ The Model Context Protocol is an open standard that lets an
+ application expose context and tools to an AI client through a small,
+ well-defined interface. A client connects to a server, lists the tools
+ it offers, and calls them on demand. The protocol does not require a
+ network. A server can run as a local process and speak to the client
+ over standard input and output.
+
+
+ {siteConfig.name} ships a local MCP server named folio-mcp.
+ It gives any MCP-aware tool read-only access to your
+ transcripts, tasks, and memories over stdio. There is no
+ cloud and no proxy. The server runs on your machine, reads from your
+ vault, and answers the client directly. The one exception is{" "}
+ create_task, which writes a new task back into your vault.
+
+
+
+ Setup
+
+
+ Enabling connectors takes two steps. Turn the server on inside{" "}
+ {siteConfig.name}, then point your MCP client at it.
+
+
+
+
+
+ Open Settings then Connectors and
+ enable the local MCP server. {siteConfig.name} runs{" "}
+ folio-mcp on your machine and serves it over{" "}
+ stdio.
+
+
+
+
+ Add the server to your MCP client configuration. The client launches{" "}
+ folio-mcp as a subprocess and talks to it over standard
+ input and output. A minimal configuration registers a single server
+ named folio with the command folio-mcp and
+ an empty argument list.
+
+
+
+
+ Compatible tools
+
+
+ Any tool that speaks the Model Context Protocol can connect to{" "}
+ folio-mcp. That includes the clients people most often
+ reach for.
+
+
+ Claude Desktop
+ Cursor
+ Claude Code
+ Any MCP client
+
+
+ The configuration shape varies slightly between clients, but the
+ server entry is the same. Register folio with the command{" "}
+ folio-mcp and no arguments.
+
+
+
+ Available tools
+
+
+ The server exposes a focused set of tools over MCP. Every tool reads
+ from your local vault. Only create_task writes.
+
+
+
+
+ Searches your stored memories and returns the entries that match a
+ query.
+
+
+ Lists your most recent meetings, newest first.
+
+
+ Returns the full transcript for a single meeting.
+
+
+ Returns the notes that fall within a start and end date.
+
+
+ Returns the notes stored under a given folder in your vault.
+
+
+ Returns the notes that involve a specific attendee.
+
+
+ Returns an exact quoted segment from a transcript with its speaker
+ attribution.
+
+
+ Searches transcripts for a decision and returns where it was made.
+
+
+ Lists the tasks held in your vault.
+
+
+ Creates a new task and writes it back into your vault. This is the one
+ write-style tool the server exposes.
+
+
+
+ Privacy and scope
+
+
+ Access runs over stdio and is read-only, with{" "}
+ create_task as the only exception. The server is scoped to
+ your local vault. Nothing is sent to a third party, and no cloud or
+ proxy sits between your client and your notes. For the full picture of
+ what stays on your machine, see the{" "}
+
+
+
+ );
+}
diff --git a/website/app/docs/faq/page.tsx b/website/app/docs/faq/page.tsx
new file mode 100644
index 0000000..27880ab
--- /dev/null
+++ b/website/app/docs/faq/page.tsx
@@ -0,0 +1,179 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import {
+ DocHeader,
+ DocH2,
+ DocH3,
+ Prose,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "FAQ",
+ description:
+ "Short answers to common questions about how Folio captures meetings, where your data lives, and which Macs it runs on.",
+};
+
+export default function FaqPage() {
+ return (
+ <>
+ Getting started
+
+
+ Does it join my calls as a bot?
+
+
+
+ No. {siteConfig.name} never joins your call. It is a menu-bar app that
+ captures the system audio on your Mac through ScreenCaptureKit, so it
+ works with any meeting tool without a participant showing up in the
+ call. There is no bot, no proxy, and no third-party service sitting
+ between you and the people you are talking to.
+
+
+
+
+ Do I need an account or API key?
+
+
+
+ No account is required. {siteConfig.name} works out of the box with
+ on-device transcription, so the local path needs no key and no sign-up.
+ An OpenAI key is only needed if you opt in to the cloud
+ transcription fallback. That fallback is never the default.
+
+
+
+
+ How does it know a meeting started?
+
+
+
+ {siteConfig.name} watches your calendar and your audio devices through
+ EventKit. When a meeting starts it records the system audio and your
+ microphone as two separate streams. There is no Google OAuth and no
+ Microsoft Graph involved.
+
+
+
+ Privacy and data
+
+
+ Does my audio ever leave my machine?
+
+
+
+ Not on the default path. Audio, transcripts, and notes stay on your
+ Mac. The only network calls {siteConfig.name} ever makes are a one-time
+ model-weights download on first use and the opt-in cloud and webhook
+ paths, all of which can be blocked. See the{" "}
+
+
+
+ Where do my notes go?
+
+
+ {siteConfig.name} writes one markdown file per meeting into a vault
+ path you choose. Each file is plain markdown you can read, edit,
+ search, and back up with any tool. The frontmatter includes attendees,
+ duration, model, and source.
+
+
+
+ Can I run it offline?
+
+
+ Yes. Privacy Mode, under Settings then{" "}
+ Privacy, physically blocks every outbound HTTP call except
+ localhost. After the model weights are downloaded once, the app keeps
+ working end to end with Wi-Fi off.
+
+
+
+ Is anything encrypted?
+
+
+ Yes. Notes are encrypted at rest with AES-256-GCM and{" "}
+ Argon2id. There is no telemetry, no analytics, and no
+ crash reporting, and that absence is enforced in CI by a dedicated
+ no-telemetry job.
+
+
+
+ Platform and pricing
+
+ Which Macs are supported?
+
+
+ {siteConfig.name} runs on {siteConfig.platform}, on Apple Silicon or
+ Intel. Apple Silicon is the performance target, where on-device
+ transcription is Metal-accelerated. Intel users build from source.
+
+
+
+ Is it free and open source?
+
+
+ Yes. {siteConfig.name} is open source under the {siteConfig.license}{" "}
+ license. You can read the code, the{" "}
+
+ license
+
+ , and the full project on{" "}
+
+ GitHub
+
+ .
+
+
+
+
+ Is there a Windows or Linux version?
+
+
+
+ No. {siteConfig.name} is macOS only. It depends on macOS frameworks
+ such as ScreenCaptureKit and EventKit for capture and meeting
+ detection, so there is no Windows or Linux build.
+
+
+
+ How do I get speaker names?
+
+
+ {siteConfig.name} runs diarization on device, on the system-audio
+ track, and clusters the voices into Speaker 1,{" "}
+ Speaker 2, Speaker 3, and so on. Your own
+ microphone track is always labelled You. No cloud is
+ involved in diarization.
+
+
+
+
+
+ Still stuck? Start from the{" "}
+
+ GitHub issues
+
+ .
+
+
+
+ );
+}
diff --git a/website/app/docs/how-to-use/page.tsx b/website/app/docs/how-to-use/page.tsx
new file mode 100644
index 0000000..2add3bf
--- /dev/null
+++ b/website/app/docs/how-to-use/page.tsx
@@ -0,0 +1,288 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { siteConfig } from "@/lib/site-config";
+import { CodeBlock, CommandLine } from "@/components/site/code-block";
+import {
+ DocHeader,
+ DocH2,
+ DocH3,
+ Prose,
+ Callout,
+ Steps,
+ Step,
+ FieldList,
+ Field,
+ Kbd,
+ DocDivider,
+ CardGrid,
+ LinkCard,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "How to use",
+ description:
+ "Go from first launch to a searchable vault of meeting notes with Folio, the local-first meeting transcription app for macOS.",
+};
+
+const exampleFrontmatter = `---
+attendees: [You, Speaker 1, Speaker 2]
+duration: 47m
+model: whisper.cpp
+source: system + microphone
+---`;
+
+export default function HowToUsePage() {
+ return (
+ <>
+ First launch
+
+
+ {siteConfig.name} is a menu-bar app. After you install it, it lives in
+ the macOS menu bar rather than the Dock, and it watches your calendar
+ and audio devices through EventKit. There is no window to keep open and
+ no bot that joins your calls.
+
+
+ On the first run, macOS prompts for two permissions. It asks for{" "}
+ microphone access so {siteConfig.name} can record your
+ voice, and for screen recording access, which is
+ required to capture system audio from the other participants. Grant
+ both. Without screen recording permission, the system-audio stream
+ cannot be captured.
+
+
+ {siteConfig.name} also downloads its model weights once on first use,
+ the first time it transcribes or diarizes locally. After that the
+ on-device path works without a network connection.
+
+
+ Finally, choose a vault path . This is the folder where{" "}
+ {siteConfig.name} writes one markdown file per meeting. Point it at a
+ plain directory, an existing notes folder, or anywhere you already back
+ up. The files are ordinary markdown, so any editor or sync tool can
+ read them.
+
+
+
+
+ Recording a conversation can be illegal without the other participants
+ consent. The rules vary by US state and by country, and many require
+ all-party consent. {siteConfig.name} gives you the tool. Obtaining
+ consent is on you. Tell people before you record.
+
+
+
+ Recording a meeting
+
+
+ {siteConfig.name} captures two independent streams for every meeting.
+ One is the system audio of everyone else on the call. The other is your
+ microphone. Keeping them separate is what makes accurate speaker labels
+ possible later.
+
+
+
+
+
+ {siteConfig.name} watches your calendar and audio devices through
+ EventKit. When a meeting begins, it has the context it needs to start
+ capturing. No meeting bot joins the call and no service is invited.
+
+
+
+
+ ScreenCaptureKit captures the system audio, and{" "}
+ cpal captures your microphone. The two are recorded as
+ distinct streams rather than one mixed track. rubato{" "}
+ handles resampling and hound writes the WAV files.
+
+
+
+
+ On the default path, the recordings never leave your Mac. Local
+ transcription with whisper.cpp and on-device diarization run against
+ the captured streams without any upload.
+
+
+
+
+ When the meeting ends, {siteConfig.name} writes a single markdown
+ file into your vault path. Your microphone track is always labelled{" "}
+ You, and the other voices are clustered into{" "}
+ Speaker 1, Speaker 2, and so on.
+
+
+
+
+ The note
+
+
+ Each meeting becomes one markdown file you can read, edit, search, and
+ back up with any tool. The file opens with YAML frontmatter, followed
+ by the speaker-labelled transcript and the decisions and tasks drawn
+ from it.
+
+
+ Frontmatter
+
+
+ The frontmatter block records the structured facts about the meeting.
+
+
+
+
+ The people on the call, including You for your microphone
+ track and the clustered speakers.
+
+ How long the meeting ran.
+
+ The transcription model that produced the text.
+
+ Where the audio came from.
+
+ Transcript, decisions, and tasks
+
+
+ Below the frontmatter sits the speaker-labelled transcript. Your own
+ microphone is always shown as You, and the system-audio
+ voices appear as Speaker 1, Speaker 2, and
+ so on. {siteConfig.name} also surfaces the decisions and tasks from the
+ conversation so the note is more than a wall of text.
+
+
+ Because the file is plain markdown, you stay in control. Rename a
+ speaker, fix a word, add a heading, or move the file. The note is yours
+ to keep.
+
+
+
+ Reviewing and searching
+
+
+ Notes accumulate into a vault you can navigate from inside{" "}
+ {siteConfig.name}. You can pull up past meetings, find the tasks that
+ came out of them, and search across the memory built from your notes.
+
+
+ The on-disk markdown files are the source of truth.{" "}
+ {siteConfig.name} uses a two-phase write, where the canonical file is
+ written first and the derived index second. The index is always
+ rebuildable from the files, so nothing is locked inside a database you
+ cannot read.
+
+
+ The same data is also reachable from MCP-aware tools through the local{" "}
+ folio-mcp server, which gives read-only access to your
+ transcripts, tasks, and memories over stdio. See{" "}
+
+
+
+ Cloud transcription
+
+
+ The default transcription path is local. {siteConfig.name} bundles
+ whisper.cpp through the whisper-rs bindings, Metal-accelerated on Apple
+ Silicon, and this is the primary path for every meeting.
+
+
+ For long meetings, the OpenAI Whisper API is available as an opt-in
+ fallback for faster cloud transcription. It needs an OpenAI key, and
+ you turn it on yourself. It is never the default, and the local path
+ keeps working without it.
+
+
+
+
+ Cloud transcription sends audio to OpenAI, so it is a deliberate
+ choice rather than a default. Leave it off and everything stays on your
+ machine. Turn it on only when the speed of a cloud run is worth it for
+ a long recording.
+
+
+
+ Privacy Mode
+
+
+ When you want {siteConfig.name} fully airgapped, turn on Privacy Mode
+ under Settings then Privacy . It
+ physically blocks every outbound HTTP call except localhost. The app
+ keeps working end to end with Wi-Fi off.
+
+
+ {siteConfig.name} makes very few network calls to begin with. A
+ one-time model-weights download happens on first local transcription or
+ diarization, and the opt-in cloud-AI and webhook paths are the only
+ others. All of them can be blocked. Notes are also encrypted at rest
+ with AES-256-GCM and Argon2id, and {siteConfig.name} ships no
+ telemetry, analytics, or crash reporting.
+
+
+ For the full picture of what stays local and what crosses the network,
+ read the
+
+
+
+ Toggle Privacy Mode, turn off Wi-Fi, and record a meeting. The capture,
+ transcription, and diarization all run on-device, so the note still
+ lands in your vault.
+
+
+
+ Next steps
+
+
+ If you have not installed {siteConfig.name} yet, start with the install
+ guide. To connect your notes to an MCP-aware tool, head to Connectors.
+
+
+
+
+ Set up {siteConfig.name} on {siteConfig.platform} with Homebrew or a
+ direct download.
+
+
+ Give Claude Desktop, Cursor, or Claude Code read-only access through{" "}
+ folio-mcp.
+
+
+ See exactly what stays on your machine and what never leaves it.
+
+
+ {siteConfig.name} is {siteConfig.license} licensed and open on GitHub.
+
+
+
+
+ Hit a snag. Open an issue on{" "}
+
+ GitHub
+ {" "}
+ or press ? inside the app.
+
+
+
+ );
+}
diff --git a/website/app/docs/installation/page.tsx b/website/app/docs/installation/page.tsx
new file mode 100644
index 0000000..1da3881
--- /dev/null
+++ b/website/app/docs/installation/page.tsx
@@ -0,0 +1,192 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import { CodeBlock, CommandLine } from "@/components/site/code-block";
+import {
+ DocHeader,
+ DocH2,
+ Prose,
+ Callout,
+ Steps,
+ Step,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "Installation",
+ description: `Install ${siteConfig.name} on ${siteConfig.platform} with Homebrew or the notarized DMG, then grant the permissions it needs to capture audio.`,
+};
+
+const homebrewCommands = `${siteConfig.install.tapCommand}\n${siteConfig.install.installCommand}`;
+
+const sourceSetupCommands = `git clone ${siteConfig.links.github}
+cd folio
+bun install
+pre-commit install
+pre-commit install --hook-type commit-msg
+pre-commit install --hook-type pre-push`;
+
+export default function InstallationPage() {
+ return (
+ <>
+ Requirements
+
+
+ Folio runs on {siteConfig.platform} . Apple Silicon is
+ the performance target, and Intel Macs are supported by building from
+ source. Local transcription is Metal-accelerated on Apple Silicon.
+
+
+
+ macOS 13 Ventura or later , on Apple Silicon or
+ Intel.
+
+
+ A one-time model-weights download on first use. The
+ first local transcription or diarization fetches a few hundred
+ megabytes of weights, then Folio works offline.
+
+
+
+
+ Homebrew
+
+
+ Homebrew is the recommended way to install Folio. Tap the cask, then
+ install it. The two commands below run in order.
+
+
+
+
+ Once installed, {siteConfig.install.upgradeCommand} tracks
+ new releases and keeps your copy current.
+
+
+
+ Direct download
+
+
+ If you prefer a direct download, grab the latest Apple Silicon{" "}
+ .dmg from the{" "}
+
+ Releases page
+
+ . The file is named Folio_<version>_aarch64.dmg.
+ Open it and drag Folio to your Applications folder.
+
+
+ Releases are code-signed with a Developer ID and notarized by Apple, so
+ they open without a Gatekeeper prompt. Intel builds are not published
+ yet. On Intel, build from source.
+
+
+
+ Build from source
+
+
+
+ You need three toolchains in place before building.
+
+
+ Rust 1.88 via rustup, pinned in{" "}
+ rust-toolchain.toml.
+
+
+ Bun 1.3+ , the only JavaScript package manager
+ and runtime this repository uses.
+
+
+ Xcode command-line tools , installed with{" "}
+ xcode-select --install.
+
+
+
+
+
+
+
+ Clone the repo, install dependencies with Bun, and register the
+ pre-commit hooks.
+
+
+
+
+
+
+ Start the app in development. The first launch compiles the Rust
+ workspace in about 30 seconds on a warm cache.
+
+
+
+
+
+ Grant permissions
+
+
+ On first run, macOS prompts for the permissions Folio needs to capture
+ a meeting. Folio watches your calendar and audio devices through
+ EventKit. No bot joins the call.
+
+
+
+
+
+
+ macOS asks for microphone permission so Folio can record your
+ voice. Your microphone track is always labelled You.
+
+
+
+
+
+
+ macOS asks for screen recording permission. Folio uses it to
+ capture system audio, the other side of the conversation, as a
+ separate stream from your microphone.
+
+
+
+
+
+
+ System audio capture on macOS goes through ScreenCaptureKit, which is
+ gated behind the screen recording permission. Without it, Folio can
+ record your microphone but not the other participants. Grant screen
+ recording so both streams are captured.
+
+
+
+ Update and uninstall
+
+ To update Folio to the latest release, run the upgrade command.
+
+
+
+ To remove the app, run brew uninstall --cask folio.
+ Uninstalling removes the application only. Your markdown vault is left
+ untouched, since notes are plain files on disk that you own. You can
+ read, search, or back them up with any tool, with or without Folio
+ installed.
+
+
+ For the full source and signed releases, see the{" "}
+
+ GitHub
+
+ .
+
+
+
+ );
+}
diff --git a/website/app/docs/layout.tsx b/website/app/docs/layout.tsx
new file mode 100644
index 0000000..0103e4e
--- /dev/null
+++ b/website/app/docs/layout.tsx
@@ -0,0 +1,27 @@
+import { DocsSidebar } from "@/components/docs/docs-sidebar";
+import { DocsMobileNav } from "@/components/docs/docs-mobile-nav";
+import { DocPager } from "@/components/docs/doc-pager";
+
+export default function DocsLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+ On the default path, audio, transcripts, and notes stay on your machine. Privacy Mode, under{" "}
+ Settings then Privacy , blocks every outbound HTTP call except{" "}
+ localhost, so you can airgap the app entirely and it still works end to end.
+
+
+
+
+ What is Folio
+
+
+ {siteConfig.name} is a menu-bar app for {siteConfig.platform}. When a meeting starts it records
+ your system audio and your microphone as two independent streams, transcribes them on-device, and writes one
+ markdown note per meeting into a vault path you choose. No meeting bot joins the call. There is no Google OAuth
+ and no Microsoft Graph. {siteConfig.name} watches your calendar and audio devices locally through EventKit.
+
+
+ The promise is simple. On the default path your audio never leaves your machine. Local transcription with{" "}
+ whisper.cpp is the primary path, on-device diarization separates voices, and the notes are plain
+ markdown files you can read, edit, search, and back up with any tool. {siteConfig.name} is{" "}
+
+ {siteConfig.license}
+ {" "}
+ licensed and open source on{" "}
+
+ GitHub
+
+ .
+
+
+
+ Core ideas
+
+
+ A few decisions shape everything else in {siteConfig.name}. Each one keeps your data on your machine and under
+ your control.
+
+
+
+ Two-stream capture. System audio and the microphone are recorded as separate streams. The
+ microphone track is always labelled You.
+
+
+ On-device transcription. The bundled backend is whisper.cpp through the{" "}
+ whisper-rs bindings, Metal-accelerated on Apple Silicon. The cloud is an opt-in fallback, never
+ the default.
+
+
+ On-device diarization. Voices on the system-audio track are clustered into Speaker 1,
+ Speaker 2, and so on, with no cloud involved.
+
+
+ One markdown note per meeting. Each meeting becomes a single markdown file in your vault,
+ with frontmatter for attendees, duration, model, and source.
+
+
+ A local MCP server. folio-mcp gives MCP-aware tools read-only access to your
+ transcripts, tasks, and memories over stdio. No cloud, no proxy.
+
+
+ Privacy Mode. A single switch physically blocks every outbound HTTP call except{" "}
+ localhost.
+
+
+
+
+ How the pieces fit
+
+
+ {siteConfig.name} runs in your menu bar and watches for meetings. When one starts it captures system audio and
+ your microphone, transcribes the audio on-device, separates the speakers, and writes a finished markdown note
+ into your vault. The vault is just a folder of files. From there your notes are searchable on disk, readable in
+ any editor, and reachable by MCP-aware tools through the local server.
+
+
+
+ Start here
+
+ Pick the path that matches what you need next.
+
+
+
+ Install with Homebrew or a signed direct download, and grant the macOS permissions {siteConfig.name} needs.
+
+
+ Record a meeting, read the resulting note, and learn how speakers and the You track appear.
+
+
+ The Rust core, the Tauri desktop binary, the three crates, and how data flows from capture to disk.
+
+
+ Wire up the local folio-mcp server so Claude, Cursor, and other MCP tools can read your notes.
+
+
+ What Folio does and does not send, Privacy Mode, encryption at rest, and recording consent.
+
+
+ Short answers to common questions about platforms, cost, cloud fallback, and your data.
+
+
+
+ );
+}
diff --git a/website/app/docs/privacy/page.tsx b/website/app/docs/privacy/page.tsx
new file mode 100644
index 0000000..ea17dc8
--- /dev/null
+++ b/website/app/docs/privacy/page.tsx
@@ -0,0 +1,186 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import { CodeBlock, CommandLine } from "@/components/site/code-block";
+import {
+ DocHeader,
+ DocH2,
+ DocH3,
+ Prose,
+ Callout,
+ Steps,
+ Step,
+ FieldList,
+ Field,
+ Kbd,
+ DocDivider,
+ CardGrid,
+ LinkCard,
+} from "@/components/docs/doc-primitives";
+
+export const metadata: Metadata = {
+ title: "Privacy & consent",
+ description:
+ "How the private path is the default path in Folio, what stays on disk, the exact network surface, and your responsibility around recording consent.",
+};
+
+export default function PrivacyPage() {
+ return (
+ <>
+ What stays local
+
+
+ {siteConfig.name} is a local-first application. It captures system
+ audio and your microphone, transcribes on-device, and writes one
+ markdown note per meeting to a vault path you choose. On the default
+ path, none of that leaves your machine.
+
+ The guarantees that hold by default:
+
+
+ No telemetry, no analytics, no crash reporting. {" "}
+ This is not a setting you trust us to honor. It is enforced in CI by
+ a dedicated no-telemetry job that runs on every push and
+ pull request to main.
+
+
+ Audio, transcripts, and notes stay on disk. The
+ recorded streams, the on-device transcription output, and every
+ markdown note are written to your machine and read from your
+ machine.
+
+
+ Notes are encrypted at rest. {siteConfig.name}{" "}
+ encrypts notes with AES-256-GCM, with key derivation
+ through Argon2id.
+
+
+
+ Local transcription runs through whisper.cpp on-device,
+ and diarization runs on-device as well. Neither path sends audio to a
+ server.
+
+
+
+ The network surface
+
+
+ It is easier to trust a tool when you can name every call it is able
+ to make. {siteConfig.name} makes only these network calls, and each one
+ can be blocked.
+
+
+
+ A one-time model-weights download. On first local
+ transcription or diarization, {siteConfig.name} downloads the model
+ weights once. This is a few hundred megabytes, pulled from Hugging
+ Face and from the sherpa-onnx GitHub releases. After
+ that, the local path needs no network at all.
+
+
+ The opt-in cloud-AI path. The OpenAI Whisper API is
+ an opt-in fallback for faster cloud transcription on long meetings.
+ It needs an OpenAI key. It is never the default, and you choose when
+ to use it.
+
+
+ The opt-in webhook path. If you wire up a webhook,
+ {" "}
+ {siteConfig.name} can call it. This is opt-in and off until you set
+ it up.
+
+
+
+ Every item in that list can be blocked. If you never enable the
+ cloud-AI path or a webhook, and you keep the model weights you already
+ downloaded, {siteConfig.name} makes no outbound calls.
+
+
+
+ Privacy Mode
+
+
+ When you want a hard guarantee instead of a careful configuration,
+ turn on Privacy Mode under Settings then{" "}
+ Privacy . Privacy Mode physically blocks every outbound
+ HTTP call except localhost. There is nothing left to
+ forget about and no path to leak through.
+
+
+ The proof is that the app keeps working. With Privacy Mode on, you can
+ turn Wi-Fi off and {siteConfig.name} still records, transcribes,
+ diarizes, and writes notes end to end. The local pipeline does not
+ depend on the network, so removing the network changes nothing about
+ the result.
+
+
+ The one prerequisite is that the model weights are already on disk. If
+ you have run a local transcription or diarization once before, the
+ one-time download has already happened and Privacy Mode has nothing it
+ needs to reach for.
+
+
+
+ Data retention
+
+
+ {siteConfig.name} does not hold your data in a place you cannot see.
+ Notes are plain markdown files in the vault path you chose. You can
+ read them, edit them, search them, and back them up with any tool you
+ already use.
+
+
+ Retention is therefore in your hands. A note exists for exactly as long
+ as the file exists. When you delete the file, the note is gone. There
+ is no separate copy to clear and no server-side record to request the
+ deletion of. The on-disk file is the canonical artifact, and the
+ derived index is always rebuildable from the files.
+
+
+ For the full account of what {siteConfig.name} stores and what it never
+ touches, read the{" "}
+
+ privacy document
+
+ .
+
+
+
+ Recording consent
+
+
+ {siteConfig.name} gives you a recording tool. Using it lawfully is your
+ responsibility, and the law here is not uniform.
+
+
+
+
+ Recording a conversation can be illegal without the other participants
+ consent. The rules vary by US state and by country, and many require
+ all-party consent. {siteConfig.name} gives you the tool. Obtaining
+ consent is your responsibility. Tell people before you record.
+
+
+
+
+
+ For the complete and authoritative account of {siteConfig.name}{" "}
+ privacy, including the full list of what stays on your machine and what
+ the opt-in paths do, read the{" "}
+
+ full privacy document
+
+ .
+
+
+
+ );
+}
diff --git a/website/app/features/page.tsx b/website/app/features/page.tsx
new file mode 100644
index 0000000..ff01c5e
--- /dev/null
+++ b/website/app/features/page.tsx
@@ -0,0 +1,219 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import {
+ AudioLines,
+ Boxes,
+ BrainCircuit,
+ Check,
+ FileText,
+ Lock,
+ Plug,
+ Users,
+} from "lucide-react";
+
+import { siteConfig } from "@/lib/site-config";
+import { cn } from "@/lib/utils";
+import { Section, SectionHeading, Eyebrow } from "@/components/site/section";
+import { Button } from "@/components/ui/button";
+import { CommandLine } from "@/components/site/code-block";
+import { NotePreview } from "@/components/landing/note-preview";
+import { CapabilityTable } from "@/components/landing/capability-table";
+
+export const metadata: Metadata = {
+ title: "Features",
+ description:
+ "Everything Folio does, in detail: two-stream capture, on-device transcription and diarization, a markdown vault you own, local connectors, and a network you control.",
+};
+
+type FeatureBlock = {
+ icon: typeof AudioLines;
+ eyebrow: string;
+ title: string;
+ description: string;
+ points: string[];
+};
+
+const blocks: FeatureBlock[] = [
+ {
+ icon: AudioLines,
+ eyebrow: "Capture",
+ title: "Two streams, kept apart",
+ description:
+ "Folio records system audio and your microphone as independent tracks, so the transcript stays clean and every line is attributable.",
+ points: [
+ "cpal captures your microphone, ScreenCaptureKit captures system audio.",
+ "No bot joins the call, so there is nothing for other people to admit.",
+ "It watches your calendar and audio devices through EventKit, with no OAuth.",
+ "rubato resamples and hound writes WAV, entirely on disk.",
+ ],
+ },
+ {
+ icon: FileText,
+ eyebrow: "Transcription",
+ title: "On-device by default",
+ description:
+ "The bundled Whisper backend runs locally and is Metal-accelerated on Apple Silicon. Cloud transcription is an explicit choice, never the default.",
+ points: [
+ "whisper.cpp through whisper-rs handles local transcription.",
+ "OpenAI Whisper is an opt-in fallback for faster runs on long meetings.",
+ "Cloud calls require your own key and are gated behind a clear prompt.",
+ "Privacy Mode keeps everything local, even on long recordings.",
+ ],
+ },
+ {
+ icon: Users,
+ eyebrow: "Diarization",
+ title: "Who said what, computed locally",
+ description:
+ "Speakers are separated on-device with pyannote segmentation and a speaker-embedding model, both run through sherpa-onnx.",
+ points: [
+ "Voices on the system track are clustered into Speaker 1, 2, 3 and so on.",
+ "Your microphone is always labelled You.",
+ "Nothing about your voiceprint leaves the machine.",
+ "The result lands inline in the markdown transcript.",
+ ],
+ },
+ {
+ icon: BrainCircuit,
+ eyebrow: "Your vault",
+ title: "One markdown note per meeting",
+ description:
+ "Every conversation becomes a portable markdown file in a vault path you choose, with structured frontmatter and a clean transcript.",
+ points: [
+ "Frontmatter records attendees, duration, model, and source.",
+ "A two-phase write keeps the file canonical and the index rebuildable.",
+ "Decisions and tasks are pulled out so you can act on them.",
+ "Plain files mean any editor, any backup, no lock-in.",
+ ],
+ },
+ {
+ icon: Plug,
+ eyebrow: "Connectors",
+ title: "Your agents can read your meetings",
+ description:
+ "A local MCP server exposes transcripts, tasks, and memory to MCP-aware tools over stdio, read-only, with no cloud in the middle.",
+ points: [
+ "Works with Claude Desktop, Cursor, Claude Code, and any MCP client.",
+ "Search past meetings without leaving your editor.",
+ "Pull decisions and action items into your own workflow.",
+ "Scoped to read-only access over a local stdio connection.",
+ ],
+ },
+ {
+ icon: Lock,
+ eyebrow: "Privacy",
+ title: "The network is opt-in",
+ description:
+ "Folio is built so the private path is the easy path. Privacy Mode airgaps the app, and there is no telemetry to turn off.",
+ points: [
+ "No telemetry, no analytics, no crash reporting, enforced in CI.",
+ "Privacy Mode blocks every outbound call except localhost.",
+ "Notes are encrypted at rest with AES-256-GCM and Argon2id.",
+ "The app runs end to end with Wi-Fi off.",
+ ],
+ },
+];
+
+function FeatureSplit({ block, index }: { block: FeatureBlock; index: number }) {
+ const flipped = index % 2 === 1;
+ return (
+
+
+
{block.eyebrow}
+
+ {block.title}
+
+
+ {block.description}
+
+
+ {block.points.map((point) => (
+
+
+
+
+ {point}
+
+
+ ))}
+
+
+
+
+
+
+
Features
+
+ Built to capture meetings without giving them away
+
+
+ {siteConfig.name} does the obvious thing well. It records, transcribes, and
+ files your meetings, and it does almost all of it on your own machine.
+
+
+
+
+
+
+
+
+
+
+ {blocks.map((block, index) => (
+
+
+
+
+
+
+
+
The output
+
+ Everything ends as a note you own
+
+
+ No dashboard to log into, no export to request. Each meeting is a markdown
+ file with frontmatter, a speaker-labelled transcript, and the decisions and
+ tasks that came out of it.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/website/app/globals.css b/website/app/globals.css
new file mode 100644
index 0000000..624169a
--- /dev/null
+++ b/website/app/globals.css
@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui,
+ sans-serif;
+ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
+ system-ui, sans-serif;
+ --font-serif: "Spectral", Georgia, ui-serif, serif;
+ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
+
+ --background: 240 7% 6%;
+ --foreground: 0 0% 92%;
+ --card: 240 6% 10%;
+ --card-foreground: 0 0% 92%;
+ --popover: 240 6% 10%;
+ --popover-foreground: 0 0% 92%;
+
+ --primary: 0 0% 92%;
+ --primary-foreground: 240 7% 8%;
+
+ --secondary: 240 6% 14%;
+ --secondary-foreground: 0 0% 90%;
+
+ --muted: 240 5% 16%;
+ --muted-foreground: 240 5% 65%;
+
+ --accent: 240 5% 18%;
+ --accent-foreground: 0 0% 92%;
+
+ --destructive: 4 65% 55%;
+ --destructive-foreground: 0 0% 95%;
+
+ --signal: 0 0% 72%;
+ --signal-foreground: 240 7% 10%;
+
+ --border: 240 6% 18%;
+ --input: 240 6% 18%;
+ --ring: 0 0% 60%;
+
+ --radius: 0.75rem;
+
+ --motion-ms-fast: 120ms;
+ --motion-ms-snap: 200ms;
+ --motion-ms-modal: 350ms;
+ --motion-ms-deliberate: 480ms;
+ --motion-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
+ --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+ --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+ --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+ --motion-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ * {
+ @apply border-border;
+ }
+
+ html {
+ scroll-behavior: smooth;
+ scroll-padding-top: 5.5rem;
+ }
+
+ body {
+ @apply bg-background font-sans text-foreground antialiased;
+
+ font-feature-settings: "ss01", "cv02", "cv03", "cv04", "cv11";
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ ::selection {
+ background: hsl(var(--primary) / 0.18);
+ }
+
+ .font-mono {
+ font-variant-numeric: tabular-nums;
+ }
+
+ ::-webkit-scrollbar {
+ width: 11px;
+ height: 11px;
+ }
+ ::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ ::-webkit-scrollbar-thumb {
+ background: hsl(var(--border));
+ border-radius: 999px;
+ border: 3px solid transparent;
+ background-clip: padding-box;
+ }
+ ::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--muted-foreground) / 0.4);
+ background-clip: padding-box;
+ border: 3px solid transparent;
+ }
+}
+
+@layer components {
+ .surface-grain {
+ background-image:
+ radial-gradient(transparent 1px, hsl(var(--background) / 0) 1px);
+ background-size: 3px 3px;
+ }
+
+ .hairline {
+ @apply border-border;
+ }
+
+ .text-balance {
+ text-wrap: balance;
+ }
+
+ .text-pretty {
+ text-wrap: pretty;
+ }
+
+ .focus-ring {
+ @apply outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ html {
+ scroll-behavior: auto;
+ }
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
new file mode 100644
index 0000000..e1995a1
--- /dev/null
+++ b/website/app/layout.tsx
@@ -0,0 +1,69 @@
+import type { Metadata, Viewport } from "next";
+
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/spectral/400.css";
+import "@fontsource/spectral/500.css";
+import "@fontsource/jetbrains-mono/400.css";
+import "@fontsource/jetbrains-mono/500.css";
+import "./globals.css";
+
+import { siteConfig } from "@/lib/site-config";
+import { SiteHeader } from "@/components/site/site-header";
+import { SiteFooter } from "@/components/site/site-footer";
+
+export const metadata: Metadata = {
+ metadataBase: new URL(siteConfig.url),
+ title: {
+ default: `${siteConfig.name} — ${siteConfig.tagline}`,
+ template: `%s — ${siteConfig.name}`,
+ },
+ description: siteConfig.description,
+ keywords: [
+ "meeting transcription",
+ "local-first",
+ "macOS",
+ "privacy",
+ "whisper",
+ "speaker diarization",
+ "markdown notes",
+ "MCP",
+ ],
+ authors: [{ name: "Folio" }],
+ openGraph: {
+ type: "website",
+ title: `${siteConfig.name} — ${siteConfig.tagline}`,
+ description: siteConfig.description,
+ url: siteConfig.url,
+ siteName: siteConfig.name,
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: `${siteConfig.name} — ${siteConfig.tagline}`,
+ description: siteConfig.description,
+ },
+ icons: {
+ icon: "/favicon.svg",
+ },
+};
+
+export const viewport: Viewport = {
+ themeColor: "#0f0f12",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{ children: React.ReactNode }>) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/website/app/not-found.tsx b/website/app/not-found.tsx
new file mode 100644
index 0000000..4f0c147
--- /dev/null
+++ b/website/app/not-found.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { FolioMark } from "@/components/site/logo";
+
+export default function NotFound() {
+ return (
+
+
+
+ 404 — not found
+
+
+ This page left your machine
+
+
+ The page you are looking for does not exist. Everything else is still local.
+
+
+
+
+
+
+
+
+ {prev ? (
+
+
+
+ {prev.title}
+
+
+ ) : (
+
+ Next
+
+
+ {next.title}
+
+
+ )}
+
+ );
+}
diff --git a/website/components/docs/doc-primitives.tsx b/website/components/docs/doc-primitives.tsx
new file mode 100644
index 0000000..d07c704
--- /dev/null
+++ b/website/components/docs/doc-primitives.tsx
@@ -0,0 +1,229 @@
+import * as React from "react";
+import Link from "next/link";
+import { AlertTriangle, ArrowUpRight, Info, Lightbulb, ShieldAlert } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Eyebrow } from "@/components/site/section";
+
+export function DocHeader({
+ eyebrow,
+ title,
+ description,
+}: {
+ eyebrow?: string;
+ title: string;
+ description?: React.ReactNode;
+}) {
+ return (
+
+ {eyebrow && {eyebrow} }
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+ );
+}
+
+export function DocH2({ id, children }: { id: string; children: React.ReactNode }) {
+ return (
+
+ );
+}
+
+export function DocH3({ id, children }: { id?: string; children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function Prose({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) {
+ return (
+ strong]:text-foreground",
+ "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-foreground",
+ "[&_blockquote]:my-4 [&_blockquote]:border-l-2 [&_blockquote]:border-primary/40 [&_blockquote]:pl-4 [&_blockquote]:italic",
+ className
+ )}
+ >
+ {children}
+
+ );
+}
+
+const calloutStyles = {
+ note: {
+ icon: Info,
+ container: "border-border bg-secondary/60",
+ accent: "text-muted-foreground",
+ },
+ tip: {
+ icon: Lightbulb,
+ container: "border-border bg-card",
+ accent: "text-foreground",
+ },
+ warning: {
+ icon: AlertTriangle,
+ container: "border-foreground/15 bg-muted/70",
+ accent: "text-foreground",
+ },
+ privacy: {
+ icon: ShieldAlert,
+ container: "border-foreground/25 bg-secondary",
+ accent: "text-foreground",
+ },
+} as const;
+
+export function Callout({
+ variant = "note",
+ title,
+ children,
+}: {
+ variant?: keyof typeof calloutStyles;
+ title?: string;
+ children: React.ReactNode;
+}) {
+ const style = calloutStyles[variant];
+ const Icon = style.icon;
+ return (
+
+
+
+ {title &&
{title}
}
+
+ {children}
+
+
+
{children}
+ );
+}
+
+export function Step({
+ n,
+ title,
+ children,
+}: {
+ n: number;
+ title: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {n}
+
+ {title}
+
+ {children}
+
+
+ );
+}
+
+export function FieldList({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function Field({
+ name,
+ type,
+ children,
+}: {
+ name: string;
+ type?: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {name}
+ {type && {type} }
+
+ {children}
+
+ );
+}
+
+export function Kbd({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+export function DocDivider() {
+ return {children}
;
+}
+
+export function LinkCard({
+ href,
+ title,
+ children,
+ external,
+}: {
+ href: string;
+ title: string;
+ children: React.ReactNode;
+ external?: boolean;
+}) {
+ return (
+
+
+ {title}
+
+
+ {children}
+
+ );
+}
diff --git a/website/components/docs/docs-mobile-nav.tsx b/website/components/docs/docs-mobile-nav.tsx
new file mode 100644
index 0000000..ce18178
--- /dev/null
+++ b/website/components/docs/docs-mobile-nav.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { usePathname } from "next/navigation";
+import { ChevronDown, Menu } from "lucide-react";
+
+import { docsFlat } from "@/lib/docs-nav";
+import { DocsSidebar } from "@/components/docs/docs-sidebar";
+
+export function DocsMobileNav() {
+ const pathname = usePathname();
+ const [open, setOpen] = React.useState(false);
+ const current = docsFlat.find((item) => item.href === pathname);
+
+ return (
+
+
setOpen((value) => !value)}
+ aria-expanded={open}
+ className="flex w-full items-center justify-between rounded-lg border border-border bg-card px-4 py-2.5 text-ms-15 font-medium shadow-sm focus-ring"
+ >
+
+
+
+ {open && (
+
+ setOpen(false)} />
+
+ )}
+
+ {docsNav.map((section) => (
+
+
+ {section.title}
+
+
+ {section.items.map((item) => {
+ const active = pathname === item.href;
+ return (
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/website/components/landing/capability-table.tsx b/website/components/landing/capability-table.tsx
new file mode 100644
index 0000000..77bd97d
--- /dev/null
+++ b/website/components/landing/capability-table.tsx
@@ -0,0 +1,63 @@
+import { Check, Minus } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type Row = {
+ capability: string;
+ local: boolean;
+ detail: string;
+};
+
+const rows: Row[] = [
+ { capability: "Audio capture", local: true, detail: "cpal + ScreenCaptureKit" },
+ { capability: "Transcription", local: true, detail: "whisper.cpp, Metal-accelerated" },
+ { capability: "Speaker diarization", local: true, detail: "pyannote + sherpa-onnx" },
+ { capability: "Note storage", local: true, detail: "Markdown in your vault" },
+ { capability: "Encryption at rest", local: true, detail: "AES-256-GCM + Argon2id" },
+ { capability: "Connectors (MCP)", local: true, detail: "stdio, read-only" },
+ { capability: "Cloud transcription", local: false, detail: "Opt-in OpenAI Whisper" },
+ { capability: "Chat & webhooks", local: false, detail: "Opt-in, Privacy Mode blocks" },
+];
+
+export function CapabilityTable() {
+ return (
+
+
+ Capability
+ Runs
+ Backend
+
+
+ {rows.map((row) => (
+
+ {row.capability}
+
+ {row.local ? (
+ <>
+
+ {row.detail}
+
+ ))}
+
+
+
+
+
+
+ {tools.map((tool) => (
+
+
+ ))}
+
+
+
+
+
+
+ Search past meetings without leaving your editor.
+ Pull decisions and action items into your workflow.
+ Everything runs on stdio, scoped to read-only.
+
+
+
+
+
+ );
+}
diff --git a/website/components/landing/cta-section.tsx b/website/components/landing/cta-section.tsx
new file mode 100644
index 0000000..120f94f
--- /dev/null
+++ b/website/components/landing/cta-section.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import { siteConfig } from "@/lib/site-config";
+import { Button } from "@/components/ui/button";
+import { CommandLine } from "@/components/site/code-block";
+import { FolioMark } from "@/components/site/logo";
+import { WaveBars } from "@/components/landing/wave-bars";
+
+export function CtaSection() {
+ return (
+
+
+
+
+
+
+ Own your meeting notes
+
+
+ Install {siteConfig.name}, grant microphone and screen-recording permission,
+ and your next meeting writes itself to your vault.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/website/components/landing/faq-section.tsx b/website/components/landing/faq-section.tsx
new file mode 100644
index 0000000..1a8b42d
--- /dev/null
+++ b/website/components/landing/faq-section.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link";
+
+import { Section, SectionHeading } from "@/components/site/section";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const faqs = [
+ {
+ question: "Does my audio ever leave my machine?",
+ answer:
+ "Not on the default path. Capture, transcription, and diarization all run on-device. The only network calls are the one-time model download and the opt-in cloud-AI and webhook paths, all of which Privacy Mode can block.",
+ },
+ {
+ question: "Does it join my calls as a bot?",
+ answer:
+ "No. Folio captures system audio directly through ScreenCaptureKit, so there is no bot in the meeting and nothing for other participants to admit.",
+ },
+ {
+ question: "Where do my notes go?",
+ answer:
+ "Each meeting becomes a markdown file in the vault path you choose, with frontmatter for attendees, duration, model, and source. They are plain files you can read, edit, and back up however you like.",
+ },
+ {
+ question: "Do I need an account or API key?",
+ answer:
+ "No account, ever. Local transcription works out of the box. An OpenAI key is only needed if you opt into cloud transcription or chat features.",
+ },
+ {
+ question: "Which Macs are supported?",
+ answer:
+ "macOS 13 Ventura or later, on Apple Silicon or Intel. Apple Silicon is the performance target and gets Metal-accelerated Whisper.",
+ },
+];
+
+export function FaqSection() {
+ return (
+
+
+
+
+ {faqs.map((faq) => (
+
+ {faq.question}
+ {faq.answer}
+
+ ))}
+
+
+ More in the{" "}
+
+
+ );
+}
diff --git a/website/components/landing/feature-grid.tsx b/website/components/landing/feature-grid.tsx
new file mode 100644
index 0000000..9e3e2b7
--- /dev/null
+++ b/website/components/landing/feature-grid.tsx
@@ -0,0 +1,100 @@
+import {
+ AudioLines,
+ Braces,
+ FileText,
+ Plug,
+ ShieldCheck,
+ Users,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Section, SectionHeading } from "@/components/site/section";
+import { WaveBars } from "@/components/landing/wave-bars";
+
+type Feature = {
+ icon: typeof FileText;
+ title: string;
+ description: string;
+ className?: string;
+ accent?: boolean;
+};
+
+const features: Feature[] = [
+ {
+ icon: AudioLines,
+ title: "Two streams, captured separately",
+ description:
+ "System audio and your microphone are recorded as independent tracks via cpal and ScreenCaptureKit, so the transcript stays clean and attributable.",
+ className: "lg:col-span-2",
+ accent: true,
+ },
+ {
+ icon: ShieldCheck,
+ title: "Private by default",
+ description:
+ "The default path keeps audio, transcripts, and notes on your machine. Privacy Mode physically blocks every outbound call except localhost.",
+ },
+ {
+ icon: Users,
+ title: "On-device diarization",
+ description:
+ "Speakers are separated locally with pyannote segmentation and a speaker-embedding model. Your microphone is always labelled You.",
+ },
+ {
+ icon: FileText,
+ title: "One markdown note per meeting",
+ description:
+ "Every meeting becomes a portable markdown file in your own vault, with frontmatter for attendees, duration, model, and source.",
+ className: "lg:col-span-2",
+ },
+ {
+ icon: Plug,
+ title: "Connect your tools",
+ description:
+ "A local MCP server gives Claude, Cursor, and Claude Code read-only access to your transcripts, tasks, and memory over stdio.",
+ },
+ {
+ icon: Braces,
+ title: "Yours to own",
+ description:
+ "Plain files on disk, an open IPC contract, and an Apache-2.0 codebase. No lock-in, no account, no cloud dependency.",
+ className: "lg:col-span-2",
+ },
+];
+
+export function FeatureGrid() {
+ return (
+
+
+ {features.map((feature) => (
+
+
+
+
+ {feature.accent && (
+
+ {feature.title}
+
+ {feature.description}
+
+
+ ))}
+
+ );
+}
diff --git a/website/components/landing/hero.tsx b/website/components/landing/hero.tsx
new file mode 100644
index 0000000..b0f0824
--- /dev/null
+++ b/website/components/landing/hero.tsx
@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { ArrowRight, ShieldCheck } from "lucide-react";
+
+import { siteConfig } from "@/lib/site-config";
+import { Button } from "@/components/ui/button";
+import { CommandLine } from "@/components/site/code-block";
+import { NotePreview } from "@/components/landing/note-preview";
+
+export function Hero() {
+ return (
+
+
+
+
+
+
+
+
+ Meeting notes that never leave your Mac.
+
+
+
+ {siteConfig.name} captures system audio and your microphone, transcribes
+ on-device, and writes a clean markdown note per meeting to your own vault.
+ Private by default.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/website/components/landing/how-it-works.tsx b/website/components/landing/how-it-works.tsx
new file mode 100644
index 0000000..a4e0c07
--- /dev/null
+++ b/website/components/landing/how-it-works.tsx
@@ -0,0 +1,68 @@
+import { CalendarClock, Mic, ScrollText, Sparkles } from "lucide-react";
+
+import { Section, SectionHeading } from "@/components/site/section";
+
+const steps = [
+ {
+ icon: CalendarClock,
+ step: "01",
+ title: "It notices the meeting",
+ description:
+ "Folio watches your calendar and audio devices through EventKit. No Google OAuth, no Microsoft Graph, no meeting bots.",
+ },
+ {
+ icon: Mic,
+ step: "02",
+ title: "It records both sides",
+ description:
+ "When the call starts, system audio and your microphone are captured as separate streams and written to WAV on disk.",
+ },
+ {
+ icon: ScrollText,
+ step: "03",
+ title: "It transcribes locally",
+ description:
+ "The bundled Whisper backend transcribes on-device and diarizes speakers. Cloud transcription is an explicit opt-in, never the default.",
+ },
+ {
+ icon: Sparkles,
+ step: "04",
+ title: "It writes the note",
+ description:
+ "A markdown file lands in your vault with frontmatter, speaker-labelled transcript, decisions, and tasks. Searchable forever.",
+ },
+];
+
+export function HowItWorks() {
+ return (
+
+
+ {steps.map((item) => (
+
+
+
+
+
+ {item.step}
+
+
+ {item.title}
+
+ {item.description}
+
+
+ ))}
+
+
+ );
+}
diff --git a/website/components/landing/install-section.tsx b/website/components/landing/install-section.tsx
new file mode 100644
index 0000000..0372f96
--- /dev/null
+++ b/website/components/landing/install-section.tsx
@@ -0,0 +1,71 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import { siteConfig } from "@/lib/site-config";
+import { Section, SectionHeading } from "@/components/site/section";
+import { Button } from "@/components/ui/button";
+import { CodeBlock } from "@/components/site/code-block";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const homebrew = `${siteConfig.install.tapCommand}
+${siteConfig.install.installCommand}`;
+
+const source = `git clone ${siteConfig.links.github}.git
+cd folio
+bun install
+bun tauri dev`;
+
+export function InstallSection() {
+ return (
+
+
+
+
+
+
+ Homebrew
+ Direct download
+ From source
+
+
+
+
+
+
+
+
+ Grab the latest Apple Silicon .dmg{" "}
+ from the releases page, open it, and drag Folio to Applications. Builds
+ are code-signed and notarized, so they open without a Gatekeeper prompt.
+
+
+
+
+
+
+
+
+
+ Already installed? Update any time with{" "}
+
+ {siteConfig.install.upgradeCommand}
+
+ .
+
+
+ );
+}
diff --git a/website/components/landing/note-preview.tsx b/website/components/landing/note-preview.tsx
new file mode 100644
index 0000000..40a3e4d
--- /dev/null
+++ b/website/components/landing/note-preview.tsx
@@ -0,0 +1,74 @@
+import { FileText, Hash, Lock } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { WaveBars } from "@/components/landing/wave-bars";
+
+const transcript = [
+ { speaker: "You", tone: "primary", line: "Let's lock the launch date before we scope the rest." },
+ { speaker: "Speaker 2", tone: "muted", line: "Works for me. I'll own the migration checklist." },
+ { speaker: "Speaker 3", tone: "muted", line: "I can have the pricing page ready by Thursday." },
+ { speaker: "You", tone: "primary", line: "Decision: ship on the 24th, freeze scope Friday." },
+];
+
+export function NotePreview({ className }: { className?: string }) {
+ return (
+
+
+
+
+ launch-sync-2026-06-18.md
+
+
+
+
+
+
+
+
+ title : Launch sync
+
+
+ attendees : You, Speaker 2, Speaker 3
+
+
+ duration : 28m · model : whisper-large-v3
+
+
+ source : on-device
+
+
+
+
+ {transcript.map((row, index) => (
+
+
+ {row.speaker}
+
+
{row.line}
+
+ ))}
+
+
+
+
+ 1 decision · 2 tasks
+
+
+
+
+
+
+
+
+ {guarantees.map((item) => (
+
+
+
+
+ {item}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ Privacy Mode
+
+
+
+
+
+ {egress.map((row) => (
+
+ {row.label}
+
+ {row.status}
+
+
+ ))}
+
+
+ Full details, retention, and the recording-consent guide live in the{" "}
+
+
+
+ );
+}
diff --git a/website/components/landing/trust-bar.tsx b/website/components/landing/trust-bar.tsx
new file mode 100644
index 0000000..4642212
--- /dev/null
+++ b/website/components/landing/trust-bar.tsx
@@ -0,0 +1,27 @@
+import { Cpu, GitBranch, MicOff, WifiOff } from "lucide-react";
+
+const signals = [
+ { icon: Cpu, label: "On-device transcription", detail: "Metal-accelerated Whisper" },
+ { icon: WifiOff, label: "Works fully offline", detail: "Privacy Mode airgap" },
+ { icon: MicOff, label: "No bots in your calls", detail: "System audio capture" },
+ { icon: GitBranch, label: "Open source", detail: "Apache-2.0 licensed" },
+];
+
+export function TrustBar() {
+ return (
+
+
+ {signals.map((item) => (
+
+
+
{item.label}
+
{item.detail}
+
+ ))}
+
+ );
+}
diff --git a/website/components/landing/wave-bars.tsx b/website/components/landing/wave-bars.tsx
new file mode 100644
index 0000000..c149ba4
--- /dev/null
+++ b/website/components/landing/wave-bars.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+const pattern = [
+ 0.3, 0.55, 0.85, 0.45, 0.7, 1, 0.6, 0.35, 0.8, 0.5, 0.9, 0.4, 0.65, 0.95, 0.5, 0.75,
+ 0.35, 0.6, 0.85, 0.45,
+];
+
+export function WaveBars({
+ className,
+ bars = pattern,
+ animated = true,
+}: {
+ className?: string;
+ bars?: number[];
+ animated?: boolean;
+}) {
+ return (
+
+ {bars.map((height, index) => (
+
+ );
+}
diff --git a/website/components/site/code-block.tsx b/website/components/site/code-block.tsx
new file mode 100644
index 0000000..66ebfdd
--- /dev/null
+++ b/website/components/site/code-block.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import { Check, Copy } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function CopyButton({ value, className }: { value: string; className?: string }) {
+ const [copied, setCopied] = React.useState(false);
+
+ const copy = React.useCallback(() => {
+ void navigator.clipboard.writeText(value).then(() => {
+ setCopied(true);
+ window.setTimeout(() => setCopied(false), 1600);
+ });
+ }, [value]);
+
+ return (
+
+ {copied ? (
+
+ );
+}
+
+export function CodeBlock({
+ code,
+ label,
+ className,
+}: {
+ code: string;
+ label?: string;
+ className?: string;
+}) {
+ return (
+
+
+
+ {label ?? "shell"}
+
+
+
+ {code}
+
+
+
+
+ $
+
+ {command}
+
+
+ );
+}
diff --git a/website/components/site/logo.tsx b/website/components/site/logo.tsx
new file mode 100644
index 0000000..1d66e19
--- /dev/null
+++ b/website/components/site/logo.tsx
@@ -0,0 +1,118 @@
+import { cn } from "@/lib/utils";
+import { siteConfig } from "@/lib/site-config";
+
+export function FolioMark({ className }: { className?: string }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function Logo({
+ className,
+ showWordmark = true,
+}: {
+ className?: string;
+ showWordmark?: boolean;
+}) {
+ return (
+
+
+ {siteConfig.wordmark}
+
+ )}
+
+ );
+}
diff --git a/website/components/site/mobile-nav.tsx b/website/components/site/mobile-nav.tsx
new file mode 100644
index 0000000..7fb84ad
--- /dev/null
+++ b/website/components/site/mobile-nav.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { mainNav, siteConfig } from "@/lib/site-config";
+import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/site/logo";
+
+export function MobileNav() {
+ const [open, setOpen] = React.useState(false);
+
+ React.useEffect(() => {
+ document.body.style.overflow = open ? "hidden" : "";
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [open]);
+
+ return (
+
+
setOpen(true)}
+ aria-label="Open menu"
+ className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-ring"
+ >
+
+
+ {open && (
+
+
+ setOpen(false)}
+ aria-label="Close menu"
+ className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-ring"
+ >
+
+
+
+ {mainNav.map((item) => (
+
+
+
+
+ )}
+
& { containerClassName?: string }) {
+ return (
+
+ );
+}
+
+export function Eyebrow({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ );
+}
+
+export function SectionHeading({
+ eyebrow,
+ title,
+ description,
+ align = "left",
+ className,
+}: {
+ eyebrow?: string;
+ title: React.ReactNode;
+ description?: React.ReactNode;
+ align?: "left" | "center";
+ className?: string;
+}) {
+ return (
+
+ {eyebrow && (
+
{eyebrow}
+ )}
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+
+
+ {siteConfig.description}
+
+
+
+ github.com/woosal1337/folio
+
+
+
+
+ {footerNav.map((group) => (
+
+
+ {group.title}
+
+
+ {group.items.map((item) => (
+
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {siteConfig.license} licensed. Built for {siteConfig.platform}. Audio stays on
+ your machine.
+
+
+ Folio v{siteConfig.version}
+
+
+
+ );
+}
diff --git a/website/components/site/site-header.tsx b/website/components/site/site-header.tsx
new file mode 100644
index 0000000..027b423
--- /dev/null
+++ b/website/components/site/site-header.tsx
@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { Github } from "lucide-react";
+
+import { mainNav, siteConfig } from "@/lib/site-config";
+import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/site/logo";
+import { MobileNav } from "@/components/site/mobile-nav";
+
+export function SiteHeader() {
+ return (
+
+ );
+}
diff --git a/website/components/ui/accordion.tsx b/website/components/ui/accordion.tsx
new file mode 100644
index 0000000..d3400b4
--- /dev/null
+++ b/website/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/website/components/ui/badge.tsx b/website/components/ui/badge.tsx
new file mode 100644
index 0000000..6b30d4b
--- /dev/null
+++ b/website/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "border-border text-foreground",
+ accent: "border-transparent bg-accent text-accent-foreground",
+ signal: "border-transparent bg-signal text-signal-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return
;
+}
+
+export { Badge, badgeVariants };
diff --git a/website/components/ui/button.tsx b/website/components/ui/button.tsx
new file mode 100644
index 0000000..8dd7924
--- /dev/null
+++ b/website/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-card hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-11 rounded-lg px-6 text-[15px]",
+ xl: "h-14 rounded-lg px-8 text-base",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+export const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+ >(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/website/components/ui/separator.tsx b/website/components/ui/separator.tsx
new file mode 100644
index 0000000..295d54d
--- /dev/null
+++ b/website/components/ui/separator.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Separator({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.HTMLAttributes & {
+ orientation?: "horizontal" | "vertical";
+}) {
+ return (
+
+ );
+}
diff --git a/website/components/ui/tabs.tsx b/website/components/ui/tabs.tsx
new file mode 100644
index 0000000..224902e
--- /dev/null
+++ b/website/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/public/folio-logo.svg b/website/public/folio-logo.svg
new file mode 100644
index 0000000..1fcf80a
--- /dev/null
+++ b/website/public/folio-logo.svg
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
new file mode 100644
index 0000000..5345721
--- /dev/null
+++ b/website/tailwind.config.ts
@@ -0,0 +1,124 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+ darkMode: ["class", '[data-theme="dark"]'],
+ content: [
+ "./app/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./lib/**/*.{ts,tsx}",
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "1.5rem",
+ screens: {
+ "2xl": "1200px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ signal: {
+ DEFAULT: "hsl(var(--signal))",
+ foreground: "hsl(var(--signal-foreground))",
+ },
+ },
+ borderRadius: {
+ "2xl": "calc(var(--radius) + 8px)",
+ xl: "calc(var(--radius) + 4px)",
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ fontFamily: {
+ sans: ["var(--font-sans)", "-apple-system", "BlinkMacSystemFont", "system-ui", "sans-serif"],
+ display: ["var(--font-display)", "-apple-system", "BlinkMacSystemFont", "system-ui", "sans-serif"],
+ serif: ["var(--font-serif)", "Spectral", "Georgia", "ui-serif", "serif"],
+ wordmark: ["var(--font-serif)", "Spectral", "Georgia", "ui-serif", "serif"],
+ mono: ["var(--font-mono)", "JetBrains Mono", "ui-monospace", "monospace"],
+ },
+ fontSize: {
+ "2xs": ["0.6875rem", { lineHeight: "1rem" }],
+ "ms-13": ["0.8125rem", { lineHeight: "1.125rem" }],
+ "ms-15": ["0.9375rem", { lineHeight: "1.375rem" }],
+ "ms-17": ["1.0625rem", { lineHeight: "1.5rem" }],
+ "ms-22": ["1.375rem", { lineHeight: "1.75rem" }],
+ "ms-28": ["1.75rem", { lineHeight: "2.125rem" }],
+ "ms-34": ["2.125rem", { lineHeight: "2.5rem" }],
+ "ms-45": ["2.8125rem", { lineHeight: "3.25rem" }],
+ "ms-57": ["3.5625rem", { lineHeight: "1.05" }],
+ "ms-72": ["4.5rem", { lineHeight: "1.02" }],
+ },
+ maxWidth: {
+ prose: "44rem",
+ },
+ boxShadow: {
+ soft: "0 1px 2px hsl(20 14% 10% / 0.04), 0 8px 24px hsl(20 14% 10% / 0.06)",
+ lift: "0 2px 4px hsl(20 14% 10% / 0.05), 0 18px 48px hsl(20 14% 10% / 0.10)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ "pulse-record": {
+ "0%, 100%": { opacity: "1" },
+ "50%": { opacity: "0.5" },
+ },
+ "fade-up": {
+ from: { opacity: "0", transform: "translateY(12px)" },
+ to: { opacity: "1", transform: "translateY(0)" },
+ },
+ "wave-rise": {
+ "0%, 100%": { transform: "scaleY(0.35)" },
+ "50%": { transform: "scaleY(1)" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ "pulse-record": "pulse-record 1.4s ease-in-out infinite",
+ "fade-up": "fade-up 0.5s cubic-bezier(0.32, 0.72, 0, 1) both",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 0000000..0c66908
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [{ "name": "next" }],
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}