Develop: Header hide; update Footer links (#144)

Author: xkeshav

src/assets/styles/header.css

@@ -11,6 +11,7 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
+  min-height: 5rem;
 
   .header__brand {
     display: flex;
@@ -30,6 +31,31 @@
     }
   }
 
+  .title {
+    font-size: 3rem;
+    font-weight: bold;
+    background: linear-gradient(270deg, #ff416c, #ff4b2b, #1e90ff, #32cd32);
+    background-size: 800% 800%;
+    background-clip: inherit;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: animateGradient 8s ease infinite;
+  }
+
+  @keyframes animateGradient {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
   /* --- Navigation Links --- */
   .caption {
     display: flex;
@@ -89,4 +115,4 @@
   width: 2rem;
   border-radius: 50%;
   cursor: pointer;
-}
+}

src/components/ZodiacTab.astro

@@ -21,7 +21,7 @@ import "@/assets/styles/zodiac.css";
   import type { Language } from "@/types/zodiac";
 
   document.addEventListener("DOMContentLoaded", () => {
-    const zodiacsPromise = fetch("/src/data/zodiac.json").then((res) => res.json());
+    const zodiacsPromise = fetch("src/data/zodiac.json").then((res) => res.json());
 
     zodiacsPromise.then((zodiacs) => {
       const zodiacsGrid = document.getElementById("zodiacsGrid");

src/content/support.md

@@ -37,7 +37,7 @@ If something isn’t working:
 
 - Make sure your internet connection is active.
 - Try refreshing the page.
-- Use a modern browser like **Chrome**, **Firefox**, or **Edge**.
+- Use a modern browser like   **Chrome**, **Firefox**, or   **Edge**.
 - If you're using a school device, check for any firewall or content blockers.
 
 ---

src/layouts/common/Footer.astro

@@ -49,36 +49,35 @@ import ToggleIcon from "@/assets/icons/toggle.svg";
       </details>
       <details class="footer__nav--item" open>
         <summary class="footer__nav--title">
-          <span>For Parents</span>
+          <span>General</span>
           <i class="fa-solid fa-chevron-down"></i>
         </summary>
         <div class="footer__nav--links">
-          <a href="/varnmala">Getting Started</a>
-          <a href="/parent">Parent Resources</a>
+          <a href="/about">About Us</a>
           <a href="/faq">FAQs</a>
           <a href="/support">Support</a>
           <a href="/blog">Blog</a>
-        </div>
-      </details>
-      <details class="footer__nav--item" open>
-        <summary class="footer__nav--title">
-          <span>For Schools</span>
-          <i class="fa-solid fa-chevron-down"></i>
-        </summary>
-        <div class="footer__nav--links">
-          <a href="/school">School Programs</a>
-          <a href="/classroom">Classroom Tools</a>
-          <a href="/teacher">Teacher Resources</a>
           <a href="/contact">Contact Us</a>
-          <a href="/gallery">Gallery</a>
         </div>
       </details>
     </div>
+    <details class="footer__nav--item" open>
+      <summary class="footer__nav--title">
+        <span>Resources</span>
+        <i class="fa-solid fa-chevron-down"></i>
+      </summary>
+      <div class="footer__nav--links">
+        <a href="/school">School Programs</a>
+        <a href="/classroom">Classroom Tools</a>
+        <a href="/teacher">Teacher Resources</a>
+        <a href="/parent">Parent Resources</a>
+      </div>
+    </details>
   </div>
-  <div class="copyright">
-    © 2025 recursivezero.com. All rights reserved.
-    <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms and Conditions</a> | <a href="/cookies">Cookies</a>
-  </div>
+</div>
+<div class="copyright">
+  © 2025 recursivezero.com. All rights reserved.
+  <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms and Conditions</a> | <a href="/cookies">Cookies</a>
 </div>
 
 <script>

src/layouts/common/Header.astro

@@ -7,18 +7,21 @@ import logoImage from "/public/assets/images/512x512.png";
 const { hasBack = true } = Astro.props;
 ---
 
+
 <header class="header">
   <div class="header__brand">
     <Picture src={logoImage} formats={["png", "webp"]} alt="template logo" class="logo" />
     <span title={APP_NAME}>{APP_NAME}</span>
   </div>
 
-  <div class="caption">
+  <div class="title">Welcome to the world of learning</div>
+
+  <!--<div class="caption">
     <a href="/" class:list={{ "is-active": Astro.url.pathname === "/home" || Astro.url.pathname === "/" }}>Home</a>
     <a href="/about" class:list={{ "is-active": Astro.url.pathname.startsWith("/about") }}>About</a>
     <a href="/parent" class:list={{ "is-active": Astro.url.pathname.startsWith("/parent") }}>Parents</a>
     <a href="/teacher" class:list={{ "is-active": Astro.url.pathname.startsWith("/teacher") }}>Teachers</a>
-  </div>
+  </div>-->
 
   <div class="action-group">
     <slot name="left">

src/utils/constants.ts

@@ -192,7 +192,7 @@ export const NavbarLinks: LinkProps[] = [
     name: "Zodiac",
     title: "zodiac",
     path: "/zodiac",
-    isActive: true
+    isActive: false
   },
   {
     name: "Nakshtra",