From 617a8d63e8f527bee045040bcf0d5fc52ad031ca Mon Sep 17 00:00:00 2001
From: merajjahir <meraj.jahir17@gmail.com>
Date: Wed, 16 Feb 2022 15:08:55 +0600
Subject: [PATCH]  30 footer ready

---
 dist/tailshape.css                     | 824 ++++++++++++-------------
 public/componets/footer/10_footer.html | 103 ++--
 public/componets/footer/11_footer.html |   4 +-
 public/componets/footer/12_footer.html | 259 ++++----
 public/componets/footer/13_footer.html |  51 +-
 public/componets/footer/14_footer.html | 268 ++++----
 public/componets/footer/15_footer.html | 274 ++++----
 public/componets/footer/16_footer.html |  25 +-
 public/componets/footer/17_footer.html |  67 +-
 public/componets/footer/18_footer.html |  56 +-
 public/componets/footer/19_footer.html |  20 +-
 public/componets/footer/1_footer.html  |  42 +-
 public/componets/footer/20_footer.html |  20 +-
 public/componets/footer/21_footer.html |  98 +--
 public/componets/footer/22_footer.html |  88 +--
 public/componets/footer/23_footer.html | 179 +++---
 public/componets/footer/24_footer.html |  59 ++
 public/componets/footer/25_footer.html |  86 +++
 public/componets/footer/26_footer.html |  55 ++
 public/componets/footer/27_footer.html |  53 ++
 public/componets/footer/28_footer.html | 136 ++++
 public/componets/footer/29_footer.html | 176 ++++++
 public/componets/footer/2_footer.html  |  57 +-
 public/componets/footer/30_footer.html | 304 +++++++++
 public/componets/footer/3_footer.html  | 296 ++++-----
 public/componets/footer/4_footer.html  | 217 +++----
 public/componets/footer/5_footer.html  |  57 +-
 public/componets/footer/6_footer.html  | 252 ++++----
 public/componets/footer/7_footer.html  |  95 +--
 public/componets/footer/8_footer.html  | 224 +++----
 public/componets/footer/9_footer.html  | 158 ++---
 public/componets/footer/footer.html    | 496 +++++++--------
 32 files changed, 3013 insertions(+), 2086 deletions(-)
 create mode 100644 public/componets/footer/26_footer.html
 create mode 100644 public/componets/footer/27_footer.html
 create mode 100644 public/componets/footer/28_footer.html
 create mode 100644 public/componets/footer/29_footer.html
 create mode 100644 public/componets/footer/30_footer.html

diff --git a/dist/tailshape.css b/dist/tailshape.css
index f691ff8..eb68082 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -557,20 +557,20 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 1rem;
 }
 
-.left-0 {
-  left: 0px;
+.bottom-auto {
+  bottom: auto;
 }
 
-.bottom-0 {
-  bottom: 0px;
+.left-0 {
+  left: 0px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.bottom-auto {
-  bottom: auto;
+.bottom-0 {
+  bottom: 0px;
 }
 
 .z-20 {
@@ -637,6 +637,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   float: left;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -645,10 +649,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin: 2.5rem;
 }
 
-.m-1 {
-  margin: 0.25rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -664,11 +664,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 1.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
@@ -679,11 +699,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 4rem;
 }
 
-.my-10 {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem;
-}
-
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
@@ -709,21 +724,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 0.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.-mx-2 {
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-}
-
-.-mx-4 {
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -828,6 +828,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 1.5rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.-mt-20 {
+  margin-top: -5rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -844,14 +864,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 1.25rem;
 }
 
-.-mt-20 {
-  margin-top: -5rem;
-}
-
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
 .-mr-12 {
   margin-right: -3rem;
 }
@@ -860,10 +872,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 1rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -952,14 +960,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 2.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
 .block {
   display: block;
 }
@@ -1020,6 +1020,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.75rem;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.h-auto {
+  height: auto;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -1036,14 +1044,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 6rem;
 }
 
-.h-auto {
-  height: auto;
-}
-
-.h-px {
-  height: 1px;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1100,6 +1100,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 0.75rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-5\/6 {
   width: 83.333333%;
 }
@@ -1128,10 +1132,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 33.333333%;
 }
 
-.w-40 {
-  width: 10rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -1160,14 +1160,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 24rem;
 }
 
-.max-w-6xl {
-  max-width: 72rem;
-}
-
 .max-w-md {
   max-width: 28rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1180,10 +1184,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 42rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1542,8 +1542,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(255 255 255 / 0.25);
 }
 
-.border-transparent {
-  border-color: transparent;
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
 .border-gray-400 {
@@ -1551,6 +1552,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-pink-500 {
   --tw-border-opacity: 1;
   border-color: rgb(236 72 153 / var(--tw-border-opacity));
@@ -1581,16 +1586,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1665,6 +1660,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-purple-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(168 85 247 / var(--tw-bg-opacity));
@@ -1695,11 +1695,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .bg-blue-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -1750,9 +1745,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(192 132 252 / var(--tw-bg-opacity));
 }
 
-.bg-sky-300 {
+.bg-gray-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
 }
 
 .bg-opacity-75 {
@@ -1763,14 +1762,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-bg-opacity: 0.25;
 }
 
-.bg-opacity-40 {
-  --tw-bg-opacity: 0.4;
-}
-
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1818,10 +1809,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   fill: #000;
 }
 
-.fill-white {
-  fill: #fff;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1852,6 +1839,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 0.25rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -1860,18 +1855,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 5rem;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .p-0 {
   padding: 0px;
 }
 
-.p-5 {
-  padding: 1.25rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1932,11 +1919,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 3rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -1947,11 +1954,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 0.25rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1972,21 +1974,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 0px;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2043,6 +2030,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 3rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2111,10 +2102,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 14rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2201,6 +2188,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 800;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-light {
   font-weight: 300;
 }
@@ -2213,10 +2204,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 100;
 }
 
-.font-normal {
-  font-weight: 400;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -2229,6 +2216,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.5;
 }
 
+.leading-7 {
+  line-height: 1.75rem;
+}
+
+.leading-8 {
+  line-height: 2rem;
+}
+
 .leading-relaxed {
   line-height: 1.625;
 }
@@ -2253,14 +2248,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.25rem;
 }
 
-.leading-7 {
-  line-height: 1.75rem;
-}
-
-.leading-8 {
-  line-height: 2rem;
-}
-
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -2376,11 +2363,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
 .text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
 
+.text-purple-400 {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity));
+}
+
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -2411,11 +2418,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(250 204 21 / var(--tw-text-opacity));
 }
 
-.text-yellow-500 {
-  --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity));
-}
-
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -2455,21 +2457,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(74 222 128 / var(--tw-text-opacity));
 }
 
