[RZA-250154]: Update the description on share popover and also Refactor the Readme.md file

docs/README.md

@@ -113,3 +113,265 @@ and then check with
 ```sh
 npm run preview
 ```
+
+## 📄 Pages Documentation
+
+---
+
+## Home Page
+
+### Description
+
+The landing page for abcdkbd, introducing the platform and its key features for interactive learning.
+
+### Screenshots
+
+- **Light Mode:** ![Home Light](/public/assets/images/screenshots/light/home.png)
+- **Dark Mode:** ![Home Dark](/public/assets/images/screenshots/dark/home.png)
+
+---
+
+## About Page
+
+### Description
+
+This page introduces the mission, team, and values behind abcdkbd. It provides an overview of the platform's goals, core values, and contact information for contributors and educators.
+
+### Screenshots
+
+- **Light Mode:** ![About Light](/public/assets/images/screenshots/light/about.png)
+- **Dark Mode:** ![About Dark](/public/assets/images/screenshots/dark/about.png)
+
+---
+
+## Varnmala Page
+
+### Description
+
+Explore the vowels and consonants of different Indian languages. Compare scripts and sounds across regions in a simple, visual way.
+
+### Screenshots
+
+- **Light Mode:** ![Varnmala Light](/public/assets/images/screenshots/light/varnmalaLight.png)
+- **Dark Mode:** ![Varnmala Dark](/public/assets/images/screenshots/dark/varnmala.png)
+
+---
+
+## Vedic Page
+
+### Description
+
+Learn about Vedic timekeeping, tithi, and traditional Indian calendars.
+
+### Screenshots
+
+- **Light Mode:** ![Vedic Light](/public/assets/images/screenshots/light/vedic.png)
+- **Dark Mode:** ![Vedic Dark](/public/assets/images/screenshots/dark/vedic.png)
+
+---
+
+## Akshar (Indic Alphabets) Page
+
+### Description
+
+Learn Indian culture and diversity through Indian languages. Compare alphabets, pronunciation, and examples across different Indian scripts.
+
+### Screenshots
+
+- **Light Mode:** ![Akshar Light](/public/assets/images/screenshots/light/indic.png)
+- **Dark Mode:** ![Akshar Dark](/public/assets/images/screenshots/dark/indic.png)
+
+---
+
+## Panel Page
+
+### Description
+
+The Panel page provides users with a personal dashboard to manage their account, view activity, and access learning resources.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/panel.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/panel.png)
+
+---
+
+## Alphabet Page
+
+### Description
+
+Explore the alphabets of different Indian languages, compare scripts, and learn pronunciation and examples.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/alphabets.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/alphabets.png)
+
+---
+
+## Number Page
+
+### Description
+
+Learn and practice numbers in different languages with interactive grids and examples.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/numbers.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/numbers.png)
+
+---
+
+## Glossary Page
+
+### Description
+
+Browse and search for educational terms and definitions relevant to the platform's content.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/glossary.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/glossary.png)
+
+---
+
+## India(Map) Page
+
+### Description
+
+An interactive journey through India's states, displaying their various dance form and related information.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/map.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/map.png)
+
+---
+
+## Crossword Page
+
+### Description
+
+Solve interactive crossword puzzles to reinforce learning and vocabulary.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/crossword.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/crossword.png)
+
+---
+
+## Capital Page
+
+### Description
+
+An interactive journey through India's states and territories, displaying their capitals and related information.
+
+### Screenshots
+
+- **Light Mode:** ![Capital Light](/public/assets/images/screenshots/light/capitalLight.png)
+- **Dark Mode:** ![Capital Dark](/public/assets/images/screenshots/dark/capital.png)
+
+## Hide & Seek Page
+
+### Description
+
+Play hide and seek games to learn letters, numbers, and more in a fun, interactive way.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/hideseek.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/hideseek.png)
+
+---
+
+## Canvas Page
+
+### Description
+
+Create, draw, and generate art or text on a digital canvas. Includes quote and text generation features.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/canvas.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/canvas.png)
+
+---
+
+## Draw Page
+
+### Description
+
+Practice drawing letters and shapes using your keyboard. An interactive tool for learning letter formation and improving motor skills.
+
+### Screenshots
+
+- **Light Mode:** ![Draw Light](/public/assets/images/screenshots/light/draw.png)
+- **Dark Mode:** ![Draw Dark](/public/assets/images/screenshots/dark/draw.png)
+
+---
+
+## Gallery Page
+
+### Description
+
+Explore interactive ways to learn alphabets with Stack, Queue, and Slider gallery layouts. Choose your favorite mode to visualize and play with alphabet cards.
+
+### Screenshots
+
+- **Light Mode:** ![Gallery Light](/public/assets/images/screenshots/light/gallery.png)
+- **Dark Mode:** ![Gallery Dark](/public/assets/images/screenshots/dark/gallery.png)
+
+---
+
+## Nakshtra Page
+
+### Description
+
+Learn about the Nakshatras (lunar mansions) in Indian astronomy and astrology.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/nakshatra.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/nakshtra.png)
+
+---
+
+## Stories Page
+
+### Description
+
+Browse a curated collection of stories, tales, and creative writing for kids. Stories are organized by category and feature author, reading time, and beautiful cover images.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/storyLight.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/story.png)
+
+---
+
+## Poem Page
+
+### Description
+
+Read and listen to poems for kids, with interactive cards and audio support.
+
+### Screenshots
+
+- **Light Mode:** ![Stories Light](/public/assets/images/screenshots/light/poems.png)
+- **Dark Mode:** ![Stories Dark](/public/assets/images/screenshots/dark/poems.png)
+
+---
+
+## Blog Page
+
+### Description
+
+Read the latest articles, updates, and educational insights from abcdkbd.com.
+
+### Screenshots
+
+- **Light Mode:** ![Blog Light](/public/assets/images/screenshots/light/blog.png)
+- **Dark Mode:** ![Blog Dark](/public/assets/images/screenshots/dark/blog.png)
+
+---

