From 16c28cea787db8fcd9303c50641cbea99e59924c Mon Sep 17 00:00:00 2001
From: Kenny W <KennyWambua>
Date: Fri, 8 Nov 2024 16:03:50 +0300
Subject: [PATCH 1/3] improved the footer design

---
 src/components/global/Footer.tsx | 138 ++++++++++++++-----------------
 1 file changed, 61 insertions(+), 77 deletions(-)

diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index 05e77ed..1866109 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -13,63 +13,73 @@ import { BsArrowRightShort } from "react-icons/bs";
 const Footer = () => {
   return (
     <React.Fragment>
-      <footer className="relative isolate bottom-0 left-0 bg-background w-full p-4 font-Poppins">
-        <div className="max-w-[1560px] mx-auto ">
+      <footer className="relative isolate bottom-0 bg-background w-full font-Poppins">
+        <div className="max-w-[1560px] mx-8 2xl:mx-auto">
           {/* Upper Footer Content */}
-          <div className="flex items-center justify-between border-b border-gray-300 pb-2">
-            <h2 className="font-semibold text-3xl">Denlly Group</h2>
-            <div className="flex items-center justify-center gap-2 font-semibold">
-              <BiPhoneCall stroke="5" className="h-10 w-10 text-violet-500" />
-              <div>
-                <span className="text-sm">Call Any Time</span>
-                <p>+254 729 994 794</p>
-              </div>
+          <div className="flex items-center justify-center gap-8 border bg-accent border-slate-200 py-4 rounded-lg -translate-y-1/2">
+            <div className="self-center">
+              <h1 className="font-bold text- mb-2">See Our New Updates</h1>
             </div>
+            <form method="post" className="flex items-center">
+              <input
+                type="email"
+                placeholder="Email here..."
+                aria-label="Email address"
+                className="p-4 bg-gray-200 rounded-l-md outline-none placeholder:text-sm placeholder:text-green-950 md:w-80 lg:w-96"
+              />
+              <button
+                type="submit"
+                className="group p-4 bg-violet-500 rounded-r-md "
+              >
+                <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
+              </button>
+            </form>
           </div>
 
           {/* Footer content */}
-          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-4">
             <div className="mt-4">
-              <div className="space-y">
-                <div className="flex items-center gap-2 mb-2">
-                  <span>
-                    <BiSolidMap className="text-violet-500 text-xl" />
-                  </span>
-                  <h1 className="font-bold text-lg text-gray-800">Address</h1>
+              <div className="flex-col">
+                <div>
+                  <h2 className="font-bold font-Playfair text-3xl mb-2">Denlly Group</h2>
+                  <p className="text-gray-900 px-2">
+                    Enhance wellness and beauty with expert, nature-based care
+                  </p>
                 </div>
-                <p className="">PAC ln, Roysambu</p>
-                <p className="">Kenya</p>
-              </div>
-              <div className="space-y">
-                <div className="flex items-center gap-2 mb-2">
-                  <span>
-                    <BiLogoTelegram className="text-violet-500 text-xl" />
-                  </span>
-                  <h1 className="font-bold text-lg text-gray-800">Say Hello</h1>
+                <div className="flex items-center justify-start gap-2 font-semibold">
+                  <BiPhoneCall
+                    stroke="5"
+                    className="h-20 w-10 text-violet-500"
+                  />
+                  <div>
+                    <span className="text-sm">Call Any Time</span>
+                    <p>+254 729 994 794</p>
+                  </div>
+                </div>
+                <div className="flex items-center justify-start sm:mt-0 ml-2">
+                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                    <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                  </div>
+                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                    <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                  </div>
+                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                    <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                  </div>
+                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                    <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                  </div>
                 </div>
-                <p className="mb-3">denllysparkagency@gmail.com</p>
-                <p>info.denllygroup@gmail.com</p>
               </div>
-              <div className="mt-4">
-                <h1 className="font-bold text-sm text-gray-800 mb-2">
-                  See Our New Updates
-                </h1>
+            </div>
 
-                <form method="post" className="flex items-center ">
-                  <input
-                    type="email"
-                    placeholder="Email here..."
-                    aria-label="Email address"
-                    className="p-2 bg-gray-200 rounded-l-md outline-none placeholder:text-sm placeholder:text-green-950"
-                  />
-                  <button
-                    type="submit"
-                    className="group p-2 bg-violet-500 rounded-r-md "
-                  >
-                    <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
-                  </button>
-                </form>
-              </div>
+            <div className="mt-4">
+              <h1 className="font-bold text-lg text-gray-800 mb-4">Company</h1>
+              <ul className="space-y-3 ">
+                <li>About Us</li>
+                <li>Our Team</li>
+                <li>Projects</li>
+              </ul>
             </div>
 
             <div className="mt-4">
@@ -83,15 +93,6 @@ const Footer = () => {
               </ul>
             </div>
 
-            <div className="mt-4">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">Company</h1>
-              <ul className="space-y-3 ">
-                <li>About Us</li>
-                <li>Our Team</li>
-                <li>Projects</li>
-              </ul>
-            </div>
-
             <div className="mt-4">
               <h1 className="font-bold text-lg text-gray-800 mb-4">
                 Resources
@@ -105,30 +106,13 @@ const Footer = () => {
             </div>
           </div>
 
-          <hr className="my-6 border-gray-300 sm:mx-auto lg:my-8" />
+          <hr className="mt-6 border-gray-300 sm:mx-auto lg:mt-8" />
           {/* Lower Footer Content */}
-          <div className="flex flex-col sm:flex-row items-center justify-between">
-            <h2 className="text-sm">
+          <div className="flex sm:flex-row items-center justify-start py-6">
+            <h2 className="text-sm tracking-wide">
               &copy;Copyright {new Date().getFullYear()}{" "}
-              <span className="font-bold hover:text-violet-500 transition-all duration-200 ease">
-                <a href="/"> Denlly Group</a>
-              </span>
+              <span>Denlly Group All Rights Reserved</span>
             </h2>
-
-            <div className="flex items-center justify-center mt-3 sm:mt-0">
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-            </div>
           </div>
         </div>
       </footer>

From 8dd34b8dd6ff0f17ffb4b84c024732ebcdd9da3b Mon Sep 17 00:00:00 2001
From: Kenny W <KennyWambua>
Date: Fri, 8 Nov 2024 18:41:15 +0300
Subject: [PATCH 2/3] Enhanced the footer

---
 .vscode/settings.json            |  6 ++
 src/components/global/Footer.tsx | 95 ++++++++++++++++++++++----------
 2 files changed, 72 insertions(+), 29 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c17cae3
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "Denlly",
+    "OFFDAY"
+  ]
+}
\ No newline at end of file
diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index 1866109..f1a9024 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -9,28 +9,29 @@ import {
   BiSolidMap,
 } from "react-icons/bi";
 import { BsArrowRightShort } from "react-icons/bs";
+import { Link } from "react-router-dom";
+import { NavLinks } from "../../data";
 
 const Footer = () => {
+  const servicesLink = NavLinks.find((navItem) => navItem.name === "Services");
+  const availableServices = servicesLink?.subLinks;
   return (
     <React.Fragment>
       <footer className="relative isolate bottom-0 bg-background w-full font-Poppins">
         <div className="max-w-[1560px] mx-8 2xl:mx-auto">
           {/* Upper Footer Content */}
-          <div className="flex items-center justify-center gap-8 border bg-accent border-slate-200 py-4 rounded-lg -translate-y-1/2">
-            <div className="self-center">
-              <h1 className="font-bold text- mb-2">See Our New Updates</h1>
+          <div className="flex items-center justify-between px-20 gap-8 border bg-primary/70 border-slate-200 py-4 -translate-y-1/2">
+            <div className="flex items-center">
+              <h1 className="font-semibold">See Our New Updates</h1>
             </div>
             <form method="post" className="flex items-center">
               <input
                 type="email"
                 placeholder="Email here..."
                 aria-label="Email address"
-                className="p-4 bg-gray-200 rounded-l-md outline-none placeholder:text-sm placeholder:text-green-950 md:w-80 lg:w-96"
+                className="p-2 bg-gray-200 outline-none placeholder:text-sm placeholder:text-green-950 md:w-80 lg:w-96"
               />
-              <button
-                type="submit"
-                className="group p-4 bg-violet-500 rounded-r-md "
-              >
+              <button type="submit" className="group p-2 bg-secondary">
                 <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
               </button>
             </form>
@@ -41,8 +42,10 @@ const Footer = () => {
             <div className="mt-4">
               <div className="flex-col">
                 <div>
-                  <h2 className="font-bold font-Playfair text-3xl mb-2">Denlly Group</h2>
-                  <p className="text-gray-900 px-2">
+                  <h2 className="font-bold font-Playfair text-3xl mb-2">
+                    Denlly Group
+                  </h2>
+                  <p className="text-gray-900 ">
                     Enhance wellness and beauty with expert, nature-based care
                   </p>
                 </div>
@@ -73,10 +76,14 @@ const Footer = () => {
               </div>
             </div>
 
-            <div className="mt-4">
+            <div className="mt-4 pl-2">
               <h1 className="font-bold text-lg text-gray-800 mb-4">Company</h1>
               <ul className="space-y-3 ">
-                <li>About Us</li>
+                <li>
+                  <Link to="/about-us" className="hover:text-violet-700">
+                    About Us
+                  </Link>
+                </li>
                 <li>Our Team</li>
                 <li>Projects</li>
               </ul>
@@ -87,32 +94,62 @@ const Footer = () => {
                 Our Services
               </h1>
               <ul className="space-y-3">
-                <li>Beauty</li>
-                <li>Cleaning</li>
-                <li>Insurance</li>
+                {availableServices?.map((service) => (
+                  <li key={service.name}>
+                    {service.isAvailable ? (
+                      <Link to={service.link} className="hover:text-violet-700">
+                        {service.name}
+                      </Link>
+                    ) : (
+                      <span>{service.name}</span>
+                    )}
+                  </li>
+                ))}
               </ul>
             </div>
 
-            <div className="mt-4">
+            <div className="mt-4 flex flex-col">
               <h1 className="font-bold text-lg text-gray-800 mb-4">
-                Resources
+                Working Hours
               </h1>
-              <ul className="space-y-3">
-                <li>Support Area</li>
-                <li>Terms & Conditions</li>
-                <li>Privacy Policy</li>
-                <li>Career</li>
-              </ul>
+              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
+                <p>Monday - Friday : </p>
+                <p>7:00 am - 6:00 pm </p>
+              </div>
+              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
+                <p>Saturday : </p>
+                <p>9:00 am - 7:00 pm </p>
+              </div>
+              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
+                <p>Sunday : </p>
+                <p>1:00 pm - 6:00 pm </p>
+              </div>
+              <div className="flex justify-between py-2 tracking-wide">
+                <p>Holidays : </p>
+                <p className="text-sm">OFFDAY</p>
+              </div>
             </div>
           </div>
 
-          <hr className="mt-6 border-gray-300 sm:mx-auto lg:mt-8" />
+          <hr className="mt-6 border-gray-300 sm:mx-auto lg:mt-8 px-6" />
           {/* Lower Footer Content */}
-          <div className="flex sm:flex-row items-center justify-start py-6">
-            <h2 className="text-sm tracking-wide">
-              &copy;Copyright {new Date().getFullYear()}{" "}
-              <span>Denlly Group All Rights Reserved</span>
-            </h2>
+          <div className="flex sm:flex-row items-center justify-between p-6">
+            <div className="text-xs tracking-wide">
+              <h2>
+                &copy;Copyright {new Date().getFullYear()}{" "}
+                <span>Denlly Group All Rights Reserved</span>
+              </h2>
+            </div>
+            <div className="text-xs tracking-wide flex gap-6">
+              <a href="#" className="">
+                {" "}
+                Privacy Policy{" "}
+              </a>
+              <a href="#" className="">
+                {" "}
+                Terms & Conditions{" "}
+              </a>
+            </div>
           </div>
         </div>
       </footer>

From 57e6061e35085f077c071f8b8096cbae1e82965d Mon Sep 17 00:00:00 2001
From: Kenny W <KennyWambua>
Date: Fri, 8 Nov 2024 19:44:33 +0300
Subject: [PATCH 3/3] Added responsiveness to footer

---
 src/components/global/Footer.tsx | 150 ++++++++++++++-----------------
 1 file changed, 68 insertions(+), 82 deletions(-)

diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index f1a9024..49192a3 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -2,11 +2,9 @@ import React from "react";
 import {
   BiLogoFacebook,
   BiLogoInstagram,
-  BiLogoTelegram,
   BiLogoTwitter,
   BiLogoWhatsapp,
   BiPhoneCall,
-  BiSolidMap,
 } from "react-icons/bi";
 import { BsArrowRightShort } from "react-icons/bs";
 import { Link } from "react-router-dom";
@@ -20,16 +18,14 @@ const Footer = () => {
       <footer className="relative isolate bottom-0 bg-background w-full font-Poppins">
         <div className="max-w-[1560px] mx-8 2xl:mx-auto">
           {/* Upper Footer Content */}
-          <div className="flex items-center justify-between px-20 gap-8 border bg-primary/70 border-slate-200 py-4 -translate-y-1/2">
-            <div className="flex items-center">
-              <h1 className="font-semibold">See Our New Updates</h1>
-            </div>
-            <form method="post" className="flex items-center">
+          <div className="flex flex-col lg:flex-row items-center justify-between px-6 sm:px-8 lg:px-24 gap-4 border bg-primary/70 border-slate-200 py-4 -translate-y-1/2">
+            <h1 className="font-semibold text-center">See Our New Updates</h1>
+            <form method="post" className="flex items-center w-full lg:w-auto">
               <input
                 type="email"
                 placeholder="Email here..."
                 aria-label="Email address"
-                className="p-2 bg-gray-200 outline-none placeholder:text-sm placeholder:text-green-950 md:w-80 lg:w-96"
+                className="p-2 bg-gray-200 outline-none placeholder:text-sm placeholder:text-green-950 flex-grow lg:flex-grow-0 md:w-80 lg:w-96"
               />
               <button type="submit" className="group p-2 bg-secondary">
                 <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
@@ -38,47 +34,42 @@ const Footer = () => {
           </div>
 
           {/* Footer content */}
-          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-4">
-            <div className="mt-4">
-              <div className="flex-col">
+          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-4 lg:px:0 py-8">
+            {/* Denlly group section */}
+            <div>
+              <h2 className="font-bold font-Playfair text-3xl mb-2">
+                Denlly Group
+              </h2>
+              <p className="text-gray-900 mb-4">
+                Enhance wellness and beauty with expert, nature-based care
+              </p>
+              <div className="flex items-center gap-2 font-semibold mb-4">
+                <BiPhoneCall stroke="5" className="text-violet-500" size="36" />
                 <div>
-                  <h2 className="font-bold font-Playfair text-3xl mb-2">
-                    Denlly Group
-                  </h2>
-                  <p className="text-gray-900 ">
-                    Enhance wellness and beauty with expert, nature-based care
-                  </p>
+                  <span className="text-sm block">Call Any Time</span>
+                  <p>+254 729 994 794</p>
+                </div>
+              </div>
+              <div className="flex space-x-4">
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
                 </div>
-                <div className="flex items-center justify-start gap-2 font-semibold">
-                  <BiPhoneCall
-                    stroke="5"
-                    className="h-20 w-10 text-violet-500"
-                  />
-                  <div>
-                    <span className="text-sm">Call Any Time</span>
-                    <p>+254 729 994 794</p>
-                  </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
                 </div>
-                <div className="flex items-center justify-start sm:mt-0 ml-2">
-                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                    <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
-                  </div>
-                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                    <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
-                  </div>
-                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                    <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
-                  </div>
-                  <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                    <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
-                  </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
                 </div>
               </div>
             </div>
 
-            <div className="mt-4 pl-2">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">Company</h1>
-              <ul className="space-y-3 ">
+            {/* Company section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Company</h1>
+              <ul className="space-y-3">
                 <li>
                   <Link to="/about-us" className="hover:text-violet-700">
                     About Us
@@ -89,10 +80,9 @@ const Footer = () => {
               </ul>
             </div>
 
-            <div className="mt-4">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">
-                Our Services
-              </h1>
+            {/* Services section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Our Services</h1>
               <ul className="space-y-3">
                 {availableServices?.map((service) => (
                   <li key={service.name}>
@@ -108,47 +98,43 @@ const Footer = () => {
               </ul>
             </div>
 
-            <div className="mt-4 flex flex-col">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">
-                Working Hours
-              </h1>
-              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
-                <p>Monday - Friday : </p>
-                <p>7:00 am - 6:00 pm </p>
-              </div>
-              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
-                <p>Saturday : </p>
-                <p>9:00 am - 7:00 pm </p>
-              </div>
-              <div className="flex justify-between border-b border-gray-300 py-2 tracking-wide">
-                <p>Sunday : </p>
-                <p>1:00 pm - 6:00 pm </p>
-              </div>
-              <div className="flex justify-between py-2 tracking-wide">
-                <p>Holidays : </p>
-                <p className="text-sm">OFFDAY</p>
+            {/* Working hours section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Working Hours</h1>
+              <div className="space-y-2">
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Monday - Friday : </p>
+                  <p>7:00 am - 6:00 pm </p>
+                </div>
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Saturday : </p>
+                  <p>9:00 am - 7:00 pm </p>
+                </div>
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Sunday : </p>
+                  <p>1:00 pm - 6:00 pm </p>
+                </div>
+                <div className="flex justify-between py-1">
+                  <p>Holidays : </p>
+                  <p className="text-sm">OFFDAY</p>
+                </div>
               </div>
             </div>
           </div>
 
-          <hr className="mt-6 border-gray-300 sm:mx-auto lg:mt-8 px-6" />
           {/* Lower Footer Content */}
-          <div className="flex sm:flex-row items-center justify-between p-6">
-            <div className="text-xs tracking-wide">
-              <h2>
-                &copy;Copyright {new Date().getFullYear()}{" "}
-                <span>Denlly Group All Rights Reserved</span>
-              </h2>
-            </div>
-            <div className="text-xs tracking-wide flex gap-6">
-              <a href="#" className="">
-                {" "}
-                Privacy Policy{" "}
-              </a>
-              <a href="#" className="">
-                {" "}
-                Terms & Conditions{" "}
-              </a>
+          <div className="mt-6 border-t border-gray-300 flex flex-col sm:flex-row items-center justify-between text-xs px-2 py-6 space-y-2 sm:space-y-0">
+            <p>
+              &copy;Copyright {new Date().getFullYear()}{" "}
+              <span>Denlly Group All Rights Reserved</span>
+            </p>
+            <div className="flex space-x-8">
+              <Link to="#" className="hover:text-violet-700">
+                Privacy Policy
+              </Link>
+              <Link to="#" className="hover:text-violet-700">
+                Terms & Conditions
+              </Link>
             </div>
           </div>
         </div>