Merge branch 'develop' into feature/RZA-250034

.vscode/dictionaries/project-words.txt

@@ -23,13 +23,15 @@ jsonify
 kmeans
 linalg
 lucide
+matras
 Organja
 orgenja
 Peina
 prerender
 Reddy
 roboto
 Rushi
+sanyukat
 shadcn
 signup
 sitemapindex

abcd.code-workspace

@@ -73,9 +73,25 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
-    },
-    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
+      "extensions": [
+        ".js",
+        ".jsx",
+        ".md",
+        ".mdx",
+        ".ts",
+        ".tsx",
+        ".astro"
+      ]
+    },
+    "eslint.validate": [
+      "mdx",
+      "markdown",
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact",
+      "astro"
+    ],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -103,7 +119,10 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": ["develop", "main"],
+    "git.branchProtection": [
+      "develop",
+      "main"
+    ],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -114,7 +133,9 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#abcd00",
-    "prettier.documentSelectors": ["**/*.astro"],
+    "prettier.documentSelectors": [
+      "**/*.astro"
+    ],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -153,11 +174,11 @@
       "titleBar.activeBackground": "#abcd00",
       "titleBar.activeForeground": "#15202b",
       "titleBar.inactiveBackground": "#abcd0099",
-      "titleBar.inactiveForeground": "#15202b99",
-      "tab.activeBorder": "#d5ff01"
+      "titleBar.inactiveForeground": "#15202b99"
     },
     "files.exclude": {
-      "**/.git": false
+      "**/.git": false,
+      "**/.git/": true
     },
     "workbench.editor.pinnedTabSizing": "compact",
     "workbench.editor.pinnedTabsOnSeparateRow": true,
@@ -171,4 +192,4 @@
       ".githooks/**": true
     }
   }
-}
+}

docs/pages.md

@@ -21,42 +21,91 @@ This document describes the functionality and purpose of each page in the applic
 
 ### Interactive Learning Pages
 
-#### Barahkhadi Page (/pages/barahkhadi/index.astro)
+#### Alphabets Section
 
-![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)
+##### Alphabets Explorer Page (/pages/alphabets/index.astro)
 
-- Grid display of Hindi consonants organized in traditional groups
-- Quick view popover showing barahkhadi variations for each consonant
-- Interactive buttons to show/hide variations
-- Clickable consonants leading to detailed pages
-- Responsive layout with consonant groups
+![Alphabets Explorer page](../src/assets/screenshots/alphabets/index.png)
+
+- Main hub showing all available alphabet categories
+- Cards with category icons, titles and descriptions
+- Navigation to specialized playground and board pages for each category
+- Animated card interactions and hover effects
+
+##### Alphabet Playground (/pages/alphabets/[alphabet]/playground.astro)
+
+![Alphabet playground page](../src/assets/screenshots/alphabets/playground.png)
+
+- Interactive keyboard-driven learning experience
+- Displays letters, emojis, and spelling animations based on key presses
+- Dynamic color changes for visual engagement
+- Category-specific content loaded based on URL parameter
+- Includes help component explaining keyboard interaction
+
+##### Alphabet Board (/pages/alphabets/[alphabet]/board.astro)
+
+![Alphabet board page](../src/assets/screenshots/alphabets/board.png)
+
+- Complete display of all letters in selected alphabet category
+- Grid layout with letter cards showing detailed information
+- Organized reference view for all category items
+- Back navigation to main alphabets explorer
+
+#### Varnmala Section
+
+##### Varnmala Hub Page (/pages/varnmala/index.astro)
 
-#### Varnmala Page (/pages/varnmala.astro)
+![Varnmala hub page](../src/assets/screenshots/varnmala/index.png)
 
-![Varnmala page](../src/assets/screenshots/varnmala.png)
+- Main hub for all alphabet learning activities
+- Navigation to specialized practice pages
+- Overview of available learning modes
+
+##### Alphabet Display (/pages/varnmala/alphabet.astro)
+
+![Alphabet display page](../src/assets/screenshots/varnmala/alphabets.png)
 
 - Displays Hindi and English alphabets
 - Uses Alphabet component to render letter lists
 - Includes help section explaining the concept
 
-#### Typing Page (/pages/typing.astro)
+##### Typing Practice (/pages/varnmala/typing.astro)
 
-![Typing practice page](../src/assets/screenshots/typing.png)
+![Typing practice page](../src/assets/screenshots/varnmala/typing.png)
 
 - Interactive typing practice
 - Shows letters, emojis, and spelling animations
 - Responds to keyboard input (A-Z)
 - Includes visual feedback
 
-#### Reader Page (/pages/reader.astro)
+##### Reader (/pages/varnmala/reader.astro)
 
-![Reader page](../src/assets/screenshots/reader.png)
+![Reader page](../src/assets/screenshots/varnmala/reader.png)
 
 - Text-to-speech functionality
 - Multiple speaker options (Mudra, Rutvi)
 - Audio control for alphabet pronunciation
 - Emoji display with letters
 
+##### English Practice (/pages/varnmala/english.astro)
+
+![English practice page](../src/assets/screenshots/varnmala/english.png)
+
+- English alphabet practice
+- Color-changing letter display
+- Keyboard interaction
+- Visual feedback
+
+#### Barahkhadi Page (/pages/barahkhadi/index.astro)
+
+![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)
+
+- Grid display of Hindi consonants organized in traditional groups
+- Quick view popover showing barahkhadi variations for each consonant
+- Interactive buttons to show/hide variations
+- Clickable consonants leading to detailed pages
+- Responsive layout with consonant groups
+
 #### Panel Page (/pages/panel.astro)
 
 ![3D Panel page](../src/assets/screenshots/panel.png)
@@ -66,15 +115,6 @@ This document describes the functionality and purpose of each page in the applic
 - Custom HTML element (letter-panel)
 - Interactive letter display
 
-#### English Page (/pages/hindi.astro)
-
-![English practice page](../src/assets/screenshots/english.png)
-
-- English alphabet practice
-- Color-changing letter display
-- Keyboard interaction
-- Visual feedback
-
 #### Record Page (/pages/record.astro)
 
 ![Audio recording page](../src/assets/screenshots/record.png)

public/mocks/cross.json

@@ -0,0 +1,17 @@
+[
+  {
+    "easy": ["CAT", "DOG", "SUN", "MOON", "STAR"],
+    "medium": ["APPLE", "GRAPE", "ORANGE", "BERRIES"],
+    "hard": ["WALRUS", "GIRAFFE", "PENGUIN", "DOLPHIN"]
+  },
+  {
+    "easy": ["HAT", "CAR", "BALL", "SHOE", "LAMP"],
+    "medium": ["CHERRY", "COCONUT", "PLUM", "MELON", "PEACH"],
+    "hard": ["OCTOPUS", "JACKAL", "WALRUS", "PEACOCK"]
+  },
+  {
+    "easy": ["RED", "BLUE", "GREEN", "YELLOW", "PURPLE"],
+    "medium": ["BLACK", "WHITE", "BROWN", "ORANGE", "PINK"],
+    "hard": ["MAGENTA", "CYAN", "VIOLET", "MAROON"]
+  }
+]