added barahkhadi page

Author: Ciphrox

src/assets/styles/barahkhadi/index.css

@@ -0,0 +1,49 @@
+.container__barahkhadi {
+  padding: 1rem;
+  height: 100%;
+  overflow-y: auto;
+
+  & .consonants-rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .consonant-row {
+    padding: 1rem;
+    background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+    border-radius: 0.5rem;
+  }
+
+  & .consonants-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  }
+
+  & .consonant-card {
+    aspect-ratio: 1;
+    background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
+    border-radius: 0.5rem;
+    display: grid;
+    place-items: center;
+    text-decoration: none;
+    transition: transform 0.2s ease;
+  }
+
+  & .consonant-card:hover {
+    transform: scale(1.05);
+    background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
+    transition: all 0.2s ease;
+  }
+
+  & .consonant {
+    font-size: 5rem;
+    font-weight: bold;
+    color: var(--text);
+  }
+
+  & .consonants-container {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary) var(--background);
+  }
+}

src/pages/barahkhadi/index.astro

@@ -0,0 +1,36 @@
+---
+import BaseLayout from "@/layouts/Base";
+import "@/assets/styles/barahkhadi/index.css";
+
+const consonants = [
+  ["क", "ख", "ग", "घ", "ङ"],
+  ["च", "छ", "ज", "झ", "ञ"],
+  ["ट", "ठ", "ड", "ढ", "ण"],
+  ["त", "थ", "द", "ध", "न"],
+  ["प", "फ", "ब", "भ", "म"],
+  ["य", "र", "ल", "व"],
+  ["श", "ष", "स", "ह"]
+];
+---
+
+<BaseLayout meta={{ title: "Barahkhadi" }}>
+  <div class="container__barahkhadi">
+    <div class="consonants-rows">
+      {
+        consonants.map((row, rowIndex) => (
+          <div class="consonant-row">
+            <div class="consonants-grid">
+              {row.map((consonant) => (
+                <a href={`/barahkhadi/${consonant}`} class="consonant-card">
+                  <div class="consonant-content">
+                    <span class="consonant">{consonant}</span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</BaseLayout>

src/utils/constants.ts

@@ -36,6 +36,12 @@ export const NavbarLinks: LinkProps[] = [
     path: "/reader",
     isActive: true
   },
+  {
+    name: "Barahkhadi",
+    title: "Barahkhadi",
+    path: "/barahkhadi",
+    isActive: true
+  },
   {
     name: "Record",
     title: "Record",