addded help and updated css

Author: Ciphrox

src/assets/styles/hindi.css

@@ -0,0 +1,19 @@
+.container__hindi {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: auto;
+  font-size: 1rem;
+  place-items: center;
+  will-change: contents;
+  overflow: hidden;
+
+  & .letter {
+    grid-area: letter;
+    font-size: clamp(30rem, 90vw, 70rem);
+    height: min-content;
+    color: var(--letter__txt--2);
+    transition: color 0.5s ease-in;
+  }
+}

src/pages/hindi.astro

@@ -1,11 +1,19 @@
 ---
 import BaseLayout from "@/layouts/Base";
+import "@/assets/styles/hindi.css";
+import Help from "@/components/Help.astro";
 ---
 
 <BaseLayout meta={{ title: "Hindi" }}>
-  <main>
-    <div class="letter"></div>
-  </main>
+  <Fragment slot="header-right">
+    <Help
+      title="Hindi Varnmala"
+      description="Just press any letter fron keyboard and it display the letter and it's relative word in clear way and if you type again it will change the color"
+    />
+  </Fragment>
+  <article class="container__hindi">
+    <div class="letter">A</div>
+  </article>
   <script>
     import { colorBox, isAlphabet, random } from "@/utils/utils.js";