update header footer;custom font added

Author: xkeshav

public/assets/fonts/MudraMohta-Regular.ttf renamed to public/fonts/MudraMohta-Regular.ttf

@@ -1,7 +1,11 @@
 /* src/styles/custom-font.css */
+
 @font-face {
-  font-family: "Mudra";
-  src: url("/assets/fonts/MudraMohta-Regular.ttf") format("truetype");
-  font-weight: normal;
+  font-family: "Stardom";
+  src:
+    url("/fonts/Stardom-regular.woff") format("woff"),
+    url("/fonts/Stardom-regular.woff2") format("woff2");
+  font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }

public/fonts/Stardom-Regular.woff

@@ -7,6 +7,9 @@
   @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500;
 }
 
-.footer__nav--item {
-  @apply underline underline-offset-2 hover:text-blue-500 dark:hover:text-blue-400;
+.footer__nav__item {
+  @apply underline underline-offset-2 hover:text-blue-500;
+  color: inherit;
+  margin: 0.5rem;
+  text-decoration: underline;
 }

public/fonts/Stardom-Regular.woff2

@@ -1,4 +1,4 @@
-/*@import "./custom-font.css";*/
+@import url("./custom-font.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

public/assets/fonts/roboto-mono-700.ttf renamed to public/fonts/roboto-mono-700.ttf

@@ -1,10 +1,41 @@
+---
+
+---
+
+<style>
+  @media (prefers-color-scheme: dark) {
+    img {
+      filter: brightness(50%) sepia(70%) invert(100%);
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    img {
+      filter: none;
+    }
+  }
+  section {
+    font-family: "Stardom", sans-serif;
+    color: inherit;
+  }
+  p {
+    color: #6c757d;
+    &:hover {
+      color: #9c1a82;
+    }
+  }
+  img {
+    border-radius: 0.5rem;
+    /*filter: brightness(50%) sepia(70%) invert(100%);*/
+  }
+</style>
 <section>
   <div class="w-full px-4 py-8 md:px-6 md:py-12 lg:px-8">
     <div class="mx-auto">
-      <h2 class="mb-[0.8rem] inline-block rounded-md py-[2px] text-[27px]">What we do</h2>
-      <h1 class="mb-[1.1rem] text-[36px] font-bold leading-[42px] tracking-[-0.03em] lg:text-[61px] lg:leading-[72px]">
+      <h1 class="mb-[0.8rem] inline-block rounded-md py-[2px] text-[27px]">What we do</h1>
+      <h2 class="mb-[1.1rem] text-[36px] font-bold leading-[42px] tracking-[-0.03em] lg:text-[61px] lg:leading-[72px]">
         Efficient apps that simplify your life.
-      </h1>
+      </h2>
       <div class="flex flex-col gap-[1.5rem] lg:flex-row lg:justify-between lg:gap-[1.2rem] xl:gap-[3rem]">
         <figure class="basis-[55%] lg:h-[500px]">
           <img

src/assets/fonts/roboto-mono-regular.ttf

@@ -1,18 +1,28 @@
+---
+import "@/assets/styles/footer.css";
+import { FooterLinks } from "@/utils/constants";
+---
+
 <footer>
   <div class="h-[1px] w-full bg-white/70"></div>
 
   <div class="p-[20px] lg:py-[50px]">
     <div class="mx-auto flex max-w-[100rem] flex-row items-center justify-between">
       <div class="footer-bottom mb-[30px] lg:mb-[40px] lg:pt-[20px]">
         <div>
-          <p class="footerBottomA text-[12.5px] leading-[20px] text-[#999]">
+          <p class="text-[12.5px] leading-[20px] text-[#999]">
             ©2025
-            <a href="/" class="footerBottomB text-[#fff]">
-              <strong> RecursiveZero Private Limited</strong>
+            <a href="/" class="">
+              <strong>RecursiveZero Private Limited</strong>
             </a>
-            | All Rights Reserved |
-            <a href="/terms" class="hover:text-white">Terms & Conditions</a> |
-            <a href="/privacy" class="hover:text-white">Privacy Policy</a>
+            | All Rights Reserved |{" "}
+            {
+              FooterLinks.map((menu) => (
+                <span class="footer__nav__item">
+                  <a href={menu.path}>{menu.title}</a>
+                </span>
+              ))
+            }
           </p>
         </div>
       </div>

src/assets/icons/arrow.svg

@@ -1,6 +1,6 @@
 ---
 import { Picture } from "astro:assets";
-import logoImage from "/public/assets/images/RecursiveZero-White.jpg";
+//import logoImage from "/public/assets/images/RecursiveZero-White.jpg";
 ---
 
 <header>
@@ -9,7 +9,7 @@ import logoImage from "/public/assets/images/RecursiveZero-White.jpg";
       <div class="mx-5 flex w-full items-center justify-between">
         <h1 class="text-[1.05rem] font-bold leading-[-0.03em] lg:text-[1.2rem]">
           <a href="/" class="flex items-center gap-[0.5rem] lg:flex-row">
-            <Picture
+            <!--<Picture
               src={logoImage}
               formats={["png", "jpeg", "jpg", "webp"]}
               alt="logo"
@@ -19,19 +19,11 @@ import logoImage from "/public/assets/images/RecursiveZero-White.jpg";
               id="clipped-logo"
               aria-label={"RecursiveZero Logo"}
               title={"RecursiveZero Logo"}
-            />
+            />-->
             A gupt startup
           </a>
         </h1>
         <ul class="menu-list flex items-center gap-[1.5rem] lg:flex-row-reverse">
-          <!--<li id="themeToggle">
-            <button class="sunBtn">
-              <i class="fa fa-sun-o" aria-hidden="true">Light</i>
-            </button>
-            <button class="moonBtn hidden">
-              <i class="fa fa-moon-o" aria-hidden="true">Dark</i>
-            </button>
-          </li>-->
           <li id="menuToggle" class="menu-button lg:hidden">
             <button id="closeBtn" class="ml-[3px] hidden">
               <i class="fa fa-times" aria-hidden="true"></i>
@@ -42,7 +34,7 @@ import logoImage from "/public/assets/images/RecursiveZero-White.jpg";
           </li>
           <!-- desktop menu -->
           <a href="/career" class="hidden lg:block">
-            <button class="yellowBtnHover rounded-md bg-[#FFCC00] px-[10px] py-[5px] text-[#111]"> Join us! </button>
+            <button class="rounded-md bg-[#FFCC00] px-[10px] py-[5px] text-[#111]"> Join us! </button>
           </a>
         </ul>
       </div>

src/assets/icons/hamburger.svg

@@ -1,73 +1,28 @@
+---
+import StarIcon from "@/assets/icons/star.svg";
+---
+
+<style is:inline>
+  .star {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+  }
+  .fill > svg {
+    fill: #ffcc00;
+  }
+</style>
+
 <article>
   <div class="review-card rounded-[10px] border-2 border-solid border-gray-500">
-    <div class="reviewcard-wrapper p-[10px] md:p-[20px]">
+    <div class="review-card-wrapper p-[10px] md:p-[20px]">
       <div class="review-item">
         <div class="review mb-[10px] flex items-center gap-x-[5px]">
-          <span>
-            <svg
-              class="me-1 h-5 w-5 text-yellow-300"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 22 20"
-            >
-              <path
-                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
-              ></path>
-            </svg>
-          </span>
-          <span>
-            <svg
-              class="me-1 h-5 w-5 text-yellow-300"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 22 20"
-            >
-              <path
-                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
-              ></path>
-            </svg>
-          </span>
-          <span>
-            <svg
-              class="me-1 h-5 w-5 text-yellow-300"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 22 20"
-            >
-              <path
-                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
-              ></path>
-            </svg>
-          </span>
-          <span>
-            <svg
-              class="me-1 h-5 w-5 text-yellow-300"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 22 20"
-            >
-              <path
-                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
-              ></path>
-            </svg>
-          </span>
-          <span>
-            <svg
-              class="me-1 h-5 w-5 text-gray-300 dark:text-gray-500"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 22 20"
-            >
-              <path
-                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"
-              ></path>
-            </svg>
-          </span>
+          <span class="star fill"><StarIcon /></span>
+          <span class="star"><StarIcon /></span>
+          <span class="star"><StarIcon /></span>
+          <span class="star"><StarIcon /></span>
+          <span class="star"><StarIcon /></span>
         </div>
         <div>
           <h3

src/assets/icons/star.svg

@@ -1,7 +1,6 @@
 ---
 import "@/assets/styles/globals.css";
 import { siteConfig } from "@/site-config";
-import "@fontsource/roboto";
 
 const { title, description, ogImage, articleDate } = Astro.props;
 

src/assets/styles/custom-font.css

@@ -4,7 +4,9 @@ import { siteConfig } from "@/site.config";
 
 //components
 import Footer from "@/components/Footer.astro";
-import Header from "@/components/Header.astro";
+//import Header from "@/components/Header.astro";
+import Header from "@/layouts/common/Header";
+
 import BaseHead from "@/layouts/BaseHead";
 import Menu from "./common/Menu.astro";
 

src/assets/styles/footer.css

@@ -37,7 +37,7 @@ export const NavbarLinks: LinkProps[] = [
 
 export const FooterLinks: LinkProps[] = [
   {
-    title: "privacy Policy",
+    title: "Privacy Policy",
     path: "/privacy",
     isActive: true
   },