Decinote is a production-grade Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS 4 SaaS website template purpose-built for AI meeting assistants, acoustic transcription platforms, decision-tracking workspaces, and modern developer/productivity tools.

Designed with a distinctive Darkroom Editorial Craft & Tactile Acoustic Precision aesthetic (#100904 Walnut Shadow, #382416 Bark Brown, #ffedd7 Warm Cream, #dc5000 Ember Accent), Decinote moves away from generic SaaS templates and delivers an authentic, interactive product showcase out of the box.

✨ Key Highlights

• 9 Complete, Purpose-Built Pages: Home, Features, How It Works, Interactive Demo, Pricing, Integrations, Use Cases, About, and Contact & FAQ.
• Interactive 3-Pane Meeting Ledger Sandbox (/demo): A self-contained client-side workspace featuring 4 realistic meeting scenarios, speaker-attributed diarized transcripts, executive summaries, verified decision cards, live keyword & speaker filtering, persistent action-item checklists (localStorage), custom follow-up task creation, and instant Markdown (.md), JSON (.json), and Plain Text (.txt) file exports.
• Interactive Pricing & Pipeline Explorers: Functional Monthly / Annual (-20%) billing toggle, interactive seat estimator, 8-module capability inspector, 6-stage pipeline stepper, and filterable webhook/integration directory.
• Motion & Micro-Interactions: Powered by motion/react and custom React Bits components (BlurText, CountUp, DecryptedText, SpotlightCard, Magnet) with full prefers-reduced-motion accessibility compliance.
• Centralized Customization: Update brand identity, navigation, contact details, design tokens (tokens.json & src/styles/globals.css), and structured content modules from clean, strictly typed files.

📄 Included Pages (9 Routes)

1. Home (/) — Architectural cutting-mat hero lockup, 90-second workflow dialog, 3-column void-mode comparison, interactive 3-pane mini-demo preview, 8 core modules grid, and animated adoption metrics.
2. Features (/features) — Interactive 8-module capability inspector (Raw Input Stream vs. Extracted Output Artifact) and technical breakdown.
3. How It Works (/how-it-works) — Interactive 6-stage operational pipeline stepper from calendar ingestion to portable record export.
4. Interactive Demo (/demo) — Full client-side product sandbox with 4 meeting datasets, speaker filter, live search, task creation, localStorage persistence, and .md/.json/.txt exports.
5. Pricing (/pricing) — Monthly/Annual billing toggle, interactive seat estimator (1–100 seats), 3 workspace tiers (Studio, Growth Bench, Governance), 12-row comparison matrix, and pricing FAQ.
6. Integrations (/integrations) — Filterable connector directory across 5 categories plus an interactive signed JSON webhook payload inspector.
7. Use Cases (/use-cases) — 5 specialized team playbooks (Product Teams, Remote Teams, Agencies, Sales Teams, Customer Success) with direct links into matching demo scenarios.
8. About (/about) — Studio narrative, darkroom editorial philosophy, 4 architectural principles, and leadership directory.
9. Contact & FAQ (/contact) — Client-side validated inquiry form with custom Radix Select controls, studio coordinates, and filterable technical FAQ accordion.

🛠 Tech Stack & Quality Baseline

• Framework: Next.js 16.4.0 (App Router, Static Prerendering, Turbopack)
• UI Library: React 19.3.0 & TypeScript 5 (strict: true)
• Styling: Tailwind CSS 4 + CSS Custom Properties (tokens.json)
• UI Primitives: Radix UI (Accordion, Dialog, Select, Tabs, Slot) + lucide-react icons
• Animations: motion (motion/react) + Adapted React Bits components
• Testing & Verification: Vitest unit tests + Playwright E2E & @axe-core/playwright accessibility suites included
• Documentation: Comprehensive README.md and docs/ folder covering Getting Started, Customization, Architecture, Data & Storage, and Scope/Limitations.