src/assets/styles/cards/stack.css

@@ -392,7 +392,7 @@
     padding: 1rem 0.5rem;
     justify-content: flex-start;
   }
-  .alphabet-container{
+  .alphabet-container {
     height: 600px;
     gap: 0rem;
   }

src/assets/styles/draw.css

@@ -351,7 +351,6 @@
   z-index: 100;
 }
 
-*:focus {
-  outline: none;
-  box-shadow: none;
+select {
+  color: white;
 }

src/assets/styles/globals.css

@@ -232,4 +232,9 @@
     appearance: base-select;
     border: none;
   }
+
+  *:focus {
+    outline: none;
+    box-shadow: none;
+  }
 }

src/assets/styles/mobile-splash.css

@@ -10,7 +10,8 @@
   align-items: center;
   padding: 1rem;
   transition: background-color 0.3s ease;
-  content-visibility: visible;
+  display: none;
+  content-visibility: hidden;
 }
 
 @container splash (max-width: 768px) {

src/assets/styles/poem-dialog.css

@@ -88,24 +88,24 @@
     width: 80%;
     height: max-content;
     box-sizing: border-box;
-    margin: auto
-
+    margin: auto;
   }
 
   .modal-title {
-    font-size: 1.50rem;
+    font-size: 1.5rem;
   }
 
   .lines {
     font-size: 1rem;
   }
 
   .modal-content > .model-buttons > button.speaker-btn,
-.modal-content > .model-buttons > button.close{
+  .modal-content > .model-buttons > button.close {
     width: 36px;
-  height: 36px;
-}
-.modal-content > .model-buttons > button svg {
-  width: 32px;
-  height: 32px;}
+    height: 36px;
+  }
+  .modal-content > .model-buttons > button svg {
+    width: 32px;
+    height: 32px;
+  }
 }

src/assets/styles/varnmala/reader.css

@@ -28,7 +28,7 @@
   padding: 0.5rem;
 }
 
-.container__reader>.letter {
+.container__reader > .letter {
   width: 100%;
   box-sizing: border-box;
   margin-left: 4rem;
@@ -187,12 +187,12 @@
     font-size: min(200rem, 70vw);
   }
 
-  .container__reader>.letter {
+  .container__reader > .letter {
     justify-content: center;
     margin-left: auto;
   }
 
   .mute-button {
     font-size: min(1.5rem, 6vw);
   }
-}
+}

src/components/LanguageSwitcher.astro

@@ -29,7 +29,7 @@ export const setLang = `(lang) => {
     border-radius: 6px;
     cursor: pointer;
     background-color: var(--card-bg);
-    color: var(--text,black)
+    color: var(--text, black);
     transition: all 0.3s ease;
   }
 

src/components/MobileSplash.astro

@@ -5,7 +5,7 @@ import logoImage from "public/assets/images/abcd.png";
 const { stay } = Astro.props;
 ---
 
-<div id="mobile-splash-wrapper" class="container_splash">
+<div id="mobile-splash-wrapper" class="container__splash">
   <div class="container_splash_card">
     <Image src={logoImage} alt="logo of abcd" width="50" height="50" />
     <h1 class="container_splash_heading"><strong>This page is best experienced on desktop</strong></h1>

src/components/Speaker.astro

@@ -18,11 +18,12 @@ declare global {
 */
 ---
 
-<style>
+<style is:inline>
   .speaker-controls {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    cp;pr"#fff;
   }
 
   #voice-dropdown {