From 575df35155091e0b3456fbdecec0675b02aa10a2 Mon Sep 17 00:00:00 2001
From: Sumanth U <157620444+Sumanth077s@users.noreply.github.com>
Date: Fri, 18 Oct 2024 12:20:53 +0530
Subject: [PATCH] Updated Footer.tsx

---
 apps/web/components/Footer.tsx | 72 +++++++++++-----------------------
 1 file changed, 23 insertions(+), 49 deletions(-)

diff --git a/apps/web/components/Footer.tsx b/apps/web/components/Footer.tsx
index 5cd93f4..ceb0e67 100644
--- a/apps/web/components/Footer.tsx
+++ b/apps/web/components/Footer.tsx
@@ -4,65 +4,39 @@ import Link from "next/link";
 import { Montserrat } from "next/font/google";
 import LinkedInButton from "./ui/TailwindButton";
 
-
-
 const alata = Montserrat({
   weight: "800",
   subsets: ["latin"],
   display: "swap",
 });
+
 function Footer() {
   return (
     <div className="w-full bg-slate-900 h-[50vh] dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center pb-10">
-      <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black  [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
-      <footer className="bg-transparent rounded-lg  m-4 mx-auto w-[80%] z-10 flex items-center justify-center">
-        <div className="w-full max-w-screen-xl mx-auhref p-4 md:py-8">
+      <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+      <footer className="bg-transparent rounded-lg m-4 mx-auto w-[80%] z-10 flex items-center justify-center">
+        <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
           <div className="sm:flex sm:items-center sm:justify-between">
-            <Link
-              href="/"
-              className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"
-            >
+            <Link href="/" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
               <Image src={logo} height={50} width={50} alt="logo" />
               <h2 className={`text-2xl font-bold ${alata.className}`}>
-                <span
-                  className={`text-orange-300 font-extrabold ${alata.className}`}
-                >
-                  Create
-                </span>{" "}
-                <span
-                  className={`text-orange-500 font-extrabold ${alata.className}`}
-                >
-                  My
-                </span>{" "}
-                <span
-                  className={`text-red-500 font-extrabold ${alata.className}`}
-                >
-                  API
-                </span>
+                <span className="text-orange-300 font-extrabold">Create</span>{" "}
+                <span className="text-orange-500 font-extrabold">My</span>{" "}
+                <span className="text-red-500 font-extrabold">API</span>
               </h2>
             </Link>
-            <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0 ">
-              <li>
-                <Link href="/docs" className="hover:underline me-4 md:me-6">
-                  Docs
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href="/Puskar-Roy/create-my-api"
-                  className="hover:underline me-4 md:me-6"
-                >
-                  Github
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href="https://www.npmjs.com/package/create-my-api"
-                  className="hover:underline me-4 md:me-6"
-                >
-                  NPM
-                </Link>
-              </li>
+            <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0">
+              {[
+                { href: "/docs", label: "Docs" },
+                { href: "https://github.com/Puskar-Roy/create-my-api", label: "Github" },
+                { href: "https://www.npmjs.com/package/create-my-api", label: "NPM" },
+              ].map((link, index) => (
+                <li key={index}>
+                  <Link href={link.href} className="hover:underline me-4 md:me-6">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
               <li>
                 <Link href="https://www.linkedin.com/in/puskar-roy/">
                   <LinkedInButton />
@@ -70,9 +44,9 @@ function Footer() {
               </li>
             </ul>
           </div>
-          <hr className="my-6 border-gray-200 sm:mx-auhref  lg:my-8" />
-          <span className="block text-sm text-white sm:text-center ">
-            © Design And Devloped By{" "}
+          <hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
+          <span className="block text-sm text-white sm:text-center">
+            © Designed and Developed By{" "}
             <Link href="https://puskarroy.site" className="hover:underline">
               Puskar Roy
             </Link>