[RZB-250021]: added subtitle in varnmala and remove card__link style

Author: xkeshav

astro.config.mjs

@@ -1,6 +1,5 @@
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
@@ -23,11 +22,11 @@ export default defineConfig({
     mdx(),
     react({
       experimentalReactChildren: true
-    }),
-    tailwind({
-      applyBaseStyles: false,
-      nesting: true
     })
+    //tailwind({
+    //  applyBaseStyles: false,
+    //  nesting: true
+    //})
   ],
   style: {
     global: true // Ensure global styles are applied

src/assets/styles/alphabets/index.css

@@ -8,23 +8,23 @@
   & .alphabets__header {
     text-align: center;
     margin-bottom: 2rem;
-  }
 
-  & .alphabets__header h1 {
-    font-size: clamp(2.5rem, 4vw, 3rem);
-    font-weight: 800;
-    padding-bottom: 0.5rem;
-    background: linear-gradient(135deg, var(--primary), var(--primary-light));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
+    & .title {
+      font-size: clamp(2.5rem, 4vw, 3rem);
+      font-weight: 800;
+      padding-bottom: 0.5rem;
+      background: linear-gradient(135deg, var(--primary), var(--primary-light));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
 
-  & .subtitle {
-    color: var(--secondary);
-    font-size: 1.1rem;
-    max-width: 600px;
-    margin: 0 auto;
+    & .subtitle {
+      color: var(--secondary);
+      font-size: 1.1rem;
+      max-width: 600px;
+      margin: 0 auto;
+    }
   }
 
   & .list__alphabets {
@@ -35,72 +35,11 @@
     list-style: none;
     margin: 0 auto;
     max-width: 1200px;
-  }
-
-  & .card {
-    opacity: 0;
-    animation: fadeInUp 0.4s ease forwards;
-  }
-
-  & .card__link {
-    display: block;
-    text-decoration: none;
-    background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%));
-    border-radius: 1rem;
-    border: 1px solid var(--border);
-    padding: 2rem;
-    transition: all 0.3s ease;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  & .card__link:hover {
-    transform: translateY(-5px);
-    box-shadow:
-      0 20px 30px rgba(0, 0, 0, 0.1),
-      0 0 0 1px rgba(var(--primary-rgb, 44, 62, 80), 0.1);
-  }
-
-  & .card__content {
-    position: relative;
-  }
-
-  & .category__title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text);
-    margin: 0 0 1rem 0;
-    transition: color 0.3s ease;
-  }
 
-  & .category__description {
-    color: var(--secondary);
-    font-size: 0.95rem;
-    line-height: 1.6;
-    margin: 0;
-  }
-
-  & .card__arrow {
-    position: absolute;
-    top: 0;
-    right: 0;
-    font-size: 1.5rem;
-    color: var(--primary);
-    opacity: 0;
-    transition: all 0.3s ease;
-    transform: translateX(-10px);
-  }
-
-  & .card__link:hover .category__title {
-    background: linear-gradient(135deg, var(--primary), var(--primary-light));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-
-  & .card__link:hover .card__arrow {
-    opacity: 1;
-    transform: translateX(0);
+    & .card {
+      opacity: 0;
+      animation: fadeInUp 0.4s ease forwards;
+    }
   }
 }
 
@@ -128,21 +67,6 @@
       grid-template-columns: 1fr;
       gap: 1rem;
     }
-
-    & .card__link {
-      padding: 1.5rem;
-    }
-
-    & .card__actions {
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    & .btn {
-      width: 100%;
-      font-size: 1.1rem;
-      padding: 0.75rem 1rem;
-    }
   }
 }
 
@@ -154,4 +78,4 @@
       padding: 0 0.5rem;
     }
   }
-}
+}

src/assets/styles/varnmala/number.css

@@ -56,4 +56,4 @@
       gap: 1.5rem;
     }
   }
-}
+}

src/pages/alphabets/index.astro

