diff --git a/components/footer/footerl1.html b/components/footer/footerl1.html
new file mode 100644
index 0000000..f302a6b
--- /dev/null
+++ b/components/footer/footerl1.html
@@ -0,0 +1,72 @@
+<section class="pt-24 bg-white overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <h2 class="font-heading mb-11 text-6xl max-w-2xl mx-auto text-center tracking-tighter">Drop us a line or two, we are open for creative minds and collaborations!</h2>
+      <div class="flex flex-wrap justify-center mb-32">
+        <div class="w-auto"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
+      </div>
+      <div class="pb-9 border-b border-gray-200">
+        <div class="flex flex-wrap items-center justify-between -m-4">
+          <div class="w-auto p-4">
+            <a href="#">
+              <img src="https://shuffle.dev/basko-assets/logos/basko-logo-dark.png" alt="">
+            </a>
+          </div>
+          <div class="w-auto p-4">
+            <ul class="flex flex-wrap -m-4 md:-m-9">
+              <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">About</a></li>
+              <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Features</a></li>
+              <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Works</a></li>
+              <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Support</a></li>
+            </ul>
+          </div>
+          <div class="w-auto p-4">
+            <div class="flex flex-wrap items-center -m-4">
+              <div class="w-auto p-4">
+                <a class="text-gray-800 hover:text-gray-600 transition duration-200" href="#">
+                  <svg width="16" height="14" viewbox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M15.9991 2.35359C15.3991 2.61897 14.7658 2.78483 14.0992 2.88435C14.7658 2.48628 15.2991 1.85601 15.5325 1.09305C14.8992 1.45794 14.1992 1.72332 13.4326 1.88918C12.8326 1.25891 11.966 0.86084 11.0327 0.86084C9.23282 0.86084 7.76623 2.32042 7.76623 4.11172C7.76623 4.3771 7.79957 4.60931 7.86623 4.84151C5.16638 4.70883 2.73318 3.41511 1.09994 1.42477C0.833287 1.92235 0.666629 2.45311 0.666629 3.05021C0.666629 4.17807 1.23326 5.17324 2.13321 5.77034C1.59991 5.73717 1.09994 5.60448 0.633298 5.37227V5.40544C0.633298 6.99771 1.76657 8.3246 3.26648 8.62316C2.99983 8.6895 2.69985 8.72267 2.39987 8.72267C2.19988 8.72267 1.96656 8.6895 1.76657 8.65633C2.19988 9.95005 3.39981 10.912 4.83306 10.912C3.69979 11.7745 2.29987 12.3053 0.766624 12.3053C0.499972 12.3053 0.23332 12.3053 0 12.2721C1.46658 13.2009 3.16649 13.7317 5.03305 13.7317C11.066 13.7317 14.3659 8.75584 14.3659 4.44345C14.3659 4.31076 14.3659 4.1449 14.3659 4.01221C14.9992 3.58097 15.5658 3.01704 15.9991 2.35359Z" fill="currentColor"></path>
+                  </svg>
+                </a>
+              </div>
+              <div class="w-auto p-4">
+                <a class="text-gray-800 hover:text-gray-600 transition duration-200" href="#">
+                  <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3.01185 17.6362V9.72246H0.335938V6.63832H3.01185V4.36386C3.01185 1.72436 4.6317 0.287109 6.99761 0.287109C8.13091 0.287109 9.10492 0.371083 9.38877 0.408616V3.16704L7.74788 3.16778C6.46117 3.16778 6.21203 3.77629 6.21203 4.66923V6.63832H9.28072L8.88116 9.72246H6.21202V17.6362H3.01185Z" fill="currentColor"></path>
+                  </svg>
+                </a>
+              </div>
+              <div class="w-auto p-4">
+                <a class="text-gray-800 hover:text-gray-600 transition duration-200" href="#">
+                  <svg width="21" height="20" viewbox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.426 1.7394C13.0158 1.7394 13.3225 1.74906 14.3455 1.79548C14.9606 1.80297 15.5699 1.91538 16.1469 2.12783C16.5652 2.28841 16.9452 2.5344 17.2623 2.84997C17.5794 3.16554 17.8266 3.54369 17.9879 3.96008C18.2014 4.53427 18.3143 5.14063 18.3218 5.75281C18.368 6.77098 18.3782 7.07621 18.3782 9.65359C18.3782 12.231 18.3685 12.5362 18.3218 13.5544C18.3143 14.1666 18.2014 14.7729 17.9879 15.3471C17.8266 15.7635 17.5794 16.1416 17.2623 16.4572C16.9452 16.7728 16.5652 17.0188 16.1469 17.1794C15.5699 17.3918 14.9606 17.5042 14.3455 17.5117C13.3229 17.5577 13.0162 17.5678 10.426 17.5678C7.8358 17.5678 7.52912 17.5581 6.50652 17.5117C5.8914 17.5042 5.28213 17.3918 4.70519 17.1794C4.2868 17.0188 3.90683 16.7728 3.58975 16.4572C3.27267 16.1416 3.02549 15.7635 2.86414 15.3471C2.65068 14.7729 2.53773 14.1666 2.5302 13.5544C2.48401 12.5362 2.47385 12.231 2.47385 9.65359C2.47385 7.07621 2.48355 6.77098 2.5302 5.75281C2.53773 5.14063 2.65068 4.53427 2.86414 3.96008C3.02549 3.54369 3.27267 3.16554 3.58975 2.84997C3.90683 2.5344 4.2868 2.28841 4.70519 2.12783C5.28213 1.91538 5.8914 1.80297 6.50652 1.79548C7.52958 1.74952 7.83627 1.7394 10.426 1.7394V1.7394ZM10.426 0C7.79331 0 7.46168 0.0110321 6.42707 0.0579188C5.62204 0.0738547 4.82555 0.225553 4.07149 0.50656C3.42463 0.749114 2.83873 1.12922 2.35469 1.62035C1.86075 2.10226 1.4785 2.68568 1.23463 3.32987C0.952274 4.08033 0.799848 4.87302 0.783836 5.6742C0.737648 6.70295 0.726562 7.033 0.726562 9.65313C0.726562 12.2733 0.737648 12.6033 0.784759 13.633C0.800772 14.4342 0.953198 15.2269 1.23555 15.9773C1.47915 16.6214 1.86109 17.2048 2.35469 17.6868C2.839 18.1781 3.42522 18.5582 4.07241 18.8006C4.82648 19.0816 5.62296 19.2333 6.428 19.2493C7.46261 19.2952 7.79285 19.3072 10.4269 19.3072C13.061 19.3072 13.3913 19.2962 14.4259 19.2493C15.2309 19.2333 16.0274 19.0816 16.7815 18.8006C17.4256 18.5521 18.0105 18.1726 18.4989 17.6863C18.9872 17.2 19.3682 16.6176 19.6174 15.9764C19.8998 15.2259 20.0522 14.4333 20.0682 13.6321C20.1144 12.6033 20.1255 12.2733 20.1255 9.65313C20.1255 7.033 20.1144 6.70295 20.0673 5.67329C20.0513 4.8721 19.8988 4.07941 19.6165 3.32895C19.3729 2.68485 18.991 2.10143 18.4974 1.61943C18.013 1.12819 17.4268 0.748076 16.7796 0.50564C16.0256 0.224633 15.2291 0.0729354 14.424 0.0569995C13.3904 0.0110322 13.0587 0 10.426 0Z" fill="currentColor"></path>
+                    <path d="M10.4223 4.69629C9.43718 4.69629 8.47418 4.98702 7.65507 5.53171C6.83596 6.07641 6.19755 6.8506 5.82056 7.7564C5.44356 8.66219 5.34493 9.6589 5.53712 10.6205C5.7293 11.5821 6.20369 12.4653 6.90028 13.1586C7.59687 13.8519 8.48439 14.324 9.45059 14.5153C10.4168 14.7065 11.4183 14.6084 12.3284 14.2332C13.2386 13.858 14.0165 13.2226 14.5638 12.4074C15.1111 11.5922 15.4032 10.6338 15.4032 9.6534C15.4032 8.3387 14.8784 7.07783 13.9443 6.14819C13.0102 5.21856 11.7433 4.69629 10.4223 4.69629ZM10.4223 12.8711C9.78286 12.8711 9.15776 12.6824 8.62607 12.3288C8.09438 11.9753 7.67998 11.4727 7.43527 10.8848C7.19056 10.2968 7.12653 9.64983 7.25128 9.02566C7.37603 8.40148 7.68396 7.82814 8.13613 7.37814C8.58829 6.92813 9.16438 6.62168 9.79155 6.49752C10.4187 6.37336 11.0688 6.43708 11.6596 6.68063C12.2504 6.92417 12.7553 7.33659 13.1106 7.86574C13.4658 8.39489 13.6555 9.017 13.6555 9.6534C13.6555 10.5068 13.3148 11.3252 12.7085 11.9287C12.1022 12.5321 11.2798 12.8711 10.4223 12.8711Z" fill="#27272A"></path>
+                    <path d="M15.6014 5.65855C16.2443 5.65855 16.7654 5.13993 16.7654 4.50017C16.7654 3.86042 16.2443 3.3418 15.6014 3.3418C14.9586 3.3418 14.4375 3.86042 14.4375 4.50017C14.4375 5.13993 14.9586 5.65855 15.6014 5.65855Z" fill="currentColor"></path>
+                  </svg>
+                </a>
+              </div>
+              <div class="w-auto p-4">
+                <a class="text-gray-800 hover:text-gray-600 transition duration-200" href="#">
+                  <svg width="20" height="19" viewbox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74292 0C4.60132 0 0.464844 4.11672 0.464844 9.23377C0.464844 13.312 3.13229 16.7747 6.80486 18.0058C7.26877 18.0828 7.4234 17.8135 7.4234 17.5442C7.4234 17.3133 7.4234 16.7362 7.4234 15.9667C4.83327 16.5438 4.29205 14.7356 4.29205 14.7356C3.8668 13.6583 3.24827 13.389 3.24827 13.389C2.39778 12.8119 3.32558 12.8119 3.32558 12.8119C4.25339 12.8888 4.75595 13.7737 4.75595 13.7737C5.56779 15.1972 6.92084 14.774 7.46206 14.5432C7.53938 13.9276 7.77133 13.5429 8.04194 13.312C5.99303 13.0812 3.82815 12.2732 3.82815 8.7336C3.82815 7.73328 4.17607 6.88685 4.79461 6.27127C4.7173 6.04042 4.36937 5.11704 4.87193 3.80893C4.87193 3.80893 5.6451 3.57808 7.4234 4.77078C8.15792 4.57841 8.96975 4.46299 9.74292 4.46299C10.5161 4.46299 11.3279 4.57841 12.0624 4.77078C13.8407 3.57808 14.6139 3.80893 14.6139 3.80893C15.1165 5.07857 14.8072 6.00195 14.6912 6.27127C15.2711 6.92532 15.6577 7.73328 15.6577 8.7336C15.6577 12.2732 13.4928 13.0427 11.4052 13.2735C11.7532 13.5429 12.0238 14.12 12.0238 14.9664C12.0238 16.1976 12.0238 17.1979 12.0238 17.5057C12.0238 17.7365 12.1784 18.0443 12.681 17.9674C16.3535 16.7747 19.021 13.312 19.021 9.23377C19.021 4.11672 14.8845 0 9.74292 0Z" fill="currentColor"></path>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pt-8 pb-10">
+        <div class="flex flex-wrap justify-between -m-4">
+          <div class="w-auto p-4">
+            <p class="tracking-tight">© Copyright 2023, All Rights Reserved</p>
+          </div>
+          <div class="w-auto p-4">
+            <div class="flex flex-wrap -m-4">
+              <div class="w-auto p-4"><a class="tracking-tight" href="#">Privacy Policy</a></div>
+              <div class="w-auto p-4"><a class="tracking-tight" href="#">Terms & Conditions</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/components/footer/footerl2.html b/components/footer/footerl2.html
new file mode 100644
index 0000000..3fd4f22
--- /dev/null
+++ b/components/footer/footerl2.html
@@ -0,0 +1,54 @@
+<section class="py-24 bg-black overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="mb-14 p-11 rounded-2xl" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
+        <div class="flex flex-wrap items-center -m-8">
+          <div class="w-full md:w-1/2 p-8">
+            <h2 class="font-heading text-6xl text-white tracking-tighter">Grow your business fast with Basko Productivity Tool.</h2>
+          </div>
+          <div class="w-full md:w-1/2 p-8">
+            <div class="flex flex-wrap md:justify-end">
+              <div class="auto"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-gray-700 hover:bg-gray-800 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-wrap justify-between -m-8">
+        <div class="w-auto p-8">
+          <h3 class="mb-7 text-white font-semibold tracking-tight">Company</h3>
+          <ul>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">About</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Features</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Works</a></li>
+            <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Career</a></li>
+          </ul>
+        </div>
+        <div class="w-auto p-8">
+          <h3 class="mb-7 text-white font-semibold tracking-tight">Help</h3>
+          <ul>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Customer Support</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Delivery Details</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Terms & Conditions</a></li>
+            <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Privacy Policy</a></li>
+          </ul>
+        </div>
+        <div class="w-auto p-8">
+          <h3 class="mb-7 text-white font-semibold tracking-tight">Resources</h3>
+          <ul>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
+            <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
+          </ul>
+        </div>
+        <div class="w-auto p-8">
+          <h3 class="mb-7 text-white font-semibold tracking-tight">Links</h3>
+          <ul>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
+            <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
+            <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file