Feature/RZA-250128: Refactor the India , Blog and Draw page

src/assets/styles/map/map.css

@@ -19,20 +19,13 @@
   color: var(--text);
 }
 
-.explore-header {
-  margin-bottom: 2rem;
-}
-
-.explore-header h1 {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: var(--text);
-}
-
 .explore-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
   gap: 1.5rem;
+  padding: 1rem;
 }
 
 .explore-card {
@@ -47,6 +40,7 @@
   transition: box-shadow 0.2s ease;
   border-top-left-radius: 10%;
   border-top-right-radius: 10%;
+  flex-shrink: 0;
 }
 
 .explore-card:hover {
@@ -58,13 +52,11 @@
   width: 100%;
   aspect-ratio: 16/9;
   overflow: hidden;
-  border-top-left-radius: 10%;
-  border-top-right-radius: 10%;
 }
 
 .card-image img {
   width: 100%;
-  height: 100%;
+  height: 140%;
   object-fit: cover;
 }
 
@@ -104,9 +96,11 @@
   .explore-container {
     padding: 1rem;
   }
+
   .explore-card {
     width: 18rem;
   }
+
   .explore-grid {
     grid-template-columns: 1fr;
   }
@@ -176,4 +170,4 @@
     fill: #ffa500;
     transform: scale(1);
   }
-}
+}

src/components/ControllerContainer.astro

@@ -1,75 +1,94 @@
 ---
-import ImageIcon from "@/assets/icons/image.svg";
+import CaseToggle from "@/components/draw/CaseToggle.astro";
+import FontToggle from "@/components/draw/FontToggle.astro";
+import ImageToggle from "@/components/draw/ImgToggle.astro";
+import ColorToggle from "@/components/draw/ColorToggle.astro";
+import BackgroundToggle from "@/components/draw/BgToggle.astro";
+import ResetButton from "@/components/draw/ResetButton.astro";
+import SharePopover from "@/components/ShareButton.astro";
+import Help from "@/components/Help.astro";
+import Speak from "@/components/Speaker.astro";
 ---
 
 <div class="controls-container">
   <div class="controls">
-    <label for="toggleCase" class="control-item" data-tooltip="Toggle case">
-      <input type="checkbox" name="change_case" id="toggleCase" class="visually-hidden hidden" />
-      <span
-        id="text"
-        class="control-button case-toggle"
-        role="switch"
-        aria-checked="false"
-        tabindex="0"
-        aria-label="Toggle case">Aa</span
-      >
-    </label>
-    <label for="toggleFont" class="control-item" data-tooltip="Toggle font">
-      <input type="checkbox" name="toggle_font" id="toggleFont" class="visually-hidden hidden" />
-      <span
-        id="font"
-        class="control-button font-toggle"
-        role="switch"
-        aria-checked="false"
-        tabindex="0"
-        aria-label="Toggle font"
-      >
-        <span class="font-icon">F</span>
-      </span>
-    </label>
+    <Speak />
+    <CaseToggle />
+    <FontToggle />
+
     <div class="control-group">
-      <label for="toggleImg" class="control-item" data-tooltip="Toggle Image">
-        <input type="checkbox" name="toggle_img" id="toggleImg" class="visually-hidden hidden" />
-        <span
-          id="img"
-          class="control-button img-toggle"
-          role="switch"
-          aria-checked="false"
-          tabindex="0"
-          aria-label="Toggle Image"
-        >
-          <ImageIcon class="img-icon" />
-        </span>
-      </label>
-      <label for="toggleColor" class="control-item" data-tooltip="Toggle Font Color">
-        <input type="checkbox" name="toggle_color" id="toggleColor" class="visually-hidden hidden" />
-        <span
-          class="control-button color-toggle"
-          role="switch"
-          aria-checked="false"
-          tabindex="0"
-          aria-label="Toggle Font Color"
-        >
-          <span class="color-icon">T</span>
-        </span>
-      </label>
-    </div>
-    <label for="toggleBg" class="control-item" data-tooltip="Toggle background">
-      <input type="checkbox" name="change_bg" id="toggleBg" class="visually-hidden hidden" />
-      <span
-        class="control-button bg-toggle"
-        role="switch"
-        aria-checked="false"
-        tabindex="0"
-        aria-label="Toggle background"
-      >
-        <span class="bg-icon">🎨</span>
-      </span>
-    </label>
-    <div class="control-item" data-tooltip="Reset all">
-      <button class="control-button reset-button" id="resetButton" tabindex="0" aria-label="Reset all">↻</button>
+      <ImageToggle />
+      <ColorToggle />
     </div>
+
+    <BackgroundToggle />
+    <ResetButton />
   </div>
+
+  <SharePopover />
+  <Help
+    title="Draw Keyboard"
+    description="Draw letters by sliding your finger across the keys! Try the buttons to change the style, make it BIG or small, change the images, pick cool backgrounds, and customize font colors!"
+  />
 </div>
-<script type="module" src="/controller-container.js" is:inline></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const controlButtons = document.querySelectorAll(".control-button");
+    let isKeyboardNav = false;
+    controlButtons.forEach((button) => {
+      button.addEventListener("focus", () => {
+        if (isKeyboardNav) {
+          controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
+          button.classList.add("keyboard-focus");
+        }
+      });
+      button.addEventListener("blur", () => {
+        button.classList.remove("keyboard-focus");
+      });
+      button.addEventListener("mousedown", () => {
+        isKeyboardNav = false;
+        button.classList.remove("keyboard-focus");
+      });
+      button.addEventListener("keydown", (event) => {
+        if ((event as KeyboardEvent).key === "Tab") {
+          isKeyboardNav = true;
+        }
+      });
+    });
+    document.addEventListener("mousedown", () => {
+      isKeyboardNav = false;
+      controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
+    });
+    document.addEventListener("keydown", (event) => {
+      const e = event as KeyboardEvent;
+      if (e.key === "Tab") {
+        isKeyboardNav = true;
+      }
+      const key = e.key;
+      if (key.length === 1 && /[a-z]/i.test(key)) {
+        if (window.playLetterSound) {
+          window.playLetterSound(key.toLowerCase());
+        }
+      }
+    });
+    document.addEventListener("caseToggled", (event) => {
+      const { isActive } = (event as CustomEvent).detail;
+    });
+    document.addEventListener("fontToggled", (event) => {
+      const { isActive } = (event as CustomEvent).detail;
+    });
+    document.addEventListener("imageToggled", (event) => {
+      const { isActive } = (event as CustomEvent).detail;
+    });
+    document.addEventListener("colorToggled", (event) => {
+      const { isActive } = (event as CustomEvent).detail;
+    });
+    document.addEventListener("backgroundToggled", (event) => {
+      const { isActive } = (event as CustomEvent).detail;
+    });
+    document.addEventListener("keyboardReset", (event) => {
+      const { originalState } = (event as CustomEvent).detail;
+    });
+  });
+</script>

src/components/DrawKeyboard.astro

@@ -485,7 +485,7 @@ import Keyboard from "@/components/Keyboard.astro";
     width: 100%;
     max-width: 1500px;
     gap: 2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
     position: relative;
   }