red-idea

byAHMED Kallol

Act as an expert Next.js, Tailwind CSS, and TypeScript developer. I want to build a clean, responsive web app called "Quran Studio" — a digital audio library and study dashboard. ### 1. VISUAL THEME & LAYOUT - Aesthetic: Modern, minimalist editorial design. Color palette: Deep emerald/forest green (#064e3b), slate grays, soft off-white backgrounds, with subtle gold accent highlights. - Layout: A persistent left sidebar (Links: "Library", "Reciters", "My Studio", "Settings") + a large main content area. - Typography: Clean sans-serif for UI; ensure any Arabic script rendered uses a clean, highly legible Naskh-style font with proper Right-to-Left (RTL) text alignment. ### 2. THE DATA SOURCE (CRUCIAL) Do not hardcode or mock the Quran text. Fetch the catalog dynamically from the free, public API: `https://api.alquran.cloud/v1/surah`. From this JSON, map these specific fields to the UI: - `number` (The 1-114 index) - `englishName` (e.g., "Al-Faatiha") - `name` (The Arabic text) - `englishNameTranslation` (e.g., "The Opening") - `numberOfAyahs` (e.g., 7) - `revelationType` ("Meccan" or "Medinan") ### 3. MAIN VIEW: THE "BIBLIOTHÈQUE" (CATALOG) - Top Bar: A search input (filters the grid live by Surah English name, Arabic name, or Number) + a Filter Dropdown (All, Meccan Only, Medinan Only). - The Grid: A responsive 3-to-4 column grid of Surah Cards. - Card Anatomy: - Top Left: The Surah `number` inside a subtle circular badge. - Top Right: The `name` (Arabic script). - Center: `englishName` in bold, with `englishNameTranslation` directly beneath it in a smaller, muted font. - Footer: A pill-tag showing "[X] Verses" and a separate pill showing "[Meccan/Medinan]". - Hover effect: Cards should have a very subtle upward lift and border-highlight on hover. ### 4. THE SURAH DETAIL VIEW (ON CARD CLICK) When a user clicks a card, open a clean view for that Surah: - Fetch the verses from `https://api.alquran.cloud/v1/surah/{number}/editions/quran-uthmani,en.asad` - Display the verses stacked vertically. Each row shows the Arabic on the right, and the English translation on the left. - Attach a fixed, floating Audio Player to the bottom of the screen linked to Mishary Rashid Alafasy's free audio stream for that Surah: `https://cdn.islamic.network/quran/audio-surah/128/ar.alafasy/{number}.mp3`. - The player needs: Play/Pause, a working scrub bar, current time / duration, and a 1x / 1.25x / 1.5x speed toggle. ### 5. TECHNICAL REQUIREMENTS - Use `lucide-react` for all iconography. - Include sleek, shimmering Skeleton Loaders for the grid while the API fetches. - Write clean, strictly typed TypeScript.