basically done for today

app/globals.css

@@ -202,7 +202,6 @@ body {
 }
 
 footer {
-  /* padding: 3% 9%; */
   background-image: url("/bg.svg");
   background-position: top;
   background-size: cover;
@@ -229,7 +228,6 @@ footer {
 }
 .footop a {
   text-decoration: none;
-  color: #ffffffb7;
   font-weight: 300;
   font-size: 1rem;
   transition: all 0.3s ease;
@@ -237,32 +235,22 @@ footer {
 
 .footbootom h4 {
   font-size: 1rem;
-  color: #ffffffb7;
   font-weight: 300;
 }
 
 .footcolum1 > p {
   line-height: 1;
   font-size: 1.2rem;
-  color: #ffffffb7;
   font-weight: 300;
   transition: all 0.2s ease;
 }
 
-.footop a:hover {
-  color: rgba(253, 162, 182, 0.774);
-}
-
 .box-socials-foot > a > i {
   font-size: 1.6rem;
   cursor: pointer;
   transition: all 0.3 ease;
 }
 
-.box-socials-foot > a > i:hover {
-  color: rgba(253, 162, 173, 0.774);
-}
-
 .footbootom > h4 > a {
   font-weight: 600;
   text-decoration: none;

components/shared/Footer.tsx

@@ -1,22 +1,24 @@
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 import Iconss from "../ui/icons";
+import { FOOTERLINKS } from "@/constants";
 
 const Footer = () => {
   return (
-    <footer className="flex flex-col px-24 md:px-32 py-10 w-full bg-white text-black dark:bg-[#00000738] dark:text-white">
+    <footer className="flex flex-col px-24 md:px-32 py-10 w-full bg-zinc-100 text-black dark:bg-[#00000738] dark:text-white border-t dark:border-none">
       <div className="footop flex justify-around items-start mb-14">
         <div className="flex items-center">
           <Image
             src="/logo.svg"
-            alt={`logo`}
+            alt="logo"
             width={200}
             height={80}
             className="dark:block hidden"
           />
           <Image
             src="/logodark.svg"
-            alt={`logo`}
+            alt="logo"
             width={200}
             height={80}
             className="dark:hidden block"
@@ -24,64 +26,51 @@ const Footer = () => {
         </div>
         <div className="footcolum1 flex flex-col items-start justify-center ">
           <h1 className="foot-header font-[700] text-primary">Other Pages</h1>
-          <h3>
+          {FOOTERLINKS.otherPages.map((link) => (
-            <a href="/" className="hover:text-primary/70">
+            <h3 key={link.href}>
-              Home
+              <Link href={link.href} className="hover:text-green-100/70">
-            </a>
+                {link.label}
-          </h3>
+              </Link>
-          <h3>
+            </h3>
-            <a href="/testimonial" className="hover:text-primary/70">
+          ))}
-              Testimonial
-            </a>
-          </h3>
-          <h3>
-            <a href="/contact" className="hover:text-primary/70">
-              Contact
-            </a>
-          </h3>
         </div>
         <div className="footcolum1 flex flex-col items-start justify-center">
           <h1 className="foot-header text-primary">Plans</h1>
-          <h3>
+          {FOOTERLINKS.plans.map((link) => (
-            <a href="/blog" className="hover:text-primary/70">
+            <h3 key={link.href}>
-              Blog
+              <Link href={link.href} className="hover:text-green-100/70">
-            </a>
+                {link.label}
-          </h3>
+              </Link>
-          <h3>
+            </h3>
-            <a href="/downloads" className="hover:text-primary/70">
+          ))}
-              Downloads
-            </a>
-          </h3>
-          <h3>
-            <a href="/forum" className="hover:text-primary/70">
-              Forum
-            </a>
-          </h3>
         </div>
         <div className="footcolum1 flex flex-col items-start justify-center">
           <h1 className="foot-header text-primary">Social</h1>
-          <p>Support Us on Socials</p>
+          <p>{FOOTERLINKS.social.supportText}</p>
           <div className="box-socials-foot flex py-5">
             <Iconss />
           </div>
         </div>
       </div>
-      <div className="line mb-6 border-t border-white/30"></div>
+      <div className="line mb-6 border-t dark:border-white/30 border-gray-300"></div>
       <div className="footbootom flex justify-between items-center">
         <h4 className="text-sm max-md:hidden">
           Designed and Developed by{" "}
-          <a href="https://abhijee.com" className="text-primary font-semibold">
+          <Link
-            Proxy
+            href={FOOTERLINKS.footerBottom.designedBy.href}
-          </a>
+            className="text-primary font-semibold"
+          >
+            {FOOTERLINKS.footerBottom.designedBy.label}
+          </Link>
         </h4>
         <h4 className="text-sm">
           All Rights Reserved{" "}
-          <a
+          <Link
-            href="https://cyprostudio.com"
+            href={FOOTERLINKS.footerBottom.rightsReserved.href}
             className="text-primary font-semibold"
           >
-            Cypro Studio
+            {FOOTERLINKS.footerBottom.rightsReserved.label}
-          </a>
+          </Link>
         </h4>
       </div>
     </footer>

constants/index.tsx

@@ -116,3 +116,29 @@ export const questions = [
       "You can read the documents to learn how to use the SVR.JS web server.",
   },
 ];
+
+export const FOOTERLINKS = {
+  otherPages: [
+    { href: "/", label: "Home" },
+    { href: "/testimonial", label: "Testimonial" },
+    { href: "/contact", label: "Contact" },
+  ],
+  plans: [
+    { href: "/blog", label: "Blog" },
+    { href: "/downloads", label: "Downloads" },
+    { href: "/forum", label: "Forum" },
+  ],
+  social: {
+    supportText: "Support Us on Socials",
+  },
+  footerBottom: {
+    designedBy: {
+      href: "https://abhijee.com",
+      label: "Proxy",
+    },
+    rightsReserved: {
+      href: "https://cyprostudio.com",
+      label: "Cypro Studio",
+    },
+  },
+};