-.text-purple-400 {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
-.text-purple-300 {
-  --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
-}
-
-.text-gray-50 {
-  --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -2480,11 +2467,6 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-line: none;
 }
 
-.decoration-sky-300 {
-  -webkit-text-decoration-color: #7dd3fc;
-          text-decoration-color: #7dd3fc;
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2540,6 +2522,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2558,12 +2546,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-inner {
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -2609,6 +2591,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 200ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2621,10 +2607,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 100ms;
 }
 
-.duration-700 {
-  transition-duration: 700ms;
-}
-
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2718,6 +2700,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-indigo-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -2777,21 +2774,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .hover\:text-purple-800:hover {
   --tw-text-opacity: 1;
   color: rgb(107 33 168 / var(--tw-text-opacity));
@@ -2827,6 +2809,36 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.hover\:text-purple-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(233 213 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-purple-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.hover\:text-pink-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(244 114 182 / var(--tw-text-opacity));
+}
+
 .hover\:text-purple-500:hover {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -2852,34 +2864,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.hover\:text-purple-400:hover {
+.hover\:text-purple-300:hover {
   --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(233 213 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
+  color: rgb(216 180 254 / var(--tw-text-opacity));
 }
 
 .hover\:text-opacity-75:hover {
@@ -2895,6 +2882,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 0.75;
 }
 
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2907,10 +2900,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.focus\:border-indigo-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
 .focus\:border-purple-600:focus {
@@ -2933,16 +2925,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(202 138 4 / var(--tw-border-opacity));
 }
 
-.focus\:border-indigo-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
-.focus\:bg-purple-600:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
-}
-
 .focus\:bg-transparent:focus {
   background-color: transparent;
 }
@@ -2952,6 +2934,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-purple-600:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2996,11 +2983,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-indigo-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-indigo-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
@@ -3062,6 +3044,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(167 139 250 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-purple-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3072,51 +3064,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(129 140 248 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-purple-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-stone-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-red-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-blue-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-green-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-lime-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 98 18 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-emerald-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -3127,25 +3074,34 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(125 211 252 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-sky-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
 
+.dark .dark\:from-emerald-800 {
+  --tw-gradient-from: #065f46;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(6 95 70 / 0));
+}
+
+.dark .dark\:to-cyan-800 {
+  --tw-gradient-to: #155e75;
+}
+
 .dark .dark\:fill-white {
   fill: #fff;
 }
@@ -3178,34 +3134,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-purple-700 {
+.dark .dark\:text-sky-400 {
   --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-violet-400 {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-purple-800 {
-  --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
+  color: rgb(56 189 248 / var(--tw-text-opacity));
 }
 
 .dark .dark\:text-purple-400 {
@@ -3218,14 +3149,54 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(216 180 254 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-purple-700 {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-600 {
+.dark .dark\:text-violet-400 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(167 139 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-sky-300 {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-sky-800 {
+  --tw-text-opacity: 1;
+  color: rgb(7 89 133 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
 }
 
 .dark .dark\:ring-2 {
@@ -3259,6 +3230,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(167 139 250 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-sky-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(7 89 133 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-purple-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:text-purple-600:hover {
   --tw-text-opacity: 1;
   color: rgb(147 51 234 / var(--tw-text-opacity));
@@ -3269,36 +3255,46 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(107 33 168 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-gray-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-purple-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-gray-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-sky-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-red-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-pink-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(244 114 182 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:ring-purple-400:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
@@ -3331,6 +3327,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-column: span 1 / span 1;
   }
 
+  .sm\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
   .sm\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -3341,11 +3342,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 1.25rem;
   }
 
-  .sm\:mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -3362,6 +3358,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 1rem;
   }
 
+  .sm\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .sm\:-mr-20 {
     margin-right: -5rem;
   }
@@ -3390,10 +3390,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 4rem;
   }
 
-  .sm\:mr-4 {
-    margin-right: 1rem;
-  }
-
   .sm\:mr-10 {
     margin-right: 2.5rem;
   }
@@ -3426,6 +3422,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: auto;
   }
 
+  .sm\:w-64 {
+    width: 16rem;
+  }
+
   .sm\:w-full {
     width: 100%;
   }
@@ -3450,10 +3450,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 33.333333%;
   }
 
-  .sm\:w-64 {
-    width: 16rem;
-  }
-
   .sm\:max-w-xl {
     max-width: 36rem;
   }
@@ -3694,6 +3690,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 0.5rem;
   }
 
+  .md\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .md\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
   .md\:mr-8 {
     margin-right: 2rem;
   }
@@ -3730,14 +3734,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 2.5rem;
   }
 
-  .md\:ml-6 {
-    margin-left: 1.5rem;
-  }
-
-  .md\:mb-24 {
-    margin-bottom: 6rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -3770,6 +3766,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 50%;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:w-6\/12 {
+    width: 50%;
+  }
+
+  .md\:w-4\/12 {
+    width: 33.333333%;
+  }
+
   .md\:w-3\/6 {
     width: 50%;
   }
@@ -3794,22 +3802,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 83.333333%;
   }
 
-  .md\:w-auto {
-    width: auto;
-  }
-
   .md\:w-1\/3 {
     width: 33.333333%;
   }
 
-  .md\:w-6\/12 {
-    width: 50%;
-  }
-
-  .md\:w-4\/12 {
-    width: 33.333333%;
-  }
-
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -4010,6 +4006,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 0px;
   }
 
+  .md\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .md\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
   .md\:pl-16 {
     padding-left: 4rem;
   }
@@ -4026,14 +4030,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 16rem;
   }
 
-  .md\:pr-20 {
-    padding-right: 5rem;
-  }
-
-  .md\:pb-12 {
-    padding-bottom: 3rem;
-  }
-
   .md\:text-left {
     text-align: left;
   }
@@ -4042,6 +4038,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     text-align: center;
   }
 
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
   .md\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -4062,9 +4063,8 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.75rem;
   }
 
-  .md\:text-5xl {
-    font-size: 3rem;
-    line-height: 1;
+  .md\:leading-snug {
+    line-height: 1.375;
   }
 
   .md\:leading-tight {
@@ -4075,10 +4075,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1;
   }
 
-  .md\:leading-snug {
-    line-height: 1.375;
-  }
-
   .md\:tracking-tight {
     letter-spacing: -0.025em;
   }
@@ -4230,6 +4226,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 66.666667%;
   }
 
+  .lg\:w-1\/6 {
+    width: 16.666667%;
+  }
+
+  .lg\:w-6\/12 {
+    width: 50%;
+  }
+
+  .lg\:w-4\/12 {
+    width: 33.333333%;
+  }
+
   .lg\:w-2\/6 {
     width: 33.333333%;
   }
@@ -4250,18 +4258,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 75%;
   }
 
-  .lg\:w-1\/6 {
-    width: 16.666667%;
-  }
-
-  .lg\:w-6\/12 {
-    width: 50%;
-  }
-
-  .lg\:w-4\/12 {
-    width: 33.333333%;
-  }
-
   .lg\:max-w-screen-xl {
     max-width: 1280px;
   }
@@ -4373,14 +4369,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
-  .lg\:p-0 {
-    padding: 0px;
-  }
-
   .lg\:p-10 {
     padding: 2.5rem;
   }
 
+  .lg\:p-0 {
+    padding: 0px;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -4460,6 +4456,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     text-align: right;
   }
 
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .lg\:text-5xl {
     font-size: 3rem;
     line-height: 1;
@@ -4470,11 +4471,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.5rem;
   }
 
-  .lg\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .lg\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/public/componets/footer/10_footer.html b/public/componets/footer/10_footer.html
index 41a2aaa..391f6b3 100644
--- a/public/componets/footer/10_footer.html
+++ b/public/componets/footer/10_footer.html
@@ -9,63 +9,64 @@
 </head>
 <body class="">
 
+
     <!-- footer 10 start -->
     
     <section class="section_divider">
-        <div>Footer 10</div>
-    </section>
+      <div>Footer 10</div>
+  </section>
 
-    <footer class="text-center dark:bg-emerald-900">
-        <div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
-          <div class="max-w-3xl mx-auto space-y-6">
-            <div class="flex justify-center space-x-6">
-              <a class="text-blue-500 hover:text-opacity-75 dark:ring-green-300 dark:ring-2 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Twitter </span>
-      
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-                </svg>
-              </a>
-      
-              <a class="text-gray-900 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> GitHub </span>
-      
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
-                </svg>
-              </a>
-      
-              <a class="text-pink-600 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Dribbble </span>
-      
-                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
-                </svg>
-              </a>
-            </div>
-      
-            <nav class="grid grid-cols-2 gap-4 p-6 dark:ring-2 dark:ring-green-300 text-sm font-medium bg-gray-100 rounded-lg sm:grid-cols-3 lg:grid-cols-6">
-              <a class="hover:opacity-75" href=""> Uses </a>
-              <a class="hover:opacity-75" href=""> Snippets </a>
-              <a class="hover:opacity-75" href=""> Bookmarks </a>
-              <a class="hover:opacity-75" href=""> Courses </a>
-              <a class="hover:opacity-75" href=""> Downloads </a>
-              <a class="hover:opacity-75" href=""> Projects </a>
-            </nav>
-      
-            <p class="max-w-lg mx-auto text-xs text-gray-500 dark:text-white">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, illo. Laborum ratione corrupti quasi ullam?
-              Voluptatum iusto at aperiam voluptas.
-            </p>
-      
-            <p class="text-xs font-medium">
-              © 2022 Company
-            </p>
-          </div>
+  <footer class="text-center dark:bg-emerald-900">
+    <div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
+      <div class="max-w-3xl mx-auto space-y-6">
+        <div class="flex justify-center space-x-6">
+          <a class="text-blue-500 hover:text-opacity-75 dark:ring-green-300 dark:ring-2 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Twitter </span>
+  
+            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+            </svg>
+          </a>
+  
+          <a class="text-gray-900 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> GitHub </span>
+  
+            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
+  
+          <a class="text-pink-600 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Dribbble </span>
+  
+            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
         </div>
-      </footer>
+  
+        <nav class="grid grid-cols-2 gap-4 p-6 dark:ring-2 dark:ring-green-300 text-sm font-medium bg-gray-100 rounded-lg sm:grid-cols-3 lg:grid-cols-6">
+          <a class="hover:opacity-75" href=""> Uses </a>
+          <a class="hover:opacity-75" href=""> Snippets </a>
+          <a class="hover:opacity-75" href=""> Bookmarks </a>
+          <a class="hover:opacity-75" href=""> Courses </a>
+          <a class="hover:opacity-75" href=""> Downloads </a>
+          <a class="hover:opacity-75" href=""> Projects </a>
+        </nav>
+  
+        <p class="max-w-lg mx-auto text-xs text-gray-500 dark:text-white">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, illo. Laborum ratione corrupti quasi ullam?
+          Voluptatum iusto at aperiam voluptas.
+        </p>
+  
+        <p class="text-xs font-medium">
+          © 2022 Company
+        </p>
+      </div>
+    </div>
+  </footer>
 
-    <!-- footer 10 end -->
+  <!-- footer 10 end -->
 
     
 
diff --git a/public/componets/footer/11_footer.html b/public/componets/footer/11_footer.html
index f4392b0..b989611 100644
--- a/public/componets/footer/11_footer.html
+++ b/public/componets/footer/11_footer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,7 +10,7 @@
 <body>
 
     <!-- footer 11 start -->
-    <section class="section_divider">
+    <section class="section_divider" id="footer_11">
         <div>Footer 11</div>
     </section>
 
diff --git a/public/componets/footer/12_footer.html b/public/componets/footer/12_footer.html
index 6e21940..1d58d8e 100644
--- a/public/componets/footer/12_footer.html
+++ b/public/componets/footer/12_footer.html
@@ -9,145 +9,144 @@
 </head>
 <body>
 
-
     <!-- footer 12 start -->
-    <section class="section_divider">
-        <div>Footer 12</div>
-    </section>
-    <div class="bg-gray-900">
-        <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
-          <div class="grid row-gap-10 mb-8 lg:grid-cols-6">
-            <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
-              <div>
-                <p class="font-medium tracking-wide text-gray-300">Category</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">News</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">World</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Games</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">References</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-medium tracking-wide text-gray-300">Apples</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Web</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">eCommerce</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Business</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Entertainment</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Portfolio</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-medium tracking-wide text-gray-300">Cherry</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Media</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Brochure</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Nonprofit</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Educational</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Projects</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-medium tracking-wide text-gray-300">Business</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Infopreneur</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Personal</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Wiki</a>
-                  </li>
-                  <li>
-                    <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-200">Forum</a>
-                  </li>
-                </ul>
-              </div>
+    <section class="section_divider" id="footer_12">
+      <div>Footer 12</div>
+  </section>
+  <div class="bg-gray-900">
+      <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="grid row-gap-10 mb-8 lg:grid-cols-6">
+          <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Category</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">News</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">World</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Games</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">References</a>
+                </li>
+              </ul>
             </div>
-            <div class="md:max-w-md lg:col-span-2">
-              <span class="text-base font-medium tracking-wide text-gray-300">Subscribe for updates</span>
-              <form class="flex flex-col mt-4 md:flex-row">
-                <input
-                  placeholder="Email"
-                  required=""
-                  type="text"
-                  class="flex-grow w-full h-12 px-4 mb-3 transition duration-200 bg-white border border-gray-300 rounded shadow-sm appearance-none md:mr-2 md:mb-0 focus:border-deep-purple-accent-400 focus:outline-none focus:shadow-outline"
-                />
-                <button
-                  type="submit"
-                  class="inline-flex items-center justify-center h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-deep-purple-accent-400 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
-                >
-                  Subscribe
-                </button>
-              </form>
-              <p class="mt-4 text-sm text-gray-500">
-                Bacon ipsum dolor amet short ribs pig sausage prosciuto chicken spare ribs salami.
-              </p>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Apples</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Web</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">eCommerce</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Business</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Entertainment</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Portfolio</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Cherry</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Media</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Brochure</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Nonprofit</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Educational</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Projects</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Business</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Infopreneur</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Personal</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Wiki</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Forum</a>
+                </li>
+              </ul>
             </div>
           </div>
-          <div class="flex flex-col justify-between pt-5 pb-10 border-t border-gray-800 sm:flex-row">
-            <p class="text-sm text-gray-500">
-              © Copyright 2020 Lorem Inc. All rights reserved.
+          <div class="md:max-w-md lg:col-span-2">
+            <span class="text-base font-medium tracking-wide text-gray-300">Subscribe for updates</span>
+            <form class="flex flex-col mt-4 md:flex-row">
+              <input
+                placeholder="Email"
+                required=""
+                type="text"
+                class="flex-grow w-full h-12 px-4 mb-3 transition duration-200 bg-white border border-gray-300 rounded shadow-sm appearance-none md:mr-2 md:mb-0 focus:border-deep-purple-accent-400 focus:outline-none focus:shadow-outline"
+              />
+              <button
+                type="submit"
+                class="inline-flex items-center justify-center h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-deep-purple-accent-400 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Subscribe
+              </button>
+            </form>
+            <p class="mt-4 text-sm text-gray-500">
+              Bacon ipsum dolor amet short ribs pig sausage prosciuto chicken spare ribs salami.
             </p>
-            <div class="flex items-center mt-4 space-x-4 sm:mt-0">
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
-                <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
-                  <circle cx="15" cy="15" r="4"></circle>
-                  <path
-                    d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
-                  ></path>
-                </svg>
-              </a>
-            </div>
+          </div>
+        </div>
+        <div class="flex flex-col justify-between pt-5 pb-10 border-t border-gray-800 sm:flex-row">
+          <p class="text-sm text-gray-500">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <div class="flex items-center mt-4 space-x-4 sm:mt-0">
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
+              <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                <circle cx="15" cy="15" r="4"></circle>
+                <path
+                  d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-accent-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                ></path>
+              </svg>
+            </a>
           </div>
         </div>
       </div>
+    </div>
 
-    <!--footer 12 end-->
-    
+  <!--footer 12 end-->
+  
 
 
 </body>
diff --git a/public/componets/footer/13_footer.html b/public/componets/footer/13_footer.html
index 42a45d9..fd6a1f0 100644
--- a/public/componets/footer/13_footer.html
+++ b/public/componets/footer/13_footer.html
@@ -8,62 +8,63 @@
     <title>footer 13</title>
 </head>
 <body>
-
+   
     <!-- footer 13 start -->
 
     <section class="section_divider">
-        <div>Footer 13</div>
-    </section>
+      <div>Footer 13</div>
+  </section>
 
-    <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+    <section class="dark:bg-gray-800">
+        <footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
         <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
           <div class="sm:col-span-2">
             <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
-              <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
                 <rect x="3" y="1" width="7" height="12"></rect>
                 <rect x="3" y="17" width="7" height="6"></rect>
                 <rect x="14" y="1" width="7" height="6"></rect>
                 <rect x="14" y="11" width="7" height="12"></rect>
               </svg>
-              <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+              <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
             </a>
             <div class="mt-6 lg:max-w-sm">
-              <p class="text-sm text-gray-800">
+              <p class="text-sm text-gray-500 ">
                 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
               </p>
-              <p class="mt-4 text-sm text-gray-800">
+              <p class="mt-4 text-sm text-gray-500 ">
                 Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
               </p>
             </div>
           </div>
           <div class="space-y-2 text-sm">
-            <p class="text-base font-bold tracking-wide text-gray-900">Contacts</p>
+            <p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
             <div class="flex">
-              <p class="mr-1 text-gray-800">Phone:</p>
-              <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">850-123-5021</a>
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Phone:</p>
+              <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
             </div>
             <div class="flex">
-              <p class="mr-1 text-gray-800">Email:</p>
-              <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">info@lorem.mail</a>
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Email:</p>
+              <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300  text-gray-300 hover:text-purple-400">info@lorem.mail</a>
             </div>
             <div class="flex">
-              <p class="mr-1 text-gray-800">Address:</p>
-              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Address:</p>
+              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
                 312 Lovely Street, NY
               </a>
             </div>
           </div>
           <div>
-            <span class="text-base font-bold tracking-wide text-gray-900">Social</span>
+              <span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
             <div class="flex items-center mt-1 space-x-3">
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
                 <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
                   <path
                     d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
                   ></path>
                 </svg>
               </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
                 <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
                   <circle cx="15" cy="15" r="4"></circle>
                   <path
@@ -71,7 +72,7 @@
                   ></path>
                 </svg>
               </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
                 <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
                   <path
                     d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
@@ -90,19 +91,19 @@
           </p>
           <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
             <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">F.A.Q</a>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
             </li>
             <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Privacy Policy</a>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
             </li>
             <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Terms &amp; Conditions</a>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms &amp; Conditions</a>
             </li>
           </ul>
         </div>
-      </div>
-    <!-- footer 13 end -->
-
+        </footer>
+    </section>
+  <!-- footer 13 end -->
 
 
 
diff --git a/public/componets/footer/14_footer.html b/public/componets/footer/14_footer.html
index f079247..0512302 100644
--- a/public/componets/footer/14_footer.html
+++ b/public/componets/footer/14_footer.html
@@ -11,139 +11,143 @@
 
 
     <!--footer 14 start -->
-    <section class="section_divider">
-        <div>Footer 14</div>
-    </section>
-    <section class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
-      <div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
-        <div class="md:max-w-md lg:col-span-2">
-          <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
-            <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
-              <rect x="3" y="1" width="7" height="12"></rect>
-              <rect x="3" y="17" width="7" height="6"></rect>
-              <rect x="14" y="1" width="7" height="6"></rect>
-              <rect x="14" y="11" width="7" height="12"></rect>
-            </svg>
-            <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
-          </a>
-          <div class="mt-4 lg:max-w-sm">
-            <p class="text-sm text-gray-800">
-              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
-            </p>
-            <p class="mt-4 text-sm text-gray-800">
-              Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-            </p>
-          </div>
-        </div>
-        <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
-          <div>
-            <p class="font-semibold tracking-wide text-gray-800">Category</p>
-            <ul class="mt-2 space-y-2">
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">News</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">World</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Games</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">References</a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <p class="font-semibold tracking-wide text-gray-800">Business</p>
-            <ul class="mt-2 space-y-2">
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Web</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">eCommerce</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Business</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Entertainment</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Portfolio</a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <p class="font-semibold tracking-wide text-gray-800">Apples</p>
-            <ul class="mt-2 space-y-2">
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Media</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Brochure</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Nonprofit</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Educational</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Projects</a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <p class="font-semibold tracking-wide text-gray-800">Cherry</p>
-            <ul class="mt-2 space-y-2">
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Infopreneur</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Personal</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Wiki</a>
-              </li>
-              <li>
-                <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">Forum</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col justify-between pt-5 pb-10 border-t sm:flex-row">
-        <p class="text-sm text-gray-600">
-          © Copyright 2020 Lorem Inc. All rights reserved.
-        </p>
-        <div class="flex items-center mt-4 space-x-4 sm:mt-0">
-          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-              <path
-                d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
-              ></path>
-            </svg>
-          </a>
-          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
-            <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
-              <circle cx="15" cy="15" r="4"></circle>
-              <path
-                d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
-              ></path>
-            </svg>
-          </a>
-          <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
-            <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-              <path
-                d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
-              ></path>
-            </svg>
-          </a>
-        </div>
-      </div>
-    </section>
+    <section class="section_divider" id="footer_14">
+      <div>Footer 14</div>
+  </section>
+  <section class="dark:bg-gray-800">
+      <footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
 
-  <!--footer 14 end-->
+        <div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
+          <div class="md:max-w-md lg:col-span-2">
+            <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide dark:text-white text-gray-800 uppercase">Company</span>
+            </a>
+            <div class="mt-4 lg:max-w-sm">
+              <p class="text-sm text-gray-500">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
+              </p>
+              <p class="mt-4 text-sm text-gray-500">
+                Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+              </p>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+            <div>
+              <p class="font-semibold tracking-wide dark:text-purple-400 text-gray-800">Category</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-purple-400">News</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-purple-400">World</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-purple-400">Games</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-600 transition-colors duration-300 hover:text-purple-400">References</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide dark:text-purple-400 text-gray-800">Business</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Web</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">eCommerce</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Business</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Entertainment</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Portfolio</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide dark:text-purple-400 text-gray-800">Apples</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Media</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Brochure</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Nonprofit</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Educational</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Projects</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide dark:text-purple-400 text-gray-800">Cherry</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Infopreneur</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Personal</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Wiki</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">Forum</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col justify-between pt-5 pb-10 border-t sm:flex-row">
+          <p class="text-sm text-gray-500">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <div class="flex items-center mt-4 space-x-4 sm:mt-0">
+            <a href="/" class="dark:text-purple-300 transition-colors duration-300 dark:hover:text-purple-500">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="dark:text-purple-300 transition-colors duration-300 dark:hover:text-purple-500">
+              <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                <circle cx="15" cy="15" r="4"></circle>
+                <path
+                  d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="dark:text-purple-300 transition-colors duration-300 dark:hover:text-purple-500">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+
+      </footer>
+  </section>
+
+<!--footer 14 end-->
 
 
 
diff --git a/public/componets/footer/15_footer.html b/public/componets/footer/15_footer.html
index 2f5717e..b0a5135 100644
--- a/public/componets/footer/15_footer.html
+++ b/public/componets/footer/15_footer.html
@@ -12,148 +12,148 @@
 
     <!-- footer 15 start -->
     <section class="section_divider">
-        <div>Footer 15</div>
-    </section>
-    <section class="relative mt-16 bg-deep-purple-accent-400">
-        <svg class="absolute top-0 w-full h-6 -mt-5 sm:-mt-10 sm:h-16 text-purple-700 " preserveAspectRatio="none" viewBox="0 0 1440 54">
-          <path fill="currentColor" d="M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z"></path>
-        </svg>
-        <div class="bg-purple-700 pt-12 mx-auto sm:max-w-full md:max-w-full lg:max-w-full md:px-24 lg:px-8">
-          <div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
-            <div class="md:max-w-md lg:col-span-2">
-              <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
-                <svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
-                  <rect x="3" y="1" width="7" height="12"></rect>
-                  <rect x="3" y="17" width="7" height="6"></rect>
-                  <rect x="14" y="1" width="7" height="6"></rect>
-                  <rect x="14" y="11" width="7" height="12"></rect>
-                </svg>
-                <span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
-              </a>
-              <div class="mt-4 lg:max-w-sm">
-                <p class="text-sm text-purple-50">
-                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
-                </p>
-                <p class="mt-4 text-sm text-purple-50">
-                  Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-                </p>
-              </div>
-            </div>
-            <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
-              <div>
-                <p class="font-semibold tracking-wide text-teal-300">
-                  Category
-                </p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">News</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">World</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Games</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">References</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-semibold tracking-wide  text-teal-300">Cherry</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Web</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">eCommerce</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Business</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Entertainment</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Portfolio</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-semibold tracking-wide text-teal-300">Apples</p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Media</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Brochure</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Nonprofit</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Educational</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Projects</a>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <p class="font-semibold tracking-wide text-teal-300">
-                  Business
-                </p>
-                <ul class="mt-2 space-y-2">
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Infopreneur</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Personal</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Wiki</a>
-                  </li>
-                  <li>
-                    <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Forum</a>
-                  </li>
-                </ul>
-              </div>
+      <div>Footer 15</div>
+  </section>
+  <section class="relative mt-16 bg-deep-purple-accent-400">
+      <svg class="absolute top-0 w-full h-6 -mt-5 sm:-mt-10 sm:h-16 dark:text-purple-800 text-purple-700 " preserveAspectRatio="none" viewBox="0 0 1440 54">
+        <path fill="currentColor" d="M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z"></path>
+      </svg>
+      <div class="bg-purple-700 dark:bg-purple-800 pt-12 mx-auto sm:max-w-full md:max-w-full lg:max-w-full md:px-24 lg:px-8">
+        <div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
+          <div class="md:max-w-md lg:col-span-2">
+            <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
+            </a>
+            <div class="mt-4 lg:max-w-sm">
+              <p class="text-sm text-purple-50">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
+              </p>
+              <p class="mt-4 text-sm text-purple-50">
+                Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+              </p>
             </div>
           </div>
-          <div class="flex flex-col justify-between pt-5 pb-10 border-t border-deep-purple-accent-200 sm:flex-row">
-            <p class="text-sm text-gray-100">
-              © Copyright 2020 Lorem Inc. All rights reserved.
-            </p>
-            <div class="flex items-center mt-4 space-x-4 sm:mt-0">
-              <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
-                <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
-                  <circle cx="15" cy="15" r="4"></circle>
-                  <path
-                    d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
-                  ></path>
-                </svg>
-              </a>
+          <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+            <div>
+              <p class="font-semibold tracking-wide text-teal-300">
+                Category
+              </p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">News</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">World</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Games</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">References</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide  text-teal-300">Cherry</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Web</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">eCommerce</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Business</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Entertainment</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Portfolio</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide text-teal-300">Apples</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Media</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Brochure</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Nonprofit</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Educational</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Projects</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-semibold tracking-wide text-teal-300">
+                Business
+              </p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Infopreneur</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Personal</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Wiki</a>
+                </li>
+                <li>
+                  <a href="/" class="transition-colors duration-300 text-purple-50 hover:text-teal-400">Forum</a>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
-      </section>
-    
-    <!-- footer 15 end -->
-    
+        <div class="flex flex-col justify-between pt-5 pb-10 border-t border-deep-purple-accent-200 sm:flex-row">
+          <p class="text-sm text-gray-100">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <div class="flex items-center mt-4 space-x-4 sm:mt-0">
+            <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
+              <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                <circle cx="15" cy="15" r="4"></circle>
+                <path
+                  d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="transition-colors duration-300 text-purple-100 hover:text-teal-accent-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  
+  <!-- footer 15 end -->
+  
 
 
 </body>
diff --git a/public/componets/footer/16_footer.html b/public/componets/footer/16_footer.html
index 019a76e..c20bb08 100644
--- a/public/componets/footer/16_footer.html
+++ b/public/componets/footer/16_footer.html
@@ -15,41 +15,41 @@
     <section class="section_divider">
         <div>Footer 16</div>
       </section>
-      <section class="flex items-end w-full  bg-white">
-        <footer class="w-full text-gray-700 bg-gray-100 body-font">
+      <section class="flex items-end w-full  bg-white dark:bg-gray-800">
+        <footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-600 body-font">
             <div
                 class="container flex flex-col flex-wrap px-5 py-10 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
                 <div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
                     <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
-                        <svg class="w-auto h-5 text-gray-900 fill-current" viewBox="0 0 202 69"
-                            xmlns="http://www.w3.org/2000/svg">
+                        <svg class="w-auto h-5 text-gray-900 dark:fill-white fill-black" viewBox="0 0 202 69"
+                            xmlns="http://www.w3.org/2000/svg " >
                             <path
                                 d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
                                 fill-rule="nonzero" />
                         </svg>
                     </a>
-                    <p class="mt-2 text-sm text-gray-500">Design, Code and Ship!</p>
+                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-200">Design, Code and Ship!</p>
                 </div>
                 <div class="flex flex-wrap flex-grow text-center lg:-mb-10 md:mt-0">
                     <div class="w-full px-4 mt-4 lg:w-1/4 md:w-1/4">
-                        <a class="text-gray-500 cursor-pointer hover:text-gray-900">Send a Message</a>
+                        <a class="text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-900">Send a Message</a>
                     </div>
                     <div class="w-full px-4 mt-4 lg:w-1/4 md:w-1/4">
-                        <a class="text-gray-500 cursor-pointer hover:text-gray-900">Terms & Privacy</a>
+                        <a class="text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-900">Terms & Privacy</a>
                     </div>
                     <div class="w-full px-4 mt-4 lg:w-1/4 md:w-1/4">
-                        <a class="text-gray-500 cursor-pointer hover:text-gray-900">Help Resources</a>
+                        <a class="text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-900">Help Resources</a>
                     </div>
                     <div class="w-full px-4 lg:w-1/4 md:w-1/4 lg:text-right">
                         <div class="mt-4">
                             <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
-                                <a class="text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700">
                                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         class="w-5 h-5" viewBox="0 0 24 24">
                                         <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700">
                                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         class="w-5 h-5" viewBox="0 0 24 24">
                                         <path
@@ -57,14 +57,14 @@
                                         </path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700">
                                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                         stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                         <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                         <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700">
                                     <svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
                                         stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
                                         <path stroke="none"
@@ -84,6 +84,5 @@
       <!-- footer 16 end -->
   
 
-
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/17_footer.html b/public/componets/footer/17_footer.html
index 6c1df55..0455b51 100644
--- a/public/componets/footer/17_footer.html
+++ b/public/componets/footer/17_footer.html
@@ -13,16 +13,18 @@
 
     <!-- footer 17 start -->
     <section class="section_divider">
-        <div>Footer 17</div>
-      </section>
+      <div>Footer 17</div>
+    </section>
+    <section class="dark:bg-black">
+
       <footer class="px-4 py-12 mx-auto max-w-7xl">
         <div class="grid grid-cols-2 gap-10 mb-3 md:grid-cols-3 lg:grid-cols-12 lg:gap-20">
           <div class="col-span-3">
             <a href="/" title="Go to Kutty Home Page">
-              <svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+              <svg class="w-auto h-6 fill-black dark:fill-white " width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
                 <path
                   d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
-                  fill="#1A202C"
+                  
                 />
                 <path
                   d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
@@ -35,62 +37,63 @@
               </svg>
               <span class="sr-only">Kutty Home Page</span>
             </a>
-            <p class="my-4 text-xs leading-normal text-gray-500">
+            <p class="my-4 text-xs leading-normal dark:text-gray-300 text-gray-500">
               Bring together your discussions, memberships, and content. Integrate a thriving community wherever your audience is, all under your own brand.
             </p>
             <label class="flex w-24">
               <span class="sr-only">Select a language</span>
               <select class="form-select form-select-sm">
                 <option>English</option>
-                <option>Tamil</option>
+                <option>Other</option>
               </select>
             </label>
           </div>
           <nav class="col-span-1 md:col-span-1 lg:col-span-2">
-            <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Product</p>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Features</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Integrations</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Documentation</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">FAQs</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Pricing</a>
+            <p class="mb-3 text-xs font-semibold tracking-wider dark:text-purple-700 text-gray-400 uppercase">Product</p>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Features</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Integrations</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Documentation</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">FAQs</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Pricing</a>
           </nav>
           <nav class="col-span-1 md:col-span-1 lg:col-span-2">
-            <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">About</p>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Press-Kit</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Company</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Privacy</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Blog</a>
+            <p class="mb-3 text-xs font-semibold tracking-wider dark:text-purple-700 text-gray-400 uppercase">About</p>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Press-Kit</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Company</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Privacy</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Blog</a>
           </nav>
           <nav class="col-span-2 md:col-span-1 lg:col-span-2">
-            <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Contact</p>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Twitter</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Instagram</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Email</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Advertising</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600">Chat</a>
+            <p class="mb-3 text-xs font-semibold tracking-wider dark:text-purple-700 text-gray-400 uppercase">Contact</p>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Twitter</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Instagram</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Email</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Advertising</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-600 dark:text-gray-200 dark:hover:text-purple-600">Chat</a>
           </nav>
           <div class="col-span-3">
-            <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">SUBSCRIBE TO OUR NEWSLETTER</p>
+            <p class="mb-3 text-xs font-semibold tracking-wider dark:text-purple-700 text-gray-400 uppercase">SUBSCRIBE TO OUR NEWSLETTER</p>
             <form action="#" class="mb-2">
               <div class="form-append">
-                <input class="form-input form-input-sm" type="email" placeholder="Enter your email" />
+                <input class="form-input form-input-sm dark:rounded-lg dark:p-1" type="email" placeholder="Enter your email" />
                 <button class="btn btn-light-primary btn-sm" type="submit">Subscribe</button>
               </div>
             </form>
-            <p class="text-xs leading-normal text-gray-500">Get lessons and insights on how to grow your freelance business.</p>
+            <p class="text-xs leading-normal dark:text-gray-300 text-gray-500">Get lessons and insights on how to grow your freelance business.</p>
           </div>
         </div>
         <div class="flex flex-col items-start justify-between pt-10 mt-10 border-t border-gray-100 md:flex-row md:items-center">
-          <p class="mb-6 text-sm text-left text-gray-600 md:mb-0">© Copyright 2020 Skcript. All Rights Reserved.</p>
+          <p class="mb-6 text-sm text-left text-gray-600 dark:text-gray-300 md:mb-0">© Copyright 2020 Skcript. All Rights Reserved.</p>
           <div class="flex items-start justify-start space-x-6 md:items-center md:justify-center">
-            <a href="#" class="text-sm text-gray-600 transition hover:text-purple-600">Terms</a>
-            <a href="#" class="text-sm text-gray-600 transition hover:text-purple-600">Privacy</a>
+            <a href="#" class="text-sm text-gray-600 dark:text-gray-300 transition hover:text-purple-600">Terms</a>
+            <a href="#" class="text-sm text-gray-600 dark:text-gray-300 transition hover:text-purple-600">Privacy</a>
           </div>
         </div>
       </footer>
-      
-      <!-- footer 17 end -->
-  
+    
+    </section>
+    <!-- footer 17 end -->
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/18_footer.html b/public/componets/footer/18_footer.html
index 4efc1fc..7f91dc0 100644
--- a/public/componets/footer/18_footer.html
+++ b/public/componets/footer/18_footer.html
@@ -12,16 +12,19 @@
 
     <!-- footer 18 start -->
     <section class="section_divider">
-        <div>Footer 18</div>
-      </section>
+      <div>Footer 18</div>
+    </section>
+
+    <section class="dark:bg-black">
+
       <footer class="px-4 py-12 mx-auto max-w-7xl">
         <div class="grid grid-cols-2 gap-10 mb-3 md:grid-cols-3 lg:grid-cols-11 lg:gap-20">
           <div class="col-span-3">
             <a href="#" title="Hellonext Home Page" class="flex items-center">
-              <svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+              <svg class="w-auto h-6 fill-black dark:fill-white" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
                 <path
                   d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
-                  fill="#1A202C"
+                  fill=""
                 />
                 <path
                   d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
@@ -34,47 +37,48 @@
               </svg>
               <span class="sr-only">Kutty Home Page</span>
             </a>
-            <p class="my-4 text-xs leading-normal text-gray-600">
+            <p class="my-4 text-xs leading-normal text-gray-600 dark:text-gray-200">
               Hosted in the EU 🇪🇺, with <strong>no user tracking</strong> scripts. Made all over the world by <a href="#" class="underline" target="_blank">17 amazing people</a>.
             </p>
           </div>
           <nav class="col-span-1 md:col-span-1 lg:col-span-2">
             <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Product</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Features</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Pricing</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Feedback</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">FAQs</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Features</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Pricing</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Feedback</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">FAQs</a>
           </nav>
           <nav class="col-span-2 md:col-span-1 lg:col-span-2">
             <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Support</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Chat</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#"> Email Support </a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">GDPR</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#"> Help </a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Chat</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#"> Email Support </a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">GDPR</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#"> Help </a>
           </nav>
           <nav class="col-span-1 md:col-span-1 lg:col-span-2">
             <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Resources</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Blog</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#"> Twitter </a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Alternatives</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Why feature vote?</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Blog</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#"> Twitter </a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Alternatives</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Why feature vote?</a>
           </nav>
           <nav class="col-span-1 md:col-span-1 lg:col-span-2">
             <p class="mb-3 text-xs font-semibold tracking-wider text-gray-400 uppercase">Company</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">About Us</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Privacy</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Terms</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800" href="#">Status</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">About Us</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Privacy</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Terms</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-800 transition md:mb-2 hover:text-purple-800 dark:text-gray-200 dark:hover:text-purple-800 " href="#">Status</a>
           </nav>
         </div>
         <div class="flex flex-col items-start justify-between pt-10 mt-10 border-t border-gray-100 md:flex-row md:items-center">
-          <p class="mb-2 text-xs text-left text-gray-600 md:mb-0">Built by Product Managers, for Product Managers.</p>
-          <p class="mb-0 text-xs text-left text-gray-600 md:mb-0">Copyright &copy; 2020 Hellonext</p>
+          <p class="mb-2 text-xs text-left text-gray-600 dark:text-gray-400 md:mb-0">Built by Product Managers, for Product Managers.</p>
+          <p class="mb-0 text-xs text-left text-gray-600 dark:text-gray-400 md:mb-0">Copyright &copy; 2020 Hellonext</p>
         </div>
       </footer>
-      
-      <!-- footer 18 end -->
-  
+    
+    </section>
+    <!-- footer 18 end -->
+
 
 
 </body>
diff --git a/public/componets/footer/19_footer.html b/public/componets/footer/19_footer.html
index 475ad6a..3bc9e8f 100644
--- a/public/componets/footer/19_footer.html
+++ b/public/componets/footer/19_footer.html
@@ -11,16 +11,18 @@
 
     <!-- footer 19 start -->
     <section class="section_divider">
-        <div>Footer 19</div>
-      </section>
-      <footer class="px-4 py-20 text-white bg-black">
+      <div>Footer 19</div>
+    </section>
+    <section class="dark:bg-black">
+
+      <footer class="px-4 py-20 dark:text-white text-gray-800 ">
         <div class="mx-auto max-w-7xl">
           <div class="grid grid-cols-2 gap-4 mb-3 md:grid-cols-5">
-            <a href="/" title="Go to Kutty Home Page" class="col-span-2 mb-12 md:col-span-1">
-              <svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+            <a href="/" title="Go to Kutty Home Page" class="col-span-2 mb-12 md:col-span-1 ">
+              <svg class="w-auto h-6 dark:fill-white fill-black" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
                 <path
                   d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
-                  fill="#FFFFFF"
+                  
                 />
                 <path
                   d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
@@ -68,10 +70,8 @@
           <p class="text-sm font-medium text-left text-gray-600 md:text-center">© Copyright 2020 Skcript Inc. All Rights Reserved.</p>
         </div>
       </footer>
-      
-      <!-- footer 19 end -->
-  
-
+    </section>
+    <!-- footer 19 end -->
 
 
 </body>
diff --git a/public/componets/footer/1_footer.html b/public/componets/footer/1_footer.html
index 25bea21..96366cb 100644
--- a/public/componets/footer/1_footer.html
+++ b/public/componets/footer/1_footer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,7 +9,7 @@
 </head>
 <body>
     
-    <div class="flex items-end w-full min-h-screen bg-white">
+    <!-- <div class="flex items-end w-full min-h-screen bg-white">
 
         <footer class="w-full text-gray-700 bg-gray-100 body-font">
             <div
@@ -125,7 +125,43 @@
             </div>
         </footer>
     
-    </div>
+    </div> -->
+
+    <!--footer 1 start-->
+        
+    <section class="section_divider" id="1_footer">
+        <div> Footer 1</div>
+    </section>
+    <hr>
+
+    <footer class="p-4 dark:bg-gray-800">
+        <div class="flex flex-col lg:flex-row items-center">
+        <div class="w-full dark:text-gray-300  lg:w-auto lg:mr-auto text-center lg:text-left">© 2019 Dunder Mifflin</div>
+        <div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
+        </div>
+    </footer>
+    <hr>
+    <footer class="flex flex-wrap items-center justify-between p-4 dark:bg-gray-800">
+        <div class="w-full dark:text-gray-300 lg:w-auto lg:mr-6 mb-4 lg:mb-0 text-center">© 2019 Dunder Mifflin</div>
+        <div class="flex flex-col lg:flex-row items-center w-full lg:w-auto">
+          <div class="mx-auto lg:mx-0 lg:ml-auto  ">
+            <a class="inline-block mt-0 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Products</a>
+            <a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Team</a>
+            <a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Customers</a>
+          </div>
+        <div class="flex justify-center mt-4 lg:mt-0 lg:ml-8"><img class="w-6 h-6 mr-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""></div>
+        </div>
+    </footer>
+    <hr>
+    <footer class="p-4 dark:bg-gray-800">
+        <div class="flex flex-col lg:flex-row items-center">
+        <div class="w-full dark:text-gray-300 lg:w-auto lg:mr-auto text-center lg:text-left">© <a href="https://appseed.us">AppSeed </a><span>(MIT License) - </span><a href="#">Tailwind CSS Components</a></div>
+        <div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
+        </div>
+    </footer>
+  
+<!--footer 1 end-->
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/20_footer.html b/public/componets/footer/20_footer.html
index 999261c..0e976b3 100644
--- a/public/componets/footer/20_footer.html
+++ b/public/componets/footer/20_footer.html
@@ -9,17 +9,17 @@
 </head>
 <body>
 
-
     <!--footer 20 start-->
     <section class="section_divider">
-        <div>Footer 20 </div>
-      </section>
+      <div>Footer 20 </div>
+    </section>
+    <section class="dark:bg-gray-800">
       <footer class="flex flex-col items-center justify-between px-4 py-12 mx-auto max-w-7xl md:flex-row">
-        <p class="mb-8 text-sm text-center text-gray-700 md:text-left md:mb-0">© Copyright 2020 Skcript. All Rights Reserved.</p>
+        <p class="mb-8 text-sm text-center text-gray-700 dark:text-gray-200 md:text-left md:mb-0">© Copyright 2020 Skcript. All Rights Reserved.</p>
         <div class="flex items-center space-x-6">
-          <a href="#">
+          <a href="#" >
             <span class="sr-only">Twitter</span>
-            <svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2031" viewBox="-0.25 -0.25 1109.5 901.5" class="w-5 h-5" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2031" viewBox="-0.25 -0.25 1109.5 901.5" class="w-5 h-5  " aria-hidden="true">
               <path
                 d="M741 .2V0h52l19 3.8c12.667 2.467 24.167 5.7 34.5 9.7 10.334 4 20.334 8.667 30 14 9.667 5.333 18.434 10.767 26.301 16.3 7.8 5.467 14.8 11.267 21 17.4C929.933 67.4 939.5 69 952.5 66s27-7.167 42-12.5 29.834-11.333 44.5-18c14.667-6.667 23.601-10.9 26.801-12.7 3.133-1.866 4.8-2.866 5-3l.199-.3 1-.5 1-.5 1-.5 1-.5.2-.3.3-.2.301-.2.199-.3 1-.3 1-.2-.199 1.5-.301 1.5-.5 1.5-.5 1.5-.5 1-.5 1-.5 1.5c-.333 1-.666 2.333-1 4-.333 1.667-3.5 8.333-9.5 20S1051 73 1042 85s-17.066 21.066-24.199 27.2c-7.2 6.2-11.967 10.533-14.301 13-2.333 2.533-5.166 4.866-8.5 7l-5 3.3-1 .5-1 .5-.199.3-.301.2-.3.2-.2.3-1 .5-1 .5-.199.3-.301.2-.3.2-.2.3-.199.3-.301.2-.3.2-.2.3h5l28-6c18.667-4 36.5-8.833 53.5-14.5l27-9 3-1 1.5-.5 1-.5 1-.5 1-.5 1-.5 2-.3 2-.2v2l-.5.2-.5.3-.199.3-.301.2-.3.2-.2.3-.199.3-.301.2-.3.2-.2.3-.199.3-.301.2-.5 1-.5 1-.3.2c-.133.2-4.366 5.866-12.7 17-8.333 11.2-12.833 16.866-13.5 17-.666.2-1.6 1.2-2.8 3-1.133 1.866-8.2 9.3-21.2 22.3s-25.732 24.566-38.199 34.7c-12.533 10.2-18.867 22.733-19 37.6-.2 14.8-.967 31.534-2.301 50.2-1.333 18.667-3.833 38.833-7.5 60.5-3.666 21.667-9.333 46.167-17 73.5-7.666 27.333-17 54-28 80s-22.5 49.333-34.5 70-23 38.167-33 52.5-20.166 27.833-30.5 40.5c-10.333 12.667-23.399 26.934-39.199 42.8-15.867 15.8-24.533 24.467-26 26-1.533 1.467-8.066 6.934-19.601 16.4-11.466 9.533-23.8 19.066-37 28.6-13.133 9.467-25.2 17.367-36.2 23.7s-24.266 13.566-39.8 21.7C630.734 840.4 614 848 596 855s-37 13.5-57 19.5-39.333 10.667-58 14c-18.666 3.333-39.833 6.167-63.5 8.5l-35.5 3.5v.5h-65v-.5l-8.5-.5c-5.666-.333-10.333-.667-14-1-3.666-.333-17.5-2.167-41.5-5.5s-42.833-6.667-56.5-10c-13.666-3.333-34-9.667-61-19s-50.1-18.767-69.3-28.3c-19.133-9.467-31.133-15.467-36-18-4.8-2.467-10.2-5.533-16.2-9.2l-9-5.5-.199-.3-.301-.2-.3-.2-.2-.3-1-.5-1-.5-.199-.3-.301-.2-.3-.2-.2-.3-.199-.3L.5 800H0v-2l1 .2 1 .3 4.5.5c3 .333 11.167.833 24.5 1.5 13.334.667 27.5.667 42.5 0s30.334-2.167 46-4.5c15.667-2.333 34.167-6.333 55.5-12 21.334-5.667 40.934-12.4 58.801-20.2 17.8-7.866 30.466-13.733 38-17.6 7.466-3.8 18.866-10.867 34.199-21.2l23-15.5.2-.3.3-.2.301-.2.199-.3.2-.3.3-.2.301-.2.199-.3 1-.3 1-.2.2-1 .3-1 .301-.2.199-.3-8-.5c-5.333-.333-10.5-.667-15.5-1s-12.833-1.833-23.5-4.5c-10.666-2.667-22.166-6.667-34.5-12-12.333-5.333-24.333-11.667-36-19-11.666-7.333-20.1-13.434-25.3-18.3-5.133-4.801-11.8-11.6-20-20.4-8.133-8.866-15.2-17.967-21.2-27.3s-11.733-20.101-17.199-32.3L124.5 551l-.5-1.5-.5-1.5-.3-1-.2-1 1.5.2 1.5.3 11 1.5c7.334 1 18.834 1.333 34.5 1 15.667-.333 26.5-1 32.5-2s9.667-1.667 11-2l2-.5 2.5-.5 2.5-.5.2-.3.3-.2.301-.2.199-.3-2-.5-2-.5-2-.5-2-.5-2-.5c-1.333-.333-3.666-1-7-2-3.333-1-12.333-4.667-27-11-14.666-6.333-26.333-12.5-35-18.5a241.7 241.7 0 0 1-24.8-19.7c-7.8-7.2-16.366-16.467-25.7-27.8-9.333-11.333-17.666-24.5-25-39.5-7.333-15-12.833-29.333-16.5-43a232.143 232.143 0 0 1-7.199-41.5L43 316l1 .2 1 .3 1 .5 1 .5 1 .5 1 .5 15.5 7c10.334 4.667 23.167 8.667 38.5 12 15.334 3.333 24.5 5.167 27.5 5.5l4.5.5h9l-.199-.3-.301-.2-.3-.2-.2-.3-.199-.3-.301-.2-.3-.2-.2-.3-1-.5-1-.5-.199-.3-.301-.2-.3-.2-.2-.3-1-.5-1-.5-.199-.3c-.2-.134-3.067-2.267-8.601-6.4-5.467-4.2-11.2-9.633-17.2-16.3s-12-13.667-18-21A162.158 162.158 0 0 1 77 271c-4.666-8.333-9.6-18.934-14.8-31.8-5.133-12.8-9.033-25.7-11.7-38.7-2.666-13-4.166-25.833-4.5-38.5-.333-12.667 0-23.5 1-32.5s3-19.167 6-30.5 7.334-23.333 13-36l8.5-19 .5-1.5.5-1.5.301-.2.199-.3.2-.3.3-.2.301.2.199.3.2.3.3.2.301.2.199.3.2.3.3.2.5 1 .5 1 .301.2.199.3 13.5 15c9 10 19.667 21.167 32 33.5 12.334 12.333 19.167 18.733 20.5 19.2 1.334.533 3 2.066 5 4.6 2 2.467 8.667 8.367 20 17.7 11.334 9.333 26.167 20.167 44.5 32.5 18.334 12.333 38.667 24.5 61 36.5 22.334 12 46.334 22.833 72 32.5 25.667 9.667 43.667 16 54 19 10.334 3 28 6.833 53 11.5s43.834 7.667 56.5 9c12.667 1.333 21.334 2.1 26 2.3l7 .2-.199-1.5-.301-1.5-2-12.5c-1.333-8.333-2-20-2-35s1.167-28.833 3.5-41.5c2.334-12.667 5.834-25.5 10.5-38.5 4.667-13 9.234-23.434 13.7-31.3 4.534-7.8 10.467-16.7 17.8-26.7 7.334-10 16.834-20.333 28.5-31 11.667-10.667 25-20.167 40-28.5s28.834-14.667 41.5-19c12.667-4.333 23.334-7.167 32-8.5 8.667-1.333 13-2.1 13-2.3z"
                 fill="#5da8dc"
@@ -28,7 +28,7 @@
               />
               <path
                 d="M0 399V0h741v.2c0 .2-4.333.966-13 2.3-8.666 1.333-19.333 4.167-32 8.5-12.666 4.333-26.5 10.667-41.5 19s-28.333 17.833-40 28.5c-11.666 10.667-21.166 21-28.5 31-7.333 10-13.266 18.9-17.8 26.7-4.466 7.866-9.033 18.3-13.7 31.3-4.666 13-8.166 25.833-10.5 38.5-2.333 12.667-3.5 26.5-3.5 41.5s.667 26.667 2 35l2 12.5.301 1.5.199 1.5-7-.2c-4.666-.2-13.333-.966-26-2.3-12.666-1.333-31.5-4.333-56.5-9s-42.666-8.5-53-11.5c-10.333-3-28.333-9.333-54-19-25.666-9.667-49.666-20.5-72-32.5-22.333-12-42.666-24.167-61-36.5-18.333-12.333-33.166-23.167-44.5-32.5-11.333-9.333-18-15.233-20-17.7-2-2.533-3.666-4.066-5-4.6-1.333-.467-8.166-6.867-20.5-19.2-12.333-12.333-23-23.5-32-33.5L80 44.5l-.199-.3-.301-.2-.5-1-.5-1-.3-.2-.2-.3-.199-.3-.301-.2-.3-.2-.2-.3-.199-.3-.301-.2-.3.2-.2.3-.199.3-.301.2-.5 1.5-.5 1.5L66 63c-5.666 12.667-10 24.667-13 36s-5 21.5-6 30.5-1.333 19.833-1 32.5c.334 12.667 1.834 25.5 4.5 38.5 2.667 13 6.567 25.9 11.7 38.7 5.2 12.866 10.134 23.466 14.8 31.8 4.667 8.333 10 16.167 16 23.5 6 7.333 12 14.333 18 21s11.733 12.1 17.2 16.3c5.533 4.134 8.4 6.267 8.601 6.4l.199.3 1 .5 1 .5.2.3.3.2.301.2.199.3 1 .5 1 .5.2.3.3.2.301.2.199.3.2.3.3.2.301.2.199.3h-9l-4.5-.5c-3-.333-12.166-2.167-27.5-5.5-15.333-3.333-28.166-7.333-38.5-12l-15.5-7-1-.5-1-.5-1-.5-1-.5-1-.3-1-.2 1.801 21c1.133 14 3.533 27.833 7.199 41.5 3.667 13.667 9.167 28 16.5 43 7.334 15 15.667 28.167 25 39.5 9.334 11.333 17.9 20.6 25.7 27.8a241.7 241.7 0 0 0 24.8 19.7c8.667 6 20.334 12.167 35 18.5 14.667 6.333 23.667 10 27 11 3.334 1 5.667 1.667 7 2l2 .5 2 .5 2 .5 2 .5 2 .5-.199.3-.301.2-.3.2-.2.3-2.5.5-2.5.5-2 .5c-1.333.333-5 1-11 2s-16.833 1.667-32.5 2c-15.666.333-27.166 0-34.5-1l-11-1.5-1.5-.3-1.5-.2.2 1 .3 1 .5 1.5.5 1.5 8.301 18.2C138.266 581.399 144 592.167 150 601.5s13.067 18.434 21.2 27.3c8.2 8.801 14.867 15.6 20 20.4 5.2 4.866 13.634 10.967 25.3 18.3 11.667 7.333 23.667 13.667 36 19 12.334 5.333 23.834 9.333 34.5 12 10.667 2.667 18.5 4.167 23.5 4.5s10.167.667 15.5 1l8 .5-.199.3-.301.2-.3 1-.2 1-1 .2-1 .3-.199.3-.301.2-.3.2-.2.3-.199.3-.301.2-.3.2-.2.3-23 15.5c-15.333 10.333-26.733 17.4-34.199 21.2-7.534 3.866-20.2 9.733-38 17.6-17.867 7.8-37.467 14.533-58.801 20.2-21.333 5.667-39.833 9.667-55.5 12-15.666 2.333-31 3.833-46 4.5s-29.166.667-42.5 0c-13.333-.667-21.5-1.167-24.5-1.5l-4.5-.5-1-.3-1-.2V399zM1107.801 109.8l.199-.3.5-.3.5-.2v792H382v-.5l35.5-3.5c23.667-2.333 44.834-5.167 63.5-8.5 18.667-3.333 38-8 58-14s39-12.5 57-19.5 34.734-14.6 50.2-22.8c15.534-8.134 28.8-15.367 39.8-21.7s23.067-14.233 36.2-23.7c13.2-9.533 25.534-19.066 37-28.6 11.534-9.467 18.067-14.934 19.601-16.4 1.467-1.533 10.133-10.2 26-26 15.8-15.866 28.866-30.133 39.199-42.8 10.334-12.667 20.5-26.167 30.5-40.5s21-31.833 33-52.5 23.5-44 34.5-70 20.334-52.667 28-80c7.667-27.333 13.334-51.833 17-73.5 3.667-21.667 6.167-41.833 7.5-60.5 1.334-18.667 2.101-35.4 2.301-50.2.133-14.866 6.467-27.4 19-37.6 12.467-10.134 25.199-21.7 38.199-34.7s20.067-20.434 21.2-22.3c1.2-1.8 2.134-2.8 2.8-3 .667-.134 5.167-5.8 13.5-17 8.334-11.134 12.567-16.8 12.7-17l.3-.2.5-1 .5-1 .301-.2.199-.3.2-.3.3-.2.301-.2.199-.3.2-.3.3-.2.301-.2zM812 3.8L793 0h316v107l-2 .2-2 .3-1 .5-1 .5-1 .5-1 .5-1.5.5-3 1-27 9c-17 5.667-34.833 10.5-53.5 14.5l-28 6h-5l.2-.3.3-.2.301-.2.199-.3.2-.3.3-.2.301-.2.199-.3 1-.5 1-.5.2-.3.3-.2.301-.2.199-.3 1-.5 1-.5 5-3.3c3.334-2.134 6.167-4.467 8.5-7 2.334-2.467 7.101-6.8 14.301-13C1024.933 106.066 1033 97 1042 85s16.5-23.833 22.5-35.5 9.167-18.333 9.5-20c.334-1.667.667-3 1-4l.5-1.5.5-1 .5-1 .5-1.5.5-1.5.301-1.5.199-1.5-1 .2-1 .3-.199.3-.301.2-.3.2-.2.3-1 .5-1 .5-1 .5-1 .5-.199.3c-.2.134-1.867 1.134-5 3-3.2 1.8-12.134 6.034-26.801 12.7-14.666 6.667-29.5 12.667-44.5 18s-29 9.5-42 12.5-22.566 1.4-28.699-4.8c-6.2-6.134-13.2-11.934-21-17.4-7.867-5.533-16.634-10.966-26.301-16.3a245.399 245.399 0 0 0-30-14c-10.333-4-21.833-7.233-34.5-9.7zM0 850.5V800h.5l.301.2.199.3.2.3.3.2.301.2.199.3 1 .5 1 .5.2.3.3.2.301.2.199.3 9 5.5c6 3.667 11.4 6.733 16.2 9.2 4.867 2.533 16.867 8.533 36 18 19.2 9.533 42.3 18.967 69.3 28.3s47.334 15.667 61 19c13.667 3.333 32.5 6.667 56.5 10s37.834 5.167 41.5 5.5c3.667.333 8.334.667 14 1l8.5.5v.5H0v-50.5z"
-                fill="#fff"
+                fill="rgba(191, 201, 202,0)"
                 stroke="#fff"
                 stroke-width=".5"
               />
@@ -81,9 +81,9 @@
           </a>
         </div>
       </footer>
-      
-      <!--footer 20 end-->
-  
+    </section>
+    <!--footer 20 end-->
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/21_footer.html b/public/componets/footer/21_footer.html
index b8f0be0..ad636a9 100644
--- a/public/componets/footer/21_footer.html
+++ b/public/componets/footer/21_footer.html
@@ -12,68 +12,69 @@
 
     <!-- footer 21 start  -->
     <section class="section_divider">
-        <div>Footer 21</div>
-      </section>
-      <footer class="px-4 py-16 mx-auto max-w-7xl">
+      <div>Footer 21</div>
+    </section>
+    <section class="dark:bg-gray-800 dark:text-white">
+      <footer class="px-4 py-16 mx-auto max-w-7xl ">
         <nav class="grid grid-cols-2 gap-12 mb-12 md:grid-cols-3 lg:grid-cols-5">
-          <div>
+          <div >
             <p class="mb-4 text-sm font-medium text-purple-600">Product</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Tour</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Online Whiteboard</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Downloads</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Integrations and Apps</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Security</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">All Integrations</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Slack Integration</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Microsoft Integrations</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Tour</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Online Whiteboard</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Downloads</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Integrations and Apps</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Security</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">All Integrations</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Slack Integration</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Microsoft Integrations</a>
           </div>
           <div>
             <p class="mb-4 text-sm font-medium text-purple-600">Plans and Pricing</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Pricing</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Team</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Business</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Enterprise</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Consultants</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Education</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">NPO</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Pricing</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Team</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Business</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Enterprise</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Consultants</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Education</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">NPO</a>
           </div>
           <div>
             <p class="mb-4 text-sm font-medium text-purple-600">Support and Resources</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Templates</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Events</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Guides</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Academy</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Help Center</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Consultant Directory</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Affiliate Program</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Status Page</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Templates</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Events</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Guides</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Academy</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Help Center</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Consultant Directory</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Affiliate Program</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Status Page</a>
           </div>
           <div>
             <p class="mb-4 text-sm font-medium text-purple-600">Company</p>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600">About</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600">Blog</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600">Contact Us</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600">We're Hiring</a>
-            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600">Legal</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600">About</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600">Blog</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600">Contact Us</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600">We're Hiring</a>
+            <a href="#" class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600">Legal</a>
           </div>
           <div class="col-span-2 md:col-span-1">
             <p class="mb-4 text-sm font-medium text-purple-600">Use Cases</p>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Ideation and Brainstorming</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Agile Workflows</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Research and Design</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Strategy and Planning</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Product Management</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Mind Mapping</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">Sticky Notes Capture</a>
-            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600" href="#">UX Research &amp; Design</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Ideation and Brainstorming</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Agile Workflows</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Research and Design</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Strategy and Planning</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Product Management</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Mind Mapping</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">Sticky Notes Capture</a>
+            <a class="flex mb-3 text-sm font-medium text-gray-700 transition md:mb-2 hover:text-purple-600 dark:text-white dark:hover:text-purple-600" href="#">UX Research &amp; Design</a>
           </div>
         </nav>
         <div class="flex flex-col items-center justify-between md:flex-row">
-          <a href="/" title="Go to Kutty Home Page" class="mb-4 md:mb-0">
-            <svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+          <a href="/" title="Go to Kutty Home Page" class="mb-4 md:mb-0 dark:p-2 dark:rounded-lg dark:ring-2 dark:ring-purple-300 dark:hover:ring-purple-400">
+            <svg class="w-auto h-6 fill-black dark:fill-white"  width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
               <path
                 d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
-                fill="#1A202C"
+                fill=""
               />
               <path
                 d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
@@ -84,14 +85,15 @@
                 fill="#7629C8"
               />
             </svg>
-            <span class="sr-only">Kutty Home Page</span>
+            <span class="sr-only"> Home Page</span>
           </a>
-          <p class="text-sm text-center text-gray-600 md:text-left">© 2020 Skcript</p>
+          <p class="text-sm text-center text-gray-600 dark:text-gray-200 md:text-left">© 2020 Skcript</p>
         </div>
       </footer>
-      
-      <!-- footer 21 end  -->
-  
+    </section>
+    
+    <!-- footer 21 end  -->
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/22_footer.html b/public/componets/footer/22_footer.html
index bc82420..24341bb 100644
--- a/public/componets/footer/22_footer.html
+++ b/public/componets/footer/22_footer.html
@@ -9,55 +9,55 @@
 </head>
 <body>
 
- <!-- footer 22 start  -->
+    <!-- footer 22 start  -->
     
- <section class="section_divider">
-    <div>Footer 22</div>
-  </section>
-  <footer class="dark:bg-gray-800 dark:text-gray-50">
-    <div class="container flex flex-col p-4 mx-auto md:p-8 lg:flex-row divide-gray-400">
-      <ul class="self-center py-6 space-y-4 text-center sm:flex sm:space-y-0 sm:justify-around sm:space-x-4 lg:flex-1 lg:justify-start">
-        <li>Shop</li>
-        <li>About</li>
-        <li>Blog</li>
-        <li>Pricing</li>
-        <li>Contact</li>
-      </ul>
-      <div class="flex flex-col justify-center pt-6 lg:pt-0">
-        <div class="flex justify-center space-x-4">
-          <a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-4 h-4">
-              <path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="Pinterest" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
-              <path d="M16.021 0c-8.828 0-15.984 7.156-15.984 15.984 0 6.771 4.214 12.552 10.161 14.88-0.141-1.266-0.266-3.203 0.052-4.583 0.292-1.25 1.875-7.943 1.875-7.943s-0.479-0.964-0.479-2.375c0-2.219 1.292-3.88 2.891-3.88 1.365 0 2.026 1.021 2.026 2.25 0 1.37-0.87 3.422-1.323 5.323-0.38 1.589 0.797 2.885 2.365 2.885 2.839 0 5.026-2.995 5.026-7.318 0-3.813-2.75-6.49-6.677-6.49-4.547 0-7.214 3.417-7.214 6.932 0 1.375 0.526 2.854 1.188 3.651 0.13 0.161 0.146 0.302 0.109 0.464-0.12 0.5-0.391 1.599-0.443 1.818-0.073 0.297-0.229 0.359-0.536 0.219-1.99-0.922-3.245-3.839-3.245-6.193 0-5.036 3.667-9.672 10.563-9.672 5.542 0 9.854 3.958 9.854 9.229 0 5.516-3.474 9.953-8.307 9.953-1.62 0-3.141-0.839-3.677-1.839l-1 3.797c-0.359 1.391-1.339 3.135-2 4.193 1.5 0.458 3.078 0.714 4.734 0.714 8.813 0 15.979-7.151 15.979-15.984 0-8.828-7.167-15.979-15.979-15.979z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
-              <path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
-              <path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="Gmail" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
-              <path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
-            </svg>
-          </a>
+    <section class="section_divider">
+      <div>Footer 22</div>
+    </section>
+    <footer class="dark:bg-gray-800 dark:text-gray-50">
+      <div class="container flex flex-col p-4 mx-auto md:p-8 lg:flex-row divide-gray-400">
+        <ul class="self-center py-6 space-y-4 text-center sm:flex sm:space-y-0 sm:justify-around sm:space-x-4 lg:flex-1 lg:justify-start">
+          <li>Shop</li>
+          <li>About</li>
+          <li>Blog</li>
+          <li>Pricing</li>
+          <li>Contact</li>
+        </ul>
+        <div class="flex flex-col justify-center pt-6 lg:pt-0">
+          <div class="flex justify-center space-x-4">
+            <a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-4 h-4">
+                <path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="Pinterest" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
+                <path d="M16.021 0c-8.828 0-15.984 7.156-15.984 15.984 0 6.771 4.214 12.552 10.161 14.88-0.141-1.266-0.266-3.203 0.052-4.583 0.292-1.25 1.875-7.943 1.875-7.943s-0.479-0.964-0.479-2.375c0-2.219 1.292-3.88 2.891-3.88 1.365 0 2.026 1.021 2.026 2.25 0 1.37-0.87 3.422-1.323 5.323-0.38 1.589 0.797 2.885 2.365 2.885 2.839 0 5.026-2.995 5.026-7.318 0-3.813-2.75-6.49-6.677-6.49-4.547 0-7.214 3.417-7.214 6.932 0 1.375 0.526 2.854 1.188 3.651 0.13 0.161 0.146 0.302 0.109 0.464-0.12 0.5-0.391 1.599-0.443 1.818-0.073 0.297-0.229 0.359-0.536 0.219-1.99-0.922-3.245-3.839-3.245-6.193 0-5.036 3.667-9.672 10.563-9.672 5.542 0 9.854 3.958 9.854 9.229 0 5.516-3.474 9.953-8.307 9.953-1.62 0-3.141-0.839-3.677-1.839l-1 3.797c-0.359 1.391-1.339 3.135-2 4.193 1.5 0.458 3.078 0.714 4.734 0.714 8.813 0 15.979-7.151 15.979-15.984 0-8.828-7.167-15.979-15.979-15.979z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
+                <path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
+                <path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="Gmail" class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-4 h-4">
+                <path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
-    </div>
-  </footer>
+    </footer>
+    
+    <!-- footer 22 end  -->
 
 
-  <!-- footer 22 end  -->
-
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/23_footer.html b/public/componets/footer/23_footer.html
index 955071d..3849773 100644
--- a/public/componets/footer/23_footer.html
+++ b/public/componets/footer/23_footer.html
@@ -8,99 +8,100 @@
     <title>footer 23</title>
 </head>
 <body>
-<!-- footer 23 start  -->
-    
-<section class="section_divider">
-    <div>Footer 22</div>
-  </section>
-    <footer class="py-6 dark:bg-gray-800 dark:text-gray-50">
-    <div class="container px-6 mx-auto space-y-6 divide-y divide-gray-400 md:space-y-12 divide-opacity-50">
-      <div class="grid grid-cols-12">
-        <div class="pb-6 col-span-full md:pb-0 md:col-span-6">
-          <a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 md:justify-start">
-            <div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-violet-400">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
-                <path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
+  
+
+    <!-- footer 23 start  -->
+
+    <section class="section_divider">
+      <div>Footer 22</div>
+    </section>
+      <footer class="py-6 dark:bg-gray-800 dark:text-gray-50">
+      <div class="container px-6 mx-auto space-y-6 divide-y divide-gray-400 md:space-y-12 divide-opacity-50">
+        <div class="grid grid-cols-12">
+          <div class="pb-6 col-span-full md:pb-0 md:col-span-6">
+            <a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 md:justify-start">
+              <div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-violet-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
+                  <path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
+                </svg>
+              </div>
+              <span class="self-center text-2xl text-violet-400 font-semibold">Brand name</span>
+            </a>
+          </div>
+          <div class="col-span-6 text-center md:text-left md:col-span-3">
+            <p class="pb-1 text-lg text-violet-400 font-medium">Category</p>
+            <ul>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li><!---->
+            </ul>
+          </div>
+          <div class="col-span-6 text-center md:text-left md:col-span-3">
+            <p class="pb-1 text-lg text-violet-400 font-medium">Category</p>
+            <ul>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
+              </li><!---->
+            </ul>
+          </div>
+        </div>
+        <div class="grid justify-center pt-6 lg:justify-between">
+          <div class="flex flex-col self-center text-sm text-center md:block lg:col-start-1 md:space-x-6">
+            <span>©2022 All rights reserved</span>
+            <a rel="noopener noreferrer" href="#">
+              <span>Privacy policy</span>
+            </a>
+            <a rel="noopener noreferrer" href="#">
+              <span>Terms of service</span>
+            </a>
+          </div>
+          <div class="flex justify-center pt-4 space-x-4 lg:pt-0 lg:col-end-13">
+            <a rel="noopener noreferrer" href="#" title="Email" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
               </svg>
-            </div>
-            <span class="self-center text-2xl text-violet-400 font-semibold">Brand name</span>
-          </a>
-        </div>
-        <div class="col-span-6 text-center md:text-left md:col-span-3">
-          <p class="pb-1 text-lg text-violet-400 font-medium">Category</p>
-          <ul>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li><!---->
-          </ul>
-        </div>
-        <div class="col-span-6 text-center md:text-left md:col-span-3">
-          <p class="pb-1 text-lg text-violet-400 font-medium">Category</p>
-          <ul>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li>
-            <li>
-              <a rel="noopener noreferrer" href="#" class="hover:dark:text-violet-400">Link</a>
-            </li><!---->
-          </ul>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-5 h-5">
+                <path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" title="GitHub" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
+                <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
-      <div class="grid justify-center pt-6 lg:justify-between">
-        <div class="flex flex-col self-center text-sm text-center md:block lg:col-start-1 md:space-x-6">
-          <span>©2022 All rights reserved</span>
-          <a rel="noopener noreferrer" href="#">
-            <span>Privacy policy</span>
-          </a>
-          <a rel="noopener noreferrer" href="#">
-            <span>Terms of service</span>
-          </a>
-        </div>
-        <div class="flex justify-center pt-4 space-x-4 lg:pt-0 lg:col-end-13">
-          <a rel="noopener noreferrer" href="#" title="Email" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
-              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="currentColor" class="w-5 h-5">
-              <path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
-            </svg>
-          </a>
-          <a rel="noopener noreferrer" href="#" title="GitHub" class="flex items-center justify-center w-10 h-10 rounded-full dark:bg-violet-400 dark:text-gray-900">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
-              <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </footer>
-
-  <!--footer 23 end-->
+    </footer>
 
+    <!--footer 23 end-->
 
 
 </body>
diff --git a/public/componets/footer/24_footer.html b/public/componets/footer/24_footer.html
index d52f76d..38e8662 100644
--- a/public/componets/footer/24_footer.html
+++ b/public/componets/footer/24_footer.html
@@ -10,6 +10,65 @@
 <body>
 
     
+    <!-- footer 24 start  -->
+    <section class="section_divider">
+        <div>footer 24</div>
+      </section>
+      
+      <footer class="p-6 dark:bg-gray-800 dark:text-gray-100">
+        <div class="container grid grid-cols-2 mx-auto gap-x-3 gap-y-8 sm:grid-cols-3 md:grid-cols-4">
+          <div class="flex flex-col space-y-4">
+            <h2 class="font-medium">Getting started</h2>
+            <div class="flex flex-col space-y-2 text-sm dark:text-gray-400">
+              <a rel="noopener noreferrer" href="#">Installation</a>
+              <a rel="noopener noreferrer" href="#">Release Notes</a>
+              <a rel="noopener noreferrer" href="#">Upgrade Guide</a>
+              <a rel="noopener noreferrer" href="#">Using with Preprocessors</a>
+              <a rel="noopener noreferrer" href="#">Optimizing for Production</a>
+              <a rel="noopener noreferrer" href="#">Browser Support</a>
+              <a rel="noopener noreferrer" href="#">IntelliSense</a>
+            </div>
+          </div>
+          <div class="flex flex-col space-y-4">
+            <h2 class="font-medium">Core Concepts</h2>
+            <div class="flex flex-col space-y-2 text-sm dark:text-gray-400">
+              <a rel="noopener noreferrer" href="#">Utility-First</a>
+              <a rel="noopener noreferrer" href="#">Responsive Design</a>
+              <a rel="noopener noreferrer" href="#">Hover, Focus, &amp; Other States</a>
+              <a rel="noopener noreferrer" href="#">Dark Mode</a>
+              <a rel="noopener noreferrer" href="#">Adding Base Styles</a>
+              <a rel="noopener noreferrer" href="#">Extracting Components</a>
+              <a rel="noopener noreferrer" href="#">Adding New Utilities</a>
+            </div>
+          </div>
+          <div class="flex flex-col space-y-4">
+            <h2 class="font-medium">Customization</h2>
+            <div class="flex flex-col space-y-2 text-sm dark:text-gray-400">
+              <a rel="noopener noreferrer" href="#">Configuration</a>
+              <a rel="noopener noreferrer" href="#">Theme Configuration</a>
+              <a rel="noopener noreferrer" href="#">Breakpoints</a>
+              <a rel="noopener noreferrer" href="#">Customizing Colors</a>
+              <a rel="noopener noreferrer" href="#">Customizing Spacing</a>
+              <a rel="noopener noreferrer" href="#">Configuring Variants</a>
+              <a rel="noopener noreferrer" href="#">Plugins</a>
+            </div>
+          </div>
+          <div class="flex flex-col space-y-4">
+            <h2 class="font-medium">Community</h2>
+            <div class="flex flex-col space-y-2 text-sm dark:text-gray-400">
+              <a rel="noopener noreferrer" href="#">GitHub</a>
+              <a rel="noopener noreferrer" href="#">Discord</a>
+              <a rel="noopener noreferrer" href="#">Twitter</a>
+              <a rel="noopener noreferrer" href="#">YouTube</a>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-center px-6 pt-12 text-sm">
+          <span class="dark:text-gray-400">© Copyright 1986. All Rights Reserved.</span>
+        </div>
+      </footer>
+      <!-- footer 24 end  -->
+  
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/25_footer.html b/public/componets/footer/25_footer.html
index 89abfab..c60b215 100644
--- a/public/componets/footer/25_footer.html
+++ b/public/componets/footer/25_footer.html
@@ -10,6 +10,92 @@
 <body>
 
     
+    <!--  footer 25 start -->
+    <section class="section_divider">
+        <div>Footer 25</div>
+      </section>
+      <footer class="px-4 divide-y dark:bg-gray-800 dark:text-gray-100">
+        <div class="container flex flex-col justify-between py-10 mx-auto space-y-8 lg:flex-row lg:space-y-0">
+          <div class="lg:w-1/3">
+            <a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 lg:justify-start">
+              <div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-indigo-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
+                  <path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
+                </svg>
+              </div>
+              <span class="self-center text-2xl font-semibold">Brand name</span>
+            </a>
+          </div>
+          <div class="grid grid-cols-2 text-sm gap-x-3 gap-y-8 lg:w-2/3 sm:grid-cols-4">
+            <div class="space-y-3">
+              <h3 class="tracking-wide uppercase dark:text-gray-50">Product</h3>
+              <ul class="space-y-1">
+                <li>
+                  <a rel="noopener noreferrer" href="#">Features</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">Integrations</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">Pricing</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">FAQ</a>
+                </li>
+              </ul>
+            </div>
+            <div class="space-y-3">
+              <h3 class="tracking-wide uppercase dark:text-gray-50">Company</h3>
+              <ul class="space-y-1">
+                <li>
+                  <a rel="noopener noreferrer" href="#">Privacy</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">Terms of Service</a>
+                </li>
+              </ul>
+            </div>
+            <div class="space-y-3">
+              <h3 class="uppercase dark:text-gray-50">Developers</h3>
+              <ul class="space-y-1">
+                <li>
+                  <a rel="noopener noreferrer" href="#">Public API</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">Documentation</a>
+                </li>
+                <li>
+                  <a rel="noopener noreferrer" href="#">Guides</a>
+                </li>
+              </ul>
+            </div>
+            <div class="space-y-3">
+              <div class="uppercase dark:text-gray-50">Social media</div>
+              <div class="flex justify-start space-x-3">
+                <a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center p-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
+                    <path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
+                  </svg>
+                </a>
+                <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center p-1">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
+                    <path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"></path>
+                  </svg>
+                </a>
+                <a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center p-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-5 h-5 fill-current">
+                    <path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="py-6 text-sm text-center dark:text-gray-400">© 1968 Company Co. All rights reserved.</div>
+      </footer>
+      
+      <!--  footer 25 end -->
+  
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/26_footer.html b/public/componets/footer/26_footer.html
new file mode 100644
index 0000000..c9d1579
--- /dev/null
+++ b/public/componets/footer/26_footer.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+  
+    <!-- footer 26 start -->
+    <section class="section_divider">
+        <div>Footer 26</div>
+      </section>
+        <footer class="bg-white dark:bg-gray-800">
+          <div class="container px-6 py-8 mx-auto">
+              <div class="text-center">
+              <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
+  
+              <p class="max-w-md mx-auto mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  
+              <div class="flex flex-col mt-4 sm:flex-row sm:items-center sm:justify-center">
+                  <button class="flex items-center justify-center order-1 w-full px-2 py-2 mt-3 text-sm tracking-wide text-gray-600 capitalize transition-colors duration-200 transform border rounded-md sm:mx-2 dark:border-gray-400 dark:text-gray-300 sm:mt-0 sm:w-auto hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-40">
+                  <svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM4 12.172C4.04732 16.5732 7.64111 20.1095 12.0425 20.086C16.444 20.0622 19.9995 16.4875 19.9995 12.086C19.9995 7.68451 16.444 4.10977 12.0425 4.086C7.64111 4.06246 4.04732 7.59876 4 12V12.172ZM10 16.5V7.5L16 12L10 16.5Z" fill="currentColor"></path>
+                  </svg>
+  
+                  <span class="mx-1">View Demo</span>
+                  </button>
+  
+                  <button class="w-full px-5 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md sm:mx-2 sm:order-2 sm:w-auto hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">Get started</button>
+              </div>
+              </div>
+  
+              <hr class="my-10 border-gray-200 dark:border-gray-700" />
+  
+              <div class="flex flex-col items-center sm:flex-row sm:justify-between">
+              <p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
+  
+              <div class="flex mt-3 -mx-2 sm:mt-0">
+                  <a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Teams </a>
+  
+                  <a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Privacy </a>
+  
+                  <a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Cookies </a>
+              </div>
+              </div>
+          </div>
+      </footer>
+  
+      <!-- footer 26 end -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/27_footer.html b/public/componets/footer/27_footer.html
new file mode 100644
index 0000000..d4162c1
--- /dev/null
+++ b/public/componets/footer/27_footer.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+    
+    <!-- footer 27 start -->
+    <section class="section_divider" id='27_footer'>
+        <div>Footer 27</div>
+      </section>
+ 
+     <footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
+       <div class="container py-6">
+           <h1 class="text-lg font-bold text-center lg:text-2xl">
+               Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
+           </h1>
+ 
+           <div class="flex justify-center mt-6">
+               <div class="bg-white border rounded-md focus-within:ring dark:bg-gray-800 dark:border-gray-600 focus-within:border-blue-400 focus-within:ring-blue-300 focus-within:ring-opacity-40 dark:focus-within:border-blue-300">
+                   <div class="flex flex-wrap justify-between md:flex-row">
+                       <input type="email" class="p-2 m-1 text-sm text-gray-700 bg-transparent appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
+                       <button class="w-full px-3 py-2 m-1 text-sm font-medium tracking-wider text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded-md dark:hover:bg-gray-600 dark:bg-gray-700 lg:w-auto hover:bg-gray-700">subscribe</button>
+                   </div>
+               </div>
+           </div>
+ 
+           <hr class="h-px mt-6 border-gray-300 border-none dark:bg-gray-700">
+ 
+           <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
+               <div>
+                   <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
+               </div>
+ 
+               <div class="flex mt-4 md:m-0">
+                   <div class="-mx-4">
+                       <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                       <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                       <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                       <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </footer>
+     <!-- footer 27 end -->
+ 
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/28_footer.html b/public/componets/footer/28_footer.html
new file mode 100644
index 0000000..8e0c5ff
--- /dev/null
+++ b/public/componets/footer/28_footer.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+    
+    <!-- footer 28 start  -->
+    
+    <section class="section_divider">
+        <div>Footer 28</div>
+      </section>
+      <section class="dark:bg-gray-800">
+        <footer class="text-gray-600 dark:text-white body-font">
+          <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+            <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
+              <a class="flex title-font font-medium items-center md:justify-start justify-center dark:text-white text-gray-900">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+                </svg>
+                <span class="ml-3 text-xl">Tailblocks</span>
+              </a>
+              <p class="mt-2 text-sm text-gray-500 ">Air plant banjo lyft occupy retro adaptogen indego</p>
+            </div>
+            <div class="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
+              <div class="lg:w-1/4 md:w-1/2 w-full px-4">
+                <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
+                <nav class="list-none mb-10">
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">First Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Second Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Third Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Fourth Link</a>
+                  </li>
+                </nav>
+              </div>
+              <div class="lg:w-1/4 md:w-1/2 w-full px-4">
+                <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
+                <nav class="list-none mb-10">
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">First Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Second Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Third Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Fourth Link</a>
+                  </li>
+                </nav>
+              </div>
+              <div class="lg:w-1/4 md:w-1/2 w-full px-4">
+                <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
+                <nav class="list-none mb-10">
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">First Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Second Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Third Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Fourth Link</a>
+                  </li>
+                </nav>
+              </div>
+              <div class="lg:w-1/4 md:w-1/2 w-full px-4">
+                <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
+                <nav class="list-none mb-10">
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">First Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Second Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Third Link</a>
+                  </li>
+                  <li>
+                    <a class="text-gray-600 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-300">Fourth Link</a>
+                  </li>
+                </nav>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-100 dark:bg-sky-300">
+            <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+              <p class="text-gray-500 text-sm text-center sm:text-left">© 2020 Tailblocks —
+                <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">@knyttneve</a>
+              </p>
+              <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
+                <a class="text-gray-500">
+                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                  </svg>
+                </a>
+                <a class="ml-3 text-gray-500">
+                  <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                  </svg>
+                </a>
+                <a class="ml-3 text-gray-500">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                  </svg>
+                </a>
+                <a class="ml-3 text-gray-500">
+                  <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
+                    <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                    <circle cx="4" cy="4" r="2" stroke="none"></circle>
+                  </svg>
+                </a>
+              </span>
+            </div>
+          </div>
+        </footer>
+      </section>
+      <!-- footer 28 end  -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/29_footer.html b/public/componets/footer/29_footer.html
new file mode 100644
index 0000000..5cfe7e7
--- /dev/null
+++ b/public/componets/footer/29_footer.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+
+
+    <!-- footer 29 start -->
+    <section class="section_divider">
+        <div>Footer 29</div>
+      </section>
+      <footer class="dark:text-gray-400 darK:bg-gray-900 text-gray-600 bg-white dark:bg-gray-800 body-font">
+        <div class="container px-5 py-24 mx-auto">
+          <div class="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+            <div class="lg:w-1/6 md:w-1/2 w-full px-4">
+              <h2 class="title-font font-medium dark:text-white text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
+              <nav class="list-none mb-10">
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">First Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Second Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Third Link</a>
+                </li>
+                <li>
+                  <a class="dark:text-gray-400 dark:hover:text-white text-gray-600 hover:text-gray-800">Fourth Link</a>
+                </li>
+              </nav>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-gray-800">
+          <div class="container px-5 py-8 flex flex-wrap mx-auto items-center">
+            <div class="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
+              <div class="relative sm:w-64 w-40 sm:mr-4 mr-2">
+                <label for="footer-field" class="leading-7 text-sm text-gray-400">Placeholder</label>
+                <input type="text" id="footer-field" name="footer-field" class="w-full  bg-gray-100 bg-opacity-50 focus:ring-indigo-200 dark:focus:border-indigo-500 dark:bg-gray-800 dark:bg-opacity-40 rounded border border-gray-700 focus:ring-2 dark:focus:ring-indigo-900 focus:bg-transparent focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+              </div>
+              <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
+              <p class="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">Bitters chicharrones fanny pack
+                <br class="lg:block hidden">waistcoat green juice
+              </p>
+            </div>
+            <span class="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
+              <a class="text-gray-400">
+                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-3 text-gray-400">
+                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-3 text-gray-400">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                  <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                </svg>
+              </a>
+              <a class="ml-3 text-gray-400">
+                <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                  <circle cx="4" cy="4" r="2" stroke="none"></circle>
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div class="bg-gray-800 bg-opacity-75">
+          <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+            <p class="text-gray-400 text-sm text-center sm:text-left">© 2020 Tailblocks —
+              <a href="https://twitter.com/knyttneve" class="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">@knyttneve</a>
+            </p>
+            <span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-400 text-sm">Enamel pin tousled raclette tacos irony</span>
+          </div>
+        </div>
+      </footer>
+      
+      <!-- footer 29 end -->
+  
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/2_footer.html b/public/componets/footer/2_footer.html
index e556164..b172b5c 100644
--- a/public/componets/footer/2_footer.html
+++ b/public/componets/footer/2_footer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,36 +8,36 @@
     <title>footer 2</title>
 </head>
 <body>
-    
+   
     <!--footer 2 start-->
     <section class="section_divider">
         <div> Footer 2</div>
 </section>
 
 
-<section class="flex items-end w-full  bg-white">
+<section class="flex items-end w-full  bg-white dark:bg-gray-800">
 
-    <footer class="w-full text-gray-700 bg-gray-100 body-font">
+    <footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
         <div
             class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
             <div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
                 <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
-                    <svg class="w-auto h-5 text-gray-900 fill-current" viewBox="0 0 202 69"
+                    <svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
                         xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
                             fill-rule="nonzero" /></svg>
                 </a>
-                <p class="mt-2 text-sm text-gray-500">Design, Code and Ship!</p>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
                 <div class="mt-4">
                     <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
-                        <a class="text-gray-500 cursor-pointer hover:text-gray-700">
+                        <a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                             <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                 class="w-5 h-5" viewBox="0 0 24 24">
                                 <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                             </svg>
                         </a>
-                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                             <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                 class="w-5 h-5" viewBox="0 0 24 24">
                                 <path
@@ -45,14 +45,14 @@
                                 </path>
                             </svg>
                         </a>
-                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                             <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                 stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                 <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                 <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                             </svg>
                         </a>
-                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                        <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                             <svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
                                 stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
                                 <path stroke="none"
@@ -66,67 +66,67 @@
             </div>
             <div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
                 <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">About</h2>
+                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
                     <nav class="mb-10 list-none">
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Company</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Careers</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Blog</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
                         </li>
                     </nav>
                 </div>
                 <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Support</h2>
+                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
                     <nav class="mb-10 list-none">
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Contact Support</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Help Resources</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Release Updates</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
                         </li>
                     </nav>
                 </div>
                 <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Platform
+                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
                     </h2>
                     <nav class="mb-10 list-none">
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Terms &amp; Privacy</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms &amp; Privacy</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Pricing</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">FAQ</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
                         </li>
                     </nav>
                 </div>
                 <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Contact</h2>
+                    <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
                     <nav class="mb-10 list-none">
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Send a Message</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">Request a Quote</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
                         </li>
                         <li class="mt-3">
-                            <a class="text-gray-500 cursor-pointer hover:text-gray-900">+123-456-7890</a>
+                            <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
                         </li>
                     </nav>
                 </div>
             </div>
         </div>
-        <div class="bg-gray-300">
+        <div class="bg-gray-300 dark:bg-gray-700">
             <div class="container px-5 py-4 mx-auto">
-                <p class="text-sm text-gray-700 capitalize xl:text-center">© 2020 All rights reserved </p>
+                <p class="text-sm text-gray-700 dark:text-white capitalize xl:text-center">© 2020 All rights reserved </p>
             </div>
         </div>
     </footer>
@@ -135,5 +135,6 @@
 </section>
 <!--footer 2 end-->
 
+
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/30_footer.html b/public/componets/footer/30_footer.html
new file mode 100644
index 0000000..737395f
--- /dev/null
+++ b/public/componets/footer/30_footer.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <title>footer 1</title>
+</head>
+<body>
+    
+    <!-- footer 30 start  -->
+    <section class="section_divider">
+        <div>Footer 30</div>
+      </section>
+  
+      <div class="bg-black dark:bg-gray-800  ">
+        <div class="mx-auto flex flex-col md:flex-row mb-6 md:mb-24 ">
+          <div class="flex flex-col w-full lg:w-1/3 p-8 mt-6 ">
+            <p class="ml-6 text-yellow-500 text-lg uppercase tracking-loose">REVIEW</p>
+            <p class="text-white text-3xl md:text-5xl my-4 leading-relaxed md:leading-snug">Leave us a feedback!</p>
+          </div>
+          <div class="flex flex-col w-full lg:w-2/3 justify-center">
+            <div class="w-full px-4">
+              <div class="flex flex-wrap justify-center ">
+                <div class="w-full lg:w-6/12 px-4 ">
+                  <div
+                    class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 dark:bg-gray-600">
+                    <div class="flex-auto p-5 lg:p-10">
+                      <h4 class="text-2xl mb-4 text-black-500 font-semibold">Have a suggestion?</h4>
+                      <form action="" method="POST">
+                        <div class="relative w-full mb-3">
+                          <label class="block uppercase text-gray-700 dark:text-gray-300 text-xs font-bold mb-2"
+                              for="email">Email</label><input class="border-0 px-3 py-3 rounded text-sm shadow w-full
+                          bg-gray-50 placeholder-black-555 text-gray-800 outline-none focus:bg-gray-100" type="email" name="email" id="email" placeholder=" "
+                              style="transition: all 0.15s ease 0s;" required />
+                          </div>
+                          <div class="relative w-full mb-3">
+                            <label class="block uppercase text-gray-700 dark:text-gray-300 text-xs font-bold mb-2"
+                              for="message">Message</label><textarea maxlength="300" name="feedback" id="feedback" rows="4"
+                              cols="80"
+                              class="border-0 px-3 py-3 bg-gray-50 placeholder-black-555 text-gray-800 rounded text-sm shadow focus:outline-none w-full"
+                              required></textarea>
+                          </div>
+                          <div class="text-center mt-6">
+                            <button id="feedbackBtn"
+                              class="bg-yellow-500 text-black-500 text-center mx-auto active:bg-yellow-400 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
+                              type="submit" style="transition: all 0.15s ease 0s;">Submit
+                            </button>
+                          </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+      
+        <footer class="relative bg-gray-50 text-black-500 pt-8 pb-6 dark:bg-gray-800 ">
+          <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
+            style="height: 80px;">
+            <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+              version="1.1" viewBox="0 0 2560 100" x="0" y="0">
+              <polygon class="text-gray-50 fill-current" points="2560 0 2560 100 0 100"></polygon>
+            </svg>
+          </div>
+      
+          <section class="pt-6 pb-4 md:pb-12 ">
+            <div class="mx-auto px-4">
+              <div class="flex flex-wrap justify-center text-center mb-12">
+                <div class="w-full lg:w-6/12 px-4">
+                  <h4 class="text-3xl md:text-5xl text-black-500 dark:text-gray-300  font-bold">Meet Our Sponsors</h4>
+                </div>
+              </div>
+              <div class="flex flex-wrap dark:bg-gray-800">
+                <div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
+                  <div class="px-6">
+                    <svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
+                      stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
+                      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <linearGradient id="a"
+                        gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
+                        gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
+                        <stop offset="0" stop-color="#058f92" />
+                        <stop offset=".5" stop-color="#038489" />
+                        <stop offset="1" stop-color="#026d71" />
+                      </linearGradient>
+                      <path
+                        d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
+                        fill="#37c6d0" fill-rule="nonzero" />
+                      <path
+                        d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
+                        fill="#1a9ba1" fill-rule="nonzero" />
+                      <path
+                        d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
+                        fill="#038387" fill-rule="nonzero" />
+                      <circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
+                      <g fill-rule="nonzero">
+                        <path
+                          d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
+                          fill="#036c70" />
+                        <path
+                          d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
+                          fill-opacity=".1" />
+                        <path
+                          d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".1" />
+                      </g>
+                      <path
+                        d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
+                        fill="url(#a)" />
+                      <path
+                        d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
+                        fill="#fff" fill-rule="nonzero" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
+                  <div class="px-6">
+                    <svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
+                      stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
+                      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <linearGradient id="a"
+                        gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
+                        gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
+                        <stop offset="0" stop-color="#058f92" />
+                        <stop offset=".5" stop-color="#038489" />
+                        <stop offset="1" stop-color="#026d71" />
+                      </linearGradient>
+                      <path
+                        d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
+                        fill="#37c6d0" fill-rule="nonzero" />
+                      <path
+                        d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
+                        fill="#1a9ba1" fill-rule="nonzero" />
+                      <path
+                        d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
+                        fill="#038387" fill-rule="nonzero" />
+                      <circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
+                      <g fill-rule="nonzero">
+                        <path
+                          d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
+                          fill="#036c70" />
+                        <path
+                          d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
+                          fill-opacity=".1" />
+                        <path
+                          d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".1" />
+                      </g>
+                      <path
+                        d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
+                        fill="url(#a)" />
+                      <path
+                        d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
+                        fill="#fff" fill-rule="nonzero" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
+                  <div class="px-6">
+                    <svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
+                      stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 560 400"
+                      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <linearGradient id="a"
+                        gradientTransform="matrix(89.6891 155.353 -155.353 89.6891 168.883 122.323)"
+                        gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0">
+                        <stop offset="0" stop-color="#058f92" />
+                        <stop offset=".5" stop-color="#038489" />
+                        <stop offset="1" stop-color="#026d71" />
+                      </linearGradient>
+                      <path
+                        d="m415 93.62v165.289l-93.273 9.818-112.909-9.818v-165.289c0-.007 0-.013 0-.02 0-6.264 5.155-11.418 11.419-11.418h.019 183.306.019c6.264 0 11.419 5.154 11.419 11.418z"
+                        fill="#37c6d0" fill-rule="nonzero" />
+                      <path
+                        d="m415 189.495v39.223l-3.485 4.958h-109.424l68.973-68.972c2.534-2.545 5.981-3.977 9.572-3.977 3.592 0 7.039 1.432 9.573 3.977z"
+                        fill="#1a9ba1" fill-rule="nonzero" />
+                      <path
+                        d="m415 228.718v30.191l-93.273 9.818-112.909-9.818v-.687l108.246-108.246c2.534-2.544 5.981-3.976 9.572-3.976 3.592 0 7.039 1.432 9.573 3.976l27.246 27.246z"
+                        fill="#038387" fill-rule="nonzero" />
+                      <circle cx="380.636" cy="116.545" fill="#86f2f2" r="14.727" />
+                      <g fill-rule="nonzero">
+                        <path
+                          d="m220.271 317.818h183.276c6.282-.003 11.45-5.171 11.453-11.453v-47.456h-206.182v47.456c.003 6.282 5.171 11.45 11.453 11.453z"
+                          fill="#036c70" />
+                        <path
+                          d="m287.364 142.711v129.305c.01.66-.056 1.319-.197 1.964-.919 5.461-5.704 9.494-11.242 9.475h-67.107v-152.182h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m292.273 142.711v119.487c-.082 8.937-7.411 16.265-16.348 16.347h-67.107v-152.181h67.107c8.956.032 16.316 7.391 16.348 16.347z"
+                          fill-opacity=".1" />
+                        <path
+                          d="m287.364 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.006 0-.013 0-.02 0h-67.107v-142.363h67.107.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".2" />
+                        <path
+                          d="m282.455 142.711v119.487.02c0 6.264-5.155 11.418-11.419 11.418-.007 0-.013 0-.02 0h-62.198v-142.363h62.198.02c6.264 0 11.419 5.154 11.419 11.418z"
+                          fill-opacity=".1" />
+                      </g>
+                      <path
+                        d="m282.455 133.606c0-1.288-1.046-2.333-2.333-2.333h-132.789c-1.288 0-2.333 1.045-2.333 2.333v132.788c0 1.288 1.045 2.333 2.333 2.333h132.789c1.287 0 2.333-1.045 2.333-2.333z"
+                        fill="url(#a)" />
+                      <path
+                        d="m195.166 198.601c-2.687-1.784-4.929-4.16-6.554-6.946-1.581-2.906-2.368-6.178-2.282-9.485-.14-4.472 1.373-8.843 4.246-12.273 3.018-3.442 6.924-5.989 11.291-7.363 4.972-1.639 10.18-2.447 15.414-2.391 6.885-.253 13.76.711 20.309 2.847v14.345c-2.846-1.729-5.947-2.999-9.189-3.761-3.515-.867-7.122-1.301-10.742-1.291-3.815-.137-7.607.666-11.04 2.337-2.645 1.139-4.37 3.752-4.379 6.632-.017 1.749.649 3.437 1.856 4.703 1.433 1.485 3.125 2.696 4.992 3.574 2.095 1.034 5.22 2.412 9.377 4.133.461.146.911.327 1.345.54 4.097 1.602 8.05 3.552 11.816 5.827 2.851 1.76 5.246 4.171 6.985 7.035 1.788 3.244 2.66 6.913 2.524 10.614.198 4.586-1.209 9.101-3.977 12.763-2.77 3.395-6.481 5.897-10.667 7.192-4.899 1.536-10.012 2.278-15.145 2.199-4.606.023-9.205-.355-13.745-1.129-3.835-.61-7.579-1.692-11.149-3.22v-15.15c3.421 2.436 7.243 4.254 11.291 5.371 4.02 1.254 8.2 1.924 12.41 1.988 3.899.249 7.792-.578 11.252-2.391 2.404-1.376 3.863-3.971 3.79-6.74.014-1.934-.751-3.794-2.121-5.159-1.711-1.676-3.691-3.055-5.856-4.08-2.488-1.256-6.168-2.904-11.041-4.943-3.852-1.557-7.541-3.493-11.011-5.778z"
+                        fill="#fff" fill-rule="nonzero" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+      
+          <div class="mx-auto px-4">
+            <div class="flex flex-wrap">
+              <div class="w-full lg:w-6/12 px-4">
+                <h5 class="text-lg mt-0 mb-2 text-gray-700 dark:text-gray-300">
+                  Follow us on social media to get the latest updates
+                </h5>
+                <div class="mt-6 flex">
+                  <a class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-red-500 hover:text-red-500 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                    type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                      viewBox="0 0 24 24">
+                      <path class="fill-current"
+                        d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
+                    </svg>
+                  </a>
+                  <a class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-blue-400  hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                    type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                      viewBox="0 0 24 24">
+                      <path class="fill-current"
+                        d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+                    </svg>
+                  </a><a
+                    class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-blue-400  hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                    type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                      viewBox="0 0 24 24">
+                      <path class="fill-current"
+                        d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
+                    </svg>
+                  </a><a
+                    class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-pink-400 hover:text-pink-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                    type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                      viewBox="0 0 24 24">
+                      <path class="fill-current"
+                        d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                    </svg>
+                  </a><a
+                    class="transition duration-700 ease-in-out text-black-500  dark:text-gray-300 dark:hover:text-gray-700 hover:text-gray-700 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                    type="button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                      <path class="fill-current"
+                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg></i>
+                  </a>
+                </div>
+              </div>
+              <div class="w-full lg:w-6/12 px-4 mt-4 md:mt-0">
+                <div class="flex flex-wrap items-top mb-6">
+                  <h5 class="text-lg mt-0 mb-2 text-gray-700 dark:text-gray-300">
+                    Enter your email to view the list of your registered events
+                  </h5>
+                  <div class="mt-4 flex">
+                    <form id="footerForm" action="" method="POST">
+                      <input type="email" name="email" id="email"
+                        class="p-2 border border-grey-light round text-black-500 placeholder-gray-50 text-sm h-auto"
+                        placeholder="email address" required />
+                      <button type="submit" id="emailBtn"
+                        class="bg-yellow-500 text-black-500 active:bg-yellow-400 rounded shadow hover:shadow-lg outline-none focus:outline-none h-auto text-xs p-3">Submit</button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr class="my-6 border-gray-400" />
+            <div class="flex flex-wrap items-center md:justify-between justify-center">
+              <div class="w-full md:w-4/12 px-4 mx-auto text-center">
+                <div class="text-sm text-gray-600 dark:text-gray-300 font-semibold py-1">
+                  Created By
+                  <a href="#"
+                    class="text-gray-600 hover:text-gray-900">examplename</a>.
+                </div>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+      
+      <!-- footer 30 end  -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/footer/3_footer.html b/public/componets/footer/3_footer.html
index 083dd38..411e4af 100644
--- a/public/componets/footer/3_footer.html
+++ b/public/componets/footer/3_footer.html
@@ -8,163 +8,163 @@
     <title>footer 3</title>
 </head>
 <body>
-      <!--footer 3 start -->
-      <section class="section_divider">
-        <div> Footer 3</div>
-    </section>
+   
+    <!--footer 3 start -->
+    <section class="section_divider">
+      <div> Footer 3</div>
+  </section>
 
 
-    <footer class="bg-gray-900">
-        <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-          <div class="lg:flex lg:gap-8">
-            <div>
-              <span class="block w-32 h-10 bg-gray-700 rounded-lg"></span>
-            </div>
-      
-            <div class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
-              <div class="col-span-2">
-                <div>
-                  <h2 class="text-2xl font-bold text-white">
-                    Get the latest news!
-                  </h2>
-      
-                  <p class="mt-6 text-gray-400">
-                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam molestias.
-                  </p>
-                </div>
-              </div>
-      
-              <div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
-                <form class="w-full text-white">
-                  <label for="email" class="sr-only"> Email </label>
-      
-                  <div class="p-2 border sm:flex sm:items-center border-white/10">
-                    <input class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none" type="email" id="email" placeholder="Enter your email">
-      
-                    <button class="w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0" type="submit">
-                      Sign Up
-                    </button>
-                  </div>
-                </form>
-              </div>
-      
-              <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
-                <p class="font-bold text-white"> Services </p>
-      
-                <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
-                  <a class="inline-block" href=""> 1on1 Coaching </a>
-                  <a class="inline-block" href=""> Company Review </a>
-                  <a class="inline-block" href=""> Accounts Review </a>
-                  <a class="inline-block" href=""> HR Consulting </a>
-                  <a class="inline-block" href=""> SEO Optimisation </a>
-                </nav>
-              </div>
-      
-              <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
-                <p class="font-bold text-white"> Company </p>
-      
-                <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
-                  <a class="inline-block" href=""> About </a>
-                  <a class="inline-block" href=""> Meet the Team </a>
-                  <a class="inline-block" href=""> History </a>
-                  <a class="inline-block" href=""> Careers </a>
-                </nav>
-              </div>
-      
-              <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
-                <p class="font-bold text-white"> Helpful Links </p>
-      
-                <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
-                  <a class="inline-block" href=""> Contact </a>
-                  <a class="inline-block" href=""> FAQs </a>
-                  <a class="inline-block" href=""> Live Chat </a>
-                </nav>
-              </div>
-      
-              <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
-                <p class="font-bold text-white"> Legal </p>
-      
-                <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
-                  <a class="inline-block" href=""> Accessibility </a>
-                  <a class="inline-block" href=""> Returns Policy </a>
-                  <a class="inline-block" href=""> Refund Policy </a>
-                  <a class="inline-block" href=""> Hiring Statistics </a>
-                </nav>
-              </div>
-      
-              <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
-                <p class="font-bold text-white"> Downloads </p>
-      
-                <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
-                  <a class="inline-block" href=""> Marketing Calendar </a>
-                  <a class="inline-block" href=""> SEO Infographics </a>
-                </nav>
-              </div>
-      
-              <div class="flex col-span-2 space-x-4 text-gray-500 lg:col-span-5">
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Facebook </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Instagram </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Twitter </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> GitHub </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Dribbble </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-              </div>
-            </div>
+  <footer class="bg-gray-900">
+      <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+        <div class="lg:flex lg:gap-8">
+          <div>
+            <span class="block w-32 h-10 bg-gray-700 rounded-lg"></span>
           </div>
-      
-          <div class="pt-8 mt-12 border-t border-white/10">
-            <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-              <p class="text-xs text-center text-gray-400 lg:text-left">
-                Copyright © 2022. Company Name. All rights reserved.
-              </p>
-      
-              <nav class="flex justify-center space-x-4 text-xs text-gray-400 lg:justify-end">
-                <a href=""> Terms &amp; Conditions </a>
-                <a href=""> Privacy Policy </a>
-                <a href=""> Cookies </a>
+    
+          <div class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
+            <div class="col-span-2">
+              <div>
+                <h2 class="text-2xl font-bold text-white">
+                  Get the latest news!
+                </h2>
+    
+                <p class="mt-6 text-gray-400">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam molestias.
+                </p>
+              </div>
+            </div>
+    
+            <div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
+              <form class="w-full text-white">
+                <label for="email" class="sr-only"> Email </label>
+    
+                <div class="p-2 border sm:flex sm:items-center border-white/10">
+                  <input class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none" type="email" id="email" placeholder="Enter your email">
+    
+                  <button class="w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0" type="submit">
+                    Sign Up
+                  </button>
+                </div>
+              </form>
+            </div>
+    
+            <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
+              <p class="font-bold text-white"> Services </p>
+    
+              <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+                <a class="inline-block" href=""> 1on1 Coaching </a>
+                <a class="inline-block" href=""> Company Review </a>
+                <a class="inline-block" href=""> Accounts Review </a>
+                <a class="inline-block" href=""> HR Consulting </a>
+                <a class="inline-block" href=""> SEO Optimisation </a>
               </nav>
             </div>
+    
+            <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
+              <p class="font-bold text-white"> Company </p>
+    
+              <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+                <a class="inline-block" href=""> About </a>
+                <a class="inline-block" href=""> Meet the Team </a>
+                <a class="inline-block" href=""> History </a>
+                <a class="inline-block" href=""> Careers </a>
+              </nav>
+            </div>
+    
+            <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
+              <p class="font-bold text-white"> Helpful Links </p>
+    
+              <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+                <a class="inline-block" href=""> Contact </a>
+                <a class="inline-block" href=""> FAQs </a>
+                <a class="inline-block" href=""> Live Chat </a>
+              </nav>
+            </div>
+    
+            <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
+              <p class="font-bold text-white"> Legal </p>
+    
+              <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+                <a class="inline-block" href=""> Accessibility </a>
+                <a class="inline-block" href=""> Returns Policy </a>
+                <a class="inline-block" href=""> Refund Policy </a>
+                <a class="inline-block" href=""> Hiring Statistics </a>
+              </nav>
+            </div>
+    
+            <div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
+              <p class="font-bold text-white"> Downloads </p>
+    
+              <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+                <a class="inline-block" href=""> Marketing Calendar </a>
+                <a class="inline-block" href=""> SEO Infographics </a>
+              </nav>
+            </div>
+    
+            <div class="flex col-span-2 space-x-4 text-gray-500 lg:col-span-5">
+              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Facebook </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Instagram </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Twitter </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> GitHub </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Dribbble </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            </div>
           </div>
         </div>
-      </footer>
-        
-
-    <!--footer 3 end -->
     
+        <div class="pt-8 mt-12 border-t border-white/10">
+          <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+            <p class="text-xs text-center text-gray-400 lg:text-left">
+              Copyright © 2022. Company Name. All rights reserved.
+            </p>
+    
+            <nav class="flex justify-center space-x-4 text-xs text-gray-400 lg:justify-end">
+              <a href=""> Terms &amp; Conditions </a>
+              <a href=""> Privacy Policy </a>
+              <a href=""> Cookies </a>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </footer>
+      
 
+  <!--footer 3 end -->
+  
 
 </body>
 </html
\ No newline at end of file
diff --git a/public/componets/footer/4_footer.html b/public/componets/footer/4_footer.html
index ed19413..4411d0b 100644
--- a/public/componets/footer/4_footer.html
+++ b/public/componets/footer/4_footer.html
@@ -11,117 +11,118 @@
     
     <!--footer 4 start -->
     <section class="section_divider">
-        <div>Footer 4</div>
-    </section>
-    <footer class="bg-gray-50">
-      <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
-        <div class="sm:items-center sm:justify-between sm:flex">
-          <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
-    
-          <div class="flex mt-8 space-x-6 text-gray-500 sm:mt-0">
-            <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-              <span class="sr-only"> Facebook </span>
-    
-              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
-              </svg>
-            </a>
-    
-            <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-              <span class="sr-only"> Instagram </span>
-    
-              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
-              </svg>
-            </a>
-    
-            <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-              <span class="sr-only"> Twitter </span>
-    
-              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-              </svg>
-            </a>
-    
-            <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-              <span class="sr-only"> GitHub </span>
-    
-              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
-              </svg>
-            </a>
-    
-            <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-              <span class="sr-only"> Dribbble </span>
-    
-              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
-              </svg>
-            </a>
-          </div>
+      <div>Footer 4</div>
+  </section>
+  <footer class="bg-gray-50 dark:bg-gray-800">
+    <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
+      <div class="sm:items-center sm:justify-between sm:flex">
+        <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+        
+         
+        <div class="flex mt-8 space-x-6 text-gray-500 sm:mt-0">
+          <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Facebook </span>
+  
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
+  
+          <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Instagram </span>
+  
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
+  
+          <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Twitter </span>
+  
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+            </svg>
+          </a>
+  
+          <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> GitHub </span>
+  
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
+  
+          <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+            <span class="sr-only"> Dribbble </span>
+  
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+            </svg>
+          </a>
         </div>
-    
-        <div class="grid grid-cols-1 gap-8 pt-12 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-4">
-          <div>
-            <p class="font-medium">
-              Company
-            </p>
-    
-            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-              <a class="hover:opacity-75" href=""> About </a>
-              <a class="hover:opacity-75" href=""> Meet the Team </a>
-              <a class="hover:opacity-75" href=""> History </a>
-              <a class="hover:opacity-75" href=""> Careers </a>
-            </nav>
-          </div>
-    
-          <div>
-            <p class="font-medium">
-              Services
-            </p>
-    
-            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-              <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-              <a class="hover:opacity-75" href=""> Company Review </a>
-              <a class="hover:opacity-75" href=""> Accounts Review </a>
-              <a class="hover:opacity-75" href=""> HR Consulting </a>
-              <a class="hover:opacity-75" href=""> SEO Optimisation </a>
-            </nav>
-          </div>
-    
-          <div>
-            <p class="font-medium">
-              Helpful Links
-            </p>
-    
-            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-              <a class="hover:opacity-75" href=""> Contact </a>
-              <a class="hover:opacity-75" href=""> FAQs </a>
-              <a class="hover:opacity-75" href=""> Live Chat </a>
-            </nav>
-          </div>
-    
-          <div>
-            <p class="font-medium">
-              Legal
-            </p>
-    
-            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-              <a class="hover:opacity-75" href=""> Privacy Policy </a>
-              <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-              <a class="hover:opacity-75" href=""> Returns Policy </a>
-              <a class="hover:opacity-75" href=""> Accessibility </a>
-            </nav>
-          </div>
-        </div>
-    
-        <p class="text-xs text-gray-500">
-          © 2022 Company Name
-        </p>
       </div>
-    </footer>
+  
+      <div class="grid grid-cols-1 gap-8 pt-12 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-4">
+        <div>
+          <p class="font-medium dark:text-gray-300">
+            Company
+          </p>
+  
+          <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+            <a class="hover:opacity-75 dark:hover:text-sky-300 " href=""> About </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+          </nav>
+        </div>
+  
+        <div>
+          <p class="font-medium dark:text-gray-300">
+            Services
+          </p>
+  
+          <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+          </nav>
+        </div>
+  
+        <div>
+          <p class="font-medium dark:text-gray-300">
+            Helpful Links
+          </p>
+  
+          <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+          </nav>
+        </div>
+  
+        <div>
+          <p class="font-medium dark:text-gray-300">
+            Legal
+          </p>
+  
+          <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+            <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+          </nav>
+        </div>
+      </div>
+  
+      <p class="text-xs text-gray-500">
+        © 2022 Company Name
+      </p>
+    </div>
+  </footer>
 
-  <!--footer 4 end -->
+<!--footer 4 end -->
 
 
 
diff --git a/public/componets/footer/5_footer.html b/public/componets/footer/5_footer.html
index dd3bc75..d0bb7b0 100644
--- a/public/componets/footer/5_footer.html
+++ b/public/componets/footer/5_footer.html
@@ -8,22 +8,23 @@
     <title>footer 5</title>
 </head>
 <body>
-    <!--footer 5 start-->
+  <!--footer 5 start-->
     <section class="section_divider">
         <div>Footer 5</div>
     </section>
-    <footer class="bg-gray-50">
+    <footer class="bg-gray-50 dark:bg-gray-800">
       <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
         <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div>
-            <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
+            <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+
     
             <p class="max-w-xs mt-4 text-sm text-gray-500">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, accusantium.
             </p>
     
             <div class="flex mt-8 space-x-6 text-gray-500">
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Facebook </span>
     
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -31,7 +32,7 @@
                 </svg>
               </a>
     
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Instagram </span>
     
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -39,7 +40,7 @@
                 </svg>
               </a>
     
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Twitter </span>
     
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -47,7 +48,7 @@
                 </svg>
               </a>
     
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> GitHub </span>
     
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -55,7 +56,7 @@
                 </svg>
               </a>
     
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Dribbble </span>
     
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -67,54 +68,54 @@
     
           <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Company
               </p>
     
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> About </a>
-                <a class="hover:opacity-75" href=""> Meet the Team </a>
-                <a class="hover:opacity-75" href=""> History </a>
-                <a class="hover:opacity-75" href=""> Careers </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
               </nav>
             </div>
     
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Services
               </p>
     
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                <a class="hover:opacity-75" href=""> Company Review </a>
-                <a class="hover:opacity-75" href=""> Accounts Review </a>
-                <a class="hover:opacity-75" href=""> HR Consulting </a>
-                <a class="hover:opacity-75" href=""> SEO Optimisation </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
               </nav>
             </div>
     
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Helpful Links
               </p>
     
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> Contact </a>
-                <a class="hover:opacity-75" href=""> FAQs </a>
-                <a class="hover:opacity-75" href=""> Live Chat </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
               </nav>
             </div>
     
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Legal
               </p>
     
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                <a class="hover:opacity-75" href=""> Returns Policy </a>
-                <a class="hover:opacity-75" href=""> Accessibility </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
               </nav>
             </div>
           </div>
diff --git a/public/componets/footer/6_footer.html b/public/componets/footer/6_footer.html
index 08bc684..392d92b 100644
--- a/public/componets/footer/6_footer.html
+++ b/public/componets/footer/6_footer.html
@@ -12,138 +12,136 @@
 
     <!--footer 6 start-->
     <section class="section_divider">
-        <div>Footer 6</div>
-    </section>
+      <div>Footer 6</div>
+  </section>
 
-    <footer class="bg-gray-50">
-        <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
-          <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
-      
-          <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
-            <div class="lg:order-last">
-              <p class="font-medium">
-                Newsletter
-              </p>
-      
-              <form class="max-w-sm mt-4">
-                <div class="relative">
-                  <label class="sr-only" for="email"> Email </label>
-      
-                  <input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
-      
-                  <button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
-                    <svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
-                    </svg>
-                  </button>
-                </div>
-              </form>
-      
-              <div class="flex mt-8 space-x-6 text-gray-500">
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Facebook </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+  <footer class="bg-gray-50 dark:bg-gray-800">
+      <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
+        <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+    
+        <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
+          <div class="lg:order-last">
+            <p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
+              Newsletter
+            </p>
+    
+            <form class="max-w-sm mt-4">
+              <div class="relative">
+                <label class="sr-only" for="email"> Email </label>
+    
+                <input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
+    
+                <button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
+                  <svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                   </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Instagram </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Twitter </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> GitHub </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Dribbble </span>
-      
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-              </div>
-            </div>
-      
-            <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
-              <div>
-                <p class="font-medium">
-                  Company
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> About </a>
-                  <a class="hover:opacity-75" href=""> Meet the Team </a>
-                  <a class="hover:opacity-75" href=""> History </a>
-                  <a class="hover:opacity-75" href=""> Careers </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Services
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Company Review </a>
-                  <a class="hover:opacity-75" href=""> Accounts Review </a>
-                  <a class="hover:opacity-75" href=""> HR Consulting </a>
-                  <a class="hover:opacity-75" href=""> SEO Optimisation </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Helpful Links
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Legal
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                  <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href=""> Returns Policy </a>
-                  <a class="hover:opacity-75" href=""> Accessibility </a>
-                </nav>
+                </button>
               </div>
+            </form>
+    
+            <div class="flex mt-8 space-x-6 text-gray-500">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Facebook </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Instagram </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Twitter </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> GitHub </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Dribbble </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+    
+          <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Company
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Services
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Helpful Links
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Legal
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+              </nav>
             </div>
           </div>
-      
-          <p class="mt-8 text-xs text-gray-500">
-            © 2022 Company Name
-          </p>
         </div>
-      </footer>
-    <!--footer 6 end-->
-
-
+    
+        <p class="mt-8 text-xs text-gray-500">
+          © 2022 Company Name
+        </p>
+      </div>
+    </footer>
+  <!--fo
 </body>
 </html
\ No newline at end of file
diff --git a/public/componets/footer/7_footer.html b/public/componets/footer/7_footer.html
index 628c2e3..7d26bcd 100644
--- a/public/componets/footer/7_footer.html
+++ b/public/componets/footer/7_footer.html
@@ -11,55 +11,56 @@
     
     <!--footer 7 start -->
     <section class="section_divider">
-        <div>Footer 7 </div>
-    </section>
-    <footer class="text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
-        <div class="max-w-screen-xl px-4 pt-32 pb-12 mx-auto sm:px-6 lg:px-8">
-          <div class="max-w-3xl mx-auto text-center">
-            <p class="text-4xl font-extrabold sm:text-6xl">
-              Customise Your Product
-            </p>
-      
-            <a class="inline-block px-12 py-3 mt-8 text-sm font-medium border rounded-full border-white/25 hover:bg-white hover:text-red-500" href="">
-              Get Started
+      <div>Footer 7 </div>
+  </section>
+  <footer class="text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 darK:bg-gradient-to-r dark:from-emerald-800 dark:to-cyan-800 ">
+      <div class="max-w-screen-xl px-4 pt-32 pb-12 mx-auto sm:px-6 lg:px-8">
+        <div class="max-w-3xl mx-auto text-center">
+          <p class="text-4xl font-extrabold sm:text-6xl">
+            Customise Your Product
+          </p>
+    
+          <a class="inline-block px-12 py-3 mt-8 text-sm font-medium border rounded-full border-white/25 hover:bg-white hover:text-red-500" href="">
+            Get Started
+          </a>
+        </div>
+    
+        <div class="pt-12 mt-32 border-t border-white/25 sm:items-center sm:justify-between sm:flex">
+          <nav class="flex justify-center space-x-4 text-sm font-medium sm:justify-start">
+            <a href="" class="hover:opacity-75"> FAQs </a>
+            <a href="" class="hover:opacity-75"> Contact </a>
+            <a href="" class="hover:opacity-75"> Returns Policy </a>
+          </nav>
+    
+          <div class="flex justify-center mt-6 space-x-6 sm:justify-end sm:mt-0">
+            <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Facebook </span>
+    
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+    
+            <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Instagram </span>
+    
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+    
+            <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Twitter </span>
+    
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+              </svg>
             </a>
           </div>
-      
-          <div class="pt-12 mt-32 border-t border-white/25 sm:items-center sm:justify-between sm:flex">
-            <nav class="flex justify-center space-x-4 text-sm font-medium sm:justify-start">
-              <a href="" class="hover:opacity-75"> FAQs </a>
-              <a href="" class="hover:opacity-75"> Contact </a>
-              <a href="" class="hover:opacity-75"> Returns Policy </a>
-            </nav>
-      
-            <div class="flex justify-center mt-6 space-x-6 sm:justify-end sm:mt-0">
-              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Facebook </span>
-      
-                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
-                </svg>
-              </a>
-      
-              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Instagram </span>
-      
-                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
-                </svg>
-              </a>
-      
-              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Twitter </span>
-      
-                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-                </svg>
-              </a>
-            </div>
-          </div>
         </div>
-      </footer>
-    <!--footer 7 end -->
+      </div>
+    </footer>
+  <!--footer 7 end -->
+
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/footer/8_footer.html b/public/componets/footer/8_footer.html
index 6abe5bf..edd8f64 100644
--- a/public/componets/footer/8_footer.html
+++ b/public/componets/footer/8_footer.html
@@ -9,127 +9,127 @@
 </head>
 <body>
 
+    
     <!--footer 8 start-->
     <section class="section_divider">
-        <div>Footer 8</div>
-    </section>
-    <footer class="text-white bg-gray-900 lg:grid lg:grid-cols-5">
-        <aside class="hidden lg:relative lg:col-span-2 lg:block">
-          <img class="absolute inset-0 object-cover w-full h-full" src="https://images.unsplash.com/photo-1624456735729-03594a40c5fb" alt="Comic Graphic">
-        </aside>
-      
-        <div class="px-4 py-16 sm:px-6 lg:px-8 lg:col-span-3">
-          <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+      <div>Footer 8</div>
+  </section>
+  <footer class="text-white bg-gray-900 lg:grid lg:grid-cols-5">
+      <aside class="hidden lg:relative lg:col-span-2 lg:block">
+        <img class="absolute inset-0 object-cover w-full h-full" src="https://images.unsplash.com/photo-1624456735729-03594a40c5fb" alt="Comic Graphic">
+      </aside>
+    
+      <div class="px-4 py-16 sm:px-6 lg:px-8 lg:col-span-3">
+        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+          <div>
+            <p class="font-medium">
+              <span class="text-xs tracking-widest uppercase">
+                Call
+              </span>
+    
+              <a class="block text-2xl sm:text-3xl hover:opacity-75" href="">
+                0123456789
+              </a>
+            </p>
+    
+            <ul class="mt-8 space-y-2 text-sm">
+              <li>Monday to Friday: 10am - 5pm</li>
+              <li>Weekend: 10am - 3pm</li>
+            </ul>
+    
+            <div class="flex mt-16 space-x-3">
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Facebook </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Instagram </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Twitter </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> GitHub </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Dribbble </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+    
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
               <p class="font-medium">
-                <span class="text-xs tracking-widest uppercase">
-                  Call
-                </span>
-      
-                <a class="block text-2xl sm:text-3xl hover:opacity-75" href="">
-                  0123456789
-                </a>
+                Support
               </p>
-      
-              <ul class="mt-8 space-y-2 text-sm">
-                <li>Monday to Friday: 10am - 5pm</li>
-                <li>Weekend: 10am - 3pm</li>
-              </ul>
-      
-              <div class="flex mt-16 space-x-3">
-                <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Facebook </span>
-      
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                <span class="sr-only"> Instagram </span>
-      
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Twitter </span>
-      
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
-                  </svg>
-                </a>
-      
-                <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> GitHub </span>
-      
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-      
-                <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
-                  <span class="sr-only"> Dribbble </span>
-      
-                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
-                  </svg>
-                </a>
-              </div>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
+                <a class="hover:opacity-75" href=""> Contact </a>
+                <a class="hover:opacity-75" href=""> FAQs </a>
+                <a class="hover:opacity-75" href=""> Live Chat </a>
+                <a class="hover:opacity-75" href=""> Forums </a>
+              </nav>
             </div>
-      
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div>
-                <p class="font-medium">
-                  Support
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
-                  <a class="hover:opacity-75" href=""> Forums </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">Products</p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
-                  <a class="hover:opacity-75" href=""> 1to1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Lesson Plans </a>
-                  <a class="hover:opacity-75" href=""> Meal Plans </a>
-                  <a class="hover:opacity-75" href=""> Gym Sessions </a>
-                </nav>
-              </div>
+    
+            <div>
+              <p class="font-medium">Products</p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
+                <a class="hover:opacity-75" href=""> 1to1 Coaching </a>
+                <a class="hover:opacity-75" href=""> Lesson Plans </a>
+                <a class="hover:opacity-75" href=""> Meal Plans </a>
+                <a class="hover:opacity-75" href=""> Gym Sessions </a>
+              </nav>
             </div>
           </div>
-      
-          <div class="pt-12 mt-12 border-t border-gray-800">
-            <div class="text-sm text-gray-300 sm:items-center sm:justify-between sm:flex">
-              <div class="flex space-x-3">
-                <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                <a class="hover:opacity-75" href=""> Returns Policy </a>
-              </div>
-      
-              <p class="mt-4 sm:mt-0">
-                © 2022 Company Name.
-              </p>
-            </div>
-      
-            <p class="mt-8 text-xs text-gray-500">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus mollitia quia quod repellendus. Porro harum,
-              odio dolore perspiciatis praesentium provident esse consequatur quibusdam aperiam, cupiditate omnis modi in
-              quasi? In, maxime odio vel repellat sed earum? Debitis quaerat facilis animi. Odio natus nostrum laboriosam
-              impedit magnam praesentium asperiores consectetur ipsum.
-            </p>
-          </div>
         </div>
-      </footer>
-    <!--footer 8 end-->
-
+    
+        <div class="pt-12 mt-12 border-t border-gray-800">
+          <div class="text-sm text-gray-300 sm:items-center sm:justify-between sm:flex">
+            <div class="flex space-x-3">
+              <a class="hover:opacity-75" href=""> Privacy Policy </a>
+              <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
+              <a class="hover:opacity-75" href=""> Returns Policy </a>
+            </div>
+    
+            <p class="mt-4 sm:mt-0">
+              © 2022 Company Name.
+            </p>
+          </div>
+    
+          <p class="mt-8 text-xs text-gray-500">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus mollitia quia quod repellendus. Porro harum,
+            odio dolore perspiciatis praesentium provident esse consequatur quibusdam aperiam, cupiditate omnis modi in
+            quasi? In, maxime odio vel repellat sed earum? Debitis quaerat facilis animi. Odio natus nostrum laboriosam
+            impedit magnam praesentium asperiores consectetur ipsum.
+          </p>
+        </div>
+      </div>
+    </footer>
+  <!--footer 8 end-->
 
 
 </body>
diff --git a/public/componets/footer/9_footer.html b/public/componets/footer/9_footer.html
index 0fd962c..5a46e08 100644
--- a/public/componets/footer/9_footer.html
+++ b/public/componets/footer/9_footer.html
@@ -9,87 +9,89 @@
 </head>
 <body>
 
+  
     <!-- footer 9 start -->
     <section class="section_divider">
-        <div>Footer 9</div>
-    </section>
-    <footer class="bg-gray-50">
-        <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-          <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
-      
-          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
-              <div>
-                <p class="font-medium">
-                  Company
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> About </a>
-                  <a class="hover:opacity-75" href=""> Meet the Team </a>
-                  <a class="hover:opacity-75" href=""> History </a>
-                  <a class="hover:opacity-75" href=""> Careers </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Services
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Company Review </a>
-                  <a class="hover:opacity-75" href=""> Accounts Review </a>
-                  <a class="hover:opacity-75" href=""> HR Consulting </a>
-                  <a class="hover:opacity-75" href=""> SEO Optimisation </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Helpful Links
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
-                </nav>
-              </div>
-      
-              <div>
-                <p class="font-medium">
-                  Legal
-                </p>
-      
-                <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                  <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href=""> Returns Policy </a>
-                  <a class="hover:opacity-75" href=""> Accessibility </a>
-                </nav>
-              </div>
-            </div>
-      
-          <div class="pt-8 mt-8 border-t border-gray-100 sm:items-center sm:justify-between sm:flex">
-            <p class="text-xs text-gray-500">
-              © 2022 Company Name
-            </p>
-      
-            <strong class="inline-flex items-center p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
-              <span> Status: </span>
-      
-              <span class="w-3 h-3 bg-green-600 rounded-full"></span>
-      
-              <span class="font-medium text-green-600">
-                All systems operational
-              </span>
-            </strong>
-          </div>
-        </div>
-      </footer>    
-    <!-- footer 9 end -->
+      <div>Footer 9</div>
+  </section>
+  <footer class="bg-gray-50 dark:bg-gray-800">
+      <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+        <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+
+
+        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Company
+              </p>
     
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Services 
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Helpful Links
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Legal
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+              </nav>
+            </div>
+          </div>
+    
+        <div class="pt-8 mt-8 border-t border-gray-100 sm:items-center sm:justify-between sm:flex">
+          <p class="text-xs text-gray-500">
+            © 2022 Company Name
+          </p>
+    
+          <strong class="inline-flex items-center dark:text-white p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
+            <span> Status: </span>
+    
+            <span class="w-3 h-3 bg-green-600 rounded-full"></span>
+    
+            <span class="font-medium text-green-600">
+              All systems operational
+            </span>
+          </strong>
+        </div>
+      </div>
+    </footer>    
+  <!-- footer 9 end -->
+  
     
 
 </body>
diff --git a/public/componets/footer/footer.html b/public/componets/footer/footer.html
index 28b2ba8..6a7b2bd 100644
--- a/public/componets/footer/footer.html
+++ b/public/componets/footer/footer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="">
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -19,24 +19,28 @@
         </section>
         <hr>
 
-        <footer class="p-4">
+        <footer class="p-4 dark:bg-gray-800">
             <div class="flex flex-col lg:flex-row items-center">
-            <div class="w-full lg:w-auto lg:mr-auto text-center lg:text-left">© 2019 Dunder Mifflin</div>
+            <div class="w-full dark:text-gray-300  lg:w-auto lg:mr-auto text-center lg:text-left">© 2019 Dunder Mifflin</div>
             <div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
             </div>
         </footer>
         <hr>
-        <footer class="flex flex-wrap items-center justify-between p-4">
-            <div class="w-full lg:w-auto lg:mr-6 mb-4 lg:mb-0 text-center">© 2019 Dunder Mifflin</div>
+        <footer class="flex flex-wrap items-center justify-between p-4 dark:bg-gray-800">
+            <div class="w-full dark:text-gray-300 lg:w-auto lg:mr-6 mb-4 lg:mb-0 text-center">© 2019 Dunder Mifflin</div>
             <div class="flex flex-col lg:flex-row items-center w-full lg:w-auto">
-            <div class="mx-auto lg:mx-0 lg:ml-auto"><a class="inline-block mt-0 text-blue-900 hover:text-blue-700" href="#">Products</a><a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700" href="#">Team</a><a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700" href="#">Customers</a></div>
+              <div class="mx-auto lg:mx-0 lg:ml-auto  ">
+                <a class="inline-block mt-0 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Products</a>
+                <a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Team</a>
+                <a class="inline-block mt-0 ml-8 text-blue-900 hover:text-blue-700 dark:text-sky-400 dark:hover:text-sky-800 " href="#">Customers</a>
+              </div>
             <div class="flex justify-center mt-4 lg:mt-0 lg:ml-8"><img class="w-6 h-6 mr-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""></div>
             </div>
         </footer>
         <hr>
-        <footer class="p-4">
+        <footer class="p-4 dark:bg-gray-800">
             <div class="flex flex-col lg:flex-row items-center">
-            <div class="w-full lg:w-auto lg:mr-auto text-center lg:text-left">© <a href="https://appseed.us">AppSeed </a><span>(MIT License) - </span><a href="#">Tailwind CSS Components</a></div>
+            <div class="w-full dark:text-gray-300 lg:w-auto lg:mr-auto text-center lg:text-left">© <a href="https://appseed.us">AppSeed </a><span>(MIT License) - </span><a href="#">Tailwind CSS Components</a></div>
             <div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
             </div>
         </footer>
@@ -50,29 +54,29 @@
         </section>
       
 
-        <section class="flex items-end w-full  bg-white">
+        <section class="flex items-end w-full  bg-white dark:bg-gray-800">
 
-            <footer class="w-full text-gray-700 bg-gray-100 body-font">
+            <footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
                 <div
                     class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
                     <div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
                         <a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
-                            <svg class="w-auto h-5 text-gray-900 fill-current" viewBox="0 0 202 69"
+                            <svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
                                 xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
                                     fill-rule="nonzero" /></svg>
                         </a>
-                        <p class="mt-2 text-sm text-gray-500">Design, Code and Ship!</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
                         <div class="mt-4">
                             <span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
-                                <a class="text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         class="w-5 h-5" viewBox="0 0 24 24">
                                         <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         class="w-5 h-5" viewBox="0 0 24 24">
                                         <path
@@ -80,14 +84,14 @@
                                         </path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                         stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                         <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                         <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                     </svg>
                                 </a>
-                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
+                                <a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
                                     <svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
                                         stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
                                         <path stroke="none"
@@ -101,67 +105,67 @@
                     </div>
                     <div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
                         <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">About</h2>
+                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
                             <nav class="mb-10 list-none">
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Company</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Careers</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Blog</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
                                 </li>
                             </nav>
                         </div>
                         <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Support</h2>
+                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
                             <nav class="mb-10 list-none">
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Contact Support</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Help Resources</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Release Updates</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
                                 </li>
                             </nav>
                         </div>
                         <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Platform
+                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
                             </h2>
                             <nav class="mb-10 list-none">
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Terms &amp; Privacy</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms &amp; Privacy</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Pricing</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">FAQ</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
                                 </li>
                             </nav>
                         </div>
                         <div class="w-full px-4 lg:w-1/4 md:w-1/2">
-                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Contact</h2>
+                            <h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
                             <nav class="mb-10 list-none">
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Send a Message</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">Request a Quote</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
                                 </li>
                                 <li class="mt-3">
-                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900">+123-456-7890</a>
+                                    <a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
                                 </li>
                             </nav>
                         </div>
                     </div>
                 </div>
-                <div class="bg-gray-300">
+                <div class="bg-gray-300 dark:bg-gray-700">
                     <div class="container px-5 py-4 mx-auto">
-                        <p class="text-sm text-gray-700 capitalize xl:text-center">© 2020 All rights reserved </p>
+                        <p class="text-sm text-gray-700 dark:text-white capitalize xl:text-center">© 2020 All rights reserved </p>
                     </div>
                 </div>
             </footer>
@@ -330,13 +334,14 @@
       <section class="section_divider">
           <div>Footer 4</div>
       </section>
-      <footer class="bg-gray-50">
+      <footer class="bg-gray-50 dark:bg-gray-800">
         <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
           <div class="sm:items-center sm:justify-between sm:flex">
-            <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
-      
+            <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+            
+             
             <div class="flex mt-8 space-x-6 text-gray-500 sm:mt-0">
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Facebook </span>
       
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -344,7 +349,7 @@
                 </svg>
               </a>
       
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Instagram </span>
       
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -352,7 +357,7 @@
                 </svg>
               </a>
       
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Twitter </span>
       
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -360,7 +365,7 @@
                 </svg>
               </a>
       
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> GitHub </span>
       
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -368,7 +373,7 @@
                 </svg>
               </a>
       
-              <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <a class="hover:opacity-75  dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                 <span class="sr-only"> Dribbble </span>
       
                 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -380,54 +385,54 @@
       
           <div class="grid grid-cols-1 gap-8 pt-12 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-4">
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Company
               </p>
       
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> About </a>
-                <a class="hover:opacity-75" href=""> Meet the Team </a>
-                <a class="hover:opacity-75" href=""> History </a>
-                <a class="hover:opacity-75" href=""> Careers </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300 " href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
               </nav>
             </div>
       
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Services
               </p>
       
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                <a class="hover:opacity-75" href=""> Company Review </a>
-                <a class="hover:opacity-75" href=""> Accounts Review </a>
-                <a class="hover:opacity-75" href=""> HR Consulting </a>
-                <a class="hover:opacity-75" href=""> SEO Optimisation </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
               </nav>
             </div>
       
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Helpful Links
               </p>
       
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> Contact </a>
-                <a class="hover:opacity-75" href=""> FAQs </a>
-                <a class="hover:opacity-75" href=""> Live Chat </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
               </nav>
             </div>
       
             <div>
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300">
                 Legal
               </p>
       
               <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                <a class="hover:opacity-75" href=""> Returns Policy </a>
-                <a class="hover:opacity-75" href=""> Accessibility </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
               </nav>
             </div>
           </div>
@@ -444,18 +449,19 @@
       <section class="section_divider">
           <div>Footer 5</div>
       </section>
-      <footer class="bg-gray-50">
+      <footer class="bg-gray-50 dark:bg-gray-800">
         <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
           <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
             <div>
-              <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
+              <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+
       
               <p class="max-w-xs mt-4 text-sm text-gray-500">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, accusantium.
               </p>
       
               <div class="flex mt-8 space-x-6 text-gray-500">
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Facebook </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -463,7 +469,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Instagram </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -471,7 +477,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Twitter </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -479,7 +485,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> GitHub </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -487,7 +493,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Dribbble </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -499,54 +505,54 @@
       
             <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Company
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> About </a>
-                  <a class="hover:opacity-75" href=""> Meet the Team </a>
-                  <a class="hover:opacity-75" href=""> History </a>
-                  <a class="hover:opacity-75" href=""> Careers </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Services
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Company Review </a>
-                  <a class="hover:opacity-75" href=""> Accounts Review </a>
-                  <a class="hover:opacity-75" href=""> HR Consulting </a>
-                  <a class="hover:opacity-75" href=""> SEO Optimisation </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Helpful Links
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Legal
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                  <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href=""> Returns Policy </a>
-                  <a class="hover:opacity-75" href=""> Accessibility </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
                 </nav>
               </div>
             </div>
@@ -565,13 +571,13 @@
         <div>Footer 6</div>
     </section>
 
-    <footer class="bg-gray-50">
+    <footer class="bg-gray-50 dark:bg-gray-800">
         <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
-          <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
+          <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
       
           <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
             <div class="lg:order-last">
-              <p class="font-medium">
+              <p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
                 Newsletter
               </p>
       
@@ -590,7 +596,7 @@
               </form>
       
               <div class="flex mt-8 space-x-6 text-gray-500">
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Facebook </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -598,7 +604,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Instagram </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -606,7 +612,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Twitter </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -614,7 +620,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> GitHub </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -622,7 +628,7 @@
                   </svg>
                 </a>
       
-                <a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
                   <span class="sr-only"> Dribbble </span>
       
                   <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -634,54 +640,54 @@
       
             <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300 ">
                   Company
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> About </a>
-                  <a class="hover:opacity-75" href=""> Meet the Team </a>
-                  <a class="hover:opacity-75" href=""> History </a>
-                  <a class="hover:opacity-75" href=""> Careers </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Services
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Company Review </a>
-                  <a class="hover:opacity-75" href=""> Accounts Review </a>
-                  <a class="hover:opacity-75" href=""> HR Consulting </a>
-                  <a class="hover:opacity-75" href=""> SEO Optimisation </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Helpful Links
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Legal
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                  <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href=""> Returns Policy </a>
-                  <a class="hover:opacity-75" href=""> Accessibility </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
                 </nav>
               </div>
             </div>
@@ -698,7 +704,7 @@
     <section class="section_divider">
         <div>Footer 7 </div>
     </section>
-    <footer class="text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
+    <footer class="text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 darK:bg-gradient-to-r dark:from-emerald-800 dark:to-cyan-800 ">
         <div class="max-w-screen-xl px-4 pt-32 pb-12 mx-auto sm:px-6 lg:px-8">
           <div class="max-w-3xl mx-auto text-center">
             <p class="text-4xl font-extrabold sm:text-6xl">
@@ -872,60 +878,61 @@
     <section class="section_divider">
         <div>Footer 9</div>
     </section>
-    <footer class="bg-gray-50">
+    <footer class="bg-gray-50 dark:bg-gray-800">
         <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-          <span class="block w-32 h-10 bg-gray-200 rounded-lg"></span>
-      
+          <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+
+
           <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300 ">
                   Company
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> About </a>
-                  <a class="hover:opacity-75" href=""> Meet the Team </a>
-                  <a class="hover:opacity-75" href=""> History </a>
-                  <a class="hover:opacity-75" href=""> Careers </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
-                  Services
+                <p class="font-medium dark:text-gray-300 ">
+                  Services 
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> 1on1 Coaching </a>
-                  <a class="hover:opacity-75" href=""> Company Review </a>
-                  <a class="hover:opacity-75" href=""> Accounts Review </a>
-                  <a class="hover:opacity-75" href=""> HR Consulting </a>
-                  <a class="hover:opacity-75" href=""> SEO Optimisation </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300 ">
                   Helpful Links
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Contact </a>
-                  <a class="hover:opacity-75" href=""> FAQs </a>
-                  <a class="hover:opacity-75" href=""> Live Chat </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
                 </nav>
               </div>
       
               <div>
-                <p class="font-medium">
+                <p class="font-medium dark:text-gray-300">
                   Legal
                 </p>
       
                 <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
-                  <a class="hover:opacity-75" href=""> Privacy Policy </a>
-                  <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
-                  <a class="hover:opacity-75" href=""> Returns Policy </a>
-                  <a class="hover:opacity-75" href=""> Accessibility </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                  <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
                 </nav>
               </div>
             </div>
@@ -935,7 +942,7 @@
               © 2022 Company Name
             </p>
       
-            <strong class="inline-flex items-center p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
+            <strong class="inline-flex items-center dark:text-white p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
               <span> Status: </span>
       
               <span class="w-3 h-3 bg-green-600 rounded-full"></span>
@@ -1249,92 +1256,94 @@
         <div>Footer 13</div>
     </section>
 
-    <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
-        <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
-          <div class="sm:col-span-2">
-            <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
-              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
-                <rect x="3" y="1" width="7" height="12"></rect>
-                <rect x="3" y="17" width="7" height="6"></rect>
-                <rect x="14" y="1" width="7" height="6"></rect>
-                <rect x="14" y="11" width="7" height="12"></rect>
-              </svg>
-              <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
-            </a>
-            <div class="mt-6 lg:max-w-sm">
-              <p class="text-sm text-gray-800">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
-              </p>
-              <p class="mt-4 text-sm text-gray-800">
-                Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+      <section class="dark:bg-gray-800">
+          <footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
+          <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
+            <div class="sm:col-span-2">
+              <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+                <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                  <rect x="3" y="1" width="7" height="12"></rect>
+                  <rect x="3" y="17" width="7" height="6"></rect>
+                  <rect x="14" y="1" width="7" height="6"></rect>
+                  <rect x="14" y="11" width="7" height="12"></rect>
+                </svg>
+                <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
+              </a>
+              <div class="mt-6 lg:max-w-sm">
+                <p class="text-sm text-gray-500 ">
+                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
+                </p>
+                <p class="mt-4 text-sm text-gray-500 ">
+                  Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                </p>
+              </div>
+            </div>
+            <div class="space-y-2 text-sm">
+              <p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
+              <div class="flex">
+                <p class="mr-1 text-gray-800  dark:text-gray-400">Phone:</p>
+                <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
+              </div>
+              <div class="flex">
+                <p class="mr-1 text-gray-800  dark:text-gray-400">Email:</p>
+                <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300  text-gray-300 hover:text-purple-400">info@lorem.mail</a>
+              </div>
+              <div class="flex">
+                <p class="mr-1 text-gray-800  dark:text-gray-400">Address:</p>
+                <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
+                  312 Lovely Street, NY
+                </a>
+              </div>
+            </div>
+            <div>
+                <span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
+              <div class="flex items-center mt-1 space-x-3">
+                <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                  <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                    <path
+                      d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                    ></path>
+                  </svg>
+                </a>
+                <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                  <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                    <circle cx="15" cy="15" r="4"></circle>
+                    <path
+                      d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                    ></path>
+                  </svg>
+                </a>
+                <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                  <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                    <path
+                      d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                    ></path>
+                  </svg>
+                </a>
+              </div>
+              <p class="mt-4 text-sm text-gray-500">
+                Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
               </p>
             </div>
           </div>
-          <div class="space-y-2 text-sm">
-            <p class="text-base font-bold tracking-wide text-gray-900">Contacts</p>
-            <div class="flex">
-              <p class="mr-1 text-gray-800">Phone:</p>
-              <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-purple-400 hover:text-deep-purple-800">850-123-5021</a>
-            </div>
-            <div class="flex">
-              <p class="mr-1 text-gray-800">Email:</p>
-              <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-purple-400 hover:text-deep-purple-800">info@lorem.mail</a>
-            </div>
-            <div class="flex">
-              <p class="mr-1 text-gray-800">Address:</p>
-              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-300 text-purple-400 hover:text-deep-purple-800">
-                312 Lovely Street, NY
-              </a>
-            </div>
-          </div>
-          <div>
-            <span class="text-base font-bold tracking-wide text-gray-900">Social</span>
-            <div class="flex items-center mt-1 space-x-3">
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
-                <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
-                  <circle cx="15" cy="15" r="4"></circle>
-                  <path
-                    d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
-                  ></path>
-                </svg>
-              </a>
-              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-800">
-                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
-                  <path
-                    d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
-                  ></path>
-                </svg>
-              </a>
-            </div>
-            <p class="mt-4 text-sm text-gray-500">
-              Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
+          <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
+            <p class="text-sm text-gray-600">
+              © Copyright 2020 Lorem Inc. All rights reserved.
             </p>
+            <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
+              <li>
+                <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
+              </li>
+              <li>
+                <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
+              </li>
+              <li>
+                <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms &amp; Conditions</a>
+              </li>
+            </ul>
           </div>
-        </div>
-        <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
-          <p class="text-sm text-gray-600">
-            © Copyright 2020 Lorem Inc. All rights reserved.
-          </p>
-          <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
-            <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
-            </li>
-            <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
-            </li>
-            <li>
-              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms &amp; Conditions</a>
-            </li>
-          </ul>
-        </div>
-      </div>
+          </footer>
+      </section>
     <!-- footer 13 end -->
 
     <!--footer 14 start -->
@@ -2728,30 +2737,29 @@
       <div>Footer 30</div>
     </section>
 
-
-    <div class="bg-black dark:bg-gray-400">
-      <div class="mx-auto flex flex-col md:flex-row mb-6 md:mb-24">
-        <div class="flex flex-col w-full lg:w-1/3 p-8 mt-6">
+    <div class="bg-black dark:bg-gray-800  ">
+      <div class="mx-auto flex flex-col md:flex-row mb-6 md:mb-24 ">
+        <div class="flex flex-col w-full lg:w-1/3 p-8 mt-6 ">
           <p class="ml-6 text-yellow-500 text-lg uppercase tracking-loose">REVIEW</p>
           <p class="text-white text-3xl md:text-5xl my-4 leading-relaxed md:leading-snug">Leave us a feedback!</p>
         </div>
         <div class="flex flex-col w-full lg:w-2/3 justify-center">
           <div class="w-full px-4">
-            <div class="flex flex-wrap justify-center">
-              <div class="w-full lg:w-6/12 px-4">
+            <div class="flex flex-wrap justify-center ">
+              <div class="w-full lg:w-6/12 px-4 ">
                 <div
-                  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-white dark:bg-gray-400">
+                  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 dark:bg-gray-600">
                   <div class="flex-auto p-5 lg:p-10">
                     <h4 class="text-2xl mb-4 text-black-500 font-semibold">Have a suggestion?</h4>
                     <form action="" method="POST">
                       <div class="relative w-full mb-3">
-                        <label class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                        <label class="block uppercase text-gray-700 dark:text-gray-300 text-xs font-bold mb-2"
                             for="email">Email</label><input class="border-0 px-3 py-3 rounded text-sm shadow w-full
                         bg-gray-50 placeholder-black-555 text-gray-800 outline-none focus:bg-gray-100" type="email" name="email" id="email" placeholder=" "
                             style="transition: all 0.15s ease 0s;" required />
                         </div>
                         <div class="relative w-full mb-3">
-                          <label class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                          <label class="block uppercase text-gray-700 dark:text-gray-300 text-xs font-bold mb-2"
                             for="message">Message</label><textarea maxlength="300" name="feedback" id="feedback" rows="4"
                             cols="80"
                             class="border-0 px-3 py-3 bg-gray-50 placeholder-black-555 text-gray-800 rounded text-sm shadow focus:outline-none w-full"
@@ -2773,7 +2781,7 @@
       </div>
     
     
-      <footer class="relative bg-gray-50 text-black-500 pt-8 pb-6 dark:bg-gray-400">
+      <footer class="relative bg-gray-50 text-black-500 pt-8 pb-6 dark:bg-gray-800 ">
         <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20"
           style="height: 80px;">
           <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
@@ -2786,10 +2794,10 @@
           <div class="mx-auto px-4">
             <div class="flex flex-wrap justify-center text-center mb-12">
               <div class="w-full lg:w-6/12 px-4">
-                <h4 class="text-3xl md:text-5xl text-black-500 font-semibold">Meet Our Sponsors</h4>
+                <h4 class="text-3xl md:text-5xl text-black-500 dark:text-gray-300  font-bold">Meet Our Sponsors</h4>
               </div>
             </div>
-            <div class="flex flex-wrap dark:bg-gray-400">
+            <div class="flex flex-wrap dark:bg-gray-800">
               <div class="w-full md:w-6/12 lg:w-4/12 lg:mb-0 mb-12 px-4">
                 <div class="px-6">
                   <svg class="max-w-full mx-auto" clip-rule="evenodd" fill-rule="evenodd"
@@ -2941,39 +2949,39 @@
         <div class="mx-auto px-4">
           <div class="flex flex-wrap">
             <div class="w-full lg:w-6/12 px-4">
-              <h5 class="text-lg mt-0 mb-2 text-gray-700">
+              <h5 class="text-lg mt-0 mb-2 text-gray-700 dark:text-gray-300">
                 Follow us on social media to get the latest updates
               </h5>
               <div class="mt-6 flex">
-                <a class="transition duration-700 ease-in-out text-black-500 hover:text-red-500 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                <a class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-red-500 hover:text-red-500 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
                   type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24">
                     <path class="fill-current"
                       d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
                   </svg>
                 </a>
-                <a class="transition duration-700 ease-in-out text-black-500 hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                <a class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-blue-400  hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
                   type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24">
                     <path class="fill-current"
                       d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                   </svg>
                 </a><a
-                  class="transition duration-700 ease-in-out text-black-500 hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                  class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-blue-400  hover:text-blue-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
                   type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24">
                     <path class="fill-current"
                       d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                   </svg>
                 </a><a
-                  class="transition duration-700 ease-in-out text-black-500 hover:text-pink-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                  class="transition duration-700 ease-in-out text-black-500 dark:text-gray-300 dark:hover:text-pink-400 hover:text-pink-400 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
                   type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24">
                     <path class="fill-current"
                       d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                   </svg>
                 </a><a
-                  class="transition duration-700 ease-in-out text-black-500 hover:text-gray-700 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
+                  class="transition duration-700 ease-in-out text-black-500  dark:text-gray-300 dark:hover:text-gray-700 hover:text-gray-700 font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2 p-3"
                   type="button">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                     <path class="fill-current"
@@ -2984,7 +2992,7 @@
             </div>
             <div class="w-full lg:w-6/12 px-4 mt-4 md:mt-0">
               <div class="flex flex-wrap items-top mb-6">
-                <h5 class="text-lg mt-0 mb-2 text-gray-700">
+                <h5 class="text-lg mt-0 mb-2 text-gray-700 dark:text-gray-300">
                   Enter your email to view the list of your registered events
                 </h5>
                 <div class="mt-4 flex">
@@ -3002,7 +3010,7 @@
           <hr class="my-6 border-gray-400" />
           <div class="flex flex-wrap items-center md:justify-between justify-center">
             <div class="w-full md:w-4/12 px-4 mx-auto text-center">
-              <div class="text-sm text-gray-600 font-semibold py-1">
+              <div class="text-sm text-gray-600 dark:text-gray-300 font-semibold py-1">
                 Created By
                 <a href="#"
                   class="text-gray-600 hover:text-gray-900">examplename</a>.