Quantum Languages Institute

Objective: Build an open-source, highly innovative web platform inspired by the Quantum Languages Institute (https://www.youtube.com/@QuantumLanguagesInstitute), mapping the core "mental infrastructure" of the five main Romance languages: Romanian, Spanish, French, Italian, and Catalan. Core Architecture: * Framework & Styling: A responsive, ultra-modern Single Page Application (SPA) built using Next.js (App Router) or React/Vite with Tailwind CSS and Framer Motion for smooth interface transitions. * State Management: Lightweight React Context or Zustand to manage the globally active languages, active verbs, and user UI preferences (e.g., matrix view vs. single-language deep dive). * Data Architecture: A highly structured, static `languages-db.json` file acting as the local database. It must strictly contain complete data structures for 50 essential verbs, subject pronouns, definite/indefinite articles, and gender-marking rules mapped symmetrically across all 5 target languages. Key Visual & Interactive Features: 1. The Comparative Matrix Dashboard * Dynamic Column Toggling: A multi-select grid controller allowing users to toggle columns for individual languages on/off (e.g., comparing just Romanian and Catalan, or expanding to all 5). * Synchronized Scrolling & Row Alignment: When viewing concepts side-by-side (like Subject Pronouns), the rows must perfectly align horizontally (e.g., Eu / Yo / Je / Io / Jo) to explicitly highlight the shared Latin DNA. 2. The Verb Forge (Interactive Conjugation Engine) * Live Inflection Highlight: A component where selecting an infinitive verb dynamically renders its conjugation. * Visual Stem Color-Coding: The AI agent must implement a string-diffing style layout. Regular verb endings should render in the standard text color, while irregular stem mutations or unique phonetic changes (common in Romanian and Catalan) must instantly color-code (e.g., text-red-500) upon activation. * The Pronoun Slider: A vertical slider or rapid-toggle component that cycles through 1st, 2nd, and 3rd person (singular/plural), instantly auto-focusing and zooming in on that exact conjugated cell within the dashboard. 3. Visual Mnemonics & Micro-Interactions * Interactive SVG Cards: Instead of static images, embed inline SVGs that animate via CSS/Framer Motion on hover. - Example: For grammatical gender, a balance-scale SVG that tilts based on masculine/feminine article selections. - Example: An "Inflective Arrow" animation showing how a suffix attaches to a Romanian noun vs. preceding a Spanish noun. * Acoustic Blueprint (Text-to-Speech): Integration of a lightweight, native Web Speech API wrapper. Clicking any word or conjugated verb triggers a high-quality browser Text-to-Speech (TTS) engine localized to the corresponding language code (ro-RO, es-ES, fr-FR, it-IT, ca-ES). 4. UI Design System * Typography: A high-legibility, geometric sans-serif typeface (e.g., Inter or Geist Sans) optimized for scannable layout structures. * Bite-Sized Modular Layouts: A strict UI rule forbidding text blocks longer than 3 lines. All grammatical explanations must be broken down into interactive tooltips, data badges, or micro-tables. * Quantum Dark/Light Mode: A system-default adaptive dark theme utilizing deep slate colors (bg-slate-950) with vibrant neon accents (text-emerald-400, text-cyan-400) to evoke an advanced "institute" aesthetic, flippable to a crisp, high-contrast light mode.