@@ -5,8 +5,11 @@ import CardLayout from "@/components/CardLayout.astro";
 import rawAlphabetData from "@/data/alphabets.json";
 import BaseLayout from "@/layouts/Base";
 import type { AlphabetsData } from "@/types/alphabet";
-const alphabetData = rawAlphabetData as AlphabetsData;
 
+const title = "Alphabet Categories";
+const subtitle = "Choose a category to discover different alphabet representations";
+
+const alphabetData = rawAlphabetData as AlphabetsData;
 const categories = Object.keys(alphabetData);
 
 const categoryList = categories.map((category, index) => {
@@ -27,8 +30,8 @@ const categoryList = categories.map((category, index) => {
   <Back />
   <section class="container__alphabets">
     <div class="alphabets__header">
-      <h1>Alphabet Categories</h1>
-      <p class="subtitle">Choose a category to discover different alphabet representations</p>
+      <h1 class="title">{title}</h1>
+      <p class="subtitle">{subtitle}</p>
     </div>
     <ul class="list__alphabets">
       {

src/pages/capital.astro

@@ -2,7 +2,7 @@
 import Back from "@/components/Back.astro";
 import LocationMosaic from "@/components/Capital.astro";
 import Help from "@/components/Help.astro";
-import Layout from "@/layouts/Base";
+import BaseLayout from "@/layouts/Base";
 import { locations } from "@/libs/location";
 
 const meta = {
@@ -15,11 +15,10 @@ const stateList = locations.filter((loc) => loc.isState);
 const utList = locations.filter((loc) => !loc.isState);
 ---
 
-<Layout meta={meta}>
+<BaseLayout meta={meta}>
   <Back />
-
   <Fragment slot="header-right">
     <Help title="Capital" description="An Interactive Journey Through India's States and Territories. " />
   </Fragment>
   <LocationMosaic stateList={stateList} utList={utList} />
-</Layout>
+</BaseLayout>

src/pages/glossary/index.astro

@@ -6,6 +6,7 @@ import BaseLayout from "@/layouts/Base";
 import type { CardSectionType } from "@/types/alphabet";
 
 const title = "Glossary";
+const subtitle = "Explore various categories of knowledge and information";
 
 const glossarySections: CardSectionType[] = [
   {
@@ -79,7 +80,8 @@ const glossarySections: CardSectionType[] = [
   <Back />
   <section class="container__alphabets">
     <div class="alphabets__header">
-      <h1>{title}</h1>
+      <h1 class="title">{title}</h1>
+      <p class="subtitle">{subtitle}</p>
     </div>
     <ul class="list__alphabets">
       {

src/pages/numbers/index.astro

@@ -5,7 +5,9 @@ import CardLayout from "@/components/CardLayout.astro";
 import BaseLayout from "@/layouts/Base";
 import type { CardSectionType } from "@/types/alphabet";
 
-const pageTitle = "Explore various number systems";
+const title = "Number systems";
+
+const subtitle = "Explore various number systems and their representations";
 
 const numberSections: CardSectionType[] = [
   {
@@ -43,7 +45,8 @@ const numberSections: CardSectionType[] = [
   <Back />
   <section class="container__alphabets">
     <div class="alphabets__header">
-      <h1>{pageTitle}</h1>
+      <h1 class="title">{title}</h1>
+      <p class="subtitle">{subtitle}</p>
     </div>
     <ul class="list__alphabets">
       {

src/pages/varnmala/index.astro

@@ -47,7 +47,7 @@ const sections = [
       {
         sections.map((section, index) => (
           <li class="card" style={`animation-delay: ${index * 100}ms`}>
-            <a href={`/varnmala/${section.href}`} class="card__link">
+            <a class="card__link" href={`/varnmala/${section.href}`}>
               <div class="card__content">
                 <h2 class="category__title">{section.title}</h2>
                 <p class="category__description">{section.description}</p>